{"version":3,"file":"index.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Main/index.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { DEV } from '@stytch/core';\nimport React, { useEffect, useState } from 'react';\n\nimport { isTruthy } from '../../../../utils/isTruthy';\nimport Column from '../../../components/atoms/Column';\nimport Typography from '../../../components/atoms/Typography';\nimport Divider from '../../../components/molecules/Divider';\nimport ErrorText from '../../../components/molecules/ErrorText';\nimport { usePresentation } from '../../../components/PresentationConfig';\nimport { usePromptPasskey } from '../../../hooks/usePromptPasskey';\nimport { useConfig, useStytch } from '../../GlobalContextProvider';\nimport { MainScreenGroup, MainScreenKey } from '../../StytchProduct';\nimport { hasProduct, useProductComponents } from '../../utils';\n\nexport const MainScreen = () => {\n  const stytchClient = useStytch();\n  const config = useConfig();\n\n  const { options } = usePresentation();\n  const { t } = useLingui();\n  const [mainScreenGroups, setMainScreenGroups] = useState<MainScreenGroup[]>([]);\n\n  const { products, oauthOptions } = config;\n  const hasButtons = (hasProduct(products, 'oauth') && oauthOptions) || hasProduct(products, 'crypto');\n  const hasPasskeys = hasProduct(products, 'passkeys');\n  const hasInput =\n    hasProduct(products, 'emailMagicLinks') || hasProduct(products, 'otp') || hasProduct(products, 'passwords');\n\n  const [startPasskeyAuth, passkeyError] = usePromptPasskey({\n    canAutofill: hasInput,\n    shadowDOM: Boolean(options.enableShadowDOM),\n  });\n  const productComponents = useProductComponents(products, 'mainScreen')!;\n\n  useEffect(() => {\n    const loadProductComponents = async () => {\n      // Deduplicate components mapped from products\n      const keys = Array.from(\n        new Set<MainScreenKey>(\n          products\n            .map((product) => {\n              switch (product.id) {\n                case 'oauth':\n                case 'crypto':\n                  return product.id;\n                case 'emailMagicLinks':\n                case 'otp':\n                case 'passwords':\n                  return 'login-form';\n              }\n            })\n            .filter(isTruthy),\n        ),\n      );\n\n      const showDivider = hasButtons && hasInput;\n      if (keys.length > 1 && showDivider) {\n        keys.splice(-1, 0, 'divider');\n      }\n\n      // Add a passkey button if the user has configured passkeys, don't have a login form,\n      // or the browser does not support autofill\n      if (hasPasskeys && (!hasInput || !(await stytchClient.webauthn.browserSupportsAutofill()))) {\n        keys.unshift('passkey-button');\n      }\n\n      // Group Wallet and Oauth buttons (basically going from [Password, Wallet, OAuth] to [Password, [Wallet, OAuth]])\n      // This reassignment is only there to make TS happy - .splice mutates, and groups === keys\n      // so it is not really needed\n      const groups: MainScreenGroup[] = keys;\n      const walletIndex = keys.indexOf('crypto');\n      const oauthIndex = keys.indexOf('oauth');\n      if (walletIndex !== -1 && oauthIndex !== -1 && Math.abs(walletIndex - oauthIndex) === 1) {\n        const index = Math.min(walletIndex, oauthIndex);\n        groups.splice(index, 0, keys.splice(index, 2));\n      }\n\n      setMainScreenGroups(groups);\n    };\n\n    loadProductComponents();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- SDK-1354\n  }, []);\n\n  if (hasPasskeys && products.length === 1)\n    return (\n      <Typography variant=\"helper\" color=\"destructive\">\n        {DEV('Error: Cannot use Passkeys by itself, please add another product to the config.')}\n      </Typography>\n    );\n\n  const props = { startPasskeyAuth };\n  const renderComponent = (key: MainScreenGroup, index: number) => {\n    if (Array.isArray(key)) {\n      return (\n        <Column gap={2} key={index}>\n          {key.map(renderComponent)}\n        </Column>\n      );\n    }\n\n    if (key === 'divider') {\n      return <Divider key={index} />;\n    }\n\n    const Component = productComponents[key];\n    return <Component key={key} {...props} />;\n  };\n\n  return (\n    <Column gap={6}>\n      {!options.hideHeaderText && (\n        <Typography variant=\"header\" align=\"center\">\n          {t({ id: 'login.title', message: 'Sign up or log in' })}\n        </Typography>\n      )}\n\n      {passkeyError && <ErrorText>{passkeyError}</ErrorText>}\n\n      {mainScreenGroups.map(renderComponent)}\n    </Column>\n  );\n};\n"],"names":["MainScreen","stytchClient","useStytch","config","useConfig","options","usePresentation","useLingui","mainScreenGroups","setMainScreenGroups","useState","products","oauthOptions","hasButtons","hasProduct","hasPasskeys","hasInput","startPasskeyAuth","passkeyError","usePromptPasskey","canAutofill","shadowDOM","Boolean","enableShadowDOM","productComponents","useProductComponents","useEffect","loadProductComponents","keys","Array","from","Set","map","product","id","filter","isTruthy","showDivider","length","splice","webauthn","browserSupportsAutofill","unshift","groups","walletIndex","indexOf","oauthIndex","Math","abs","index","min","React","Typography","variant","color","props","renderComponent","key","isArray","Column","gap","Divider","Component","hideHeaderText","align","ErrorText"],"mappings":"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"}