@quantaroute/checkout 1.1.0 → 1.2.0

package/src/components/AddressForm.native.tsx

@@ -0,0 +1,540 @@
+import React, { useEffect, useReducer, useCallback, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  Modal,
+  FlatList,
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { lookupLocation, reverseGeocode, type AddressComponents } from '../core/api';
+import type {
+  AddressFormProps,
+  AdministrativeInfo,
+  CompleteAddress,
+  LocationAlternative,
+} from '../core/types';
+import { styles, COLORS } from '../styles/checkout.native';
+
+// ─── State (identical logic to web AddressForm) ───────────────────────────────
+
+interface ManualFields {
+  flatNumber: string;
+  floorNumber: string;
+  buildingName: string;
+  streetName: string;
+}
+
+type FormState =
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | {
+      status: 'ready';
+      adminInfo: AdministrativeInfo;
+      alternatives: LocationAlternative[];
+      selectedLocality: string;
+      fields: ManualFields;
+      submitting: boolean;
+    };
+
+type FormAction =
+  | { type: 'LOAD_START' }
+  | {
+      type: 'LOAD_SUCCESS';
+      adminInfo: AdministrativeInfo;
+      alternatives: LocationAlternative[];
+      addressComponents: AddressComponents;
+    }
+  | { type: 'LOAD_ERROR'; message: string }
+  | { type: 'SET_FIELD'; key: keyof ManualFields; value: string }
+  | { type: 'SET_LOCALITY'; locality: string }
+  | { type: 'SUBMIT_START' }
+  | { type: 'SUBMIT_END' };
+
+const INITIAL_FIELDS: ManualFields = {
+  flatNumber: '',
+  floorNumber: '',
+  buildingName: '',
+  streetName: '',
+};
+
+function parseAddressComponents(components: AddressComponents): Partial<ManualFields> {
+  const fields: Partial<ManualFields> = {};
+
+  if (components.name) {
+    fields.buildingName = components.name;
+  } else if (components.building_name) {
+    fields.buildingName = components.building_name;
+  } else if (components.addr_housename) {
+    fields.buildingName = components.addr_housename;
+  }
+
+  const streetParts: string[] = [];
+  if (components.road) streetParts.push(components.road);
+  if (components.suburb) streetParts.push(components.suburb);
+  if (streetParts.length > 0) {
+    fields.streetName = streetParts.join(', ');
+  }
+
+  return fields;
+}
+
+function reducer(state: FormState, action: FormAction): FormState {
+  switch (action.type) {
+    case 'LOAD_START':
+      return { status: 'loading' };
+    case 'LOAD_SUCCESS': {
+      const preFilled = parseAddressComponents(action.addressComponents);
+      return {
+        status: 'ready',
+        adminInfo: action.adminInfo,
+        alternatives: action.alternatives || [],
+        selectedLocality: action.adminInfo.locality,
+        fields: { ...INITIAL_FIELDS, ...preFilled },
+        submitting: false,
+      };
+    }
+    case 'LOAD_ERROR':
+      return { status: 'error', message: action.message };
+    case 'SET_FIELD':
+      if (state.status !== 'ready') return state;
+      return { ...state, fields: { ...state.fields, [action.key]: action.value } };
+    case 'SET_LOCALITY':
+      if (state.status !== 'ready') return state;
+      return { ...state, selectedLocality: action.locality };
+    case 'SUBMIT_START':
+      if (state.status !== 'ready') return state;
+      return { ...state, submitting: true };
+    case 'SUBMIT_END':
+      if (state.status !== 'ready') return state;
+      return { ...state, submitting: false };
+    default:
+      return state;
+  }
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Native (iOS/Android) address form — identical business logic to web AddressForm.tsx,
+ * rewritten with React Native primitives (TextInput, ScrollView, Modal picker).
+ * Metro resolves this file on native; AddressForm.tsx is used on web.
+ */
+const AddressForm: React.FC<AddressFormProps> = ({
+  digipin,
+  lat,
+  lng,
+  apiKey,
+  apiBaseUrl,
+  onAddressComplete,
+  onBack,
+  onError,
+  theme = 'light',
+}) => {
+  const [state, dispatch] = useReducer(reducer, { status: 'loading' });
+  const [showLocalityPicker, setShowLocalityPicker] = useState(false);
+  const [focusedField, setFocusedField] = useState<keyof ManualFields | null>(null);
+
+  const isDark = theme === 'dark';
+
+  // ── Fetch administrative data ──────────────────────────────────────────────
+  const fetchAdminInfo = useCallback(async () => {
+    dispatch({ type: 'LOAD_START' });
+    try {
+      const [adminRes, reverseRes] = await Promise.all([
+        lookupLocation(lat, lng, apiKey, apiBaseUrl),
+        reverseGeocode(digipin, apiKey, apiBaseUrl),
+      ]);
+
+      dispatch({
+        type: 'LOAD_SUCCESS',
+        adminInfo: adminRes.data.administrative_info,
+        alternatives: adminRes.data.alternatives || [],
+        addressComponents: reverseRes.data.addressComponents,
+      });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Failed to fetch address data.';
+      dispatch({ type: 'LOAD_ERROR', message: msg });
+      onError?.(err instanceof Error ? err : new Error(msg));
+    }
+  }, [digipin, lat, lng, apiKey, apiBaseUrl, onError]);
+
+  useEffect(() => {
+    void fetchAdminInfo();
+  }, [fetchAdminInfo]);
+
+  // ── Submit ────────────────────────────────────────────────────────────────
+  const handleSubmit = useCallback(() => {
+    if (state.status !== 'ready') return;
+    if (!state.fields.flatNumber.trim()) return;
+
+    const { adminInfo, selectedLocality, fields } = state;
+
+    const parts: string[] = [
+      fields.flatNumber,
+      fields.floorNumber ? `Floor ${fields.floorNumber}` : '',
+      fields.buildingName,
+      fields.streetName,
+      selectedLocality,
+      adminInfo.district,
+      adminInfo.state,
+      adminInfo.pincode,
+    ].filter(Boolean);
+
+    const complete: CompleteAddress = {
+      digipin,
+      lat,
+      lng,
+      state: adminInfo.state,
+      district: adminInfo.district,
+      division: adminInfo.division,
+      locality: selectedLocality,
+      pincode: adminInfo.pincode,
+      delivery: adminInfo.delivery,
+      country: adminInfo.country ?? 'India',
+      ...fields,
+      formattedAddress: parts.join(', '),
+    };
+
+    dispatch({ type: 'SUBMIT_START' });
+    try {
+      onAddressComplete(complete);
+    } finally {
+      dispatch({ type: 'SUBMIT_END' });
+    }
+  }, [state, digipin, lat, lng, onAddressComplete]);
+
+  // ─── Field input helper ────────────────────────────────────────────────────
+  const renderField = (
+    key: keyof ManualFields,
+    label: string,
+    placeholder: string,
+    required = false
+  ) => (
+    <View style={state.status === 'ready' ? undefined : { opacity: 0 }}>
+      <View style={styles.fieldLabel}>
+        <Text style={[styles.fieldLabelText, isDark && styles.fieldLabelTextDark]}>
+          {label}
+        </Text>
+        {required ? (
+          <Text style={styles.fieldRequired}>*</Text>
+        ) : (
+          <Text style={[styles.fieldOptional, isDark && styles.fieldOptionalDark]}>
+            optional
+          </Text>
+        )}
+      </View>
+      <TextInput
+        style={[
+          styles.fieldInput,
+          isDark && styles.fieldInputDark,
+          focusedField === key && styles.fieldInputFocused,
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={isDark ? COLORS.textFaintDark : COLORS.textFaint}
+        value={state.status === 'ready' ? state.fields[key] : ''}
+        onChangeText={(value) =>
+          state.status === 'ready' &&
+          dispatch({ type: 'SET_FIELD', key, value })
+        }
+        onFocus={() => setFocusedField(key)}
+        onBlur={() => setFocusedField(null)}
+        autoCapitalize="words"
+        returnKeyType="next"
+      />
+    </View>
+  );
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={{ flex: 1 }}
+    >
+      <ScrollView
+        style={[{ flex: 1 }, isDark && { backgroundColor: COLORS.bgDark }]}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ── Step header ── */}
+        <View style={[styles.stepHeader, isDark && styles.stepHeaderDark]}>
+          <TouchableOpacity
+            style={[styles.backBtn, isDark && styles.backBtnDark]}
+            onPress={onBack}
+            accessibilityLabel="Back to map"
+            accessibilityRole="button"
+          >
+            <Text style={[styles.backBtnText, isDark && styles.backBtnTextDark]}>←</Text>
+          </TouchableOpacity>
+          <View style={styles.stepBadge}>
+            <Text style={styles.stepBadgeText}>2</Text>
+          </View>
+          <View style={styles.stepText}>
+            <Text style={[styles.stepTitle, isDark && styles.textLight]}>
+              Add Address Details
+            </Text>
+            <Text style={[styles.stepSub, isDark && styles.textMutedStyle]}>
+              Flat number and building info
+            </Text>
+          </View>
+        </View>
+
+        {/* ── DigiPin reference strip ── */}
+        <View style={[styles.formDigipinStrip, isDark && styles.formDigipinStripDark]}>
+          <Text style={styles.formDigipinStripIcon}>📍</Text>
+          <Text style={styles.formDigipinStripLabel}>DigiPin</Text>
+          <Text style={styles.formDigipinStripCode}>{digipin}</Text>
+        </View>
+
+        {/* ── Loading state ── */}
+        {state.status === 'loading' ? (
+          <View style={styles.loadingState} accessibilityLabel="Fetching address details">
+            <ActivityIndicator size="large" color={COLORS.primary} />
+            <Text style={[styles.loadingText, isDark && styles.loadingTextDark]}>
+              Fetching address details…
+            </Text>
+          </View>
+        ) : null}
+
+        {/* ── Error state ── */}
+        {state.status === 'error' ? (
+          <View style={styles.errorState} accessibilityRole="alert">
+            <Text style={styles.errorIcon}>⚠</Text>
+            <Text style={[styles.errorMsg, isDark && styles.errorMsgDark]}>
+              {state.message}
+            </Text>
+            <TouchableOpacity
+              style={styles.btnSecondary}
+              onPress={() => void fetchAdminInfo()}
+              activeOpacity={0.8}
+            >
+              <Text style={styles.btnSecondaryText}>Retry</Text>
+            </TouchableOpacity>
+          </View>
+        ) : null}
+
+        {/* ── Main form ── */}
+        {state.status === 'ready' ? (
+          <View>
+            {/* Auto-detected section */}
+            <View style={[styles.sectionDivider, isDark && styles.sectionDividerDark]} />
+            <View style={styles.sectionHeader}>
+              <Text style={styles.sectionHeaderIcon}>📍</Text>
+              <Text style={[styles.sectionHeaderText, isDark && styles.sectionHeaderTextDark]}>
+                Auto-detected from your pin
+              </Text>
+            </View>
+
+            <View style={styles.autoGrid}>
+              {/* State & District in a row */}
+              <View style={styles.autoRowsRow}>
+                <View style={[styles.autoRow, styles.autoRowHalf]}>
+                  <Text style={[styles.autoRowLabel, isDark && styles.autoRowLabelDark]}>
+                    State
+                  </Text>
+                  <Text style={[styles.autoRowValue, isDark && styles.autoRowValueDark]}>
+                    {state.adminInfo.state}
+                  </Text>
+                </View>
+                <View style={[styles.autoRow, styles.autoRowHalf]}>
+                  <Text style={[styles.autoRowLabel, isDark && styles.autoRowLabelDark]}>
+                    District
+                  </Text>
+                  <Text style={[styles.autoRowValue, isDark && styles.autoRowValueDark]}>
+                    {state.adminInfo.district}
+                  </Text>
+                </View>
+              </View>
+
+              {/* Locality */}
+              <View style={styles.autoRow}>
+                <Text style={[styles.autoRowLabel, isDark && styles.autoRowLabelDark]}>
+                  Locality
+                </Text>
+                {state.alternatives.length > 0 ? (
+                  <TouchableOpacity
+                    style={[
+                      styles.localitySelector,
+                      isDark && styles.localitySelectorDark,
+                    ]}
+                    onPress={() => setShowLocalityPicker(true)}
+                    activeOpacity={0.8}
+                    accessibilityRole="button"
+                    accessibilityLabel="Select locality"
+                  >
+                    <Text
+                      style={[
+                        styles.localitySelectorText,
+                        isDark && styles.localitySelectorTextDark,
+                      ]}
+                      numberOfLines={1}
+                    >
+                      {state.selectedLocality}
+                    </Text>
+                    <Text style={styles.localitySelectorArrow}>▼</Text>
+                  </TouchableOpacity>
+                ) : (
+                  <Text style={[styles.autoRowValue, isDark && styles.autoRowValueDark]}>
+                    {state.selectedLocality}
+                  </Text>
+                )}
+              </View>
+
+              {/* Pincode */}
+              <View style={styles.autoRow}>
+                <Text style={[styles.autoRowLabel, isDark && styles.autoRowLabelDark]}>
+                  Pincode
+                </Text>
+                <Text style={styles.autoRowValuePincode}>{state.adminInfo.pincode}</Text>
+              </View>
+            </View>
+
+            {/* Manual entry section */}
+            <View style={[styles.sectionDivider, isDark && styles.sectionDividerDark]} />
+            <View style={styles.sectionHeader}>
+              <Text style={styles.sectionHeaderIcon}>🏠</Text>
+              <Text style={[styles.sectionHeaderText, isDark && styles.sectionHeaderTextDark]}>
+                Your details
+              </Text>
+            </View>
+
+            <View style={styles.fieldsGrid}>
+              {/* Flat / House – required */}
+              <View style={styles.fieldFull}>
+                {renderField(
+                  'flatNumber',
+                  'Flat / House Number',
+                  'e.g. 4B, Flat 201, House No. 12',
+                  true
+                )}
+              </View>
+
+              {/* Floor + Building in a row */}
+              <View style={styles.fieldRow}>
+                <View style={styles.field}>
+                  {renderField('floorNumber', 'Floor', 'e.g. 3rd, Ground')}
+                </View>
+                <View style={styles.field}>
+                  {renderField('buildingName', 'Building / Society', 'e.g. Sunshine Apts')}
+                </View>
+              </View>
+
+              {/* Street – full width */}
+              <View style={styles.fieldFull}>
+                {renderField(
+                  'streetName',
+                  'Street / Area',
+                  'e.g. MG Road, Sector 12'
+                )}
+              </View>
+            </View>
+          </View>
+        ) : null}
+      </ScrollView>
+
+      {/* ── Sticky form actions ── */}
+      {state.status === 'ready' ? (
+        <View style={[styles.formActions, isDark && styles.formActionsDark]}>
+          <TouchableOpacity
+            style={[styles.btnGhost, isDark && styles.btnGhostDark]}
+            onPress={onBack}
+            activeOpacity={0.8}
+          >
+            <Text style={[styles.btnGhostText, isDark && styles.btnGhostTextDark]}>
+              ← Adjust Pin
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.btnPrimary,
+              { flex: 1 },
+              (state.submitting || !state.fields.flatNumber.trim()) && styles.btnDisabled,
+            ]}
+            onPress={handleSubmit}
+            disabled={state.submitting || !state.fields.flatNumber.trim()}
+            activeOpacity={0.8}
+            accessibilityRole="button"
+            accessibilityLabel="Save address"
+          >
+            {state.submitting ? (
+              <ActivityIndicator size="small" color="#fff" />
+            ) : (
+              <Text style={styles.btnPrimaryText}>Save Address  ✓</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      ) : null}
+
+      {/* ── Locality picker modal ── */}
+      {state.status === 'ready' && state.alternatives.length > 0 ? (
+        <Modal
+          visible={showLocalityPicker}
+          transparent
+          animationType="slide"
+          onRequestClose={() => setShowLocalityPicker(false)}
+          accessibilityViewIsModal
+        >
+          <TouchableOpacity
+            style={styles.modalOverlay}
+            activeOpacity={1}
+            onPress={() => setShowLocalityPicker(false)}
+          >
+            <TouchableOpacity
+              style={[styles.modalSheet, isDark && styles.modalSheetDark]}
+              activeOpacity={1}
+            >
+              <View style={styles.modalHandle} />
+              <Text style={[styles.modalTitle, isDark && styles.modalTitleDark]}>
+                Select Locality
+              </Text>
+              <FlatList
+                data={[
+                  { name: state.adminInfo.locality } as LocationAlternative,
+                  ...state.alternatives,
+                ]}
+                keyExtractor={(item, idx) => `${item.name}-${idx}`}
+                renderItem={({ item }) => {
+                  const isSelected = item.name === state.selectedLocality;
+                  return (
+                    <TouchableOpacity
+                      style={[
+                        styles.modalOption,
+                        isDark && styles.modalOptionDark,
+                        isSelected && styles.modalOptionSelected,
+                      ]}
+                      onPress={() => {
+                        if (state.status === 'ready') {
+                          dispatch({ type: 'SET_LOCALITY', locality: item.name });
+                        }
+                        setShowLocalityPicker(false);
+                      }}
+                      activeOpacity={0.7}
+                    >
+                      <Text
+                        style={[
+                          styles.modalOptionText,
+                          isDark && styles.modalOptionTextDark,
+                          isSelected && styles.modalOptionTextSelected,
+                        ]}
+                      >
+                        {item.name}
+                      </Text>
+                      {isSelected ? (
+                        <Text style={styles.modalOptionCheckmark}>✓</Text>
+                      ) : null}
+                    </TouchableOpacity>
+                  );
+                }}
+              />
+            </TouchableOpacity>
+          </TouchableOpacity>
+        </Modal>
+      ) : null}
+    </KeyboardAvoidingView>
+  );
+};
+
+export default AddressForm;