{"version":3,"file":"apple-pay.es.mjs","sources":["../../../src/components/apple-pay/apple-pay.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 { ApplePayContainer } from './apple-pay.styles';\nimport type { ApplePayProps } from './apple-pay.types';\n\n/**\n * Renders a Apple Pay button to use in the Square Web Payment SDK, pre-styled\n * to meet Apple Pay's branding guidelines.\n *\n * **Remember** that you need to set `createPaymentRequest()` in `SquareForm` if\n * you going to use this Payment Method\n *\n * @example\n *\n * ```tsx\n * function App() {\n *   return (\n *     <SquareForm {...props}>\n *       <ApplePay />\n *     </SquareForm>\n *   );\n * }\n * ```\n */\nfunction ApplePay({ id = 'rswps-apple-pay', ...props }: ApplePayProps) {\n  const [applePay, setApplePay] = React.useState<Square.ApplePay | undefined>(() => undefined);\n  const { cardTokenizeResponseReceived, createPaymentRequest, payments } = useForm();\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Handle the on click of the Apple Pay 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 (!applePay) {\n      console.warn('Apple Pay button was clicked, but no Apple Pay instance was found.');\n\n      return;\n    }\n\n    try {\n      const result = await applePay.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 (!createPaymentRequest) {\n      throw new Error('`createPaymentRequest()` is required when using digital wallets');\n    }\n\n    const abortController = new AbortController();\n    const { signal } = abortController;\n\n    const start = async (signal: AbortSignal) => {\n      const paymentRequest = payments?.paymentRequest(createPaymentRequest);\n\n      if (!paymentRequest) {\n        throw new Error('`paymentRequest` is required when using digital wallets');\n      }\n\n      try {\n        const applePay = await payments?.applePay(paymentRequest).then((res) => {\n          if (signal?.aborted) {\n            return;\n          }\n\n          setApplePay(res);\n\n          return res;\n        });\n\n        if (signal.aborted) {\n          await applePay?.destroy();\n        }\n      } catch (error) {\n        console.error('Initializing Apple Pay failed', error);\n      }\n    };\n\n    start(signal);\n\n    return () => {\n      abortController.abort();\n    };\n  }, [createPaymentRequest, payments]);\n\n  useEventListener({\n    listener: handlePayment,\n    type: 'click',\n    element: containerRef,\n    options: {\n      passive: true,\n    },\n  });\n\n  return (\n    <ApplePayContainer\n      {...props}\n      // We need to make this styles to be able to use event listener\n      css={{\n        display: applePay ? 'block' : 'none',\n        opacity: applePay ? 1 : 0.5,\n        pointerEvents: applePay ? 'auto' : 'none',\n        visibility: applePay ? 'visible' : 'hidden',\n      }}\n      id={id}\n      ref={containerRef}\n    ></ApplePayContainer>\n  );\n}\n\nexport default ApplePay;\nexport * from './apple-pay.types';\n"],"names":["ApplePay","id","props","applePay","setApplePay","React","cardTokenizeResponseReceived","createPaymentRequest","payments","useForm","containerRef","handlePayment","e","result","message","error","abortController","signal","paymentRequest","res","useEventListener","ApplePayContainer"],"mappings":";;;;AA6BA,SAASA,EAAS,EAAE,IAAAC,IAAK,sBAAsBC,KAAwB;AACrE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAM,SAAsC,MAAA;AAAA,GAAe,GACrF,EAAE,8BAAAC,GAA8B,sBAAAC,GAAsB,UAAAC,MAAaC,EAAQ,GAC3EC,IAAeL,EAAM,OAAuB,IAAI,GAQhDM,IAAgB,OAAOC,MAAa;AAGxC,QAFAA,EAAE,gBAAgB,GAEd,CAACT,GAAU;AACb,cAAQ,KAAK,oEAAoE;AAEjF;AAAA,IACF;AAEI,QAAA;AACI,YAAAU,IAAS,MAAMV,EAAS;AAE1B,UAAAU,EAAO,WAAW;AACpB,eAAOP,EAA6BO,CAAM;AAGxC,UAAAC,IAAU,oCAAoCD,EAAO;AACrD,UAAAA,KAAU,YAAYA;AACxB,cAAAC,KAAW,gBAAgB,KAAK,UAAUD,GAAQ,MAAM,KAElD,IAAI,MAAMC,CAAO;AAGzB,cAAQ,KAAKA,CAAO;AAAA,aACbC;AACP,cAAQ,MAAMA,CAAK;AAAA,IACrB;AAAA,EAAA;AAGF,SAAAV,EAAM,UAAU,MAAM;AACpB,QAAI,CAACE;AACG,YAAA,IAAI,MAAM,iEAAiE;AAG7E,UAAAS,IAAkB,IAAI,mBACtB,EAAE,QAAAC,EAAW,IAAAD;AA4BnB,YA1Bc,OAAOC,MAAwB;AACrC,YAAAC,IAAiBV,GAAU,eAAeD,CAAoB;AAEpE,UAAI,CAACW;AACG,cAAA,IAAI,MAAM,yDAAyD;AAGvE,UAAA;AACIf,cAAAA,IAAW,MAAMK,GAAU,SAASU,CAAc,EAAE,KAAK,CAACC,MAAQ;AACtE,cAAIF,CAAAA,GAAQ;AAIZ,mBAAAb,EAAYe,CAAG,GAERA;AAAA,QAAA,CACR;AAED,QAAIF,EAAO,WACT,MAAMd,GAAU;eAEXY;AACC,gBAAA,MAAM,iCAAiCA,CAAK;AAAA,MACtD;AAAA,IAAA,GAGIE,CAAM,GAEL,MAAM;AACX,MAAAD,EAAgB,MAAM;AAAA,IAAA;AAAA,EACxB,GACC,CAACT,GAAsBC,CAAQ,CAAC,GAElBY,EAAA;AAAA,IACf,UAAUT;AAAA,IACV,MAAM;AAAA,IACN,SAASD;AAAA,IACT,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EAAA,CACD,GAGC,gBAAAL,EAAA;AAAA,IAACgB;AAAA,IAAA;AAAA,MACE,GAAGnB;AAAA,MAEJ,KAAK;AAAA,QACH,SAASC,IAAW,UAAU;AAAA,QAC9B,SAASA,IAAW,IAAI;AAAA,QACxB,eAAeA,IAAW,SAAS;AAAA,QACnC,YAAYA,IAAW,YAAY;AAAA,MACrC;AAAA,MACA,IAAAF;AAAA,MACA,KAAKS;AAAA,IAAA;AAAA,EAAA;AAGX;"}