@adminide-stack/yantra-mobile 12.0.74-alpha.0 → 12.0.74-alpha.4

package/lib/features/messaging/RegistrationScreen.js

@@ -1,4 +1,23 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import React__default from'react';import {StyleSheet,Platform,View,TouchableOpacity,Text,ScrollView,ActivityIndicator,TextInput,Modal,FlatList}from'react-native';import {SafeAreaView}from'react-native-safe-area-context';import {Ionicons}from'@expo/vector-icons';import {usePhoneVerification,isChatTestOtpEnabled,CHAT_REGISTRATION_TEST_OTP}from'./usePhoneVerification.js';import {pickerCountries,filterCountries}from'./countryPicker.js';const COUNTRIES = pickerCountries();
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import React__default from'react';import {StyleSheet,Platform,View,TouchableOpacity,Text,ScrollView,ActivityIndicator,Modal,TextInput,FlatList}from'react-native';import {SafeAreaView}from'react-native-safe-area-context';import {Ionicons}from'@expo/vector-icons';import {usePhoneVerification,isChatTestOtpEnabled,CHAT_REGISTRATION_TEST_OTP}from'./usePhoneVerification.js';import {pickerCountries,filterCountries,countryFlag}from'./countryPicker.js';import {sanitizePhoneInput}from'./mobileNumberCheck.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const COUNTRIES = pickerCountries();
 function PhoneRow({
   countryCode,
   callingCode,
@@ -8,36 +27,76 @@ function PhoneRow({
   disabled,
   theme
 }) {
-  var _a;
+  var _a, _b;
+  const [focused, setFocused] = React__default.useState(false);
   return /* @__PURE__ */ jsxs(View, { style: [styles.phoneRow, {
-    flexDirection: "row",
-    alignItems: "center",
-    borderColor: theme.colors.border,
+    borderColor: focused ? theme.colors.primary : theme.colors.border,
+    borderWidth: focused ? 2 : 1,
     backgroundColor: (_a = theme.colors.card) != null ? _a : "#fff"
   }], children: [
     /* @__PURE__ */ jsxs(TouchableOpacity, { onPress: onCountryPress, disabled, style: [styles.countryChip, {
-      flexDirection: "row",
-      alignItems: "center"
-    }], accessibilityRole: "button", accessibilityLabel: "Select country code", children: [
+      backgroundColor: `${theme.colors.primary}12`
+    }], accessibilityRole: "button", accessibilityLabel: `Country code ${callingCode}. Change country`, testID: "chat-registration-country", children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.countryChipFlag, children: countryFlag(countryCode) }),
       /* @__PURE__ */ jsx(Text, { style: [styles.callingCode, {
         color: theme.colors.text
       }], children: callingCode }),
-      /* @__PURE__ */ jsx(Ionicons, { name: "chevron-down", size: 18, color: theme.colors.textSecondary })
+      /* @__PURE__ */ jsx(Ionicons, { name: "chevron-down", size: 16, color: theme.colors.textSecondary })
     ] }),
-    /* @__PURE__ */ jsx(View, { style: [styles.phoneDivider, {
-      backgroundColor: theme.colors.border
-    }] }),
     /* @__PURE__ */ jsx(TextInput, { style: [styles.phoneInput, {
       color: theme.colors.text
-    }], placeholder: "", placeholderTextColor: theme.colors.placeholder, keyboardType: "phone-pad", textContentType: "telephoneNumber", value: phone, onChangeText: onChangePhone, editable: !disabled, maxLength: 15, testID: "chat-registration-phone" })
+    }], placeholder: "Phone number", placeholderTextColor: (_b = theme.colors.placeholder) != null ? _b : theme.colors.textSecondary, keyboardType: "phone-pad", textContentType: "telephoneNumber", autoComplete: "tel", value: phone, onChangeText: (text) => onChangePhone(sanitizePhoneInput(text)), onFocus: () => setFocused(true), onBlur: () => setFocused(false), editable: !disabled, maxLength: 15, autoFocus: true, testID: "chat-registration-phone" })
+  ] });
+}
+function StepIcon({
+  name,
+  color
+}) {
+  return /* @__PURE__ */ jsx(View, { style: [styles.stepIcon, {
+    backgroundColor: `${color}1A`
+  }], children: /* @__PURE__ */ jsx(Ionicons, { name, size: 30, color }) });
+}
+const OTP_LENGTH = 6;
+const RESEND_COOLDOWN_SECONDS = 30;
+function OtpCodeInput({
+  value,
+  onChange,
+  disabled,
+  hasError,
+  theme
+}) {
+  const inputRef = React__default.useRef(null);
+  const [focused, setFocused] = React__default.useState(false);
+  const digits = value.replace(/\D/g, "").slice(0, OTP_LENGTH);
+  const accent = theme.colors.primary;
+  return /* @__PURE__ */ jsxs(View, { style: styles.otpRow, children: [
+    Array.from({
+      length: OTP_LENGTH
+    }, (_, i) => {
+      var _a;
+      const active = focused && !disabled && i === Math.min(digits.length, OTP_LENGTH - 1);
+      const filled = i < digits.length;
+      const borderColor = hasError ? theme.colors.error : active ? accent : filled ? theme.colors.text : theme.colors.border;
+      return /* @__PURE__ */ jsx(View, { style: [styles.otpCell, {
+        borderColor,
+        borderWidth: active || hasError ? 2 : 1,
+        backgroundColor: (_a = theme.colors.card) != null ? _a : "#fff"
+      }], children: filled ? /* @__PURE__ */ jsx(Text, { style: [styles.otpDigit, {
+        color: theme.colors.text
+      }], children: digits[i] }) : active ? /* @__PURE__ */ jsx(View, { style: [styles.otpCaret, {
+        backgroundColor: accent
+      }] }) : null }, i);
+    }),
+    /* @__PURE__ */ jsx(TextInput, { ref: inputRef, value: digits, onChangeText: (text) => onChange(text.replace(/\D/g, "").slice(0, OTP_LENGTH)), onFocus: () => setFocused(true), onBlur: () => setFocused(false), editable: !disabled, keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: Platform.OS === "android" ? "sms-otp" : "one-time-code", autoFocus: true, maxLength: OTP_LENGTH, caretHidden: true, style: styles.otpHiddenInput, accessibilityLabel: "Verification code", testID: "chat-registration-otp" })
   ] });
 }
 function RegistrationScreen({
   onRegistrationComplete,
   theme,
-  testID
+  testID,
+  onClose
 }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const phoneVerification = usePhoneVerification("US");
   const selectedCountry = COUNTRIES.find((c) => c.code === phoneVerification.countryCode) || COUNTRIES[0];
   const [countryModalOpen, setCountryModalOpen] = React__default.useState(false);
@@ -65,17 +124,50 @@ function RegistrationScreen({
   const handleBack = React__default.useCallback(() => {
     if (phoneVerification.stage === "otp") {
       phoneVerification.resetToInput();
+      return;
     }
-  }, [phoneVerification]);
+    onClose == null ? void 0 : onClose();
+  }, [phoneVerification, onClose]);
+  const [resendIn, setResendIn] = React__default.useState(0);
+  React__default.useEffect(() => {
+    if (resendIn <= 0) return void 0;
+    const timer = setTimeout(() => setResendIn((s) => s - 1), 1e3);
+    return () => clearTimeout(timer);
+  }, [resendIn]);
   const handleSendOtp = React__default.useCallback(async () => {
-    await phoneVerification.sendOtp();
+    if (await phoneVerification.sendOtp()) setResendIn(RESEND_COOLDOWN_SECONDS);
   }, [phoneVerification]);
   const handleVerifyOtp = React__default.useCallback(async () => {
     await phoneVerification.verifyOtp();
   }, [phoneVerification]);
   const handleResend = React__default.useCallback(async () => {
-    await phoneVerification.sendOtp();
+    if (await phoneVerification.sendOtp()) setResendIn(RESEND_COOLDOWN_SECONDS);
   }, [phoneVerification]);
+  const autoVerifiedFor = React__default.useRef("");
+  React__default.useEffect(() => {
+    if (phoneVerification.stage !== "otp" || usingTestOtp || phoneVerification.loading) return;
+    if (otpDigits.length !== OTP_LENGTH || autoVerifiedFor.current === otpDigits) return;
+    autoVerifiedFor.current = otpDigits;
+    void phoneVerification.verifyOtp();
+  }, [otpDigits, phoneVerification, usingTestOtp]);
+  const renderCountryRow = (country) => {
+    const selected = phoneVerification.countryCode === country.code;
+    return /* @__PURE__ */ jsxs(TouchableOpacity, { onPress: () => {
+      phoneVerification.setCountryCode(country.code);
+      closeCountryModal();
+    }, style: styles.countryListItem, accessibilityRole: "button", accessibilityState: {
+      selected
+    }, accessibilityLabel: `${country.name} ${country.callingCode}`, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.countryFlag, children: countryFlag(country.code) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.countryListText, {
+        color: theme.colors.text
+      }, selected && styles.countrySelected], numberOfLines: 1, children: country.name }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.countryDial, {
+        color: theme.colors.textSecondary
+      }], children: country.callingCode }),
+      /* @__PURE__ */ jsx(View, { style: styles.countryCheck, children: selected ? /* @__PURE__ */ jsx(Ionicons, { name: "checkmark-circle", size: 22, color: accent }) : null })
+    ] });
+  };
   return /* @__PURE__ */ jsxs(SafeAreaView, { style: [styles.container, {
     backgroundColor: theme.colors.background
   }], edges: ["top", "left", "right"], testID, children: [
@@ -83,12 +175,12 @@ function RegistrationScreen({
       flexDirection: "row",
       alignItems: "center"
     }], children: [
-      phoneVerification.stage === "otp" ? /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleBack, hitSlop: {
+      phoneVerification.stage === "otp" || onClose ? /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleBack, hitSlop: {
         top: 10,
         bottom: 10,
         left: 10,
         right: 10
-      }, children: /* @__PURE__ */ jsx(Ionicons, { name: "chevron-back", size: 28, color: theme.colors.text }) }) : /* @__PURE__ */ jsx(View, { style: {
+      }, accessibilityRole: "button", accessibilityLabel: phoneVerification.stage === "otp" ? "Change phone number" : "Back", testID: "chat-registration-back", children: /* @__PURE__ */ jsx(Ionicons, { name: "chevron-back", size: 28, color: theme.colors.text }) }) : /* @__PURE__ */ jsx(View, { style: {
         width: 28
       } }),
       /* @__PURE__ */ jsx(Text, { style: [styles.title, {
@@ -101,14 +193,18 @@ function RegistrationScreen({
       } })
     ] }),
     /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.content, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: phoneVerification.stage === "input" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(StepIcon, { name: "chatbubbles", color: accent }),
       /* @__PURE__ */ jsx(Text, { style: [styles.subtitle, {
         color: theme.colors.text
-      }], children: "Register to Chat" }),
+      }], children: "Enter your phone number" }),
       /* @__PURE__ */ jsx(Text, { style: [styles.description, {
         color: theme.colors.textSecondary
-      }], children: "Enter your mobile number to get started. You'll receive an OTP to verify." }),
+      }], children: "Yantra Chat will send you a text with a 6-digit code to verify your number." }),
       /* @__PURE__ */ jsxs(View, { style: styles.form, children: [
-        /* @__PURE__ */ jsx(PhoneRow, { countryCode: phoneVerification.countryCode, callingCode: selectedCountry.callingCode, phone: phoneVerification.inputPhone, onCountryPress: () => setCountryModalOpen(true), onChangePhone: phoneVerification.setInputPhone, disabled: phoneVerification.loading, theme }),
+        /* @__PURE__ */ jsx(PhoneRow, { countryCode: phoneVerification.countryCode, callingCode: selectedCountry.callingCode, phone: phoneVerification.inputPhone, onCountryPress: () => setCountryModalOpen(true), onChangePhone: (value) => {
+          if (phoneVerification.error) phoneVerification.clearError();
+          phoneVerification.setInputPhone(value);
+        }, disabled: phoneVerification.loading, theme }),
         phoneVerification.error ? /* @__PURE__ */ jsxs(View, { style: [styles.errorBox, {
           backgroundColor: `${theme.colors.error}10`
         }], children: [
@@ -117,30 +213,49 @@ function RegistrationScreen({
             color: theme.colors.error
           }], children: phoneVerification.error })
         ] }) : null,
-        testOtpEnabled ? /* @__PURE__ */ jsx(TouchableOpacity, { onPress: phoneVerification.continueWithTestOtp, children: /* @__PURE__ */ jsx(Text, { style: [styles.linkText, {
-          color: accent
-        }], children: "Continue with test OTP" }) }) : null,
         /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleSendOtp, disabled: phoneVerification.loading || !phoneVerification.inputPhone.trim(), style: [styles.button, {
-          backgroundColor: phoneVerification.inputPhone.trim() ? accent : theme.colors.border
-        }], children: phoneVerification.loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#fff", size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.buttonText, children: "Send OTP" }) })
+          backgroundColor: accent,
+          opacity: phoneVerification.inputPhone.trim() || phoneVerification.loading ? 1 : 0.4
+        }], children: phoneVerification.loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#fff", size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.buttonText, children: "Send code" }) }),
+        testOtpEnabled ? /* @__PURE__ */ jsxs(TouchableOpacity, { onPress: phoneVerification.continueWithTestOtp, style: [styles.testOtpChip, {
+          borderColor: theme.colors.border
+        }], children: [
+          /* @__PURE__ */ jsx(Ionicons, { name: "flask-outline", size: 14, color: theme.colors.textSecondary }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.testOtpText, {
+            color: theme.colors.textSecondary
+          }], children: "Continue with test OTP" })
+        ] }) : null
       ] })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(StepIcon, { name: "shield-checkmark", color: accent }),
       /* @__PURE__ */ jsx(Text, { style: [styles.subtitle, {
         color: theme.colors.text
       }], children: "Verify your number" }),
-      /* @__PURE__ */ jsx(Text, { style: [styles.description, {
+      usingTestOtp ? /* @__PURE__ */ jsxs(Text, { style: [styles.description, {
+        color: theme.colors.textSecondary
+      }], children: [
+        "Test mode: use code ",
+        CHAT_REGISTRATION_TEST_OTP,
+        " and tap Continue."
+      ] }) : /* @__PURE__ */ jsxs(Text, { style: [styles.description, {
         color: theme.colors.textSecondary
-      }], children: usingTestOtp ? `Test mode: use code ${CHAT_REGISTRATION_TEST_OTP} and tap Continue.` : `Enter the 6-digit code sent to ${selectedCountry.callingCode} ${phoneVerification.inputPhone}` }),
+      }], children: [
+        "Enter the 6-digit code we sent to",
+        "\n",
+        /* @__PURE__ */ jsxs(Text, { style: [styles.phoneStrong, {
+          color: theme.colors.text
+        }], children: [
+          selectedCountry.callingCode,
+          " ",
+          phoneVerification.inputPhone
+        ] }),
+        "  ",
+        /* @__PURE__ */ jsx(Text, { style: [styles.inlineLink, {
+          color: accent
+        }], onPress: phoneVerification.loading ? void 0 : phoneVerification.resetToInput, accessibilityRole: "link", children: "Wrong number?" })
+      ] }),
       /* @__PURE__ */ jsxs(View, { style: styles.form, children: [
-        /* @__PURE__ */ jsx(View, { style: [styles.otpInputContainer, {
-          flexDirection: "row",
-          alignItems: "center",
-          borderColor: theme.colors.border,
-          backgroundColor: (_a = theme.colors.card) != null ? _a : "#fff"
-        }], children: /* @__PURE__ */ jsx(TextInput, { style: [styles.otpInput, {
-          color: theme.colors.text,
-          flex: 1
-        }], placeholder: "", keyboardType: "number-pad", value: phoneVerification.otp, onChangeText: phoneVerification.setOtp, editable: !phoneVerification.loading, maxLength: 6, testID: "chat-registration-otp" }) }),
+        /* @__PURE__ */ jsx(OtpCodeInput, { value: phoneVerification.otp, onChange: phoneVerification.setOtp, disabled: phoneVerification.loading, hasError: Boolean(phoneVerification.error), theme }),
         phoneVerification.error ? /* @__PURE__ */ jsxs(View, { style: [styles.errorBox, {
           backgroundColor: `${theme.colors.error}10`
         }], children: [
@@ -149,61 +264,75 @@ function RegistrationScreen({
             color: theme.colors.error
           }], children: phoneVerification.error })
         ] }) : null,
-        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleVerifyOtp, disabled: phoneVerification.loading || otpDigits.length < 6, style: [styles.button, {
-          backgroundColor: otpDigits.length >= 6 ? accent : theme.colors.border
-        }], children: phoneVerification.loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#fff", size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.buttonText, children: usingTestOtp ? "Continue" : "Verify & Register" }) }),
-        !usingTestOtp ? /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleResend, disabled: phoneVerification.loading, children: /* @__PURE__ */ jsx(Text, { style: [styles.linkText, {
-          color: accent
-        }], children: "Didn't get the code? Resend" }) }) : null
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleVerifyOtp, disabled: phoneVerification.loading || otpDigits.length < OTP_LENGTH, style: [styles.button, {
+          backgroundColor: accent,
+          opacity: otpDigits.length >= OTP_LENGTH || phoneVerification.loading ? 1 : 0.4
+        }], children: phoneVerification.loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#fff", size: "small" }) : /* @__PURE__ */ jsx(Text, { style: styles.buttonText, children: usingTestOtp ? "Continue" : "Verify" }) }),
+        !usingTestOtp ? /* @__PURE__ */ jsxs(View, { style: styles.resendRow, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.resendHint, {
+            color: theme.colors.textSecondary
+          }], children: "Didn't get the code?" }),
+          resendIn > 0 ? /* @__PURE__ */ jsxs(Text, { style: [styles.resendHint, {
+            color: theme.colors.textSecondary
+          }], children: [
+            "Resend in 0:",
+            String(resendIn).padStart(2, "0")
+          ] }) : /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleResend, disabled: phoneVerification.loading, hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8
+          }, children: /* @__PURE__ */ jsx(Text, { style: [styles.inlineLink, {
+            color: accent
+          }], children: "Resend code" }) })
+        ] }) : null
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Modal, { visible: countryModalOpen, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: closeCountryModal, children: /* @__PURE__ */ jsxs(SafeAreaView, { style: [styles.modalFill, {
       backgroundColor: theme.colors.background
     }], children: [
-      /* @__PURE__ */ jsxs(View, { style: [styles.modalHeader, {
-        flexDirection: "row",
-        alignItems: "center"
-      }], children: [
+      /* @__PURE__ */ jsx(View, { style: styles.modalHandle, children: /* @__PURE__ */ jsx(View, { style: [styles.modalHandleBar, {
+        backgroundColor: theme.colors.border
+      }] }) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.modalHeader, children: [
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: closeCountryModal, accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: {
+          top: 10,
+          bottom: 10,
+          left: 10,
+          right: 10
+        }, style: [styles.modalClose, {
+          backgroundColor: `${theme.colors.text}0D`
+        }], children: /* @__PURE__ */ jsx(Ionicons, { name: "close", size: 20, color: theme.colors.text }) }),
         /* @__PURE__ */ jsx(Text, { style: [styles.modalTitle, {
           color: theme.colors.text
-        }], children: "Country code" }),
-        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: closeCountryModal, accessibilityRole: "button", accessibilityLabel: "Close", children: /* @__PURE__ */ jsx(Ionicons, { name: "close", size: 26, color: theme.colors.text }) })
+        }], children: "Choose a country" }),
+        /* @__PURE__ */ jsx(View, { style: styles.modalClose })
       ] }),
       /* @__PURE__ */ jsxs(View, { style: [styles.countrySearch, {
-        borderColor: theme.colors.border,
-        backgroundColor: (_b = theme.colors.card) != null ? _b : "#fff"
+        backgroundColor: `${theme.colors.text}0D`
       }], children: [
-        /* @__PURE__ */ jsx(Ionicons, { name: "search", size: 18, color: (_c = theme.colors.textSecondary) != null ? _c : theme.colors.text }),
-        /* @__PURE__ */ jsx(TextInput, { value: countryQuery, onChangeText: setCountryQuery, placeholder: "Search country or code", placeholderTextColor: (_d = theme.colors.textSecondary) != null ? _d : "#888", autoCorrect: false, autoCapitalize: "none", clearButtonMode: "while-editing", style: [styles.countrySearchInput, {
+        /* @__PURE__ */ jsx(Ionicons, { name: "search", size: 18, color: (_a = theme.colors.textSecondary) != null ? _a : theme.colors.text }),
+        /* @__PURE__ */ jsx(TextInput, { value: countryQuery, onChangeText: setCountryQuery, placeholder: "Search countries", placeholderTextColor: (_b = theme.colors.textSecondary) != null ? _b : "#888", autoCorrect: false, autoCapitalize: "none", clearButtonMode: "while-editing", returnKeyType: "search", style: [styles.countrySearchInput, {
           color: theme.colors.text
         }], testID: "country-search" })
       ] }),
-      /* @__PURE__ */ jsx(FlatList, { data: visibleCountries, keyExtractor: (country) => country.code, keyboardShouldPersistTaps: "handled", initialNumToRender: 24, ListEmptyComponent: /* @__PURE__ */ jsxs(Text, { style: [styles.countryEmpty, {
-        color: (_e = theme.colors.textSecondary) != null ? _e : theme.colors.text
+      /* @__PURE__ */ jsx(FlatList, { data: visibleCountries, keyExtractor: (country) => country.code, keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", initialNumToRender: 24, ListHeaderComponent: countryQuery.trim() ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.countrySection, {
+          color: theme.colors.textSecondary
+        }], children: "SELECTED" }),
+        renderCountryRow(selectedCountry),
+        /* @__PURE__ */ jsx(Text, { style: [styles.countrySection, {
+          color: theme.colors.textSecondary
+        }], children: "ALL COUNTRIES" })
+      ] }), ListEmptyComponent: /* @__PURE__ */ jsxs(Text, { style: [styles.countryEmpty, {
+        color: (_c = theme.colors.textSecondary) != null ? _c : theme.colors.text
       }], children: [
         'No country matches "',
         countryQuery.trim(),
         '"'
       ] }), renderItem: ({
         item: country
-      }) => /* @__PURE__ */ jsxs(TouchableOpacity, { onPress: () => {
-        phoneVerification.setCountryCode(country.code);
-        closeCountryModal();
-      }, style: [styles.countryListItem, phoneVerification.countryCode === country.code && {
-        backgroundColor: `${accent}18`
-      }], accessibilityRole: "button", accessibilityState: {
-        selected: phoneVerification.countryCode === country.code
-      }, children: [
-        /* @__PURE__ */ jsxs(Text, { style: [styles.countryListText, {
-          color: theme.colors.text
-        }], children: [
-          country.name,
-          " (",
-          country.callingCode,
-          ")"
-        ] }),
-        phoneVerification.countryCode === country.code ? /* @__PURE__ */ jsx(Ionicons, { name: "checkmark", size: 20, color: accent }) : null
-      ] }) })
+      }) => renderCountryRow(country) })
     ] }) })
   ] });
 }
@@ -225,57 +354,121 @@ const styles = StyleSheet.create({
     paddingBottom: 40
   },
   subtitle: {
-    fontSize: 22,
+    fontSize: 26,
     fontWeight: "700",
+    letterSpacing: -0.4,
     marginBottom: 8
   },
   description: {
-    fontSize: 14,
-    marginBottom: 24,
-    lineHeight: 20
+    fontSize: 15,
+    marginBottom: 28,
+    lineHeight: 22
+  },
+  stepIcon: {
+    width: 60,
+    height: 60,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 20
   },
   form: {
     gap: 14
   },
   phoneRow: {
-    borderWidth: 1,
-    borderRadius: 10,
-    minHeight: 48,
-    overflow: "hidden"
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 14,
+    minHeight: 56,
+    padding: 5,
+    gap: 6
   },
   countryChip: {
-    paddingHorizontal: 12,
-    paddingVertical: 12
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    alignSelf: "stretch"
+  },
+  countryChipFlag: {
+    fontSize: 22
   },
   callingCode: {
     fontSize: 16,
-    fontWeight: "600",
-    marginRight: 4
-  },
-  phoneDivider: {
-    width: StyleSheet.hairlineWidth,
-    alignSelf: "stretch"
+    fontWeight: "600"
   },
   phoneInput: {
     flex: 1,
-    paddingHorizontal: 12,
-    paddingVertical: Platform.OS === "ios" ? 12 : 10,
-    fontSize: 16
+    paddingHorizontal: 8,
+    paddingVertical: Platform.OS === "ios" ? 12 : 8,
+    fontSize: 18,
+    letterSpacing: 0.3
   },
-  otpInputContainer: {
+  testOtpChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "center",
+    gap: 6,
     borderWidth: 1,
-    borderRadius: 10,
-    paddingHorizontal: 16
+    borderStyle: "dashed",
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    marginTop: 8
   },
-  otpInput: {
-    paddingVertical: 14,
-    fontSize: 22,
-    fontWeight: "600",
-    letterSpacing: 6,
-    textAlign: "center"
+  testOtpText: {
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  otpRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: 8
+  },
+  otpCell: {
+    flex: 1,
+    maxWidth: 52,
+    aspectRatio: 0.85,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  otpDigit: {
+    fontSize: 24,
+    fontWeight: "600"
+  },
+  otpCaret: {
+    width: 2,
+    height: 26,
+    borderRadius: 1
+  },
+  // Covers the boxes so a tap anywhere focuses it; near-zero opacity keeps iOS code autofill working.
+  otpHiddenInput: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    opacity: 0.011,
+    color: "transparent",
+    fontSize: 1
+  }),
+  phoneStrong: {
+    fontWeight: "600"
+  },
+  inlineLink: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  resendRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 6,
+    marginTop: 4
+  },
+  resendHint: {
+    fontSize: 14
   },
   button: {
-    borderRadius: 10,
+    borderRadius: 14,
+    minHeight: 54,
     paddingVertical: 14,
     alignItems: "center",
     justifyContent: "center",
@@ -283,13 +476,13 @@ const styles = StyleSheet.create({
   },
   buttonText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: 17,
     fontWeight: "600"
   },
   errorBox: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 8,
+    borderRadius: 12,
     paddingHorizontal: 12,
     paddingVertical: 10,
     gap: 8
@@ -298,23 +491,44 @@ const styles = StyleSheet.create({
     fontSize: 13,
     flex: 1
   },
-  linkText: {
-    fontSize: 14,
-    textAlign: "center",
-    fontWeight: "500"
-  },
   modalFill: {
     flex: 1
   },
+  modalHandle: {
+    alignItems: "center",
+    paddingTop: 8
+  },
+  modalHandleBar: {
+    width: 36,
+    height: 5,
+    borderRadius: 3
+  },
+  modalHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  modalClose: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  modalTitle: {
+    fontSize: 17,
+    fontWeight: "700"
+  },
   countrySearch: {
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
     marginHorizontal: 16,
-    marginBottom: 8,
+    marginBottom: 4,
     paddingHorizontal: 12,
-    borderWidth: 1,
-    borderRadius: 10,
+    borderRadius: 12,
     minHeight: 42
   },
   countrySearchInput: {
@@ -327,25 +541,40 @@ const styles = StyleSheet.create({
     padding: 24,
     fontSize: 14
   },
-  modalHeader: {
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12
-  },
-  modalTitle: {
-    fontSize: 18,
-    fontWeight: "700"
+  countrySection: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.6,
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 6
   },
   countryListItem: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "rgba(0,0,0,0.06)"
+    gap: 14,
+    paddingHorizontal: 20,
+    minHeight: 52
+  },
+  countryFlag: {
+    fontSize: 26,
+    width: 32,
+    textAlign: "center"
   },
   countryListText: {
+    flex: 1,
     fontSize: 16
+  },
+  countrySelected: {
+    fontWeight: "600"
+  },
+  countryDial: {
+    fontSize: 15,
+    minWidth: 48,
+    textAlign: "right"
+  },
+  countryCheck: {
+    width: 22,
+    alignItems: "center"
   }
 });export{RegistrationScreen};//# sourceMappingURL=RegistrationScreen.js.map