{"version":3,"file":"credit-card.es.mjs","sources":["../../../src/components/credit-card/credit-card.tsx"],"sourcesContent":["// Dependencies\nimport * as React from 'react';\nimport type * as Square from '@square/web-sdk';\n\n// Internals\nimport { useForm } from '~/contexts/form';\nimport { useEventListener } from '~/hooks/use-event-listener';\nimport { LoadingCard, PayButton } from './credit-card.styles';\nimport type {\n  CreditCardBase,\n  CreditCardChildren,\n  CreditCardFunctionChildren,\n  CreditCardPayButtonProps,\n  CreditCardProps,\n} from './credit-card.types';\n\n/**\n * Renders a Credit Card Input to use in the Square Web Payment SDK, pre-styled\n * to meet Square branding guidelines.\n *\n * **_But with the option to override styles_**\n *\n * @example\n *\n * ```tsx\n * function App() {\n *   return (\n *     <SquareForm {...props}>\n *       <CreditCard />\n *     </SquareForm>\n *   );\n * }\n * ```\n */\nfunction CreditCard(props: CreditCardBase): JSX.Element;\nfunction CreditCard(props: CreditCardChildren): JSX.Element;\nfunction CreditCard(props: CreditCardFunctionChildren): JSX.Element;\nfunction CreditCard({\n  buttonProps,\n  callbacks,\n  children,\n  focus,\n  id = 'rswps-card-container',\n  includeInputLabels,\n  postalCode,\n  recalculateSize,\n  render,\n  style,\n  ...props\n}: CreditCardProps) {\n  const [card, setCard] = React.useState<Square.Card | undefined>(() => undefined);\n  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { cardTokenizeResponseReceived, payments } = useForm();\n\n  const options: Square.CardOptions = React.useMemo(() => {\n    const baseOptions = {\n      includeInputLabels,\n      postalCode,\n      style,\n    };\n\n    // if a value from options is undefined delete it from the options object\n    return Object.keys(baseOptions).reduce((acc: Record<string, unknown>, key) => {\n      if (baseOptions[key as keyof typeof baseOptions] !== undefined) {\n        acc[key as string] = baseOptions[key as keyof typeof baseOptions];\n      }\n\n      return acc;\n    }, {});\n  }, [includeInputLabels, postalCode, style]);\n\n  /**\n   * Handle the on click of the Credit Card button click\n   *\n   * @param e An event which takes place in the DOM.\n   * @returns The data be sended to `cardTokenizeResponseReceived()` function, or an error\n   */\n  const handlePayment = async (e: Event) => {\n    e.stopPropagation();\n\n    if (buttonProps?.isLoading) return;\n\n    if (!card) {\n      console.warn('Credit Card button was clicked, but no Credit Card instance was found.');\n\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    try {\n      const result = await card.tokenize();\n\n      if (result.status === 'OK') {\n        const tokenizedResult = await cardTokenizeResponseReceived(result);\n        return tokenizedResult;\n      }\n\n      let message = `Tokenization failed with status: ${result.status}`;\n      if (result && 'errors' in result) {\n        message += ` and errors: ${JSON.stringify(result?.errors)}`;\n\n        throw new Error(message);\n      }\n\n      console.warn(message);\n    } catch (error) {\n      console.error(error);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  React.useEffect(() => {\n    const abortController = new AbortController();\n    const { signal } = abortController;\n\n    const start = async (signal: AbortSignal) => {\n      const card = await payments?.card(options).then((res) => {\n        if (!signal.aborted) {\n          setCard(res);\n          return res;\n        }\n\n        return null;\n      });\n\n      await card?.attach(`#${id}`);\n      if (focus) {\n        await card?.focus(focus);\n      }\n\n      if (signal.aborted) {\n        await card?.destroy();\n      }\n    };\n\n    start(signal);\n\n    return () => {\n      abortController.abort();\n    };\n  }, [payments, id]);\n\n  React.useEffect(() => {\n    if (card && focus) {\n      card.focus(focus);\n    }\n  }, [card, focus]);\n\n  if (callbacks) {\n    for (const callback of Object.keys(callbacks)) {\n      card?.addEventListener(\n        callback as Square.CardInputEventTypes,\n        (callbacks as Record<string, (event: Square.SqEvent<Square.CardInputEvent>) => void>)[callback]\n      );\n    }\n  }\n\n  if (recalculateSize) {\n    recalculateSize(card?.recalculateSize);\n  }\n\n  useEventListener({\n    listener: handlePayment,\n    type: 'click',\n    element: buttonRef,\n    options: {\n      passive: true,\n    },\n  });\n\n  const Button = ({ children, isLoading, ...props }: CreditCardPayButtonProps) => {\n    const id = 'rswp-card-button';\n    const disabled = isLoading || !card || isSubmitting;\n\n    return (\n      <PayButton\n        {...props}\n        aria-disabled={disabled}\n        css={props?.css}\n        disabled={disabled}\n        id={id}\n        ref={buttonRef}\n        type=\"button\"\n      >\n        {children ?? 'Pay'}\n      </PayButton>\n    );\n  };\n\n  return (\n    <>\n      <div {...props} data-testid=\"rswps-card-container\" id={id} style={{ minHeight: 89 }}>\n        {!card && <LoadingCard />}\n      </div>\n\n      {typeof render === 'function' ? render(Button) : <Button {...buttonProps}>{children ?? 'Pay'}</Button>}\n    </>\n  );\n}\n\nexport default CreditCard;\nexport * from './credit-card.types';\n"],"names":["CreditCard","buttonProps","callbacks","children","focus","id","includeInputLabels","postalCode","recalculateSize","render","style","props","card","setCard","React","isSubmitting","setIsSubmitting","buttonRef","cardTokenizeResponseReceived","payments","useForm","options","baseOptions","acc","key","handlePayment","result","message","error","abortController","signal","res","callback","useEventListener","Button","isLoading","disabled","PayButton","LoadingCard"],"mappings":"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"}