{"version":3,"file":"gift-card.es.mjs","sources":["../../../src/components/gift-card/gift-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 './gift-card.styles';\nimport type {\n  GiftCardBase,\n  GiftCardFunctionChildren,\n  GiftCardPayButtonProps,\n  GiftCardProps,\n  GiftCardWithChildren,\n} from './gift-card.types';\n\n/**\n * Renders a Gift Card Input to use in the Square Web Payment SDK, pre-styled to\n * 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 *       <GiftCard />\n *     </SquareForm>\n *   );\n * }\n * ```\n */\nfunction GiftCard(props: GiftCardBase): JSX.Element;\nfunction GiftCard(props: GiftCardFunctionChildren): JSX.Element;\nfunction GiftCard(props: GiftCardWithChildren): JSX.Element;\nfunction GiftCard({\n  buttonProps = {\n    id: 'rswps-gift-card-button',\n  },\n  callbacks,\n  children,\n  focus,\n  id = 'rswps-gift-card-container',\n  includeInputLabels,\n  render,\n  style,\n  ...props\n}: GiftCardProps) {\n  const [giftCard, setGiftCard] = React.useState<Square.GiftCard | undefined>(() => undefined);\n  const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);\n  const { cardTokenizeResponseReceived, payments } = useForm();\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const options: Square.GiftCardOptions = React.useMemo(() => {\n    const baseOptions = {\n      includeInputLabels,\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, style]);\n\n  /** Tokenizes a GiftCard payment method instance. */\n  const handlePayment = async (e: Event) => {\n    e.stopPropagation();\n\n    if (!giftCard) {\n      console.warn('Gift Card button was clicked, but no Gift Card instance was found.');\n\n      return;\n    }\n\n    setIsSubmitting(true);\n\n    try {\n      const result = await giftCard?.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 giftCard = await payments?.giftCard(options).then((res) => {\n        if (!signal.aborted) {\n          setGiftCard(res);\n\n          return res;\n        }\n\n        return null;\n      });\n\n      await giftCard?.attach(`#${id}`);\n      if (focus) {\n        await giftCard?.focus(focus);\n      }\n\n      if (signal.aborted) {\n        await giftCard?.destroy();\n      }\n    };\n\n    start(signal);\n\n    return () => {\n      abortController.abort();\n    };\n  }, [payments, id]);\n\n  if (callbacks) {\n    for (const callback of Object.keys(callbacks)) {\n      giftCard?.addEventListener(\n        callback as Square.GiftCardInputEventTypes,\n        (callbacks as Record<string, (event: Square.SqEvent<Square.GiftCardInputEvent>) => 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 Button = ({ isLoading, ...props }: GiftCardPayButtonProps) => {\n    const id = 'rswp-gift-card-button';\n    const disabled = isLoading || !giftCard || 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        {props?.children ?? 'Pay with Gift Card'}\n      </PayButton>\n    );\n  };\n\n  return (\n    <>\n      <div {...props} data-testid=\"rswps-gift-card-container\" id={id} style={{ minHeight: 89 }}>\n        {!giftCard && <LoadingCard />}\n      </div>\n\n      {typeof render === 'function' ? (\n        render(Button)\n      ) : (\n        <Button {...buttonProps}>{children ?? 'Pay with Gift Card'}</Button>\n      )}\n    </>\n  );\n}\n\nexport default GiftCard;\nexport * from './gift-card.types';\n"],"names":["GiftCard","buttonProps","callbacks","children","focus","id","includeInputLabels","render","style","props","giftCard","setGiftCard","React","isSubmitting","setIsSubmitting","cardTokenizeResponseReceived","payments","useForm","buttonRef","options","baseOptions","acc","key","handlePayment","result","message","error","abortController","signal","res","callback","useEventListener","Button","isLoading","disabled","PayButton","LoadingCard"],"mappings":"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"}