{"version":3,"file":"TOTPEnrollQRScreen.mjs","sources":["../../../../../../../../../web/src/ui/b2b/screens/TOTPEnrollQRScreen.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { StytchAPIError, StytchError, StytchEventType } from '@stytch/core/public';\nimport React from 'react';\nimport useSWR from 'swr';\n\nimport { getTranslatedError } from '../../../utils/getTranslatedError';\nimport Button from '../../components/atoms/Button';\nimport Column from '../../components/atoms/Column';\nimport { errorToast } from '../../components/atoms/Toast';\nimport Typography from '../../components/atoms/Typography';\nimport ButtonColumn from '../../components/molecules/ButtonColumn';\nimport { LoadingScreen } from '../../components/molecules/Loading';\nimport { useErrorCallback, useEventCallback, useGlobalReducer, useStytch } from '../GlobalContextProvider';\nimport { AppScreens } from '../types/AppScreens';\nimport styles from './TOTPEnrollQRScreen.module.css';\n\nexport const TOTPEnrollQRScreen = () => {\n  const stytchClient = useStytch();\n  const [state, dispatch] = useGlobalReducer();\n  const onEvent = useEventCallback();\n  const onError = useErrorCallback();\n\n  const { t } = useLingui();\n\n  // This screen should only be shown if primary info and TOTP enrollment are\n  // available\n  const { memberId, organizationId } = state.mfa.primaryInfo!;\n\n  const { data } = useSWR(\n    ['stytch.totp.create', memberId, organizationId],\n    () => stytchClient.totp.create({ member_id: memberId, organization_id: organizationId }),\n    {\n      revalidateOnFocus: false,\n      revalidateOnReconnect: false,\n      revalidateIfStale: false,\n\n      onSuccess: (response) => {\n        onEvent({ type: StytchEventType.B2BTOTPCreate, data: response });\n        // Store the enrollment object so we can show recovery code after authenticating\n        dispatch({ type: 'totp/create_success', response, memberId, organizationId });\n      },\n      onError: (error) => {\n        const message = getTranslatedError(error as StytchAPIError, t);\n        if (message) {\n          errorToast({ message });\n        }\n        onError(error as StytchError);\n      },\n    },\n  );\n\n  const handleShowManualCode = () => {\n    dispatch({ type: 'totp/show_code', method: 'manual' });\n  };\n\n  const handleContinue = () => {\n    dispatch({ type: 'transition', history: 'push', screen: AppScreens.TOTPEntry });\n  };\n\n  return (\n    <Column gap={6}>\n      <Typography variant=\"header\">\n        {t({ id: 'totp.setupQr.title', message: 'Scan the QR code to link your authenticator app' })}\n      </Typography>\n\n      <Typography variant=\"body\">\n        {t({\n          id: 'totp.setupQr.content',\n          message:\n            'Your organization requires an additional form of verification to make your account more secure. If you don’t have an authenticator app, you’ll need to install one first.',\n        })}\n      </Typography>\n\n      {data ? (\n        <>\n          <img\n            alt={t({ id: 'mfaTotpEnrollment.qrAltText', message: 'QR code for TOTP enrollment' })}\n            src={data.qr_code}\n            className={styles.qr}\n          />\n\n          <ButtonColumn>\n            <Button variant=\"primary\" onClick={handleContinue}>\n              {t({ id: 'button.continue', message: 'Continue' })}\n            </Button>\n            <Button variant=\"outline\" onClick={handleShowManualCode}>\n              {t({ id: 'button.totpQrManual', message: 'Having trouble scanning?' })}\n            </Button>\n          </ButtonColumn>\n        </>\n      ) : (\n        <LoadingScreen />\n      )}\n    </Column>\n  );\n};\n"],"names":["TOTPEnrollQRScreen","stytchClient","useStytch","state","dispatch","useGlobalReducer","onEvent","useEventCallback","onError","useErrorCallback","useLingui","memberId","organizationId","mfa","primaryInfo","data","useSWR","totp","create","member_id","organization_id","revalidateOnFocus","revalidateOnReconnect","revalidateIfStale","onSuccess","response","type","StytchEventType","B2BTOTPCreate","error","message","getTranslatedError","errorToast","handleShowManualCode","method","handleContinue","history","screen","AppScreens","TOTPEntry","React","Column","gap","Typography","variant","img","alt","src","qr_code","className","styles","qr","ButtonColumn","Button","onClick","LoadingScreen"],"mappings":"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"}