{"version":3,"file":"MFAEnrollmentSelectionScreen.mjs","sources":["../../../../../../../../../web/src/ui/b2b/screens/MFAEnrollmentSelectionScreen.tsx"],"sourcesContent":["import { MessageDescriptor } from '@lingui/core';\nimport { msg } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { StringLiteralFromEnum } from '@stytch/core';\nimport { B2BMFAProducts } from '@stytch/core/public';\nimport React, { useMemo } from 'react';\n\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 { getEnabledMethods } from '../getEnabledMethods';\nimport { useConfig, useGlobalReducer } from '../GlobalContextProvider';\nimport { B2B_MFA_METHODS } from '../reducer/mfa';\nimport { AppScreens } from '../types/AppScreens';\n\nconst mfaOptions: Record<\n  StringLiteralFromEnum<B2BMFAProducts>,\n  {\n    messageDescriptor: MessageDescriptor;\n    screen: AppScreens;\n  }\n> = {\n  [B2BMFAProducts.totp]: {\n    messageDescriptor: msg({ id: 'mfa.enrollment.option.totp', message: 'Use an authenticator app' }),\n    screen: AppScreens.TOTPEnrollmentQRCode,\n  },\n  [B2BMFAProducts.smsOtp]: {\n    messageDescriptor: msg({ id: 'mfa.enrollment.option.sms', message: 'Text me a code' }),\n    screen: AppScreens.SMSOTPEnrollment,\n  },\n};\n\nexport const MFAEnrollmentSelectionScreen = () => {\n  const { t } = useLingui();\n  const { mfaProductInclude, mfaProductOrder } = useConfig();\n\n  const [state, dispatch] = useGlobalReducer();\n\n  // This screen should only be shown if primary info is available\n  const { organizationMfaOptionsSupported } = state.mfa.primaryInfo!;\n\n  const handleNavigate = (screen: AppScreens) => {\n    dispatch({\n      type: 'transition',\n      screen,\n      history: 'push',\n    });\n  };\n\n  const displayOptions = useMemo(() => {\n    const optionsToDisplay = getEnabledMethods({\n      allMethods: B2B_MFA_METHODS,\n      orgSupportedMethods: organizationMfaOptionsSupported,\n      uiIncludedMethods: mfaProductInclude,\n    });\n\n    const result: StringLiteralFromEnum<B2BMFAProducts>[] = [];\n    for (const option of mfaProductOrder ?? B2B_MFA_METHODS) {\n      if (optionsToDisplay.has(option)) {\n        result.push(option);\n        optionsToDisplay.delete(option);\n      }\n    }\n\n    result.push(...optionsToDisplay);\n    return result;\n  }, [mfaProductInclude, mfaProductOrder, organizationMfaOptionsSupported]);\n\n  return (\n    <Column gap={6}>\n      <Typography variant=\"header\">\n        {t({ id: 'mfa.enrollment.title', message: 'Set up Multi-Factor Authentication' })}\n      </Typography>\n\n      <Typography variant=\"body\">\n        {t({\n          id: 'mfa.enrollment.content',\n          message: 'Your organization requires an additional form of verification to make your account more secure.',\n        })}\n      </Typography>\n\n      <ButtonColumn>\n        {displayOptions.map((option) => {\n          const { messageDescriptor, screen } = mfaOptions[option];\n          return (\n            <Button key={option} variant=\"outline\" onClick={() => handleNavigate(screen)}>\n              {t(messageDescriptor)}\n            </Button>\n          );\n        })}\n      </ButtonColumn>\n    </Column>\n  );\n};\n"],"names":["mfaOptions","B2BMFAProducts","totp","messageDescriptor","screen","AppScreens","TOTPEnrollmentQRCode","smsOtp","SMSOTPEnrollment","MFAEnrollmentSelectionScreen","useLingui","mfaProductInclude","mfaProductOrder","useConfig","state","dispatch","useGlobalReducer","organizationMfaOptionsSupported","mfa","primaryInfo","handleNavigate","type","history","displayOptions","useMemo","optionsToDisplay","getEnabledMethods","allMethods","B2B_MFA_METHODS","orgSupportedMethods","uiIncludedMethods","result","option","has","push","delete","React","Column","gap","Typography","variant","ButtonColumn","map","Button","key","onClick"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,UAAAA,GAMF;IACF,CAACC,cAAAA,CAAeC,IAAI,GAAG;QACrBC,iBAAiB,EAAA;;;;AACjBC,QAAAA,MAAAA,EAAQC,WAAWC;AACrB,KAAA;IACA,CAACL,cAAAA,CAAeM,MAAM,GAAG;QACvBJ,iBAAiB,EAAA;;;;AACjBC,QAAAA,MAAAA,EAAQC,WAAWG;AACrB;AACF,CAAA;MAEaC,4BAAAA,GAA+B,IAAA;AAC1C,IAAA,MAAM,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,GAAA,EAAA,GAAQC,SAAAA,EAAAA;AACd,IAAA,MAAM,EAAEC,iBAAiB,EAAEC,eAAe,EAAE,GAAGC,SAAAA,EAAAA;IAE/C,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,gBAAAA,EAAAA;;AAG1B,IAAA,MAAM,EAAEC,+BAA+B,EAAE,GAAGH,KAAAA,CAAMI,GAAG,CAACC,WAAW;AAEjE,IAAA,MAAMC,iBAAiB,CAAChB,MAAAA,GAAAA;QACtBW,QAAAA,CAAS;YACPM,IAAAA,EAAM,YAAA;AACNjB,YAAAA,MAAAA;YACAkB,OAAAA,EAAS;AACX,SAAA,CAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMC,iBAAiBC,CAAAA,CAAQ,IAAA;AAC7B,QAAA,MAAMC,mBAAmBC,iBAAAA,CAAkB;YACzCC,UAAAA,EAAYC,eAAAA;YACZC,mBAAAA,EAAqBZ,+BAAAA;YACrBa,iBAAAA,EAAmBnB;AACrB,SAAA,CAAA;AAEA,QAAA,MAAMoB,SAAkD,EAAE;QAC1D,KAAK,MAAMC,MAAAA,IAAUpB,eAAAA,IAAmBgB,eAAAA,CAAiB;YACvD,IAAIH,gBAAAA,CAAiBQ,GAAG,CAACD,MAAAA,CAAAA,EAAS;AAChCD,gBAAAA,MAAAA,CAAOG,IAAI,CAACF,MAAAA,CAAAA;AACZP,gBAAAA,gBAAAA,CAAiBU,MAAM,CAACH,MAAAA,CAAAA;AAC1B,YAAA;AACF,QAAA;AAEAD,QAAAA,MAAAA,CAAOG,IAAI,CAAA,GAAIT,gBAAAA,CAAAA;QACf,OAAOM,MAAAA;IACT,CAAA,EAAG;AAACpB,QAAAA,iBAAAA;AAAmBC,QAAAA,eAAAA;AAAiBK,QAAAA;AAAgC,KAAA,CAAA;AAExE,IAAA,qBACEmB,EAAA,CAAA,aAAA,CAACC,MAAAA,EAAAA;QAAOC,GAAAA,EAAK;qBACXF,EAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QAAWC,OAAAA,EAAQ;;;;uBAIpBJ,EAAA,CAAA,aAAA,CAACG,UAAAA,EAAAA;QAAWC,OAAAA,EAAQ;;;;AAOpB,KAAA,CAAA,CAAA,gBAAAJ,EAAA,CAAA,aAAA,CAACK,YAAAA,EAAAA,IAAAA,EACElB,cAAAA,CAAemB,GAAG,CAAC,CAACV,MAAAA,GAAAA;QACnB,MAAM,EAAE7B,iBAAiB,EAAEC,MAAM,EAAE,GAAGJ,UAAU,CAACgC,MAAAA,CAAO;AACxD,QAAA,qBACEI,EAAA,CAAA,aAAA,CAACO,MAAAA,EAAAA;YAAOC,GAAAA,EAAKZ,MAAAA;YAAQQ,OAAAA,EAAQ,SAAA;AAAUK,YAAAA,OAAAA,EAAS,IAAMzB,cAAAA,CAAehB,MAAAA;AAChED,SAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,iBAAAA,CAAAA,CAAAA;AAGT,IAAA,CAAA,CAAA,CAAA,CAAA;AAIR;;;;"}