{"version":3,"file":"PhoneInput.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/PhoneInput.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport { COUNTRIES_LIST, CountryCode, ParsedPhoneNumberResponse } from '@stytch/core';\nimport React, { useRef, useState } from 'react';\n\nimport { Chevron } from '../../../assets';\nimport { ClientsideServicesProvider } from '../../../ClientsideServicesProvider';\nimport { useErrorProps } from '../../../utils/accessibility';\nimport { formatNumber } from '../../../utils/handleParsePhoneNumber';\nimport { passwordManagerDisableAutofillProps } from '../../../utils/passwordManagerDisableAutofillProps';\nimport ErrorText from './ErrorText';\nimport Input from './Input';\nimport styles from './PhoneInput.module.css';\n\n// What the library returns by default for the US\nconst DEFAULT_TEL_PLACEHOLDER = '(201) 555-0123';\n\nexport const getPhoneNumberProps = (\n  clientsideServices: ClientsideServicesProvider,\n): Pick<PhoneInputProps, 'getExampleNumber' | 'parsePhoneNumber'> => ({\n  getExampleNumber: (countryCode: CountryCode) =>\n    clientsideServices.getExamplePhoneNumber({ regionCode: countryCode }).then((res) => res.phoneNumber),\n\n  parsePhoneNumber: (phoneNumber: string, countryCode?: CountryCode) =>\n    clientsideServices.parsedPhoneNumber({\n      phoneNumber,\n      regionCode: countryCode,\n    }),\n});\n\nexport type PhoneInputProps = {\n  phone: string;\n  setPhone: (phone: string) => void;\n  country: CountryCode;\n  setCountry: (country: CountryCode) => void;\n  parsePhoneNumber: (phoneNumber: string, countryCode?: CountryCode) => Promise<ParsedPhoneNumberResponse>;\n  getExampleNumber: (countryCode: CountryCode) => Promise<string | undefined>;\n  hasPasskeys?: boolean;\n  error?: string;\n};\n\nconst PhoneInput = ({\n  phone,\n  setPhone,\n  country,\n  setCountry,\n  parsePhoneNumber,\n  getExampleNumber,\n  hasPasskeys,\n  // Handle error ourselves instead of delegating down to <Input>\n  // since the layout would be wrong in that case (it would appear to the right of the <select>)\n  error,\n  ...additionalProps\n}: PhoneInputProps) => {\n  const { t } = useLingui();\n\n  const inputProps = useErrorProps(error);\n  const countryFormatter = new Intl.DisplayNames(['en'], { type: 'region' });\n  const [placeholder, setPlaceholder] = useState(DEFAULT_TEL_PLACEHOLDER);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [phoneValue, setPhoneValue] = useState(phone);\n\n  return (\n    <div className={styles.container}>\n      <select\n        aria-label={t({ id: 'formField.countryCode.label', message: 'Country code' })}\n        className={styles.select}\n        autoComplete=\"tel-country-code\"\n        value={country}\n        onChange={async (e) => {\n          const userInput = e.target.value as CountryCode;\n          setCountry(userInput);\n          inputRef.current?.focus();\n\n          const newPlaceholder = await Promise.race([\n            getExampleNumber(country), //\n            new Promise<undefined>((resolve) => setTimeout(() => resolve(undefined), 100)),\n          ]);\n\n          if (userInput !== e.target.value) return;\n          setPlaceholder(newPlaceholder ?? DEFAULT_TEL_PLACEHOLDER);\n        }}\n      >\n        {Object.entries(COUNTRIES_LIST).map(([code, number]) => (\n          <option key={code} value={code}>\n            {/* Hide the name of the selected country so it doesn't show up in the <select> */}\n            {code !== country ? `+${number} ${countryFormatter.of(code)}` : `+${number}`}\n          </option>\n        ))}\n      </select>\n\n      <Chevron className={styles.chevron} role=\"presentation\" />\n\n      <Input\n        id=\"phone-input\"\n        label={t({ id: 'formField.phone.label', message: 'Phone number' })}\n        hideLabel\n        ref={inputRef}\n        type=\"tel\"\n        autoComplete={hasPasskeys ? 'username webauthn' : 'tel-national'}\n        containerClassName={styles.phone}\n        value={phoneValue}\n        placeholder={placeholder}\n        onChange={async (e) => {\n          const userInput = e.target.value;\n          setPhoneValue(userInput);\n\n          const national = await formatNumber({\n            parsePhoneNumber,\n            phoneNumber: userInput,\n            country,\n          });\n\n          // Disregard stale results\n          if (userInput !== e.target.value) {\n            return;\n          }\n\n          setPhone(national);\n          setPhoneValue(national);\n        }}\n        required\n        {...inputProps.input}\n        // We want to block 1PW's autofill when passkeys is enabled for now\n        // (it is breaking to our integration)\n        {...(hasPasskeys ? passwordManagerDisableAutofillProps : {})}\n        {...additionalProps}\n      />\n\n      {error && (\n        <div className={styles.error}>\n          <ErrorText {...inputProps.error}>{error}</ErrorText>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PhoneInput;\n"],"names":["DEFAULT_TEL_PLACEHOLDER","getPhoneNumberProps","clientsideServices","getExampleNumber","countryCode","getExamplePhoneNumber","regionCode","then","res","phoneNumber","parsePhoneNumber","parsedPhoneNumber","PhoneInput","phone","setPhone","country","setCountry","hasPasskeys","error","additionalProps","useLingui","inputProps","useErrorProps","countryFormatter","Intl","DisplayNames","type","placeholder","setPlaceholder","useState","inputRef","useRef","phoneValue","setPhoneValue","React","div","className","styles","container","select","aria-label","autoComplete","value","onChange","e","userInput","target","current","focus","newPlaceholder","Promise","race","resolve","setTimeout","undefined","Object","entries","COUNTRIES_LIST","map","code","number","option","key","of","Chevron","chevron","role","Input","id","label","hideLabel","ref","containerClassName","national","formatNumber","required","input","passwordManagerDisableAutofillProps","ErrorText"],"mappings":"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"}