@quantaroute/checkout 1.1.1 → 1.2.0

package/src/components/CheckoutWidget.tsx

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import MapPinSelector from './MapPinSelector';
+import AddressForm from './AddressForm';
+import type { CheckoutWidgetProps, CompleteAddress } from '../core/types';
+import '../styles/checkout.css';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type Step = 'map' | 'form' | 'done';
+
+interface ConfirmedLocation {
+  lat: number;
+  lng: number;
+  digipin: string;
+}
+
+// ─── Success screen ───────────────────────────────────────────────────────────
+
+interface SuccessScreenProps {
+  address: CompleteAddress;
+  onEditAddress: () => void;
+}
+
+const SuccessScreen: React.FC<SuccessScreenProps> = ({ address, onEditAddress }) => (
+  <div className="qr-success">
+    <div className="qr-success__icon" aria-hidden="true">
+      <svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="26" cy="26" r="26" fill="var(--qr-success, #10b981)" opacity="0.12" />
+        <circle cx="26" cy="26" r="20" fill="var(--qr-success, #10b981)" />
+        <path
+          d="M15 26l8 8 14-16"
+          stroke="white"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+    <h3 className="qr-success__title">Address Saved!</h3>
+    <p className="qr-success__address">{address.formattedAddress}</p>
+    <div className="qr-success__meta">
+      <span className="qr-digipin-badge qr-digipin-badge--inline">
+        <span className="qr-digipin-badge__label">DigiPin</span>
+        <span className="qr-digipin-badge__code">{address.digipin}</span>
+      </span>
+    </div>
+    <button type="button" className="qr-btn qr-btn--ghost qr-btn--sm" onClick={onEditAddress}>
+      Change Address
+    </button>
+  </div>
+);
+
+// ─── Main Widget ──────────────────────────────────────────────────────────────
+
+/**
+ * QuantaRoute Checkout Widget
+ *
+ * A two-step, mobile-first address collection component:
+ *   Step 1 – Map: user pins their exact location (DigiPin shown offline, real-time)
+ *   Step 2 – Form: auto-filled address + manual flat/building details
+ *
+ * Works in React, Next.js, Nuxt (via nuxt-module), Vite, etc.
+ * Embed as a script tag (vanilla JS) via the UMD build.
+ */
+const CheckoutWidget: React.FC<CheckoutWidgetProps> = ({
+  apiKey,
+  apiBaseUrl = 'https://api.quantaroute.com',
+  onComplete,
+  onError,
+  defaultLat,
+  defaultLng,
+  theme = 'light',
+  className = '',
+  style,
+  mapHeight = '380px',
+  title = 'Add Delivery Address',
+  indiaBoundaryUrl,
+}) => {
+  const [step, setStep] = useState<Step>('map');
+  const [confirmedLocation, setConfirmedLocation] = useState<ConfirmedLocation | null>(null);
+  const [completedAddress, setCompletedAddress] = useState<CompleteAddress | null>(null);
+
+  // ── 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 = () => (
+    <div className="qr-progress" aria-label="Progress: step ${ step === 'map' ? 1 : 2 } of 2" role="progressbar">
+      <div className={`qr-progress__dot ${step === 'map' || step === 'form' || step === 'done' ? 'qr-progress__dot--active' : ''}`} />
+      <div className={`qr-progress__line ${step === 'form' || step === 'done' ? 'qr-progress__line--active' : ''}`} />
+      <div className={`qr-progress__dot ${step === 'form' || step === 'done' ? 'qr-progress__dot--active' : ''}`} />
+    </div>
+  );
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <div
+      className={`qr-checkout qr-checkout--${theme} ${className}`}
+      style={style}
+      data-testid="quantaroute-checkout"
+    >
+      {/* Widget header */}
+      {step !== 'done' && (
+        <div className="qr-header">
+          <div className="qr-header__brand">
+            <svg
+              className="qr-header__logo"
+              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-header__title">{title}</span>
+          </div>
+          {renderStepDots()}
+        </div>
+      )}
+
+      {/* ── Step 1: Map ── */}
+      {step === 'map' && (
+        <MapPinSelector
+          onLocationConfirm={handleLocationConfirm}
+          defaultLat={defaultLat}
+          defaultLng={defaultLng}
+          mapHeight={mapHeight}
+          theme={theme}
+          indiaBoundaryUrl={indiaBoundaryUrl}
+        />
+      )}
+
+      {/* ── 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}
+        />
+      )}
+
+      {/* ── Step 3: Done ── */}
+      {step === 'done' && completedAddress && (
+        <SuccessScreen address={completedAddress} onEditAddress={handleEditAddress} />
+      )}
+
+      {/* Powered-by footer */}
+      <div className="qr-footer">
+        <span>Powered by</span>
+        <a
+          href="https://quantaroute.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="qr-footer__link"
+        >
+          QuantaRoute
+        </a>
+        <span className="qr-footer__flag" aria-label="Made in India">🇮🇳</span>
+      </div>
+    </div>
+  );
+};
+
+export default CheckoutWidget;

package/src/components/MapPinSelector.native.tsx

@@ -0,0 +1,254 @@
+import React, { useRef, useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import { OSMView } from 'expo-osm-sdk';
+import type { OSMViewRef, MarkerConfig } from 'expo-osm-sdk';
+import { getDigiPin, isWithinIndia } from '../core/digipin';
+import { useGeolocation } from '../hooks/useGeolocation.native';
+import type { MapPinSelectorProps } from '../core/types';
+import { styles, COLORS } from '../styles/checkout.native';
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const INDIA_CENTER = { latitude: 20.5937, longitude: 78.9629 };
+const OVERVIEW_ZOOM = 5;
+const STREET_ZOOM = 16;
+
+/**
+ * Carto Positron vector basemap — same source as the web version.
+ * Free, no API key required. Attribution required (shown by OSMView natively).
+ */
+const CARTO_STYLE_URL =
+  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+
+/**
+ * Custom pin SVG as a data URI — matches the web pin colour (#0ea5e9).
+ * Teardrop shape with white inner circle and blue dot.
+ */
+const PIN_ICON_URI =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<svg width="40" height="52" viewBox="0 0 40 52" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M20 0C9.402 0 0 9.402 0 20C0 34 20 52 20 52S40 34 40 20C40 9.402 30.598 0 20 0Z" fill="#0ea5e9"/>' +
+    '<circle cx="20" cy="20" r="9" fill="white"/>' +
+    '<circle cx="20" cy="20" r="5" fill="#0ea5e9"/>' +
+    '</svg>'
+  );
+
+// ─── Helper ───────────────────────────────────────────────────────────────────
+
+function computeDigiPinSafe(lat: number, lng: number): string | null {
+  if (!isWithinIndia(lat, lng)) return null;
+  try {
+    return getDigiPin(lat, lng);
+  } catch {
+    return null;
+  }
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Native (iOS/Android) map pin selector.
+ * Uses expo-osm-sdk's OSMView with a draggable marker over Carto Positron tiles.
+ * Metro resolves this file on native; MapPinSelector.tsx is used on web.
+ */
+const MapPinSelector: React.FC<MapPinSelectorProps> = ({
+  onLocationConfirm,
+  defaultLat,
+  defaultLng,
+  mapHeight = 380,
+  theme = 'light',
+}) => {
+  const mapRef = useRef<OSMViewRef>(null);
+
+  const initLat = defaultLat ?? INDIA_CENTER.latitude;
+  const initLng = defaultLng ?? INDIA_CENTER.longitude;
+  const hasDefault = defaultLat !== undefined && defaultLng !== undefined;
+
+  const [coord, setCoord] = useState({ latitude: initLat, longitude: initLng });
+  const [digipin, setDigipin] = useState<string | null>(() =>
+    computeDigiPinSafe(initLat, initLng)
+  );
+  const [mapReady, setMapReady] = useState(false);
+
+  const { loading: geoLoading, error: geoError, locate, clearError } = useGeolocation();
+
+  const isDark = theme === 'dark';
+
+  // Resolve numeric height: web passes '380px', native should pass 380 or a number
+  const mapHeightNum =
+    typeof mapHeight === 'string' ? parseInt(mapHeight, 10) || 380 : mapHeight;
+
+  // ── Coordinate update (pin drag or tap) ─────────────────────────────────────
+  const handleCoordChange = useCallback(
+    (latitude: number, longitude: number) => {
+      setCoord({ latitude, longitude });
+      setDigipin(computeDigiPinSafe(latitude, longitude));
+    },
+    []
+  );
+
+  // ── Marker config (draggable checkout pin) ──────────────────────────────────
+  const pinMarkers: MarkerConfig[] = [
+    {
+      id: 'checkout-pin',
+      coordinate: coord,
+      draggable: true,
+      icon: {
+        uri: PIN_ICON_URI,
+        size: 40,
+        anchor: { x: 0.5, y: 1.0 }, // tip of the teardrop
+      },
+    },
+  ];
+
+  // ── Locate-me handler ────────────────────────────────────────────────────────
+  const handleLocateMe = useCallback(() => {
+    clearError();
+    locate((lat, lng) => {
+      handleCoordChange(lat, lng);
+      void mapRef.current?.animateToLocation(lat, lng, STREET_ZOOM);
+    });
+  }, [locate, clearError, handleCoordChange]);
+
+  // ── Confirm handler ──────────────────────────────────────────────────────────
+  const handleConfirm = useCallback(() => {
+    if (digipin) {
+      onLocationConfirm(coord.latitude, coord.longitude, digipin);
+    }
+  }, [coord, digipin, onLocationConfirm]);
+
+  const isInIndia = digipin !== null;
+  const canConfirm = isInIndia && mapReady;
+
+  return (
+    <View style={[styles.mapWrapper, isDark && { backgroundColor: COLORS.bgDark }]}>
+
+      {/* ── Step header ── */}
+      <View style={[styles.stepHeader, isDark && styles.stepHeaderDark]}>
+        <View style={styles.stepBadge}>
+          <Text style={styles.stepBadgeText}>1</Text>
+        </View>
+        <View style={styles.stepText}>
+          <Text style={[styles.stepTitle, isDark && styles.textLight]}>
+            Pin Your Location
+          </Text>
+          <Text style={[styles.stepSub, isDark && styles.textMutedStyle]}>
+            Tap the map or drag the pin to your exact location
+          </Text>
+        </View>
+      </View>
+
+      {/* ── Map area ── */}
+      <View style={{ height: mapHeightNum, position: 'relative' }}>
+        <OSMView
+          ref={mapRef}
+          style={{ flex: 1 }}
+          initialCenter={{ latitude: initLat, longitude: initLng }}
+          initialZoom={hasDefault ? STREET_ZOOM : OVERVIEW_ZOOM}
+          styleUrl={CARTO_STYLE_URL}
+          markers={pinMarkers}
+          showUserLocation={false}
+          scrollEnabled
+          zoomEnabled
+          rotateEnabled
+          onMapReady={() => setMapReady(true)}
+          onPress={(coordinate) => {
+            handleCoordChange(coordinate.latitude, coordinate.longitude);
+          }}
+          onMarkerDragEnd={(_markerId, coordinate) => {
+            handleCoordChange(coordinate.latitude, coordinate.longitude);
+          }}
+        />
+
+        {/* DigiPin badge overlay */}
+        {digipin ? (
+          <View
+            style={[styles.digipinBadge, isDark && styles.digipinBadgeDark]}
+            pointerEvents="none"
+          >
+            <Text style={[styles.digipinLabel, isDark && styles.digipinLabelDark]}>
+              DigiPin
+            </Text>
+            <Text style={styles.digipinCode}>{digipin}</Text>
+          </View>
+        ) : null}
+
+        {/* Out-of-India notice */}
+        {!isInIndia && mapReady ? (
+          <View style={styles.mapNotice} pointerEvents="none">
+            <Text style={styles.mapNoticeText}>Move map to India to get a DigiPin</Text>
+          </View>
+        ) : null}
+
+        {/* Locate-me button */}
+        <TouchableOpacity
+          style={[styles.locateBtn, isDark && styles.locateBtnDark]}
+          onPress={handleLocateMe}
+          disabled={geoLoading}
+          activeOpacity={0.7}
+          accessibilityLabel="Use my current location"
+          accessibilityRole="button"
+        >
+          {geoLoading ? (
+            <ActivityIndicator size="small" color={COLORS.primary} />
+          ) : (
+            <Text style={{ fontSize: 20, color: isDark ? COLORS.textDark : COLORS.text }}>
+              ⊕
+            </Text>
+          )}
+        </TouchableOpacity>
+
+        {/* Geo error toast */}
+        {geoError ? (
+          <View style={styles.geoError}>
+            <Text style={styles.geoErrorText}>{geoError}</Text>
+            <TouchableOpacity
+              style={styles.geoErrorDismiss}
+              onPress={clearError}
+              accessibilityLabel="Dismiss error"
+            >
+              <Text style={styles.geoErrorDismissText}>×</Text>
+            </TouchableOpacity>
+          </View>
+        ) : null}
+      </View>
+
+      {/* ── Coordinates strip ── */}
+      {mapReady ? (
+        <View style={[styles.coordsStrip, isDark && styles.coordsStripDark]}>
+          <Text style={[styles.coordsText, isDark && styles.coordsTextDark]}>
+            {coord.latitude.toFixed(5)}° N · {coord.longitude.toFixed(5)}° E
+          </Text>
+        </View>
+      ) : null}
+
+      {/* ── Confirm action bar ── */}
+      <View style={[styles.mapActions, isDark && styles.mapActionsDark]}>
+        <TouchableOpacity
+          style={[styles.btnPrimary, !canConfirm && styles.btnDisabled]}
+          onPress={handleConfirm}
+          disabled={!canConfirm}
+          activeOpacity={0.8}
+          accessibilityRole="button"
+          accessibilityLabel="Confirm location"
+        >
+          <Text style={styles.btnPrimaryText}>Confirm Location  →</Text>
+        </TouchableOpacity>
+
+        {!isInIndia && mapReady ? (
+          <Text style={[styles.mapHint, isDark && styles.mapHintDark]}>
+            Move the pin to a location in India to continue
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+export default MapPinSelector;