Prefill country calling code in onboarding survey

ref DEV-1647
authgear · Aug 20, 2024 · a3a6de1 · a3a6de1
2 parents e332a5f + 2d798be
commit a3a6de1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/portal/src/OnboardingSurveyScreen.tsx b/portal/src/OnboardingSurveyScreen.tsx
@@ -485,6 +485,9 @@ function Step2(_props: StepProps) {
 }
 
 function Step3Team(_props: StepProps) {
+  const { viewer } = useViewerQuery();
+  const { geoIPCountryCode } = viewer ?? {};
+
   const prefix = "step3team";
   const companyNameFromLocalStorage = getFromLocalStorage("company_name");
   const [companyName, setCompanyName] = useState(
@@ -603,6 +606,7 @@ function Step3Team(_props: StepProps) {
               "OnboardingSurveyScreen.step3-team.phone.label"
             )}
             inputValue={companyPhone.rawInputValue}
+            initialCountry={geoIPCountryCode ?? undefined}
             onChange={(v) => setCompanyPhone(v)}
           />
         </FormProvider>

diff --git a/portal/src/PhoneTextField.tsx b/portal/src/PhoneTextField.tsx
@@ -61,7 +61,9 @@ export default class PhoneTextField extends React.Component<PhoneTextFieldProps>
       formatOnDisplay: false,
     };
     if (this.props.initialCountry != null) {
-      options.initialCountry = this.props.initialCountry;
+      // seems IntlTelInputInitOptions.initialCountry must be lowercase
+      // https://github.com/jackocnr/intl-tel-input/blob/c53a32b4f39996d50cde4ffa0df37726e8435ec2/src/spec/tests/options/initialCountry.js#L15
+      options.initialCountry = this.props.initialCountry.toLowerCase();
     }
     if (this.props.allowlist != null) {
       options.onlyCountries = [...this.props.allowlist];