hey-pharmacist-ecommerce 1.1.28 → 1.1.30

package/src/screens/CheckoutScreen.tsx

@@ -24,6 +24,7 @@ import { useAuth } from '@/providers/AuthProvider';
 import { OrdersApi } from '@/lib/Apis/apis/orders-api';
 import { ShippingApi } from '@/lib/Apis/apis/shipping-api';
 import { useAddresses } from '@/hooks/useAddresses';
+import { useStoreCapabilities } from '@/hooks/useStoreCapabilities';
 import { formatPrice } from '@/lib/utils/format';
 import { useRouter } from 'next/navigation';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
@@ -48,32 +49,28 @@ type CheckoutFormData = z.infer<typeof checkoutSchema>;
 const SHIPPING_THRESHOLD = 100;
 const TAX_RATE = 0.08;
 
-// Add enums for payment methods
-const PAYMENT_METHODS = [
+// Base payment methods config (filtered at runtime based on capabilities)
+const PAYMENT_METHODS_CONFIG = [
   {
+    id: 'Card',
     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',
+    requiresStripe: true,
   },
   {
+    id: 'Cash',
     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',
+    requiresStripe: false,
   },
-  // {
-  //   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() {
@@ -82,8 +79,9 @@ export function CheckoutScreen() {
   const { isAuthenticated, user } = useAuth();
   const { buildPath } = useBasePath();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isDelivery, setIsDelivery] = useState(true); // delivery or pickup
-  const [paymentMethod, setPaymentMethod] = useState('Card');
+  const [isDelivery, setIsDelivery] = useState<boolean | 'custom' | null>(null); // Start with no selection
+  const [hasSetDefaultDelivery, setHasSetDefaultDelivery] = useState(false);
+  const [paymentMethod, setPaymentMethod] = useState<string | null>(null); // null until capabilities load
   const [error, setError] = useState<string | null>(null);
   const [selectedAddressId, setSelectedAddressId] = useState<string | null>(null);
   const [storeAddresses, setStoreAddresses] = useState<any[]>([]); // For pickup selection
@@ -98,6 +96,73 @@ export function CheckoutScreen() {
     addresses: userAddresses,
     defaultAddress
   } = useAddresses();
+
+  // Get store capabilities for payment/delivery options
+  const {
+    capabilities,
+    isLoading: capabilitiesLoading,
+    showCardPayment,
+    showShippoDelivery,
+    showCustomDelivery,
+  } = useStoreCapabilities();
+
+  // Filter payment methods based on capabilities
+  const availablePaymentMethods = PAYMENT_METHODS_CONFIG.filter(pm => {
+    if (pm.requiresStripe) {
+      return showCardPayment;
+    }
+    return true; // Cash is always available
+  });
+
+  // Set default payment method once capabilities are loaded
+  useEffect(() => {
+    if (!capabilitiesLoading && paymentMethod === null && availablePaymentMethods.length > 0) {
+      // Prefer Card if available, otherwise use first available
+      const preferCard = availablePaymentMethods.find(pm => pm.id === 'Card');
+      setPaymentMethod(preferCard ? 'Card' : availablePaymentMethods[0].value);
+    }
+  }, [capabilitiesLoading, paymentMethod, availablePaymentMethods]);
+
+  // Set default delivery method once capabilities are loaded
+  useEffect(() => {
+    if (!capabilitiesLoading && !hasSetDefaultDelivery && capabilities) {
+      // Only default to Pickup if NO delivery options are available
+      if (!showShippoDelivery && !showCustomDelivery) {
+        setIsDelivery(false);
+      }
+      // Otherwise leave as null (User must choose)
+      setHasSetDefaultDelivery(true);
+    }
+  }, [capabilitiesLoading, hasSetDefaultDelivery, capabilities, showShippoDelivery, showCustomDelivery]);
+
+  // Build delivery options based on capabilities
+  const deliveryOptions = [
+    // Shippo delivery (if enabled)
+    ...(showShippoDelivery ? [{
+      id: 'shippo',
+      label: 'Delivery',
+      icon: <Truck className="w-5 h-5" />,
+      value: true as const,
+      desc: 'Shipped to your address',
+    }] : []),
+    // Custom/Store delivery (if enabled)
+    ...(showCustomDelivery ? [{
+      id: 'custom',
+      label: capabilities?.customDeliveryTitle || 'Store Delivery',
+      icon: <Truck className="w-5 h-5" />,
+      value: 'custom' as const,
+      desc: capabilities?.customDeliveryFlatRate
+        ? `Flat rate: ${formatPrice(capabilities.customDeliveryFlatRate)}`
+        : 'Flat rate delivery',
+    }] : []),
+    {
+      id: 'pickup',
+      label: 'Pickup',
+      icon: <MapPin className="w-5 h-5" />,
+      value: false as const,
+      desc: 'Collect from pharmacy',
+    },
+  ];
   const [selectedShippingRateId, setSelectedShippingRateId] = useState<string | null>(null);
   const [shippingRates, setShippingRates] = useState<any[]>([]);
   const [shippingRatesLoading, setShippingRatesLoading] = useState(false);
@@ -116,13 +181,21 @@ export function CheckoutScreen() {
       sameAsShipping: true,
       shipping: {
         name: user ? `${user.firstname} ${user.lastname}` : '',
-        phone: user?.phoneNumber || undefined,
+        phone: user?.phoneNumber || '',
         country: 'United States',
+        // street1: '',
+        // city: '',
+        // state: '',
+        // zip: '',
       },
       billing: {
         name: user ? `${user.firstname} ${user.lastname}` : '',
-        phone: user?.phoneNumber || undefined,
+        phone: user?.phoneNumber || '',
         country: 'United States',
+        // street1: '',
+        // city: '',
+        // state: '',
+        // zip: '',
       },
     },
   });
@@ -153,7 +226,7 @@ export function CheckoutScreen() {
       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.phone', defaultAddress.phone || '');
       setValue('shipping.street1', defaultAddress.street1);
       setValue('shipping.street2', defaultAddress.street2 || '');
       setValue('shipping.city', defaultAddress.city);
@@ -223,7 +296,7 @@ export function CheckoutScreen() {
   }
 
   useEffect(() => {
-    if (!isDelivery || !selectedAddressId || !cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
+    if (isDelivery !== true || !selectedAddressId || !cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
       setShippingRates([]);
       setSelectedShippingRateId(null);
       return;
@@ -253,17 +326,24 @@ export function CheckoutScreen() {
   }, [isDelivery, selectedAddressId, cart]);
 
   useEffect(() => {
-    if (!isDelivery) {
+    let cancelled = false;
+
+    if (isDelivery === false) {
       (async () => {
         const api = new ShippingApi(AXIOS_CONFIG);
         const res = await api.getStoreAddress();
-        if (res.data) {
+        // Only update state if this effect hasn't been cleaned up
+        if (!cancelled && res.data) {
           setStoreAddresses([res.data]);
           setShippingPrice(0);
         }
       })();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    // Cleanup function to prevent stale updates when delivery method changes
+    return () => {
+      cancelled = true;
+    };
   }, [isDelivery]);
 
 
@@ -285,12 +365,22 @@ export function CheckoutScreen() {
       setError('Please select a payment method.');
       return;
     }
-    if (isDelivery) {
+    if (isDelivery === null) {
+      setError('Please select a delivery method.');
+      return;
+    }
+    // Check for delivery-related requirements (both shippo and custom delivery need address)
+    const isShippoDelivery = isDelivery === true;
+    const isCustomDelivery = isDelivery === 'custom';
+    const needsDeliveryAddress = isShippoDelivery || isCustomDelivery;
+
+    if (needsDeliveryAddress) {
       if (!selectedAddressId) {
         setError('Please select a shipping address.');
         return;
       }
-      if (!selectedShippingRateId) {
+      // Only require shipping rate selection for Shippo delivery
+      if (isShippoDelivery && !selectedShippingRateId) {
         setError('Please select a shipping method.');
         return;
       }
@@ -301,7 +391,8 @@ export function CheckoutScreen() {
           return;
         }
       }
-    } else {
+    } else if (isDelivery === false) {
+      // Pickup case
       if (storeAddresses.length === 0) {
         setError('Store pickup location is not available.');
         return;
@@ -338,22 +429,31 @@ export function CheckoutScreen() {
       } else if (paymentMethod === 'Card') {
         billingAddressId = userAddresses.length > 0 ? userAddresses[0].id : undefined;
       }
+      // Build manualShipping object for custom delivery
+      const manualShipping = isDelivery === 'custom' && selectedAddressId ? {
+        amount: capabilities?.customDeliveryFlatRate || 0,
+        userAddressId: selectedAddressId,
+        shippingTitle: capabilities?.customDeliveryTitle || 'Store Delivery',
+      } : undefined;
+
       const orderDTO: any = {
         items,
         paymentMethod,
         orderStatus: 'Pending',
-        chargeTax: true,
         orderRemindingDates: [],
         shippingAddress: data.shipping,
         billingAddress: sameAsShipping ? data.shipping : data.billing,
+        ...(manualShipping && { manualShipping }),
       };
 
       const api = new OrdersApi(AXIOS_CONFIG);
+      // Convert isDelivery to boolean for API (custom delivery counts as delivery)
+      const isDeliveryBoolean = isDelivery !== false;
       const response = await api.createCheckout(
         orderDTO,
-        isDelivery,
-        user?.id,
-        isDelivery ? (selectedShippingRateId || undefined) : undefined,
+        isDeliveryBoolean,
+        undefined, // dont pass userId
+        isDeliveryBoolean && isDelivery === true ? (selectedShippingRateId || undefined) : undefined,
         billingAddressId
       );
       if (response?.data?.payment && response.data.payment.hostedInvoiceUrl === 'INSUFFICIENT_CREDIT') {
@@ -425,7 +525,7 @@ export function CheckoutScreen() {
     router.push(buildPath('/cart'));
     return null;
   }
-  const subtotal = cart.total;
+  const subtotal = cart.cartBody.items.reduce((total, item) => total + item.productVariantData.finalPrice * item.quantity, 0);
   const tax = 0;
   const total = subtotal + shippingPrice + tax;
 
@@ -449,143 +549,267 @@ export function CheckoutScreen() {
                 Complete your order information below
               </p>
             </div>
-            <section className="bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]">
-              <div className="flex flex-wrap items-center justify-between gap-4">
+            {/* Delivery and Payment Methods Section - Side by Side */}
+            <div className="bg-white border-2 border-gray-100 rounded-[24px] p-8">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                {/* Delivery Method */}
                 <div>
-                  <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-2xl">
-                    Contact Information
-                  </h2>
-                  <p className="text-sm text-slate-500">
-                    We use temperature-aware packaging and real-time tracking on every shipment.
+                  <div className="flex items-center gap-3 mb-6">
+                    <Truck className="w-6 h-6 text-[#2B4B7C]" />
+                    <h2 className="text-xl font-semibold text-[#2B4B7C]">Delivery Method</h2>
+                  </div>
+
+                  <div className="space-y-3">
+                    {deliveryOptions.map((option) => {
+                      const active = isDelivery === option.value;
+                      return (
+                        <button
+                          key={option.id}
+                          type="button"
+                          onClick={() => {
+                            setIsDelivery(option.value);
+                            // Reset shipping rate when changing delivery method
+                            setSelectedShippingRateId(null);
+                            // Set shipping price based on delivery type
+                            if (option.value === 'custom' && capabilities?.customDeliveryFlatRate) {
+                              setShippingPrice(capabilities.customDeliveryFlatRate);
+                            } else if (option.value === false) {
+                              setShippingPrice(0);
+                            } else {
+                              setShippingPrice(0); // Will be set when shipping rate is selected
+                            }
+                          }}
+                          className={`relative flex w-full items-center justify-between rounded-xl border-2 p-3 transition-all duration-200 ${active
+                            ? 'border-primary-500 bg-primary-50'
+                            : 'border-gray-200 hover:border-primary-300'
+                            }`}
+                        >
+                          <div className="flex items-center gap-3">
+                            <div
+                              className={`p-2 rounded-lg ${active ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 text-gray-600'
+                                }`}
+                            >
+                              {option.icon}
+                            </div>
+                            <div className="text-left">
+                              <div className="font-medium text-gray-900">{option.label}</div>
+                              <p className="text-xs text-gray-500">{option.desc}</p>
+                            </div>
+                          </div>
+                          {active && (
+                            <div className="w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center shrink-0">
+                              <Check className="w-3 h-3 text-white" />
+                            </div>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* Payment Method */}
+                <div>
+                  <div className="flex items-center gap-3 mb-6">
+                    <CreditCard className="w-6 h-6 text-[#2B4B7C]" />
+                    <h2 className="text-xl font-semibold text-[#2B4B7C]">Payment Method</h2>
+                  </div>
+
+                  <div className="space-y-3">
+                    {availablePaymentMethods.map((pm) => {
+                      const active = paymentMethod === pm.value;
+
+                      return (
+                        <button
+                          key={pm.value}
+                          type="button"
+                          onClick={() => setPaymentMethod(pm.value)}
+                          className={`
+                          group relative flex w-full items-center justify-between rounded-xl border-2 p-3
+                          transition-all duration-200 ease-out
+                          focus:outline-hidden
+                          ${active
+                              ? `${pm.activeClass} shadow-md scale-[1.02]`
+                              : `${pm.className} border-gray-200 bg-white hover:shadow-xs hover:-translate-y-0.5`
+                            }
+                        `}
+                        >
+                          <div className="flex items-center gap-3">
+                            <div
+                              className={`
+                              flex items-center justify-center rounded-lg p-2
+                              transition-colors duration-200
+                              ${pm.value === 'Card'
+                                  ? ' text-blue-600'
+                                  : pm.value === 'Cash'
+                                    ? ' text-amber-600'
+                                    : ' text-emerald-600'
+                                }
+                              ${active ? 'opacity-80' : 'group-hover:opacity-90'}
+                            `}
+                            >
+                              {pm.icon}
+                            </div>
+
+                            <span className="text-sm font-semibold text-gray-900">
+                              {pm.label}
+                            </span>
+                          </div>
+
+                          {active && (
+                            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-current shrink-0">
+                              <Check className="h-3 w-3 text-white" />
+                            </div>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+
+                  <p className="text-xs text-slate-500 mt-4 px-1">
+                    {paymentMethod === 'Card' &&
+                      'You will be redirected to a secure payment page.'}
+                    {paymentMethod === 'Cash' &&
+                      'Pay with cash at the time of delivery or pickup.'}
                   </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>
 
-              <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-solid"
-                        size="sm"
-                        onClick={() => { setEditingAddress(null); setIsAddressModalOpen(true); }}
-                      >
-                        <Plus className="h-4 w-4 mr-2" />
-                        Add New Address
-                      </Button>
-                    </div>
+            {isDelivery !== null && (
+              <section className="bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]">
+                <div className="flex flex-wrap items-center justify-between gap-4">
+                  <div>
+                    <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-2xl">
+                      {isDelivery ? 'Delivery Address' : 'Contact Information'}
+                    </h2>
+                    <p className="text-sm text-slate-500">
+                      We use temperature-aware packaging and real-time tracking on every shipment.
+                    </p>
+                  </div>
+                </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-xs'
-                              : '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);
-                                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>
+                <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-solid"
+                          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-xs'
+                                : '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);
+                                  setValue('shipping.name', addr.name);
+                                  setValue('shipping.phone', addr.phone || '');
+                                  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>
                                 )}
-                                <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);
-                                      notification.success('Address deleted');
-                                    } catch (e) {
-                                      notification.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>
+                                <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);
+                                        notification.success('Address deleted');
+                                      } catch (e) {
+                                        notification.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>
-                            </div>
-                          </label>
+                            </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>
+                  )}
+                  {/* Store address selection for pickup */}
+                  {isDelivery === false && storeAddresses.length > 0 && (
+                    <div className="md:col-span-2">
+                      <label className="block mb-2 font-semibold">Select Pickup Location</label>
+                      <div className="flex items-center gap-2">
+                        {storeAddresses.map(addr => (
+                          <div key={addr.id} className="w-full border rounded-sm p-2">
+                            <p>{addr.name} - {addr.street1}, {addr.city}, {addr.state} {addr.zip}</p>
+                          </div>
                         ))}
                       </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>
-                )}
-                {/* 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>
-                    <div className="flex items-center gap-2">
-                      {storeAddresses.map(addr => (
-                        <div key={addr.id} className="w-full border rounded-sm p-2">
-                          <p>{addr.name} - {addr.street1}, {addr.city}, {addr.state} {addr.zip}</p>
-                        </div>
-                      ))}
                     </div>
-                  </div>
-                )}
-              </div>
-            </section>
+                  )}
+                </div>
+              </section>
+            )}
 
-            {/* Shipping Options - Only show if there's a shipping cost */}
-            {isDelivery && selectedAddressId && (
+            {/* Shipping Options - Only show if there's a shipping cost and it's Shippo delivery */}
+            {isDelivery === true && selectedAddressId && (
               <div className="bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]">
                 <div className="flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-8 border-b">
                   <Truck className="w-8 h-8 flex items-center justify-center text-[#2B4B7C]" />
@@ -730,139 +954,7 @@ export function CheckoutScreen() {
               </div>
             )}
 
-            {/* Delivery and Payment Methods Section */}
-            <div className="space-y-6">
-              {/* Delivery Method */}
-              <div className="bg-white border-2 border-gray-100 rounded-[24px] p-8">
-                <div className="flex items-center gap-3 mb-6">
-                  <Truck className="w-8 h-8 text-[#2B4B7C]" />
-                  <h2 className="text-2xl font-semibold text-[#2B4B7C]">Delivery Method</h2>
-                </div>
-
-                <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);
-                          // Reset selected shipping rate when changing delivery method
-                          if (option.value) {
-                            setSelectedShippingRateId(null);
-                            setShippingPrice(0);
-                          }
-                        }}
-                        className={`relative flex w-full items-center justify-between rounded-xl border-2 p-4 transition-all duration-200 ${active
-                          ? 'border-primary-500 bg-primary-50'
-                          : 'border-gray-200 hover:border-primary-300'
-                          }`}
-                      >
-                        <div className="flex items-center gap-3">
-                          <div
-                            className={`p-2 rounded-lg ${active ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 text-gray-600'
-                              }`}
-                          >
-                            {option.icon}
-                          </div>
-                          <div className="text-left">
-                            <div className="font-medium text-gray-900">{option.label}</div>
-                            <p className="text-sm text-gray-500">{option.desc}</p>
-                          </div>
-                        </div>
-                        {active && (
-                          <div className="w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center">
-                            <Check className="w-3 h-3 text-white" />
-                          </div>
-                        )}
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              {/* Payment Method */}
-              <div className="bg-white border-2 border-gray-100 rounded-[24px] p-8">
-                <div className="flex items-center gap-3 mb-6">
-                  <CreditCard className="w-8 h-8 text-[#2B4B7C]" />
-                  <h2 className="text-2xl font-semibold text-[#2B4B7C]">Payment Method</h2>
-                </div>
-
-                <div className="grid gap-4 md:grid-cols-3">
-                  {PAYMENT_METHODS.map((pm) => {
-                    const active = paymentMethod === pm.value;
 
-                    return (
-                      <button
-                        key={pm.value}
-                        type="button"
-                        onClick={() => setPaymentMethod(pm.value)}
-                        className={`
-                          group relative flex w-full items-center justify-between rounded-xl border-2 p-3
-                          transition-all duration-200 ease-out
-                          focus:outline-hidden f
-                          ${active
-                            ? `${pm.activeClass} shadow-md scale-[1.02]`
-                            : `${pm.className} border-gray-200 bg-white hover:shadow-xs hover:-translate-y-0.5`
-                          }
-                        `}
-                      >
-                        <div className="flex items-center gap-3">
-                          <div
-                            className={`
-                              flex items-center justify-center rounded-lg p-2
-                              transition-colors duration-200
-                              ${pm.value === 'Card'
-                                ? ' text-blue-600'
-                                : pm.value === 'Cash'
-                                  ? ' text-amber-600'
-                                  : ' text-emerald-600'
-                              }
-                              ${active ? 'opacity-80' : 'group-hover:opacity-90'}
-                            `}
-                          >
-                            {pm.icon}
-                          </div>
-
-                          <span className="text-sm font-semibold text-gray-900">
-                            {pm.label}
-                          </span>
-                        </div>
-
-                        {active && (
-                          <div className="flex h-6 w-6 items-center justify-center rounded-full shadow-xs">
-                            <Check className="h-3.5 w-3.5 text-white" />
-                          </div>
-                        )}
-                      </button>
-                    );
-                  })}
-                </div>
-
-                <p className="text-sm text-gray-500 mt-4">
-                  {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>
-              </div>
-            </div>
           </motion.div>
 
           <motion.aside
@@ -880,9 +972,9 @@ export function CheckoutScreen() {
               <section className="mt-8 pt-6 border-t border-slate-100">
                 <div className="space-y-4 mb-6">
                   {cart?.cartBody?.items?.map((item: any) => (
-                    <div key={`${item.productId}-${item.color}-${item.size}`} className="flex gap-3">
+                    <div key={item.productVariantId || item.id} className="flex gap-3">
                       <div className="w-16 h-16 rounded-xl overflow-hidden bg-white shrink-0">
-                        <Image src={item.productVariantData.productMedia?.[0]?.file || '/placeholder-product.jpg'} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
+                        <Image src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1">
@@ -948,9 +1040,31 @@ export function CheckoutScreen() {
                   </div>
                 </div>
               )}
+              {Object.keys(errors).length > 0 && (
+                <div className="mt-4 p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-700 text-sm font-medium">
+                  <div className="flex items-start gap-2">
+                    <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
+                    <div>
+                      <p className="font-semibold mb-1">Please fix the following errors:</p>
+                      <ul className="list-disc list-inside space-y-1">
+                        {errors.shipping?.name && <li>{errors.shipping.name.message}</li>}
+                        {errors.shipping?.phone && <li>{errors.shipping.phone.message}</li>}
+                        {errors.shipping?.street1 && <li>{errors.shipping.street1.message}</li>}
+                        {errors.shipping?.city && <li>{errors.shipping.city.message}</li>}
+                        {errors.shipping?.state && <li>{errors.shipping.state.message}</li>}
+                        {errors.shipping?.zip && <li>{errors.shipping.zip.message}</li>}
+                        {errors.shipping?.country && <li>{errors.shipping.country.message}</li>}
+                        {!sameAsShipping && errors.billing?.name && <li>Billing: {errors.billing.name.message}</li>}
+                        {!sameAsShipping && errors.billing?.street1 && <li>Billing: {errors.billing.street1.message}</li>}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              )}
               <button
                 type="submit"
-                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-[#E67E50] hover:bg-[#2B4B7C] flex items-center justify-center gap-2"
+                disabled={isSubmitting}
+                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-[#E67E50] hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}
@@ -974,7 +1088,7 @@ export function CheckoutScreen() {
           refresh().then(() => {
             setSelectedAddressId(addr.id);
             setValue('shipping.name', addr.name);
-            setValue('shipping.phone', addr.phone || (undefined as unknown as string));
+            setValue('shipping.phone', addr.phone || '');
             setValue('shipping.street1', addr.street1);
             setValue('shipping.street2', addr.street2 || '');
             setValue('shipping.city', addr.city);