{"version":3,"file":"ach.es.mjs","sources":["../../../src/components/ach/ach.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 { PayButton, SvgIcon } from './ach.styles';\nimport { transformPlaidEventName } from './ach.utils';\nimport type { AchProps } from './ach.types';\n\n/**\n * Renders a ACH button to use in the Square Web Payment SDK, pre-styled to meet\n * Square branding guidelines.\n *\n * **_But with the option to override styles or use a custom children_**\n *\n * @example\n *\n * ```tsx\n * function App() {\n *   return (\n *     <SquareForm {...props}>\n *       <Ach />\n *     </SquareForm>\n *   );\n * }\n * ```\n */\nexport function Ach({\n  accountHolderName,\n  transactionId,\n  callbacks,\n  buttonProps,\n  children,\n  svgProps,\n  redirectURI, // eslint-disable-line @typescript-eslint/no-unused-vars\n}: AchProps) {\n  const [ach, setAch] = React.useState<Square.ACH | undefined>(() => undefined);\n  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);\n  const { cardTokenizeResponseReceived, createPaymentRequest, payments } = useForm();\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  /**\n   * Handle the on click of the ACH 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 (!ach) {\n      console.warn('ACH button was clicked, but no ACH instance was found.');\n      return;\n    }\n\n    if (!createPaymentRequest) throw new Error('`createPaymentRequest()` is required when using ACH payments');\n\n    setIsSubmitting(true);\n\n    try {\n      const result = await ach.tokenize({\n        accountHolderName,\n        intent: 'CHARGE',\n        amount: createPaymentRequest.total.amount,\n        currency: createPaymentRequest.currencyCode,\n      });\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        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 handleTokenization = async (result: Square.SqEvent<Square.TokenizationEvent>) => {\n      const { tokenResult } = result.detail;\n      if (tokenResult?.status == 'OK') {\n        await cardTokenizeResponseReceived(tokenResult);\n      }\n    };\n\n    const start = async (signal: AbortSignal) => {\n      const ach = await payments\n        ?.ach({\n          transactionId,\n        })\n        .then((res) => {\n          if (signal?.aborted) return;\n          setAch(res);\n          return res;\n        });\n\n      if (signal.aborted) {\n        ach?.removeEventListener('ontokenization' as Square.PlaidEventName, handleTokenization);\n        await ach?.destroy();\n      } else {\n        ach?.addEventListener('ontokenization' as Square.PlaidEventName, handleTokenization);\n      }\n    };\n\n    start(signal);\n\n    return () => {\n      abortController.abort();\n    };\n  }, [createPaymentRequest, payments]);\n\n  if (callbacks) {\n    for (const callback of Object.keys(callbacks)) {\n      ach?.addEventListener(\n        transformPlaidEventName(callback),\n        (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]\n      );\n    }\n  }\n\n  useEventListener({\n    listener: handlePayment,\n    type: 'click',\n    element: buttonRef,\n    options: {\n      passive: true,\n    },\n  });\n\n  const { isLoading, ...props } = buttonProps ?? {};\n  const disabled = isLoading || !ach || isSubmitting;\n\n  if (children) {\n    return (\n      <PayButton {...props} aria-disabled={disabled} disabled={disabled} ref={buttonRef} type=\"button\">\n        {children}\n      </PayButton>\n    );\n  }\n\n  return (\n    <PayButton {...props} aria-disabled={disabled} disabled={disabled} ref={buttonRef} type=\"button\">\n      <SvgIcon\n        fill=\"none\"\n        height=\"1em\"\n        viewBox=\"0 0 36 24\"\n        width=\"1em\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...svgProps}\n      >\n        <rect fill=\"url(#prefix__paint0_linear)\" height={24} rx={4} width={36} />\n        <path\n          clipRule=\"evenodd\"\n          d=\"M18.509 6.16a.89.89 0 00-1.018 0l-6.124 4.285a.848.848 0 00-.325.96.873.873 0 00.833.595h1.75v4.286h-1.75a.866.866 0 00-.875.857c0 .473.392.857.875.857h12.25a.866.866 0 00.875-.857.866.866 0 00-.875-.857h-1.75V12h1.75c.38 0 .717-.24.833-.596a.848.848 0 00-.324-.959L18.509 6.16zm2.116 10.126V12h-5.25v4.286h5.25zM18 7.91l3.395 2.376h-6.79L18 7.91z\"\n          fill=\"#fff\"\n          fillRule=\"evenodd\"\n        />\n        <defs>\n          <linearGradient gradientUnits=\"userSpaceOnUse\" id=\"prefix__paint0_linear\" x1={36} x2={0} y1={12} y2={12}>\n            <stop stopColor=\"#01D09E\" />\n            <stop offset={1} stopColor=\"#03E4AE\" />\n          </linearGradient>\n        </defs>\n      </SvgIcon>\n      <span>Pay with Direct debit (ACH)</span>\n    </PayButton>\n  );\n}\n\nexport default Ach;\nexport * from './ach.types';\n"],"names":["Ach","accountHolderName","transactionId","callbacks","buttonProps","children","svgProps","redirectURI","ach","setAch","React","isSubmitting","setIsSubmitting","cardTokenizeResponseReceived","createPaymentRequest","payments","useForm","buttonRef","handlePayment","e","result","message","error","abortController","signal","handleTokenization","tokenResult","res","callback","transformPlaidEventName","useEventListener","isLoading","props","disabled","PayButton","SvgIcon"],"mappings":"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"}