@quantaroute/checkout 1.1.1 → 1.2.0

package/src/components/AddressForm.tsx

@@ -0,0 +1,477 @@
+import React, { useEffect, useReducer, useCallback } from 'react';
+import { lookupLocation, reverseGeocode, type AddressComponents } from '../core/api';
+import type {
+  AddressFormProps,
+  AdministrativeInfo,
+  CompleteAddress,
+  LocationAlternative,
+} from '../core/types';
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+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; // Selected locality name (from adminInfo or alternatives)
+      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: '',
+};
+
+/**
+ * Parse addressComponents from Nominatim/OpenStreetMap.
+ * - name → Building/Society/POI name
+ * - road + suburb → Street/Area
+ */
+function parseAddressComponents(components: AddressComponents): Partial<ManualFields> {
+  const fields: Partial<ManualFields> = {};
+
+  // Building/Society/POI name: prefer 'name' field (most relevant)
+  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;
+  }
+
+  // Street/Area: combine road + suburb (if available)
+  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': {
+      // Pre-fill fields from addressComponents
+      const preFilled = parseAddressComponents(action.addressComponents);
+      // Default to primary locality from adminInfo
+      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 ────────────────────────────────────────────────────────────────
+
+const AddressForm: React.FC<AddressFormProps> = ({
+  digipin,
+  lat,
+  lng,
+  apiKey,
+  apiBaseUrl,
+  onAddressComplete,
+  onBack,
+  onError,
+}) => {
+  const [state, dispatch] = useReducer(reducer, { status: 'loading' });
+
+  // ── Fetch administrative data + address components on mount ────────────────
+  const fetchAdminInfo = useCallback(async () => {
+    dispatch({ type: 'LOAD_START' });
+    try {
+      // Call both APIs in parallel:
+      // 1. /v1/location/lookup → administrative_info (state, district, pincode) + alternatives
+      // 2. /v1/digipin/reverse → addressComponents (name, road, suburb from Nominatim)
+      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(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (state.status !== 'ready') return;
+
+      const { adminInfo, selectedLocality, fields } = state;
+
+      const parts: string[] = [
+        fields.flatNumber,
+        fields.floorNumber ? `Floor ${fields.floorNumber}` : '',
+        fields.buildingName,
+        fields.streetName,
+        selectedLocality, // Use selected locality (may be from alternatives)
+        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, // Use selected locality
+        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]
+  );
+
+  return (
+    <div className="qr-form-wrapper">
+      {/* ── Step header ── */}
+      <div className="qr-step-header">
+        <button
+          type="button"
+          className="qr-back-btn"
+          onClick={onBack}
+          aria-label="Back to map"
+        >
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M19 12H5M12 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <div className="qr-step-badge">2</div>
+        <div className="qr-step-text">
+          <span className="qr-step-title">Add Address Details</span>
+          <span className="qr-step-sub">Flat number and building info</span>
+        </div>
+      </div>
+
+      {/* ── DigiPin reference strip ── */}
+      <div className="qr-form-digipin-strip">
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z" />
+          <circle cx="12" cy="10" r="3" />
+        </svg>
+        <span className="qr-form-digipin-strip__label">DigiPin</span>
+        <span className="qr-form-digipin-strip__code">{digipin}</span>
+      </div>
+
+      {/* ── Loading skeleton ── */}
+      {state.status === 'loading' && (
+        <div className="qr-loading-state" aria-busy="true" aria-label="Fetching address details">
+          <div className="qr-spinner qr-spinner--lg" aria-hidden="true" />
+          <p className="qr-loading-state__text">Fetching address details…</p>
+        </div>
+      )}
+
+      {/* ── Error state ── */}
+      {state.status === 'error' && (
+        <div className="qr-error-state" role="alert">
+          <div className="qr-error-state__icon" aria-hidden="true">⚠</div>
+          <p className="qr-error-state__msg">{state.message}</p>
+          <button
+            type="button"
+            className="qr-btn qr-btn--secondary qr-btn--sm"
+            onClick={() => void fetchAdminInfo()}
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {/* ── Main form ── */}
+      {state.status === 'ready' && (
+        <form onSubmit={handleSubmit} className="qr-form" noValidate>
+          {/* Auto-filled section */}
+          <fieldset className="qr-fieldset">
+            <legend className="qr-fieldset__legend">
+              <span className="qr-fieldset__icon" aria-hidden="true">📍</span>
+              Auto-detected from your pin
+            </legend>
+
+            <div className="qr-auto-grid">
+              {/* State */}
+              <div className="qr-auto-row">
+                <span className="qr-auto-row__label">State</span>
+                <span className="qr-auto-row__value">{state.adminInfo.state}</span>
+              </div>
+
+              {/* District */}
+              <div className="qr-auto-row">
+                <span className="qr-auto-row__label">District</span>
+                <span className="qr-auto-row__value">{state.adminInfo.district}</span>
+              </div>
+
+              {/* Locality - show dropdown if alternatives exist */}
+              <div className="qr-auto-row qr-auto-row--full">
+                <span className="qr-auto-row__label">Locality</span>
+                {state.alternatives.length > 0 ? (
+                  <select
+                    className="qr-auto-row__select"
+                    value={state.selectedLocality}
+                    onChange={(e) => dispatch({ type: 'SET_LOCALITY', locality: e.target.value })}
+                    aria-label="Select locality"
+                  >
+                    {/* Primary option (from adminInfo) */}
+                    <option value={state.adminInfo.locality}>
+                      {state.adminInfo.locality}
+                    </option>
+                    {/* Alternatives */}
+                    {state.alternatives.map((alt, idx) => (
+                      <option key={idx} value={alt.name}>
+                        {alt.name}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <span className="qr-auto-row__value">{state.selectedLocality}</span>
+                )}
+              </div>
+
+              {/* Pincode */}
+              <div className="qr-auto-row">
+                <span className="qr-auto-row__label">Pincode</span>
+                <span className="qr-auto-row__value qr-auto-row__value--pin">
+                  {state.adminInfo.pincode}
+                </span>
+              </div>
+            </div>
+          </fieldset>
+
+          {/* Manual entry section */}
+          <fieldset className="qr-fieldset">
+            <legend className="qr-fieldset__legend">
+              <span className="qr-fieldset__icon" aria-hidden="true">🏠</span>
+              Your details
+            </legend>
+
+            <div className="qr-fields-grid">
+              {/* Flat / House – required */}
+              <div className="qr-field qr-field--full">
+                <label className="qr-field__label" htmlFor="qr-flatNumber">
+                  Flat / House Number
+                  <span className="qr-required" aria-hidden="true">*</span>
+                </label>
+                <input
+                  id="qr-flatNumber"
+                  type="text"
+                  className="qr-field__input"
+                  placeholder="e.g. 4B, Flat 201, House No. 12"
+                  value={state.fields.flatNumber}
+                  onChange={(e) =>
+                    dispatch({ type: 'SET_FIELD', key: 'flatNumber', value: e.target.value })
+                  }
+                  autoComplete="address-line1"
+                  required
+                  aria-required="true"
+                />
+              </div>
+
+              {/* Floor */}
+              <div className="qr-field">
+                <label className="qr-field__label" htmlFor="qr-floorNumber">
+                  Floor
+                  <span className="qr-optional">optional</span>
+                </label>
+                <input
+                  id="qr-floorNumber"
+                  type="text"
+                  className="qr-field__input"
+                  placeholder="e.g. 3rd, Ground"
+                  value={state.fields.floorNumber}
+                  onChange={(e) =>
+                    dispatch({ type: 'SET_FIELD', key: 'floorNumber', value: e.target.value })
+                  }
+                />
+              </div>
+
+              {/* Building / Society */}
+              <div className="qr-field">
+                <label className="qr-field__label" htmlFor="qr-buildingName">
+                  Building / Society
+                  <span className="qr-optional">optional</span>
+                </label>
+                <input
+                  id="qr-buildingName"
+                  type="text"
+                  className="qr-field__input"
+                  placeholder="e.g. Sunshine Apts, DDA Colony"
+                  value={state.fields.buildingName}
+                  onChange={(e) =>
+                    dispatch({ type: 'SET_FIELD', key: 'buildingName', value: e.target.value })
+                  }
+                  autoComplete="address-line2"
+                />
+              </div>
+
+              {/* Street / Area */}
+              <div className="qr-field qr-field--full">
+                <label className="qr-field__label" htmlFor="qr-streetName">
+                  Street / Area
+                  <span className="qr-optional">optional</span>
+                </label>
+                <input
+                  id="qr-streetName"
+                  type="text"
+                  className="qr-field__input"
+                  placeholder="e.g. MG Road, Sector 12"
+                  value={state.fields.streetName}
+                  onChange={(e) =>
+                    dispatch({ type: 'SET_FIELD', key: 'streetName', value: e.target.value })
+                  }
+                  autoComplete="address-level3"
+                />
+              </div>
+            </div>
+          </fieldset>
+
+          {/* Actions */}
+          <div className="qr-form-actions">
+            <button
+              type="button"
+              className="qr-btn qr-btn--ghost"
+              onClick={onBack}
+            >
+              <svg
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M19 12H5M12 19l-7-7 7-7" />
+              </svg>
+              Adjust Pin
+            </button>
+            <button
+              type="submit"
+              className="qr-btn qr-btn--primary qr-btn--grow"
+              disabled={state.submitting || !state.fields.flatNumber.trim()}
+            >
+              {state.submitting ? (
+                <>
+                  <span className="qr-spinner qr-spinner--sm" aria-hidden="true" />
+                  Saving…
+                </>
+              ) : (
+                <>
+                  Save Address
+                  <svg
+                    aria-hidden="true"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </>
+              )}
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+};
+
+export default AddressForm;

package/src/components/CheckoutWidget.native.tsx

@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  SafeAreaView,
+  Linking,
+} from 'react-native';
+// Explicit .native imports so TypeScript (tsconfig.native.json) resolves the
+// correct platform files — Metro handles implicit resolution at bundle time.
+import MapPinSelector from './MapPinSelector.native';
+import AddressForm from './AddressForm.native';
+import type { CheckoutWidgetProps, CompleteAddress } from '../core/types';
+import { styles, COLORS } from '../styles/checkout.native';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type Step = 'map' | 'form' | 'done';
+
+interface ConfirmedLocation {
+  lat: number;
+  lng: number;
+  digipin: string;
+}
+
+// ─── Success screen ───────────────────────────────────────────────────────────
+
+interface SuccessScreenProps {
+  address: CompleteAddress;
+  onEditAddress: () => void;
+  isDark: boolean;
+}
+
+const SuccessScreen: React.FC<SuccessScreenProps> = ({ address, onEditAddress, isDark }) => (
+  <View style={styles.successScreen}>
+    <Text style={styles.successIcon}>✅</Text>
+
+    <Text style={[styles.successTitle, isDark && styles.successTitleDark]}>
+      Address Saved!
+    </Text>
+
+    <Text style={[styles.successAddress, isDark && styles.successAddressDark]}>
+      {address.formattedAddress}
+    </Text>
+
+    {/* DigiPin badge */}
+    <View style={[styles.successDigipinBadge, isDark && styles.successDigipinBadgeDark]}>
+      <Text style={styles.digipinLabel}>DigiPin</Text>
+      <Text style={styles.digipinCode}>{address.digipin}</Text>
+    </View>
+
+    <TouchableOpacity
+      style={[styles.btnGhost, { marginTop: 4 }]}
+      onPress={onEditAddress}
+      activeOpacity={0.8}
+      accessibilityRole="button"
+    >
+      <Text style={[styles.btnGhostText, isDark && styles.btnGhostTextDark]}>
+        Change Address
+      </Text>
+    </TouchableOpacity>
+  </View>
+);
+
+// ─── Main Widget ──────────────────────────────────────────────────────────────
+
+/**
+ * QuantaRoute Checkout Widget — native (iOS/Android) version.
+ *
+ * Two-step address collection:
+ *   Step 1 – Map: drag pin to exact location (DigiPin computed offline, real-time)
+ *   Step 2 – Form: auto-filled address + manual flat/building details
+ *
+ * Metro resolves this file on native; CheckoutWidget.tsx is used on web.
+ *
+ * Usage in Expo:
+ *   import { CheckoutWidget } from '@quantaroute/checkout';
+ *   <CheckoutWidget apiKey="..." onComplete={(addr) => console.log(addr)} />
+ */
+const CheckoutWidget: React.FC<CheckoutWidgetProps> = ({
+  apiKey,
+  apiBaseUrl = 'https://api.quantaroute.com',
+  onComplete,
+  onError,
+  defaultLat,
+  defaultLng,
+  theme = 'light',
+  style,
+  mapHeight = 380,
+  title = 'Add Delivery Address',
+}) => {
+  const [step, setStep] = useState<Step>('map');
+  const [confirmedLocation, setConfirmedLocation] = useState<ConfirmedLocation | null>(null);
+  const [completedAddress, setCompletedAddress] = useState<CompleteAddress | null>(null);
+
+  const isDark = theme === 'dark';
+
+  // ── Handlers ──────────────────────────────────────────────────────────────
+
+  const handleLocationConfirm = (lat: number, lng: number, digipin: string) => {
+    setConfirmedLocation({ lat, lng, digipin });
+    setStep('form');
+  };
+
+  const handleAddressComplete = (address: CompleteAddress) => {
+    setCompletedAddress(address);
+    setStep('done');
+    onComplete(address);
+  };
+
+  const handleBack = () => setStep('map');
+
+  const handleEditAddress = () => {
+    setStep('map');
+    setConfirmedLocation(null);
+    setCompletedAddress(null);
+  };
+
+  // ── Step indicator ─────────────────────────────────────────────────────────
+
+  const renderStepDots = () => (
+    <View style={styles.progress}>
+      {/* Dot 1 – always active */}
+      <View style={[styles.progressDot, styles.progressDotActive]} />
+      {/* Line */}
+      <View
+        style={[
+          styles.progressLine,
+          (step === 'form' || step === 'done') && styles.progressLineActive,
+        ]}
+      />
+      {/* Dot 2 */}
+      <View
+        style={[
+          styles.progressDot,
+          (step === 'form' || step === 'done') && styles.progressDotActive,
+        ]}
+      />
+    </View>
+  );
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.container,
+        isDark && styles.containerDark,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        style as any,
+      ]}
+      accessibilityLabel="QuantaRoute checkout widget"
+    >
+      {/* Widget header (hidden on success screen) */}
+      {step !== 'done' ? (
+        <View style={[styles.header, isDark && styles.headerDark]}>
+          <View style={styles.headerBrand}>
+            <Text style={[styles.headerIcon, { color: COLORS.primary }]}>📍</Text>
+            <Text style={[styles.headerTitle, isDark && styles.headerTitleDark]}>
+              {title}
+            </Text>
+          </View>
+          {renderStepDots()}
+        </View>
+      ) : null}
+
+      {/* ── Step 1: Map ── */}
+      {step === 'map' ? (
+        <MapPinSelector
+          onLocationConfirm={handleLocationConfirm}
+          defaultLat={defaultLat}
+          defaultLng={defaultLng}
+          mapHeight={mapHeight}
+          theme={theme}
+        />
+      ) : null}
+
+      {/* ── Step 2: Form ── */}
+      {step === 'form' && confirmedLocation ? (
+        <AddressForm
+          digipin={confirmedLocation.digipin}
+          lat={confirmedLocation.lat}
+          lng={confirmedLocation.lng}
+          apiKey={apiKey}
+          apiBaseUrl={apiBaseUrl}
+          onAddressComplete={handleAddressComplete}
+          onBack={handleBack}
+          onError={onError}
+          theme={theme}
+        />
+      ) : null}
+
+      {/* ── Step 3: Done ── */}
+      {step === 'done' && completedAddress ? (
+        <SuccessScreen
+          address={completedAddress}
+          onEditAddress={handleEditAddress}
+          isDark={isDark}
+        />
+      ) : null}
+
+      {/* Powered-by footer */}
+      <View style={[styles.footer, isDark && styles.footerDark]}>
+        <Text style={[styles.footerText, isDark && styles.footerTextDark]}>Powered by</Text>
+        <TouchableOpacity
+          onPress={() => void Linking.openURL('https://quantaroute.com')}
+          accessibilityRole="link"
+          accessibilityLabel="QuantaRoute website"
+        >
+          <Text style={styles.footerLink}>QuantaRoute</Text>
+        </TouchableOpacity>
+        <Text style={[styles.footerText, isDark && styles.footerTextDark]}>  🇮🇳</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default CheckoutWidget;