{"version":3,"file":"afterpay.es.mjs","sources":["../../../src/components/afterpay/afterpay.tsx"],"sourcesContent":["// Dependencies\nimport * as React from 'react';\nimport type * as Square from '@square/web-sdk';\n\n// Internals\nimport { useAfterpay } from '~/contexts/afterpay';\nimport { useEventListener } from '~/hooks/use-event-listener';\nimport { AfterpayContext, AfterpayProvider } from '~/contexts/afterpay';\nimport { useForm } from '~/contexts/form';\nimport { ButtonLoader } from './afterpay.styles';\nimport type {\n  AfterpayButtonProps,\n  AfterpayMessageBaseProps,\n  AfterpayMessageCustomComponentProps,\n  AfterpayMessageProps,\n  AfterpayWidgetProps,\n} from './afterpay.types';\n\nexport function AfterpayButton({\n  Button,\n  buttonColor = 'black',\n  buttonType = 'buy_now_with_afterpay',\n  finalCtaButtonType = 'buy_now',\n  id = 'rswps-afterpay-button',\n  ...props\n}: AfterpayButtonProps) {\n  const containerRef = React.useRef<HTMLElement>(null);\n  const afterpay = useAfterpay();\n  const { cardTokenizeResponseReceived } = useForm();\n\n  const options: Square.AfterpayButtonOptions = React.useMemo(\n    () => ({\n      buttonColor,\n      buttonType,\n      finalCtaButtonType,\n      useCustomButton: Boolean(Button),\n    }),\n    [Button, buttonColor, buttonType, finalCtaButtonType]\n  );\n\n  /**\n   * Handle the on click of the Afterpay 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 (!afterpay) {\n      console.warn('Afterpay/Clearpay button was clicked, but no Afterpay/Clearpay instance was found.');\n\n      return;\n    }\n\n    try {\n      const result = await afterpay.tokenize();\n\n      if (result.status === 'OK') {\n        return cardTokenizeResponseReceived(result);\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    }\n  };\n\n  React.useEffect(() => {\n    if (afterpay) {\n      afterpay?.attach(`#${id}`, options);\n    }\n\n    return () => {\n      if (afterpay) {\n        afterpay?.destroy();\n      }\n    };\n  }, [afterpay]);\n\n  useEventListener({\n    listener: handlePayment,\n    type: 'click',\n    element: containerRef,\n    options: {\n      passive: true,\n    },\n  });\n\n  if (Button) {\n    return <Button {...props} id={id} ref={containerRef} />;\n  }\n\n  return (\n    <div {...props} id={id} ref={containerRef as React.RefObject<HTMLDivElement>}>\n      {!afterpay ? <ButtonLoader /> : null}\n    </div>\n  );\n}\n\nexport function AfterpayMessage(props: AfterpayMessageBaseProps): JSX.Element;\nexport function AfterpayMessage(props: AfterpayMessageCustomComponentProps): JSX.Element;\nexport function AfterpayMessage({\n  badgeTheme = 'black-on-mint',\n  component,\n  id = 'rswps-afterpay-message',\n  modalLinkStyle = 'circled-info-icon',\n  modalTheme = 'mint',\n  size = 'md',\n  ...props\n}: AfterpayMessageProps) {\n  const messageRef = React.useRef<HTMLDivElement>(null);\n  const afterpay = useAfterpay();\n\n  const options: Square.AfterpayMessagingOptions = React.useMemo(\n    () => ({\n      badgeTheme,\n      modalLinkStyle,\n      modalTheme,\n      size,\n    }),\n    [badgeTheme, modalLinkStyle, modalTheme, size]\n  );\n\n  React.useEffect(() => {\n    const start = async () => {\n      await afterpay?.attachMessaging(`#${id}`, options);\n    };\n\n    if (afterpay && !component?.Message) {\n      start();\n    }\n  }, [afterpay, component?.Message, options]);\n\n  const onClick = async (e: Event) => {\n    e.stopPropagation();\n\n    afterpay?.displayInformationModal({ modalTheme });\n  };\n\n  useEventListener({\n    listener: onClick,\n    type: 'click',\n    element: messageRef,\n    options: {\n      passive: true,\n    },\n  });\n\n  const Message = component?.Message;\n  if (Message) {\n    return <Message {...props} id={id} ref={messageRef} />;\n  }\n\n  return <div {...props} id={id} />;\n}\n\nexport function AfterpayWidget({ includeBranding, id = 'rswps-afterpay-widget', ...props }: AfterpayWidgetProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const afterpay = useAfterpay();\n\n  React.useEffect(() => {\n    const start = async () => {\n      await afterpay?.attachCheckoutWidget(`#${id}`, {\n        includeBranding,\n      });\n    };\n\n    if (afterpay) {\n      start();\n    }\n  }, [afterpay, includeBranding]);\n\n  return <div {...props} id={id} ref={containerRef} />;\n}\n\nfunction Afterpay(props: AfterpayButtonProps) {\n  return (\n    <AfterpayProvider>\n      <AfterpayButton {...props} />\n    </AfterpayProvider>\n  );\n}\n\nexport { AfterpayContext, AfterpayProvider };\nexport default Afterpay;\nexport * from './afterpay.types';\n"],"names":["AfterpayButton","Button","buttonColor","buttonType","finalCtaButtonType","id","props","containerRef","React","afterpay","useAfterpay","cardTokenizeResponseReceived","useForm","options","handlePayment","e","result","message","error","useEventListener","ButtonLoader","AfterpayMessage","badgeTheme","component","modalLinkStyle","modalTheme","size","messageRef","start","Message","AfterpayWidget","includeBranding","Afterpay","AfterpayProvider"],"mappings":"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"}