hey-pharmacist-ecommerce 1.1.13 → 1.1.14

package/src/screens/ChangePasswordScreen.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
+import { Lock, ShieldCheck } from 'lucide-react';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { AuthApi } from '@/lib/Apis/apis/auth-api';
+import { getApiConfiguration } from '@/lib/api-adapter/config';
+import { useAuth } from '@/providers/AuthProvider';
+import { useBasePath } from '@/providers/BasePathProvider';
+
+const changePasswordSchema = z
+  .object({
+    currentPassword: z.string().min(6, 'Current password is required'),
+    newPassword: z.string().min(8, 'Password must be at least 8 characters'),
+    confirmPassword: z.string().min(8, 'Confirm your new password'),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    path: ['confirmPassword'],
+    message: 'Passwords do not match',
+  });
+
+type ChangePasswordFormData = z.infer<typeof changePasswordSchema>;
+
+export function ChangePasswordScreen() {
+  const router = useRouter();
+  const { user } = useAuth();
+  const { buildPath } = useBasePath();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(
+    null
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ChangePasswordFormData>({
+    resolver: zodResolver(changePasswordSchema),
+  });
+
+  if (!user) {
+    router.push(buildPath('/login'));
+    return null;
+  }
+
+  const onSubmit = async (data: ChangePasswordFormData) => {
+    setIsSubmitting(true);
+    setStatus(null);
+    try {
+      await new AuthApi(getApiConfiguration()).changePassword(
+        data.currentPassword,
+        data.newPassword
+      );
+      setStatus({ type: 'success', message: 'Password updated successfully' });
+      setTimeout(() => router.push(buildPath('/account')), 600);
+    } catch (error: any) {
+      setStatus({
+        type: 'error',
+        message: error?.response?.data?.message || 'Unable to update password',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900">
+      <div className="container mx-auto px-4 pb-16 pt-10">
+        <motion.div
+          initial={{ opacity: 0, y: 18 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mx-auto max-w-2xl rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-primary-50"
+        >
+          <div className="flex items-center gap-3">
+            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary-50 text-primary-600">
+              <Lock className="h-5 w-5" />
+            </span>
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.32em] text-slate-500">
+                Security
+              </p>
+              <h1 className="text-2xl font-semibold text-slate-900">Change password</h1>
+            </div>
+          </div>
+          <p className="mt-3 text-sm text-slate-600">
+            Use a strong password that you have not used elsewhere. Updating your password will sign
+            you out of other active sessions.
+          </p>
+
+          {status && (
+            <div
+              className={`mt-4 flex items-start gap-2 rounded-2xl border px-4 py-3 text-sm ${
+                status.type === 'success'
+                  ? 'border-green-200 bg-green-50 text-green-800'
+                  : 'border-red-200 bg-red-50 text-red-700'
+              }`}
+            >
+              <span className="mt-[2px] text-base">{status.type === 'success' ? '✔' : '!'}</span>
+              <span>{status.message}</span>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit(onSubmit)} className="mt-8 space-y-5">
+            <Input
+              type="password"
+              label="Current password"
+              placeholder="Enter current password"
+              {...register('currentPassword')}
+              error={errors.currentPassword?.message}
+            />
+            <Input
+              type="password"
+              label="New password"
+              placeholder="Enter new password"
+              {...register('newPassword')}
+              error={errors.newPassword?.message}
+            />
+            <Input
+              type="password"
+              label="Confirm new password"
+              placeholder="Re-type new password"
+              {...register('confirmPassword')}
+              error={errors.confirmPassword?.message}
+            />
+            <div className="flex flex-wrap gap-3">
+              <Button type="submit" size="lg" isLoading={isSubmitting}>
+                Save password
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="lg"
+                className="border-slate-300 text-slate-800 hover:bg-slate-50"
+                onClick={() => router.push(buildPath('/account'))}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+
+          <div className="mt-6 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+            <ShieldCheck className="h-4 w-4 text-primary-600" />
+            Strong passwords and up-to-date contact details help pharmacists verify changes quickly.
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/src/screens/CheckoutScreen.tsx

@@ -14,6 +14,7 @@ import {
   Plus,
   ShieldCheck,
   Truck,
+  Check,
 } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -24,7 +25,6 @@ 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';
@@ -33,6 +33,7 @@ import { useBasePath } from '@/providers/BasePathProvider';
 
 import { addressSchema } from '@/lib/validations/address';
 import Image from 'next/image';
+import { useNotification } from '@/providers/NotificationProvider';
 
 const checkoutSchema = z.object({
   shipping: addressSchema,
@@ -89,6 +90,7 @@ export function CheckoutScreen() {
   const [isAddressModalOpen, setIsAddressModalOpen] = useState(false);
   const [editingAddress, setEditingAddress] = useState<any | null>(null);
   const [shippingPrice, setShippingPrice] = useState(0);
+  const notification = useNotification();
 
 
   // Use the addresses hook
@@ -175,7 +177,7 @@ export function CheckoutScreen() {
       // Sort rates by price (cheapest first) and select the first one
       const sortedRates = [...rates].sort((a, b) => parseFloat(a.amount) - parseFloat(b.amount));
       const cheapestRate = sortedRates[0];
-      
+
       setShippingRates(rates);
       setShippingRatesError(null);
       setSelectedShippingRateId(cheapestRate.objectId);
@@ -284,7 +286,10 @@ export function CheckoutScreen() {
   const onSubmit = async (data: CheckoutFormData) => {
     setError(null);
     if (!isAuthenticated) {
-      toast.error('Please login to continue');
+      notification.error(
+        'Sign-in required',
+        'Please log in to complete your checkout.'
+      );
       setTimeout(() => router.push(buildPath('/login?redirect=/checkout')), 50);
       return;
     }
@@ -337,7 +342,10 @@ export function CheckoutScreen() {
     }
 
     setIsSubmitting(true);
-    toast('Submitting order...', { icon: <CreditCard className="h-4 w-4" /> });
+    notification.info(
+      'Submitting order',
+      'We are processing your order and preparing your payment options.'
+    );
     try {
       const items = (cart?.cartBody?.items || []).map((item: any) => ({
         productVariantId: String(item.productVariantId),
@@ -371,7 +379,10 @@ export function CheckoutScreen() {
       );
       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.');
+        notification.error(
+          'Insufficient credit',
+          'You do not have enough credit to complete this order.'
+        );
         return;
       }
       if (paymentMethod === 'Card') {
@@ -390,22 +401,34 @@ export function CheckoutScreen() {
         } else if (!paymentUrl) {
           console.error('No payment URL received in response:', response.data);
           setError('Failed to initiate payment. Please try again or contact support.');
-          toast.error('Failed to initiate payment');
+          notification.error(
+            'Payment setup failed',
+            'We could not start the payment flow. Please try again or contact support.'
+          );
           return;
         }
-        
-        toast.success('Order placed successfully!');
+
+        notification.success(
+          'Order placed',
+          'Your order has been placed successfully. You will be redirected to payment.'
+        );
         await clearCart();
         router.push(buildPath(`/orders/${response.data?.id}`));
       } else {
-        toast.success('Order placed successfully!');
+        notification.success(
+          'Order placed',
+          'Your order has been placed successfully.'
+        );
         await clearCart();
         router.push(buildPath(`/orders/${response.data?.id}`));
       }
     } catch (err: any) {
       const msg = err?.message || (err?.response?.data?.message) || 'Failed to place order';
       setError(msg);
-      toast.error(msg);
+      notification.error(
+        'Could not place order',
+        msg
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -420,8 +443,8 @@ export function CheckoutScreen() {
   const total = subtotal + shippingPrice + tax;
 
   return (
-    <div className="min-h-screen bg-slate-50 mb-16">
-  
+    <div className="min-h-screen bg-white pb-16">
+
 
       <form onSubmit={handleSubmit(onSubmit)}>
         {error && <div className="mb-4 text-red-600 font-semibold">{error}</div>}
@@ -431,11 +454,20 @@ export function CheckoutScreen() {
             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">
+            {/* Header */}
+            <div className="mb-12">
+              <h1 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-3xl">
+                Checkout
+              </h1>
+              <p className="font-['Poppins',sans-serif] text-[14px] text-[#676c80] text-md leading-relaxed">
+                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">
                 <div>
-                  <h2 className="text-xl font-semibold text-slate-900">
-                    Shipping information
+                  <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.
@@ -527,9 +559,9 @@ export function CheckoutScreen() {
                                     try {
                                       await removeAddress(addr.id);
                                       if (selectedAddressId === addr.id) setSelectedAddressId(null);
-                                      toast.success('Address deleted');
+                                      notification.success('Address deleted');
                                     } catch (e) {
-                                      toast.error('Failed to delete address');
+                                      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"
@@ -570,10 +602,10 @@ export function CheckoutScreen() {
 
             {/* 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 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="text-accent w-8 h-8 flex items-center justify-center text-[#2B4B7C]" />
+                  <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] text-2xl">Shipping Options</h2>
                 </div>
 
                 {shippingRatesLoading ? (
@@ -735,25 +767,18 @@ export function CheckoutScreen() {
                   </div>
                 )}
 
-              </Card>
+              </div>
             )}
-          </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="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 and Payment Methods Section */}
+            <div className="space-y-6">
               {/* 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="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">
                   {[
                     {
@@ -769,88 +794,106 @@ export function CheckoutScreen() {
                       desc: 'Collect from pharmacy',
                     },
                   ].map((option) => {
-                    const active = isDelivery === option.value
+                    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'
+                        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-slate-100 text-slate-600 group-hover:bg-slate-50'
+                            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-slate-900">
-                              {option.label}
-                            </div>
-                            <p className="text-xs text-slate-500">{option.desc}</p>
+                            <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 text-white shadow-sm">
-                            <CheckIcon className="w-3 h-3" />
+                          <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>
-              </section>
+              </div>
 
               {/* 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">
+              <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
+                    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`
-                          }`}
+                        className={`
+                          group relative flex w-full items-center justify-between rounded-xl border-2 p-3
+                          transition-all duration-200 ease-out
+                          focus:outline-none f
+                          ${active
+                            ? `${pm.activeClass} shadow-md scale-[1.02]`
+                            : `${pm.className} border-gray-200 bg-white hover:shadow-sm hover:-translate-y-0.5`
+                          }
+                        `}
                       >
                         <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'}`}
+                            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-medium text-slate-900">
+
+                          <span className="text-sm font-semibold text-gray-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 className="flex h-6 w-6 items-center justify-center rounded-full shadow-sm">
+                            <Check className="h-3.5 w-3.5 text-white" />
                           </div>
                         )}
                       </button>
-                    )
+                    );
                   })}
                 </div>
-                <p className="text-xs text-slate-500 mt-2 pl-1 leading-relaxed">
+
+                <p className="text-sm text-gray-500 mt-4">
                   {paymentMethod === 'Card' &&
                     'You will be redirected to a secure payment page.'}
                   {paymentMethod === 'Cash' &&
@@ -858,39 +901,48 @@ export function CheckoutScreen() {
                   {paymentMethod === 'Credit' &&
                     'Use your available account credit for this order.'}
                 </p>
-              </section>
+              </div>
+            </div>
+          </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 lg:col-span-1"
+          >
+            {/* Order Summary */}
+            <div className="bg-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
+              <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-6 text-2xl">Order Summary</h2>
+
 
               {/* Cart Summary */}
               <section className="mt-8 pt-6 border-t border-slate-100">
-                <h3 className="text-xs font-semibold text-slate-700 uppercase tracking-wider">
-                  Cart Summary
-                </h3>
-                <div className="max-h-60 space-y-4 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-slate-200 hover:scrollbar-thumb-slate-300">
+                <div className="space-y-4 mb-6">
                   {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 key={`${item.productId}-${item.color}-${item.size}`} 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} />
                       </div>
-
-                      <div className="flex-1">
-                        <p className="text-sm font-semibold text-slate-900">
+                      <div className="flex-1 min-w-0">
+                        <p className="font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1">
                           {item?.productVariantData?.name}
                         </p>
-                        <p className="text-xs text-slate-500">Qty {item.quantity}</p>
+                        <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
+                          {item?.productVariantData?.brand} • Qty: {item.quantity}
+                        </p>
+                        <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-[#E67E50] mt-1">
+                          {formatPrice(item.productVariantData.finalPrice * item.quantity)}
+                        </p>
                       </div>
-                      <p className="text-sm font-semibold text-slate-900">
-                        {formatPrice(item.productVariantData.finalPrice * item.quantity)}
-                      </p>
                     </div>
                   ))}
                 </div>
 
+                <div className="h-px bg-[#5B9BD5]/20 my-4" />
+
                 {/* Totals */}
-                <div className="mt-6 space-y-3 text-sm text-slate-600">
+                <div className="text-sm text-slate-600 space-y-3 py-4">
                   <div className="flex items-center justify-between">
                     <span>Subtotal</span>
                     <span className="font-semibold text-slate-900">
@@ -909,24 +961,29 @@ export function CheckoutScreen() {
                     <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 className="h-px bg-[#5B9BD5]/20 mt-6" />
+
+                  <div className="flex items-center justify-between mb-6">
+                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-[#2B4B7C]">Total</span>
+                    <span className="font-['Poppins',sans-serif] font-bold text-[24px] text-[#E67E50]">{formatPrice(total)}</span>
                   </div>
+                  {/* <p className="mt-1 text-xs text-slate-500">
+                      Tax is estimated. Final amount confirmed after payment.
+                    </p> */}
+                </div>
+
+                <div className="bg-white/80 rounded-xl p-4">
+                  <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]">
+                    <strong className="text-[#2B4B7C]">Payment:</strong> We'll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
+                  </p>
                 </div>
               </section>
 
               {/* Checkout Button */}
               <Button
                 type="submit"
-                size="lg"
                 isLoading={isSubmitting}
-                className="mt-6 w-full transition-transform hover:scale-[1.02] active:scale-[0.99]"
+                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-2 rounded-full bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}
@@ -938,26 +995,6 @@ export function CheckoutScreen() {
               </p>
             </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>