{"version":3,"file":"OTPAuthenticate.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Secondary/OTPAuthenticate.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { DEFAULT_OTP_EXPIRATION_MINUTES, DEFAULT_SESSION_DURATION_MINUTES, EmailSentType } from '@stytch/core';\nimport { OTPMethods, StytchAPIError, StytchEventType } from '@stytch/core/public';\nimport React, { useEffect, useState } from 'react';\n\nimport { getTranslatedError } from '../../../../utils/getTranslatedError';\nimport { formatNumber } from '../../../../utils/handleParsePhoneNumber';\nimport { readB2CInternals } from '../../../../utils/internal';\nimport Button from '../../../components/atoms/Button';\nimport Column from '../../../components/atoms/Column';\nimport { useCountdown } from '../../../components/atoms/Countdown';\nimport ButtonColumn from '../../../components/molecules/ButtonColumn';\nimport { ResendOTPButton } from '../../../components/organisms/ResendOTPButton';\nimport { SentOTPEntry } from '../../../components/organisms/SentOTPEntry';\nimport {\n  AppScreens,\n  useConfig,\n  useErrorCallback,\n  useEventCallback,\n  useGlobalReducer,\n  useStytch,\n} from '../../GlobalContextProvider';\n\nexport const OTPAuthenticate = ({ hideBackButton = false }: { hideBackButton?: boolean }) => {\n  const { t } = useLingui();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n  const stytchClient = useStytch();\n  const config = useConfig();\n  const [state, dispatch] = useGlobalReducer();\n  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);\n\n  const destination = state.formState.otpState.otpDestination;\n  const selectionMethod = state.formState.otpState.type;\n  const [errorMessage, setErrorMessage] = useState('');\n  const [formattedDestination, setFormattedDestination] = useState(destination);\n\n  const calculateExpiration = () =>\n    Date.now() + 1000 * 60 * (config.otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES);\n\n  useEffect(() => {\n    const parseDestination = async () => {\n      const parsePhoneNumber = (phoneNumber: string) =>\n        readB2CInternals(stytchClient).clientsideServices.parsedPhoneNumber({ phoneNumber });\n\n      const national = await formatNumber({\n        parsePhoneNumber,\n        phoneNumber: destination,\n      });\n\n      setFormattedDestination(selectionMethod === OTPMethods.Email ? destination : national);\n    };\n\n    parseDestination();\n  }, [selectionMethod, destination, stytchClient]);\n\n  const [expiration, setExpiration] = useState(calculateExpiration);\n  const resendCountdown = useCountdown();\n\n  const resendOTP = async () => {\n    if (selectionMethod === OTPMethods.Email) {\n      readB2CInternals(stytchClient).networkClient.logEvent({\n        name: 'email_try_again_clicked',\n        details: { email: destination, type: EmailSentType.LoginOrCreateOTP },\n      });\n    }\n\n    try {\n      const data = await stytchClient.otps[selectionMethod].loginOrCreate(destination, {\n        expiration_minutes: config.otpOptions?.expirationMinutes ?? DEFAULT_OTP_EXPIRATION_MINUTES,\n      });\n\n      onEvent({ type: StytchEventType.OTPsLoginOrCreateEvent, data });\n      setExpiration(calculateExpiration());\n      dispatch({\n        type: 'update_otp_state',\n        otpState: {\n          type: selectionMethod,\n          methodId: data.method_id,\n          otpDestination: destination,\n        },\n      });\n    } catch (e: unknown) {\n      onError(e as StytchAPIError);\n      setErrorMessage(getTranslatedError(e as StytchAPIError, t));\n      throw e;\n    }\n  };\n\n  const handleSubmit = async (otp: string) => {\n    setIsSubmitting(true);\n    stytchClient.otps\n      .authenticate(otp, state.formState.otpState.methodId, {\n        session_duration_minutes: config.sessionOptions?.sessionDurationMinutes ?? DEFAULT_SESSION_DURATION_MINUTES,\n      })\n      .then((data) => {\n        onEvent({ type: StytchEventType.OTPsAuthenticate, data });\n        setIsSubmitting(false);\n        dispatch({\n          type: 'transition',\n          screen: AppScreens.OTPConfirmation,\n        });\n      })\n      .catch((e: StytchAPIError) => {\n        onError(e);\n        resendCountdown.clear();\n        setIsSubmitting(false);\n        setErrorMessage(getTranslatedError(e, t));\n      });\n  };\n\n  return (\n    <Column gap={6}>\n      <SentOTPEntry\n        expiration={expiration}\n        formattedDestination={formattedDestination}\n        isSubmitting={isSubmitting}\n        onSubmit={handleSubmit}\n        errorMessage={errorMessage}\n      />\n\n      <ButtonColumn>\n        <ResendOTPButton countdown={resendCountdown} resendOTP={resendOTP} isSubmitting={isSubmitting} />\n\n        {!hideBackButton && (\n          <Button variant=\"ghost\" onClick={() => dispatch({ type: 'transition', screen: AppScreens.Main })}>\n            {t({ id: 'button.goBack', message: 'Go back' })}\n          </Button>\n        )}\n      </ButtonColumn>\n    </Column>\n  );\n};\n"],"names":["OTPAuthenticate","hideBackButton","useLingui","onEvent","useEventCallback","onError","useErrorCallback","stytchClient","useStytch","config","useConfig","state","dispatch","useGlobalReducer","isSubmitting","setIsSubmitting","useState","destination","formState","otpState","otpDestination","selectionMethod","type","errorMessage","setErrorMessage","formattedDestination","setFormattedDestination","calculateExpiration","Date","now","otpOptions","expirationMinutes","DEFAULT_OTP_EXPIRATION_MINUTES","useEffect","parseDestination","parsePhoneNumber","phoneNumber","readB2CInternals","clientsideServices","parsedPhoneNumber","national","formatNumber","OTPMethods","Email","expiration","setExpiration","resendCountdown","useCountdown","resendOTP","networkClient","logEvent","name","details","email","EmailSentType","LoginOrCreateOTP","data","otps","loginOrCreate","expiration_minutes","StytchEventType","OTPsLoginOrCreateEvent","methodId","method_id","e","getTranslatedError","handleSubmit","otp","authenticate","session_duration_minutes","sessionOptions","sessionDurationMinutes","DEFAULT_SESSION_DURATION_MINUTES","then","OTPsAuthenticate","screen","AppScreens","OTPConfirmation","catch","clear","React","Column","gap","SentOTPEntry","onSubmit","ButtonColumn","ResendOTPButton","countdown","Button","variant","onClick","Main"],"mappings":"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"}