hey-pharmacist-ecommerce 1.0.5 → 1.0.6

package/src/screens/CheckoutScreen.tsx

@@ -1,340 +1,1018 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { Lock, CreditCard } from 'lucide-react';
+import {
+  Check as CheckIcon,
+  CreditCard,
+  Lock,
+  MapPin,
+  PackageCheck,
+  Plus,
+  ShieldCheck,
+  Truck,
+} from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useCart } from '@/providers/CartProvider';
 import { useAuth } from '@/providers/AuthProvider';
-import { ordersApi, CreateOrderData } from '@/lib/api/orders';
+import { OrdersApi } from '@/lib/Apis/apis/orders-api';
+import { ShippingApi } from '@/lib/Apis/apis/shipping-api';
+import { useAddresses } from '@/hooks/useAddresses';
 import { formatPrice } from '@/lib/utils/format';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
+import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
+import { Card } from '@/components/ui/Card';
+import { AddressFormModal } from '@/components/AddressFormModal';
+import { Edit3, Trash2 } from 'lucide-react';
 
-const addressSchema = z.object({
-  fullName: z.string().min(2, 'Full name is required'),
-  addressLine1: z.string().min(5, 'Address is required'),
-  addressLine2: z.string().optional(),
-  city: z.string().min(2, 'City is required'),
-  state: z.string().min(2, 'State is required'),
-  zipCode: z.string().min(5, 'ZIP code is required'),
-  country: z.string().min(2, 'Country is required'),
-  phone: z.string().min(10, 'Phone number is required'),
-});
+import { addressSchema } from '@/lib/validations/address';
+import Image from 'next/image';
 
 const checkoutSchema = z.object({
   shipping: addressSchema,
   billing: addressSchema,
-  sameAsShipping: z.boolean(),
+  sameAsShipping: z.boolean().default(true),
 });
 
 type CheckoutFormData = z.infer<typeof checkoutSchema>;
 
+
+const SHIPPING_THRESHOLD = 100;
+const TAX_RATE = 0.08;
+
+// Add enums for payment methods
+const PAYMENT_METHODS = [
+  {
+    label: 'Card',
+    value: 'Card',
+    icon: <CreditCard className="w-5 h-5" />,
+    description: 'Pay securely with your credit or debit card',
+    className: 'border-blue-500 hover:bg-blue-50',
+    activeClass: 'bg-blue-50 border-blue-500 text-blue-700',
+  },
+  {
+    label: 'Cash',
+    value: 'Cash',
+    icon: <PackageCheck className="w-5 h-5" />,
+    description: 'Pay with cash on delivery or at pickup',
+    className: 'border-amber-500 hover:bg-amber-50',
+    activeClass: 'bg-amber-50 border-amber-500 text-amber-700',
+  },
+  {
+    label: 'Credit',
+    value: 'Credit',
+    icon: <ShieldCheck className="w-5 h-5" />,
+    description: 'Use your account credit',
+    className: 'border-emerald-500 hover:bg-emerald-50',
+    activeClass: 'bg-emerald-50 border-emerald-500 text-emerald-700',
+  },
+];
+
 export function CheckoutScreen() {
   const router = useRouter();
-  const { cart } = useCart();
+  const { cart, clearCart } = useCart();
   const { isAuthenticated, user } = useAuth();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [sameAsShipping, setSameAsShipping] = useState(true);
+  const [isDelivery, setIsDelivery] = useState(true); // delivery or pickup
+  const [paymentMethod, setPaymentMethod] = useState('Card');
+  const [error, setError] = useState<string | null>(null);
+  const [selectedAddressId, setSelectedAddressId] = useState<string | null>(null);
+  const [selectedStoreAddressId, setSelectedStoreAddressId] = useState<string | null>(null);
+  const [storeAddresses, setStoreAddresses] = useState<any[]>([]); // For pickup selection
+  const [isAddressModalOpen, setIsAddressModalOpen] = useState(false);
+  const [editingAddress, setEditingAddress] = useState<any | null>(null);
+  const [shippingPrice, setShippingPrice] = useState(0);
 
+
+  // Use the addresses hook
+  const {
+    addresses: userAddresses,
+    defaultAddress
+  } = useAddresses();
+  const [selectedShippingRateId, setSelectedShippingRateId] = useState<string | null>(null);
+  const [shippingRates, setShippingRates] = useState<any[]>([]);
+  const [shippingRatesLoading, setShippingRatesLoading] = useState(false);
+  const [shippingRatesError, setShippingRatesError] = useState<string | null>(null);
+  const [storeData, setStoreData] = useState<any>(null); // Simulate store data if needed
+  const { addresses, isLoading, refresh, removeAddress } = useAddresses();
   const {
     register,
     handleSubmit,
     formState: { errors },
+    watch,
+    setValue,
   } = useForm<CheckoutFormData>({
     resolver: zodResolver(checkoutSchema),
     defaultValues: {
       sameAsShipping: true,
       shipping: {
-        fullName: user ? `${user.firstName} ${user.lastName}` : '',
-        phone: user?.phone || '',
+        name: user ? `${user.firstname} ${user.lastname}` : '',
+        phone: user?.phoneNumber || undefined,
         country: 'United States',
       },
       billing: {
-        fullName: user ? `${user.firstName} ${user.lastName}` : '',
-        phone: user?.phone || '',
+        name: user ? `${user.firstname} ${user.lastname}` : '',
+        phone: user?.phoneNumber || undefined,
         country: 'United States',
       },
     },
   });
 
+  const sameAsShipping = watch('sameAsShipping', true);
+
+  // Sync billing address with shipping address when 'Billing same as shipping' is checked
+  useEffect(() => {
+    if (sameAsShipping) {
+      setValue('billing.name', watch('shipping.name'));
+      setValue('billing.phone', watch('shipping.phone'));
+      setValue('billing.street1', watch('shipping.street1'));
+      setValue('billing.street2', watch('shipping.street2'));
+      setValue('billing.city', watch('shipping.city'));
+      setValue('billing.state', watch('shipping.state'));
+      setValue('billing.zip', watch('shipping.zip'));
+      setValue('billing.country', watch('shipping.country'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sameAsShipping, watch('shipping.name'), watch('shipping.phone'), watch('shipping.street1'), watch('shipping.street2'), watch('shipping.city'), watch('shipping.state'), watch('shipping.zip'), watch('shipping.country')]);
+
+  // const handleAddressAdded = async (address: any) => {
+  //   await refresh();
+  // };
+
+  useEffect(() => {
+    if (defaultAddress && !selectedAddressId) {
+      setSelectedAddressId(defaultAddress.id);
+      // Update form with default address
+      setValue('shipping.name', defaultAddress.name);
+      setValue('shipping.phone', defaultAddress.phone || (undefined as unknown as string));
+      setValue('shipping.street1', defaultAddress.street1);
+      setValue('shipping.street2', defaultAddress.street2 || '');
+      setValue('shipping.city', defaultAddress.city);
+      setValue('shipping.state', defaultAddress.state);
+      setValue('shipping.zip', defaultAddress.zip);
+      setValue('shipping.country', defaultAddress.country);
+    }
+  }, [defaultAddress, selectedAddressId, setValue]);
+
+  // Handle shipping rates response and errors
+  const handleShippingResponse = (response: any) => {
+    if (!response?.data) {
+      setShippingRatesError('Unable to calculate shipping rates');
+      setShippingRates([]);
+      setSelectedShippingRateId(null);
+      return;
+    }
+
+    const rates = response.data.rates || [];
+    if (rates.length > 0) {
+      setShippingRates(rates);
+      setShippingRatesError(null);
+      setSelectedShippingRateId(rates[0].objectId); // Select first rate by default
+      return;
+    }
+
+    // If no rates, show the most relevant error message from messages
+    const messages = response.data.messages || [];
+    // Prefer messages that mention 'shipping', 'service area', or are from USPS
+    const relevantMessage = messages.find((msg: any) =>
+      msg.text.toLowerCase().includes('shipping') ||
+      msg.text.toLowerCase().includes('service area') ||
+      msg.source === 'USPS'
+    ) || messages[0];
+    setShippingRatesError(relevantMessage?.text || 'Shipping is not available to this address');
+    setShippingRates([]);
+    setSelectedShippingRateId(null);
+  };
+
+  // Define shipping message types
+  interface ShippingMessage {
+    source: string;
+    code: string;
+    text: string;
+  }
+
+  interface ShippingRate {
+    objectId: string;
+    provider: string;
+    servicelevel: {
+      name: string;
+      token: string;
+    };
+    amount: string;
+    amountLocal: string;
+    currency: string;
+    currencyLocal: string;
+    durationTerms?: string;
+    estimatedDays?: number;
+    providerImage75?: string;
+    attributes?: string[];
+    test?: boolean;
+  }
+
+  interface ShippingResponse {
+    data?: {
+      messages: ShippingMessage[];
+      rates: ShippingRate[];
+      status: string;
+    };
+  }
+
+
+  useEffect(() => {
+    if (!isDelivery || !selectedAddressId || !cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
+      setShippingRates([]);
+      setSelectedShippingRateId(null);
+      return;
+    }
+    setShippingRatesLoading(true);
+    setShippingRatesError(null);
+    (async () => {
+      try {
+        const api = new ShippingApi(AXIOS_CONFIG);
+        const cartBody = {
+          items: cart?.cartBody?.items?.map((item: any) => ({
+            productVariantId: String(item.productVariantId),
+            quantity: typeof item.quantity === 'number' ? item.quantity : 1,
+          })),
+          discount: undefined,
+        };
+        const res = await api.getShippingRates(cartBody, selectedAddressId);
+        handleShippingResponse(res);
+      } catch (e: any) {
+        setShippingRates([]);
+        setSelectedShippingRateId(null);
+        setShippingRatesError(e?.message || 'Failed to fetch shipping rates');
+      } finally {
+        setShippingRatesLoading(false);
+      }
+    })();
+  }, [isDelivery, selectedAddressId, cart]);
+
+  // Simulate fetching store addresses for pickup (replace with real API if available)
+  useEffect(() => {
+    if (!isDelivery) {
+      // Simulate store addresses
+      const stores = [
+        { id: 'store1', name: 'Main Pharmacy', street1: '123 Main St', city: 'Seattle' },
+        { id: 'store2', name: 'Eastside Pickup', street1: '456 East Ave', city: 'Bellevue' },
+      ];
+      setStoreAddresses(stores);
+      setSelectedStoreAddressId(stores[0].id);
+      // Pickup mode: no shipping cost
+      setShippingPrice(0);
+    } else {
+      setStoreAddresses([]);
+      setSelectedStoreAddressId(null);
+    }
+  }, [isDelivery]);
+
+  const checkoutSteps = [
+    { id: 1, label: 'Cart', status: 'complete' as const },
+    { id: 2, label: 'Details', status: 'current' as const },
+    { id: 3, label: 'Payment', status: 'upcoming' as const },
+  ];
+
+  // Unified checkout handler (admin-style)
   const onSubmit = async (data: CheckoutFormData) => {
+    setError(null);
     if (!isAuthenticated) {
       toast.error('Please login to continue');
-      router.push('/login?redirect=/checkout');
+      setTimeout(() => router.push('/login?redirect=/checkout'), 50);
       return;
     }
+    if (!cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
+      setError('Your cart is empty. Please add items to your cart.');
+      return;
+    }
+    if (!paymentMethod) {
+      setError('Please select a payment method.');
+      return;
+    }
+    if (isDelivery) {
+      if (!selectedAddressId) {
+        setError('Please select a shipping address.');
+        return;
+      }
+      if (!selectedShippingRateId) {
+        setError('Please select a shipping method.');
+        return;
+      }
+      // Validate shipping address fields
+      const requiredFields = ['name', 'street1', 'city', 'zip', 'country'];
+      for (const field of requiredFields) {
+        if (!data.shipping[field as keyof typeof data.shipping]) {
+          setError(`Please fill in the shipping address: ${field}.`);
+          return;
+        }
+      }
+    } else {
+      if (!selectedStoreAddressId) {
+        setError('Please select a pickup location.');
+        return;
+      }
+      if (storeAddresses.length === 0) {
+        setError('Store pickup location is not available.');
+        return;
+      }
+      if (paymentMethod === 'Card' && userAddresses.length === 0) {
+        setError('Card payments require a billing address. Please add an address to your account or choose a different payment method.');
+        return;
+      }
+    }
+    if (!sameAsShipping) {
+      const requiredBillingFields = ['fullName', 'addressLine1', 'city', 'zipCode', 'country'];
+      for (const field of requiredBillingFields) {
+        if (!data.billing[field as keyof typeof data.billing]) {
+          setError(`Please fill in the billing address: ${field}.`);
+          return;
+        }
+      }
+    }
 
     setIsSubmitting(true);
+    toast('Submitting order...', { icon: <CreditCard className="h-4 w-4" /> });
     try {
-      const orderData: CreateOrderData = {
+      // Prepare items array for backend
+      const items = (cart?.cartBody?.items || []).map((item: any) => ({
+        productVariantId: String(item.productVariantId),
+        quantity: typeof item.quantity === 'number' ? item.quantity : 1,
+      })).filter((item: any) => item.productVariantId);
+
+      // Determine billing address ID for card payments (admin-style)
+      let billingAddressId: string | undefined = undefined;
+      if (isDelivery) {
+        billingAddressId = selectedAddressId || undefined;
+      } else if (paymentMethod === 'Card') {
+        billingAddressId = userAddresses.length > 0 ? userAddresses[0].id : undefined;
+      }
+
+      // Prepare order DTO (admin-style)
+      const orderDTO: any = {
+        items,
+        paymentMethod,
+        orderStatus: 'Pending',
+        chargeTax: true,
+        orderRemindingDates: [],
         shippingAddress: data.shipping,
         billingAddress: sameAsShipping ? data.shipping : data.billing,
-        sameAsShipping,
+        pickupStoreId: !isDelivery ? selectedStoreAddressId : undefined,
       };
 
-      const response = await ordersApi.createOrder(orderData);
-      
-      if (response.success && response.data.stripeCheckoutUrl) {
-        // Redirect to Stripe checkout
-        window.location.href = response.data.stripeCheckoutUrl;
+      const api = new OrdersApi(AXIOS_CONFIG);
+      const response = await api.createCheckout(
+        orderDTO,
+        isDelivery,
+        user?.id,
+        isDelivery ? (selectedShippingRateId || undefined) : undefined,
+        billingAddressId
+      );
+      // Handle insufficient credit error (fallback: check for error message)
+      if (response?.data?.payment && response.data.payment.hostedInvoiceUrl === 'INSUFFICIENT_CREDIT') {
+        setError('You have insufficient credit to complete this order.');
+        toast.error('You have insufficient credit to complete this order.');
+        return;
+      }
+      if (paymentMethod === 'Card') {
+        const paymentUrl = response?.data?.payment?.hostedInvoiceUrl;
+        if (paymentUrl && paymentUrl !== 'INSUFFICIENT_CREDIT') {
+          window.open(paymentUrl, '_blank');
+          await clearCart();
+
+          return;
+        }
+        toast.success('Order placed successfully!');
+        await clearCart();
+        router.push(`/orders/${response.data?.id}`);
       } else {
         toast.success('Order placed successfully!');
-        router.push(`/orders/${response.data.id}`);
+        await clearCart();
+        router.push(`/orders/${response.data?.id}`);
       }
-    } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Failed to place order');
+    } catch (err: any) {
+      const msg = err?.message || (err?.response?.data?.message) || 'Failed to place order';
+      setError(msg);
+      toast.error(msg);
     } finally {
       setIsSubmitting(false);
     }
   };
 
-  if (!cart || cart.items.length === 0) {
+  if (!cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
     router.push('/cart');
     return null;
   }
-
   const subtotal = cart.total;
-  const shipping = subtotal > 50 ? 0 : 10;
-  const tax = subtotal * 0.1;
-  const total = subtotal + shipping + tax;
+  const tax = 0;
+  const total = subtotal + shippingPrice + tax;
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12">
-      <div className="container mx-auto px-4 max-w-6xl">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">Checkout</h1>
-          <p className="text-gray-600">Complete your order</p>
-        </motion.div>
-
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="grid lg:grid-cols-3 gap-8">
-            {/* Forms */}
-            <div className="lg:col-span-2 space-y-6">
-              {/* Shipping Address */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.1 }}
-                className="bg-white rounded-2xl p-6 shadow-sm"
-              >
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
-                  Shipping Address
-                </h2>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="col-span-2">
-                    <Input
-                      label="Full Name"
-                      {...register('shipping.fullName')}
-                      error={errors.shipping?.fullName?.message}
-                    />
-                  </div>
-                  <div className="col-span-2">
-                    <Input
-                      label="Address Line 1"
-                      {...register('shipping.addressLine1')}
-                      error={errors.shipping?.addressLine1?.message}
-                    />
+    <div className="min-h-screen bg-slate-50">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+        <div className="relative container mx-auto px-4 py-16">
+          <div className="grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="space-y-6"
+            >
+              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
+                <ShieldCheck className="h-4 w-4" />
+                Secure checkout
+              </span>
+              <h1 className="text-4xl font-bold md:text-5xl">
+                Provide delivery details
+              </h1>
+              <p className="text-white/75 md:text-lg">
+                Our pharmacists handle every package with care. Share your shipping and billing
+                information so we can dispatch your order within the next 12 hours.
+              </p>
+              <div className="flex flex-wrap gap-3">
+                {checkoutSteps.map((step) => (
+                  <div
+                    key={step.id}
+                    className={`flex items-center gap-3 rounded-2xl px-4 py-2 text-sm font-semibold ${step.status === 'complete'
+                      ? 'bg-white/20 text-white'
+                      : step.status === 'current'
+                        ? 'bg-white text-primary-700'
+                        : 'bg-white/10 text-white/60'
+                      }`}
+                  >
+                    <span className="flex h-7 w-7 items-center justify-center rounded-full bg-white/20 text-xs font-bold">
+                      {step.id}
+                    </span>
+                    {step.label}
                   </div>
-                  <div className="col-span-2">
-                    <Input
-                      label="Address Line 2 (Optional)"
-                      {...register('shipping.addressLine2')}
-                    />
+                ))}
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {error && <div className="mb-4 text-red-600 font-semibold">{error}</div>}
+        <div className="pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+          <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-8"
+          >
+            <section className="rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50">
+              <div className="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                  <h2 className="text-xl font-semibold text-slate-900">
+                    Shipping information
+                  </h2>
+                  <p className="text-sm text-slate-500">
+                    We use temperature-aware packaging and real-time tracking on every shipment.
+                  </p>
+                </div>
+                <span className="inline-flex items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-primary-700">
+                  <Truck className="h-4 w-4" />
+                  Dispatch in 12h
+                </span>
+              </div>
+
+              <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+                {/* Address selection for delivery */}
+                {isDelivery && (
+                  <div className="md:col-span-2 space-y-4">
+                    <div className="flex items-center justify-between">
+                      <label className="block font-semibold">Select Address</label>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => { setEditingAddress(null); setIsAddressModalOpen(true); }}
+                      >
+                        <Plus className="h-4 w-4 mr-2" />
+                        Add New Address
+                      </Button>
+                    </div>
+
+                    {userAddresses.length > 0 ? (
+                      <div className="grid gap-4">
+                        {userAddresses.map(addr => (
+                          <label
+                            key={addr.id}
+                            className={`group relative flex items-start gap-3 p-4 rounded-2xl border ${selectedAddressId === addr.id
+                              ? 'border-primary-500 bg-primary-50 shadow-sm'
+                              : 'border-slate-200 bg-white'
+                              } cursor-pointer hover:border-primary-300 transition-colors`}
+                          >
+                            <input
+                              type="radio"
+                              name="selectedAddress"
+                              value={addr.id}
+                              checked={selectedAddressId === addr.id}
+                              onChange={() => {
+                                setSelectedAddressId(addr.id);
+                                // Update form with selected address
+                                setValue('shipping.name', addr.name);
+                                setValue('shipping.phone', addr.phone || (undefined as unknown as string));
+                                setValue('shipping.street1', addr.street1);
+                                setValue('shipping.street2', addr.street2 || '');
+                                setValue('shipping.city', addr.city);
+                                setValue('shipping.state', addr.state);
+                                setValue('shipping.zip', addr.zip);
+                                setValue('shipping.country', addr.country);
+                              }}
+                              className="mt-1"
+                            />
+                            <div className="flex-1">
+                              <p className="font-semibold text-slate-900">{addr.name}</p>
+                              <p className="text-sm text-slate-600">{addr.street1}</p>
+                              {addr.street2 && (
+                                <p className="text-sm text-slate-600">{addr.street2}</p>
+                              )}
+                              <p className="text-sm text-slate-600">
+                                {addr.city}, {addr.state} {addr.zip}
+                              </p>
+                              <p className="text-sm text-slate-600">{addr.country}</p>
+                              {addr.phone && (
+                                <p className="text-sm text-slate-600 mt-1">{addr.phone}</p>
+                              )}
+                              <div className="mt-3 flex items-center gap-2">
+                                {addr.isDefault && (
+                                  <span className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-semibold text-primary-700">
+                                    Default
+                                  </span>
+                                )}
+                                <button
+                                  type="button"
+                                  onClick={(e) => { e.preventDefault(); setEditingAddress(addr); setIsAddressModalOpen(true); }}
+                                  className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-medium text-slate-600 hover:border-primary-300 hover:text-primary-600"
+                                >
+                                  <Edit3 className="h-3.5 w-3.5" /> Edit
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={async (e) => {
+                                    e.preventDefault();
+                                    const yes = window.confirm('Delete this address?');
+                                    if (!yes) return;
+                                    try {
+                                      await removeAddress(addr.id);
+                                      if (selectedAddressId === addr.id) setSelectedAddressId(null);
+                                      toast.success('Address deleted');
+                                    } catch (e) {
+                                      toast.error('Failed to delete address');
+                                    }
+                                  }}
+                                  className="inline-flex items-center gap-1 rounded-full border border-red-200 px-2.5 py-0.5 text-xs font-semibold text-red-600 hover:border-red-300 hover:text-red-700"
+                                >
+                                  <Trash2 className="h-3.5 w-3.5" /> Delete
+                                </button>
+                              </div>
+                            </div>
+                          </label>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="text-center py-8 bg-slate-50 rounded-lg">
+                        <MapPin className="h-12 w-12 mx-auto text-slate-400" />
+                        <p className="mt-2 text-slate-600">No addresses found</p>
+                        <p className="text-sm text-slate-500">Add a new address to continue</p>
+                      </div>
+                    )}
                   </div>
-                  <Input
-                    label="City"
-                    {...register('shipping.city')}
-                    error={errors.shipping?.city?.message}
-                  />
-                  <Input
-                    label="State"
-                    {...register('shipping.state')}
-                    error={errors.shipping?.state?.message}
-                  />
-                  <Input
-                    label="ZIP Code"
-                    {...register('shipping.zipCode')}
-                    error={errors.shipping?.zipCode?.message}
-                  />
-                  <Input
-                    label="Country"
-                    {...register('shipping.country')}
-                    error={errors.shipping?.country?.message}
-                  />
-                  <div className="col-span-2">
-                    <Input
-                      label="Phone Number"
-                      {...register('shipping.phone')}
-                      error={errors.shipping?.phone?.message}
-                    />
+                )}
+                {/* Store address selection for pickup */}
+                {!isDelivery && storeAddresses.length > 0 && (
+                  <div className="md:col-span-2">
+                    <label className="block mb-2 font-semibold">Select Pickup Location</label>
+                    <select
+                      className="w-full border rounded p-2"
+                      value={selectedStoreAddressId || ''}
+                      onChange={e => setSelectedStoreAddressId(e.target.value)}
+                    >
+                      {storeAddresses.map(addr => (
+                        <option key={addr.id} value={addr.id}>{addr.name} - {addr.street1}, {addr.city}</option>
+                      ))}
+                    </select>
                   </div>
+                )}
+              </div>
+            </section>
+
+            {/* Shipping Options - Only show if there's a shipping cost */}
+            {isDelivery && selectedAddressId && (
+              <Card className="p-6 border border-gray-200 rounded-xl shadow-sm">
+                <div className="flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-6 border-b">
+                  <Truck className="text-accent w-6 h-6" />
+                  <span>Shipping Options</span>
                 </div>
-              </motion.div>
-
-              {/* Billing Address */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.2 }}
-                className="bg-white rounded-2xl p-6 shadow-sm"
-              >
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
-                  Billing Address
-                </h2>
-                
-                <label className="flex items-center gap-3 mb-6 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={sameAsShipping}
-                    onChange={(e) => setSameAsShipping(e.target.checked)}
-                    className="w-5 h-5 text-primary-600 rounded"
-                  />
-                  <span className="text-gray-700">Same as shipping address</span>
-                </label>
-
-                {!sameAsShipping && (
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="col-span-2">
-                      <Input
-                        label="Full Name"
-                        {...register('billing.fullName')}
-                        error={errors.billing?.fullName?.message}
-                      />
-                    </div>
-                    <div className="col-span-2">
-                      <Input
-                        label="Address Line 1"
-                        {...register('billing.addressLine1')}
-                        error={errors.billing?.addressLine1?.message}
-                      />
-                    </div>
-                    <div className="col-span-2">
-                      <Input
-                        label="Address Line 2 (Optional)"
-                        {...register('billing.addressLine2')}
-                      />
+
+                {shippingRatesLoading ? (
+                  <div className="flex items-center justify-center py-12">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent"></div>
+                    <span className="ml-3 text-gray-600">Loading shipping options...</span>
+                  </div>
+                ) : shippingRatesError ? (
+                  <div className="text-center py-12">
+                    <div className="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
+                      <svg className="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
                     </div>
-                    <Input
-                      label="City"
-                      {...register('billing.city')}
-                      error={errors.billing?.city?.message}
-                    />
-                    <Input
-                      label="State"
-                      {...register('billing.state')}
-                      error={errors.billing?.state?.message}
-                    />
-                    <Input
-                      label="ZIP Code"
-                      {...register('billing.zipCode')}
-                      error={errors.billing?.zipCode?.message}
-                    />
-                    <Input
-                      label="Country"
-                      {...register('billing.country')}
-                      error={errors.billing?.country?.message}
-                    />
-                    <div className="col-span-2">
-                      <Input
-                        label="Phone Number"
-                        {...register('billing.phone')}
-                        error={errors.billing?.phone?.message}
-                      />
+                    <p className="text-red-500 text-lg font-medium">Error loading shipping options</p>
+                    <p className="text-red-400 text-sm mt-1">
+                      {shippingRatesError}
+                    </p>
+                  </div>
+                ) : shippingRates && shippingRates.length > 0 ? (
+                  <div className="space-y-4">
+                    {shippingRates.map((rate) => {
+                      const isSelected = !!selectedShippingRateId && selectedShippingRateId === rate.objectId;
+                      const isTest = rate.test;
+                      const hasAttributes = rate.attributes && rate.attributes.length > 0;
+
+                      return (
+                        <div
+                          key={rate.objectId}
+                          onClick={() => setSelectedShippingRateId(rate.objectId)}
+                          onMouseEnter={() => setShippingPrice(parseFloat(rate.amount))}
+                          onMouseLeave={() => setShippingPrice(parseFloat(rate.amountLocal))}
+                          className={`relative p-5 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md ${isSelected
+                            ? 'border-primary-500 bg-primary-50 ring-2 ring-primary-200'
+                            : 'border-gray-200 hover:border-gray-300'
+                            }`}
+                        >
+                          <div className="flex items-start justify-between">
+                            <div className="flex items-start gap-4 flex-1">
+                              {/* Provider Logo */}
+                              <div className="flex-shrink-0">
+                                <Image
+                                  src={rate.providerImage75 || '/placeholder-product.jpg'}
+                                  alt={rate.provider}
+                                  className="w-12 h-12 rounded-lg object-contain bg-white border border-gray-200 p-1"
+                                  onError={(e: any) => {
+                                    const target = e.target as HTMLImageElement;
+                                    target.style.display = 'none';
+                                  }}
+                                  width={48}
+                                  height={48}
+                                />
+                              </div>
+
+                              {/* Main Content */}
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-2">
+                                  <h3 className="text-lg font-semibold text-gray-900">
+                                    {rate.provider} {rate.servicelevel?.name}
+                                  </h3>
+                                  {isTest && (
+                                    <span className="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded-full">
+                                      TEST
+                                    </span>
+                                  )}
+                                </div>
+
+                                {/* Attributes */}
+                                {hasAttributes && (
+                                  <div className="flex flex-wrap gap-2 mb-3">
+                                    {rate.attributes.map((attr: string) => (
+                                      <span
+                                        key={attr}
+                                        className={`px-2 py-1 text-xs font-medium rounded-full ${attr === 'FASTEST'
+                                          ? 'bg-green-100 text-green-800'
+                                          : attr === 'BESTVALUE'
+                                            ? 'bg-blue-100 text-blue-800'
+                                            : attr === 'CHEAPEST'
+                                              ? 'bg-purple-100 text-purple-800'
+                                              : 'bg-gray-100 text-gray-800'
+                                          }`}
+                                      >
+                                        {attr}
+                                      </span>
+                                    ))}
+                                  </div>
+                                )}
+
+                                {/* Delivery Info */}
+                                <div className="space-y-1 text-sm text-gray-600">
+                                  {rate.durationTerms && (
+                                    <div className="flex items-center gap-2">
+                                      <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                      </svg>
+                                      <span>{rate.durationTerms}</span>
+                                    </div>
+                                  )}
+
+                                  {rate.estimatedDays && (
+                                    <div className="flex items-center gap-2">
+                                      <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                      </svg>
+                                      <span>Estimated {rate.estimatedDays} day{rate.estimatedDays !== 1 ? 's' : ''}</span>
+                                    </div>
+                                  )}
+
+                                  <div className="flex items-center gap-2">
+                                    <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                                    </svg>
+                                    <span>Carrier: {rate.provider}</span>
+                                  </div>
+
+                                  <div className="flex items-center gap-2">
+                                    <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
+                                    </svg>
+                                    <span>Currency: {rate.currency}</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+
+                            {/* Price */}
+                            <div className="flex flex-col items-end">
+                              <div className="text-2xl font-bold text-gray-900">
+                                {formatPrice(parseFloat(rate.amount))}
+                              </div>
+                              {rate.amount !== rate.amountLocal && (
+                                <div className="text-sm text-gray-500">
+                                  {rate.amountLocal} {rate.currencyLocal}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          {/* Selection Indicator */}
+                          {isSelected && (
+                            <div className="absolute top-3 right-3">
+                              <div className="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center">
+                                <CheckIcon className="w-4 h-4 text-white" />
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <div className="text-center py-12">
+                    <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
+                      <Truck className="w-8 h-8 text-gray-400" />
                     </div>
+                    <p className="text-gray-500 text-lg font-medium">No shipping options available</p>
+                    <p className="text-gray-400 text-sm mt-1">Please check the shipping address or try a different location.</p>
                   </div>
                 )}
-              </motion.div>
-            </div>
 
+              </Card>
+            )}
+          </motion.div>
+
+          <motion.aside
+            initial={{ opacity: 0, y: 32 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, ease: 'easeOut', delay: 0.1 }}
+            className="space-y-10 lg:sticky lg:top-24"
+          >
             {/* Order Summary */}
-            <div className="lg:col-span-1">
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.3 }}
-                className="bg-white rounded-2xl p-6 shadow-sm sticky top-24"
-              >
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
-                  Order Summary
-                </h2>
-
-                {/* Items */}
-                <div className="space-y-4 mb-6 max-h-64 overflow-y-auto">
-                  {cart.items.map((item) => (
-                    <div key={item.productId} className="flex gap-3">
-                      <div className="w-16 h-16 rounded-lg bg-gray-100 flex-shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <p className="font-medium text-gray-900 text-sm truncate">
-                          {item.product.name}
+            <div className="rounded-3xl border border-slate-100 bg-white p-6 shadow-xl shadow-primary-50/50 transition hover:shadow-primary-100/60">
+              <h2 className="text-2xl font-semibold text-slate-900">Order Summary</h2>
+
+              {/* Delivery Method */}
+              <section className="mt-6 space-y-4">
+                <h3 className="text-xs font-semibold text-slate-700 uppercase tracking-wider">
+                  Delivery Method
+                </h3>
+                <div className="grid grid-cols-1 gap-3">
+                  {[
+                    {
+                      label: 'Delivery',
+                      icon: <Truck className="w-5 h-5" />,
+                      value: true,
+                      desc: 'Shipped to your address',
+                    },
+                    {
+                      label: 'Pickup',
+                      icon: <MapPin className="w-5 h-5" />,
+                      value: false,
+                      desc: 'Collect from pharmacy',
+                    },
+                  ].map((option) => {
+                    const active = isDelivery === option.value
+                    return (
+                      <button
+                        key={option.label}
+                        type="button"
+                        onClick={() => setIsDelivery(option.value)}
+                        aria-pressed={active}
+                        className={`relative flex w-full items-center justify-between rounded-xl border-2 p-3 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 ${active
+                          ? 'border-primary-500 bg-primary-50 shadow-sm'
+                          : 'border-slate-200 bg-white hover:border-primary-200 hover:bg-primary-50/40'
+                          }`}
+                      >
+                        <div className="flex items-center gap-3">
+                          <div
+                            className={`p-2 rounded-lg ${active
+                              ? 'bg-primary-100 text-primary-600'
+                              : 'bg-slate-100 text-slate-600 group-hover:bg-slate-50'
+                              }`}
+                          >
+                            {option.icon}
+                          </div>
+                          <div className="text-left">
+                            <div className="font-medium text-slate-900">
+                              {option.label}
+                            </div>
+                            <p className="text-xs text-slate-500">{option.desc}</p>
+                          </div>
+                        </div>
+                        {active && (
+                          <div className="w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center text-white shadow-sm">
+                            <CheckIcon className="w-3 h-3" />
+                          </div>
+                        )}
+                      </button>
+                    )
+                  })}
+                </div>
+              </section>
+
+              {/* Payment Method */}
+              <section className="mt-8 space-y-4">
+                <h3 className="text-xs font-semibold text-slate-700 uppercase tracking-wider">
+                  Payment Method
+                </h3>
+                <div className="space-y-3">
+                  {PAYMENT_METHODS.map((pm) => {
+                    const active = paymentMethod === pm.value
+                    return (
+                      <button
+                        key={pm.value}
+                        type="button"
+                        onClick={() => setPaymentMethod(pm.value)}
+                        className={`w-full flex items-center justify-between rounded-xl border-2 p-3 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${active
+                          ? `${pm.activeClass} border-current shadow-sm`
+                          : `${pm.className} border-slate-200 hover:border-primary-200 hover:shadow-sm`
+                          }`}
+                      >
+                        <div className="flex items-center gap-3">
+                          <div
+                            className={`p-1.5 rounded-md ${pm.value === 'Card'
+                              ? 'bg-blue-100 text-blue-600'
+                              : pm.value === 'Cash'
+                                ? 'bg-amber-100 text-amber-600'
+                                : 'bg-emerald-100 text-emerald-600'
+                              } ${active ? 'bg-opacity-30' : 'bg-opacity-100'}`}
+                          >
+                            {pm.icon}
+                          </div>
+                          <span className="text-sm font-medium text-slate-900">
+                            {pm.label}
+                          </span>
+                        </div>
+                        {active && (
+                          <div className="w-4 h-4 rounded-full bg-primary-500 flex items-center justify-center text-white shadow-sm">
+                            <CheckIcon className="w-2.5 h-2.5" />
+                          </div>
+                        )}
+                      </button>
+                    )
+                  })}
+                </div>
+                <p className="text-xs text-slate-500 mt-2 pl-1 leading-relaxed">
+                  {paymentMethod === 'Card' &&
+                    'You will be redirected to a secure payment page.'}
+                  {paymentMethod === 'Cash' &&
+                    'Pay with cash at the time of delivery or pickup.'}
+                  {paymentMethod === 'Credit' &&
+                    'Use your available account credit for this order.'}
+                </p>
+              </section>
+
+              {/* Cart Summary */}
+              <section className="mt-8 pt-6 border-t border-slate-100">
+                <div className="max-h-60 space-y-4 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-slate-200 hover:scrollbar-thumb-slate-300">
+                  {cart?.cartBody?.items?.map((item: any) => (
+                    <div
+                      key={item.productId}
+                      className="flex gap-4 rounded-2xl border border-slate-100 p-4 hover:bg-slate-50/50 transition"
+                    >
+                      <div className="flex h-16 w-16 items-center justify-center rounded-xl bg-slate-100 text-slate-400">
+                        <Image src={item.productVariantData.productMedia?.[0]?.file || '/placeholder-product.jpg'}
+                          alt={item.productVariantData.name} width={64} height={64} className="object-contain" />
+                      </div>
+
+                      <div className="flex-1">
+                        <p className="text-sm font-semibold text-slate-900">
+                          {item?.productVariantData?.name}
                         </p>
-                        <p className="text-sm text-gray-500">Qty: {item.quantity}</p>
+                        <p className="text-xs text-slate-500">Qty {item.quantity}</p>
                       </div>
-                      <p className="font-medium text-gray-900 text-sm">
-                        {formatPrice(item.product.price * item.quantity)}
+                      <p className="text-sm font-semibold text-slate-900">
+                        {formatPrice(item.productVariantData.finalPrice * item.quantity)}
                       </p>
                     </div>
                   ))}
                 </div>
 
-                <div className="space-y-3 border-t border-gray-200 pt-4 mb-6">
-                  <div className="flex justify-between text-gray-700">
+                {/* Totals */}
+                <div className="mt-6 space-y-3 text-sm text-slate-600">
+                  <div className="flex items-center justify-between">
                     <span>Subtotal</span>
-                    <span className="font-medium">{formatPrice(subtotal)}</span>
-                  </div>
-                  <div className="flex justify-between text-gray-700">
-                    <span>Shipping</span>
-                    <span className="font-medium">
-                      {shipping === 0 ? (
-                        <span className="text-green-600">FREE</span>
-                      ) : (
-                        formatPrice(shipping)
-                      )}
+                    <span className="font-semibold text-slate-900">
+                      {formatPrice(subtotal)}
                     </span>
                   </div>
-                  <div className="flex justify-between text-gray-700">
-                    <span>Tax</span>
-                    <span className="font-medium">{formatPrice(tax)}</span>
-                  </div>
-                  <div className="border-t border-gray-200 pt-3">
-                    <div className="flex justify-between">
-                      <span className="text-xl font-bold text-gray-900">Total</span>
-                      <span className="text-2xl font-bold text-gray-900">
-                        {formatPrice(total)}
+                  {isDelivery && (
+                    <div className="flex items-center justify-between">
+                      <span>Shipping</span>
+                      <span className="font-semibold">
+                        {formatPrice(shippingPrice)}
                       </span>
                     </div>
+                  )}
+                  <div className="flex items-center justify-between">
+                    <span>Estimated tax</span>
+                    <span className="font-semibold">{formatPrice(tax)}</span>
+                  </div>
+                  <div className="rounded-2xl bg-slate-50 p-4">
+                    <div className="flex items-center justify-between text-base font-semibold text-slate-900">
+                      <span>Total Due</span>
+                      <span>{formatPrice(total)}</span>
+                    </div>
+                    <p className="mt-1 text-xs text-slate-500">
+                      Tax is estimated. Final amount confirmed after payment.
+                    </p>
                   </div>
                 </div>
+              </section>
 
-                <Button
-                  type="submit"
-                  size="lg"
-                  isLoading={isSubmitting}
-                  className="w-full"
-                >
-                  <CreditCard className="w-5 h-5" />
-                  Place Order
-                </Button>
-
-                <div className="flex items-center justify-center gap-2 text-sm text-gray-500 mt-4">
-                  <Lock className="w-4 h-4" />
-                  <span>Secure checkout powered by Stripe</span>
-                </div>
-              </motion.div>
+              {/* Checkout Button */}
+              <Button
+                type="submit"
+                size="lg"
+                isLoading={isSubmitting}
+                className="mt-6 w-full transition-transform hover:scale-[1.02] active:scale-[0.99]"
+              >
+                <CreditCard className="h-5 w-5" />
+                {isSubmitting ? 'Placing order...' : 'Place Secure Order'}
+              </Button>
+
+              <p className="mt-4 flex items-center justify-center gap-2 text-xs text-slate-500">
+                <Lock className="h-4 w-4" />
+                Fully encrypted checkout — cancel anytime before shipment.
+              </p>
             </div>
-          </div>
-        </form>
-      </div>
+
+            {/* Why Patients Choose Us */}
+            <div className="rounded-3xl border border-primary-100 bg-primary-50/80 p-6 text-sm text-primary-700 shadow-sm hover:shadow-md transition-shadow">
+              <p className="font-semibold uppercase tracking-[0.3em] text-primary-800">
+                Why Patients Choose Us
+              </p>
+              <ul className="mt-4 space-y-3 text-primary-700 leading-relaxed">
+                <li className="flex items-start gap-3">
+                  <PackageCheck className="mt-0.5 h-4 w-4 shrink-0" />
+                  <span>Pharmacy-grade verification on every order.</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0" />
+                  <span>Cold-chain logistics for sensitive medications.</span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <Truck className="mt-0.5 h-4 w-4 shrink-0" />
+                  <span>Real-time tracking and SMS updates from prep to delivery.</span>
+                </li>
+              </ul>
+            </div>
+          </motion.aside>
+
+        </div>
+      </form>
+      <AddressFormModal
+        isOpen={isAddressModalOpen}
+        onClose={() => setIsAddressModalOpen(false)}
+        initialAddress={editingAddress}
+        onAddressAdded={(addr) => {
+          refresh().then(() => {
+            setSelectedAddressId(addr.id);
+            setValue('shipping.name', addr.name);
+            setValue('shipping.phone', addr.phone || (undefined as unknown as string));
+            setValue('shipping.street1', addr.street1);
+            setValue('shipping.street2', addr.street2 || '');
+            setValue('shipping.city', addr.city);
+            setValue('shipping.state', addr.state);
+            setValue('shipping.zip', addr.zip);
+            setValue('shipping.country', addr.country);
+          });
+        }}
+        onAddressUpdated={() => {
+          refresh();
+        }}
+      />
+      {/* </div> */}
     </div>
   );
 }
-