{"version":3,"file":"EmailMethodSelectionScreen.mjs","sources":["../../../../../../../../../web/src/ui/b2b/screens/EmailMethodSelectionScreen.tsx"],"sourcesContent":["import { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { AuthFlowType } from '@stytch/core/public';\nimport React, { useMemo } from 'react';\n\nimport { getTranslatedError } from '../../../utils/getTranslatedError';\nimport { isTruthy } from '../../../utils/isTruthy';\nimport Button from '../../components/atoms/Button';\nimport Column from '../../components/atoms/Column';\nimport Typography from '../../components/atoms/Typography';\nimport ButtonColumn from '../../components/molecules/ButtonColumn';\nimport ErrorText from '../../components/molecules/ErrorText';\nimport { useGlobalReducer } from '../GlobalContextProvider';\nimport { useEffectiveAuthConfig } from '../hooks/useEffectiveAuthConfig';\nimport { useEmailOtpDiscoverySend } from '../hooks/useEmailOtpDiscoverySend';\nimport { useEmailOtpLoginOrSignup } from '../hooks/useEmailOtpLoginOrSignup';\nimport { useEmlDiscoverySend } from '../hooks/useEmlDiscoverySend';\nimport { useEmlLoginOrSignup } from '../hooks/useEmlLoginOrSignup';\nimport { ProductId } from '../StytchB2BProduct';\n\nconst options: Partial<Record<ProductId, { messageDescriptor: MessageDescriptor }>> = {\n  emailMagicLinks: {\n    messageDescriptor: msg({ id: 'emailMethodSelection.link', message: 'Email me a login link' }),\n  },\n  emailOtp: {\n    messageDescriptor: msg({ id: 'emailMethodSelection.code', message: 'Email me a login code' }),\n  },\n};\n\nexport const EmailMethodSelectionScreen = () => {\n  const { products } = useEffectiveAuthConfig();\n  const { t } = useLingui();\n\n  const [state, dispatch] = useGlobalReducer();\n\n  const {\n    trigger: sendDiscoveryEml,\n    isMutating: isSendingDiscoveryEml,\n    error: sendDiscoveryEmlError,\n    reset: resetSendDiscoveryEml,\n  } = useEmlDiscoverySend();\n\n  const {\n    trigger: sendDiscoveryOtp,\n    isMutating: isSendingDiscoveryOtp,\n    error: sendDiscoveryOtpError,\n    reset: resetSendDiscoveryOtp,\n  } = useEmailOtpDiscoverySend();\n\n  const {\n    trigger: sendLoginOrSignupEml,\n    isMutating: isSendingLoginOrSignupEml,\n    error: sendLoginOrSignupEmlError,\n    reset: resetSendLoginOrSignupEml,\n  } = useEmlLoginOrSignup();\n\n  const {\n    trigger: sendLoginOrSignupOtp,\n    isMutating: isSendingLoginOrSignupOtp,\n    error: sendLoginOrSignupOtpError,\n    reset: resetSendLoginOrSignupOtp,\n  } = useEmailOtpLoginOrSignup();\n\n  const isSending =\n    isSendingDiscoveryEml || isSendingDiscoveryOtp || isSendingLoginOrSignupEml || isSendingLoginOrSignupOtp;\n  const error =\n    sendDiscoveryEmlError || sendDiscoveryOtpError || sendLoginOrSignupEmlError || sendLoginOrSignupOtpError;\n\n  const handleChooseMethod = (method: ProductId) => {\n    resetSendDiscoveryEml();\n    resetSendDiscoveryOtp();\n    resetSendLoginOrSignupEml();\n    resetSendLoginOrSignupOtp();\n\n    switch (method) {\n      case 'emailMagicLinks':\n        if (state.flowState.type === AuthFlowType.Discovery) {\n          sendDiscoveryEml({ email: state.formState.emailState.userSuppliedEmail });\n        } else if (state.flowState.type === AuthFlowType.Organization && state.flowState.organization) {\n          sendLoginOrSignupEml({\n            email: state.formState.emailState.userSuppliedEmail,\n            organization_id: state.flowState.organization.organization_id,\n          });\n        }\n        break;\n      case 'emailOtp':\n        if (state.flowState.type === AuthFlowType.Discovery) {\n          sendDiscoveryOtp({ email: state.formState.emailState.userSuppliedEmail });\n        } else if (state.flowState.type === AuthFlowType.Organization && state.flowState.organization) {\n          sendLoginOrSignupOtp({\n            email: state.formState.emailState.userSuppliedEmail,\n            organization_id: state.flowState.organization.organization_id,\n          });\n        }\n        break;\n    }\n  };\n\n  const displayOptions = useMemo(\n    () =>\n      products\n        .map((product) => {\n          const option = options[product.id];\n          if (!option) return;\n\n          return {\n            option: product.id,\n            messageDescriptor: option.messageDescriptor,\n          };\n        })\n        .filter(isTruthy),\n    [products],\n  );\n\n  const handleBack = () => {\n    dispatch({ type: 'navigate_back' });\n  };\n\n  return (\n    <Column gap={6}>\n      <Typography variant=\"header\">\n        {t({ id: 'emailMethodSelection.title', message: 'Select how you’d like to continue' })}\n      </Typography>\n      <ButtonColumn>\n        {displayOptions.map(({ option, messageDescriptor }) => (\n          <Button\n            key={option}\n            variant=\"outline\"\n            disabled={isSending}\n            onClick={() => {\n              handleChooseMethod(option);\n            }}\n          >\n            {t(messageDescriptor)}\n          </Button>\n        ))}\n\n        {error && <ErrorText>{getTranslatedError(error, t)}</ErrorText>}\n\n        <Button variant=\"ghost\" onClick={handleBack}>\n          {t({ id: 'button.goBack', message: 'Go back' })}\n        </Button>\n      </ButtonColumn>\n    </Column>\n  );\n};\n"],"names":["options","emailMagicLinks","messageDescriptor","emailOtp","EmailMethodSelectionScreen","products","useEffectiveAuthConfig","useLingui","state","dispatch","useGlobalReducer","trigger","sendDiscoveryEml","isMutating","isSendingDiscoveryEml","error","sendDiscoveryEmlError","reset","resetSendDiscoveryEml","useEmlDiscoverySend","sendDiscoveryOtp","isSendingDiscoveryOtp","sendDiscoveryOtpError","resetSendDiscoveryOtp","useEmailOtpDiscoverySend","sendLoginOrSignupEml","isSendingLoginOrSignupEml","sendLoginOrSignupEmlError","resetSendLoginOrSignupEml","useEmlLoginOrSignup","sendLoginOrSignupOtp","isSendingLoginOrSignupOtp","sendLoginOrSignupOtpError","resetSendLoginOrSignupOtp","useEmailOtpLoginOrSignup","isSending","handleChooseMethod","method","flowState","type","AuthFlowType","Discovery","email","formState","emailState","userSuppliedEmail","Organization","organization","organization_id","displayOptions","useMemo","map","product","option","id","filter","isTruthy","handleBack","React","Column","gap","Typography","variant","ButtonColumn","Button","key","disabled","onClick","ErrorText","getTranslatedError"],"mappings":"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"}