{"version":3,"file":"EmailActionLayout.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/EmailActionLayout.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { StytchSDKAPIError } from '@stytch/core/public';\nimport React, { ReactNode, useState } from 'react';\n\nimport { getTranslatedError } from '../../../utils/getTranslatedError';\nimport Button from '../atoms/Button';\nimport { chromaticIgnoreClassName } from '../atoms/chromaticIgnoreClassName';\nimport Column from '../atoms/Column';\nimport { useCountdown, useTimeRemaining } from '../atoms/Countdown';\nimport { errorToast } from '../atoms/Toast';\nimport Typography from '../atoms/Typography';\nimport VerticalTransition from '../atoms/VerticalTransition';\nimport ButtonColumn from './ButtonColumn';\n\ntype EmailActionProps = {\n  header: ReactNode;\n  description: ReactNode;\n\n  /**\n   * Additional content to display below description\n   * Usually used for forms. If you have buttons, use additionalActions instead.\n   */\n  children?: ReactNode;\n\n  additionalActions?: ReactNode;\n\n  /**\n   * We assume pressing this button sent off an email and we will disable the button for 15 seconds.\n   */\n  resend?: () => Promise<unknown>;\n\n  sendMagicLink?: () => Promise<unknown>;\n  goBack?: () => void;\n};\n\n/**\n * Handles common layouts for simple email actions\n */\nconst EmailActionLayout = ({\n  header,\n  description,\n  children,\n  additionalActions,\n  resend,\n  sendMagicLink,\n  goBack,\n}: EmailActionProps) => {\n  const { t } = useLingui();\n\n  const [emailResending, setEmailResending] = useState(false);\n  const [magicLinkSent, setMagicLinkSent] = useState(false);\n\n  const countdown = useCountdown();\n  const [timeRemaining, active] = useTimeRemaining(countdown.expiration);\n\n  const resendButton = resend && (\n    <Button\n      variant=\"outline\"\n      onClick={async () => {\n        setEmailResending(true);\n        try {\n          await resend();\n          countdown.start(15);\n        } catch (error) {\n          errorToast({ message: getTranslatedError(error as StytchSDKAPIError, t) });\n          countdown.clear();\n        } finally {\n          setEmailResending(false);\n        }\n      }}\n      loading={emailResending}\n      disabled={emailResending || active}\n    >\n      <VerticalTransition\n        className={chromaticIgnoreClassName()}\n        triggered={active}\n        primary={t({ id: 'button.resendEmail', message: 'Resend email' })}\n        secondary={t({ id: 'button.emailResent', message: `Email resent! Try again in ${timeRemaining}s` })}\n      />\n    </Button>\n  );\n\n  const goBackButton = goBack && (\n    <Button variant=\"ghost\" onClick={goBack}>\n      {t({ id: 'button.goBack', message: 'Go back' })}\n    </Button>\n  );\n\n  const actions = sendMagicLink ? (\n    <ButtonColumn\n      top={\n        <>\n          {additionalActions}\n          {resendButton}\n        </>\n      }\n      bottom={\n        <>\n          <Button\n            variant=\"outline\"\n            onClick={() => {\n              setMagicLinkSent(true);\n              sendMagicLink().catch(() => setMagicLinkSent(false));\n            }}\n            loading={magicLinkSent}\n          >\n            {t({ id: 'button.loginWithoutPassword', message: 'Log in without a password' })}\n          </Button>\n\n          {goBackButton}\n        </>\n      }\n    />\n  ) : (\n    <ButtonColumn>\n      {additionalActions}\n      {resendButton}\n      {goBackButton}\n    </ButtonColumn>\n  );\n\n  return (\n    <Column gap={6}>\n      <Typography variant=\"header\">{header}</Typography>\n      <Typography>{description}</Typography>\n\n      {children}\n\n      {actions}\n    </Column>\n  );\n};\n\nexport default EmailActionLayout;\n"],"names":["EmailActionLayout","header","description","children","additionalActions","resend","sendMagicLink","goBack","useLingui","emailResending","setEmailResending","useState","magicLinkSent","setMagicLinkSent","countdown","useCountdown","timeRemaining","active","useTimeRemaining","expiration","resendButton","React","Button","variant","onClick","start","error","errorToast","message","getTranslatedError","clear","loading","disabled","VerticalTransition","className","chromaticIgnoreClassName","triggered","primary","secondary","goBackButton","actions","ButtonColumn","top","bottom","catch","Column","gap","Typography"],"mappings":"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"}