From b2ece8f33aa842a96485f7dcd26fbb5f9eab6e18 Mon Sep 17 00:00:00 2001
From: Akhileshwar Shriram <112577383+AkhilTheBoss@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:52:35 -0800
Subject: [PATCH 1/3] feat: address comments

---
 .../src/components/store/ShippingTimeline.tsx | 116 ++++++++++++++++++
 .../src/screens/conductor/store/shipping.tsx  |   4 +
 client/src/types/Store.ts                     |   7 ++
 server/api/services/store-service.ts          |  50 ++++++++
 4 files changed, 177 insertions(+)
 create mode 100644 client/src/components/store/ShippingTimeline.tsx

diff --git a/client/src/components/store/ShippingTimeline.tsx b/client/src/components/store/ShippingTimeline.tsx
new file mode 100644
index 00000000..6629d515
--- /dev/null
+++ b/client/src/components/store/ShippingTimeline.tsx
@@ -0,0 +1,116 @@
+import { StoreShippingOption } from "../../types";
+import { IconCheck, IconSettings, IconTruck, IconHome } from "@tabler/icons-react";
+
+interface ShippingTimelineProps {
+  shippingOption: StoreShippingOption;
+}
+
+export default function ShippingTimeline({ shippingOption }: ShippingTimelineProps) {
+  const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    }).format(date);
+  };
+
+  const formatDateRange = (start: string, end: string): string => {
+    return `${formatDate(start)} - ${formatDate(end)}`;
+  };
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const todayFormatted = formatDate(today.toISOString().split('T')[0]);
+
+  const timelineSteps = [
+    {
+      name: "Order Placed",
+      icon: IconCheck,
+      date: `Today (${todayFormatted})`,
+      completed: true,
+    },
+    {
+      name: "Printing (On-Demand)",
+      icon: IconSettings,
+      date: formatDateRange(
+        shippingOption.production_start_date_estimate,
+        shippingOption.production_end_date_estimate
+      ),
+      completed: false,
+    },
+    {
+      name: "Shipped",
+      icon: IconTruck,
+      date: formatDateRange(
+        shippingOption.ship_date_start_estimate,
+        shippingOption.ship_date_end_estimate
+      ),
+      completed: false,
+    },
+    {
+      name: "Estimated Arrival",
+      icon: IconHome,
+      date: formatDateRange(
+        shippingOption.delivery_date_start_estimate,
+        shippingOption.delivery_date_end_estimate
+      ),
+      completed: false,
+    },
+  ];
+
+  return (
+    <div className="mt-10 border-t border-gray-200 pt-10">
+      <h3 className="text-lg font-medium text-gray-900">
+        Estimated Production & Delivery Timeline
+      </h3>
+      <div className="mt-6">
+        <div className="flex items-center justify-between">
+          {timelineSteps.map((step, stepIdx) => (
+            <div key={step.name} className="flex flex-col items-center flex-1">
+              <div className="relative flex items-center">
+                <div
+                  className={`flex h-10 w-10 items-center justify-center rounded-full border-2 ${
+                    step.completed
+                      ? "border-indigo-600 bg-indigo-600"
+                      : "border-gray-300 bg-white"
+                  }`}
+                >
+                  <step.icon
+                    className={`h-6 w-6 ${
+                      step.completed ? "text-white" : "text-gray-400"
+                    }`}
+                    aria-hidden="true"
+                  />
+                </div>
+                {stepIdx < timelineSteps.length - 1 && (
+                  <div
+                    className={`absolute left-1/2 top-5 h-0.5 w-full ${
+                      step.completed ? "bg-indigo-600" : "bg-gray-300"
+                    }`}
+                    style={{ transform: "translateX(50%)" }}
+                    aria-hidden="true"
+                  />
+                )}
+              </div>
+              <div className="mt-4 text-center">
+                <p
+                  className={`text-sm font-medium ${
+                    step.completed ? "text-indigo-600" : "text-gray-500"
+                  }`}
+                >
+                  {step.name}
+                </p>
+                <p className="mt-1 text-xs text-gray-500">{step.date}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <p className="mt-6 text-sm text-gray-500">
+        *Please note: Because your book is printed specially for you upon ordering,
+        production times can vary before shipping begins.
+      </p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/screens/conductor/store/shipping.tsx b/client/src/screens/conductor/store/shipping.tsx
index 5d60c7b1..b2704d5e 100644
--- a/client/src/screens/conductor/store/shipping.tsx
+++ b/client/src/screens/conductor/store/shipping.tsx
@@ -20,6 +20,7 @@ import LoadingSpinner from "../../../components/LoadingSpinner";
 import { useTypedSelector } from "../../../state/hooks";
 import { useModals } from "../../../context/ModalContext";
 import ConfirmOrderModal from "../../../components/store/ConfirmOrderModal";
+import ShippingTimeline from "../../../components/store/ShippingTimeline";
 
 const STATE_CODES = [
   {
@@ -898,6 +899,9 @@ export default function ShippingPage() {
                   </div>
                 </div>
               )}
+              {hasPhysicalProducts && selectedShippingOption && (
+                <ShippingTimeline shippingOption={selectedShippingOption} />
+              )}
               <div className="border-t border-gray-200 px-4 py-6 sm:px-6">
                 <button
                   type="submit"
diff --git a/client/src/types/Store.ts b/client/src/types/Store.ts
index c355ec43..95b63629 100644
--- a/client/src/types/Store.ts
+++ b/client/src/types/Store.ts
@@ -71,7 +71,14 @@ export type StoreShippingOption = {
     id: number;
     total_days_min: number;
     total_days_max: number;
+    lulu_shipping_level: string;
     cost_excl_tax: number;
+    production_start_date_estimate: string;
+    production_end_date_estimate: string;
+    ship_date_start_estimate: string;
+    ship_date_end_estimate: string;
+    delivery_date_start_estimate: string;
+    delivery_date_end_estimate: string;
 }
 
 export type StoreDigitalDeliveryOption = "apply_to_account" | "email_access_codes";
diff --git a/server/api/services/store-service.ts b/server/api/services/store-service.ts
index 92a47a7f..dfe95896 100644
--- a/server/api/services/store-service.ts
+++ b/server/api/services/store-service.ts
@@ -532,6 +532,39 @@ class StoreService {
                 throw new Error("No shipping options found for the provided items");
             }
 
+            const shippingLevelDeliveryDays: Record<string, { min: number; max: number }> = {
+                'MAIL': { min: 13, max: 15 },
+                'PRIORITY_MAIL': { min: 11, max: 13 },
+                'GROUND_HD': { min: 12, max: 14 },
+                'GROUND_BUS': { min: 12, max: 14 },
+                'GROUND': { min: 12, max: 14 },
+                'EXPEDITED': { min: 8, max: 9 },
+                'EXPRESS': { min: 9, max: 10 },
+            };
+
+            // Get today's date (order date)
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+
+             // Helper function to add business days (excluding weekends)
+            const addBusinessDays = (date: Date, days: number): Date => {
+                const result = new Date(date);
+                let added = 0;
+                while (added < days) {
+                    result.setDate(result.getDate() + 1);
+                    // Skip weekends (Saturday = 6, Sunday = 0)
+                    if (result.getDay() !== 0 && result.getDay() !== 6) {
+                        added++;
+                    }
+                }
+                return result;
+            };
+
+            // Helper function to format date as ISO string
+            const formatDate = (date: Date): string => {
+                return date.toISOString().split('T')[0];
+            };
+
             const mapped = filtered_shipping_options.map((opt) => {
                 // ensure cost_excl_tax is a number and convert it to cents
                 if (!opt.cost_excl_tax || isNaN(parseFloat(opt.cost_excl_tax))) {
@@ -540,6 +573,17 @@ class StoreService {
                 }
                 const costInCents = Math.round(parseFloat(opt.cost_excl_tax) * 100);
 
+                // Get delivery days for this shipping level (fallback to MAIL if not found)
+                const deliveryDays = shippingLevelDeliveryDays[opt.level] || shippingLevelDeliveryDays['MAIL'];
+
+                // Calculate date estimates
+                const productionStartDate = addBusinessDays(today, 2);
+                const productionEndDate = addBusinessDays(today, 4);
+                const shipDateStart = addBusinessDays(today, 6);
+                const shipDateEnd = addBusinessDays(today, 10);
+                const deliveryDateStart = addBusinessDays(today, deliveryDays.min);
+                const deliveryDateEnd = addBusinessDays(today, deliveryDays.max);
+
                 return {
                     id: opt.id,
                     title: `${opt.level}${opt.carrier_service_name ? ` (${opt.carrier_service_name})` : ''}`,
@@ -547,6 +591,12 @@ class StoreService {
                     total_days_max: opt.total_days_max,
                     lulu_shipping_level: opt.level,
                     cost_excl_tax: costInCents,
+                    production_start_date_estimate: formatDate(productionStartDate),
+                    production_end_date_estimate: formatDate(productionEndDate),
+                    ship_date_start_estimate: formatDate(shipDateStart),
+                    ship_date_end_estimate: formatDate(shipDateEnd),
+                    delivery_date_start_estimate: formatDate(deliveryDateStart),
+                    delivery_date_end_estimate: formatDate(deliveryDateEnd),
                 }
             });
 

From 51211de8479c0277b17c74a0f99d89c60f481608 Mon Sep 17 00:00:00 2001
From: Akhileshwar Shriram <112577383+AkhilTheBoss@users.noreply.github.com>
Date: Sun, 18 Jan 2026 14:21:38 -0800
Subject: [PATCH 2/3] feat(store-checkout): added store shipping timeline

---
 .../src/components/store/ShippingTimeline.tsx | 34 +++++++++----
 .../src/screens/conductor/store/shipping.tsx  | 48 ++++++++++++-------
 server/api/services/store-service.ts          |  3 +-
 server/types/Store.ts                         |  6 +++
 4 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/client/src/components/store/ShippingTimeline.tsx b/client/src/components/store/ShippingTimeline.tsx
index 6629d515..66661060 100644
--- a/client/src/components/store/ShippingTimeline.tsx
+++ b/client/src/components/store/ShippingTimeline.tsx
@@ -6,6 +6,18 @@ interface ShippingTimelineProps {
 }
 
 export default function ShippingTimeline({ shippingOption }: ShippingTimelineProps) {
+  if (
+    !shippingOption.production_start_date_estimate ||
+    !shippingOption.production_end_date_estimate ||
+    !shippingOption.ship_date_start_estimate ||
+    !shippingOption.ship_date_end_estimate ||
+    !shippingOption.delivery_date_start_estimate ||
+    !shippingOption.delivery_date_end_estimate
+    ) {
+    // Don't render if date fields are missing
+    return null;
+  }
+
   const formatDate = (dateString: string): string => {
     const date = new Date(dateString);
     return new Intl.DateTimeFormat("en-US", {
@@ -60,11 +72,14 @@ export default function ShippingTimeline({ shippingOption }: ShippingTimelinePro
   ];
 
   return (
-    <div className="mt-10 border-t border-gray-200 pt-10">
+    <div className="mt-6">
+      {/* Title outside the box, matching "Order summary" style */}
       <h3 className="text-lg font-medium text-gray-900">
         Estimated Production & Delivery Timeline
       </h3>
-      <div className="mt-6">
+      
+      {/* Content box with same styling as order summary */}
+      <div className="mt-4 rounded-lg border border-gray-200 bg-white shadow-sm px-4 py-6 sm:px-6">
         <div className="flex items-center justify-between">
           {timelineSteps.map((step, stepIdx) => (
             <div key={step.name} className="flex flex-col items-center flex-1">
@@ -72,7 +87,7 @@ export default function ShippingTimeline({ shippingOption }: ShippingTimelinePro
                 <div
                   className={`flex h-10 w-10 items-center justify-center rounded-full border-2 ${
                     step.completed
-                      ? "border-indigo-600 bg-indigo-600"
+                      ? "border-primary bg-primary"
                       : "border-gray-300 bg-white"
                   }`}
                 >
@@ -86,7 +101,7 @@ export default function ShippingTimeline({ shippingOption }: ShippingTimelinePro
                 {stepIdx < timelineSteps.length - 1 && (
                   <div
                     className={`absolute left-1/2 top-5 h-0.5 w-full ${
-                      step.completed ? "bg-indigo-600" : "bg-gray-300"
+                      step.completed ? "bg-primary" : "bg-gray-300"
                     }`}
                     style={{ transform: "translateX(50%)" }}
                     aria-hidden="true"
@@ -96,7 +111,7 @@ export default function ShippingTimeline({ shippingOption }: ShippingTimelinePro
               <div className="mt-4 text-center">
                 <p
                   className={`text-sm font-medium ${
-                    step.completed ? "text-indigo-600" : "text-gray-500"
+                    step.completed ? "text-primary" : "text-gray-500"
                   }`}
                 >
                   {step.name}
@@ -106,11 +121,12 @@ export default function ShippingTimeline({ shippingOption }: ShippingTimelinePro
             </div>
           ))}
         </div>
+        
+        <p className="mt-6 text-sm text-gray-500 text-center">
+          *Please note: Because your book is printed specially for you upon ordering,
+          production times can vary before shipping begins.
+        </p>
       </div>
-      <p className="mt-6 text-sm text-gray-500">
-        *Please note: Because your book is printed specially for you upon ordering,
-        production times can vary before shipping begins.
-      </p>
     </div>
   );
 }
\ No newline at end of file
diff --git a/client/src/screens/conductor/store/shipping.tsx b/client/src/screens/conductor/store/shipping.tsx
index b2704d5e..c8deeef1 100644
--- a/client/src/screens/conductor/store/shipping.tsx
+++ b/client/src/screens/conductor/store/shipping.tsx
@@ -416,6 +416,20 @@ export default function ShippingPage() {
       setShippingOptions(response.data.options);
       shippingCalculated.current = true;
 
+      console.log("=== Shipping Options Response ===");
+      console.log("Full response:", response.data);
+      if (Array.isArray(response.data.options) && response.data.options.length > 0) {
+        console.log("First shipping option:", response.data.options[0]);
+        console.log("Has date fields?", {
+          production_start: !!response.data.options[0].production_start_date_estimate,
+          delivery_end: !!response.data.options[0].delivery_date_end_estimate,
+        });
+      }
+
+      if (Array.isArray(response.data.options) && response.data.options.length > 0) {
+        console.log("Shipping option with dates:", response.data.options[0]);
+      }
+
       if (response.data.options === "digital_delivery_only") {
         setSelectedShippingOption(null);
       } else if (response.data.options.length > 0) {
@@ -899,25 +913,23 @@ export default function ShippingPage() {
                   </div>
                 </div>
               )}
-              {hasPhysicalProducts && selectedShippingOption && (
-                <ShippingTimeline shippingOption={selectedShippingOption} />
-              )}
-              <div className="border-t border-gray-200 px-4 py-6 sm:px-6">
-                <button
-                  type="submit"
-                  className="w-full rounded-md border border-transparent bg-primary px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 disabled:bg-opacity-55 disabled:cursor-not-allowed"
-                  onClick={handleProceedToPayment}
-                  disabled={proceedDisabled || loading || shippingLoading}
-                >
-                  {loading || shippingLoading ? (
-                    <LoadingSpinner iconOnly />
-                  ) : (
-                    <Icon name="arrow right" className="!mb-1 !mr-2" />
-                  )}
-                  Proceed to Payment
-                </button>
-              </div>
             </div>
+            {hasPhysicalProducts && selectedShippingOption && (
+              <ShippingTimeline shippingOption={selectedShippingOption} />
+            )}
+            <button
+              type="submit"
+              className="mt-6 w-full rounded-md border border-transparent bg-primary px-4 py-3 text-base font-medium text-white shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 disabled:bg-opacity-55 disabled:cursor-not-allowed"
+              onClick={handleProceedToPayment}
+              disabled={proceedDisabled || loading || shippingLoading}
+            >
+              {loading || shippingLoading ? (
+                <LoadingSpinner iconOnly />
+              ) : (
+                <Icon name="arrow right" className="!mb-1 !mr-2" />
+              )}
+              Proceed to Payment
+            </button>
             <p className="mt-4 text-sm text-gray-500 text-center">
               If you have any questions or concerns, please contact our{" "}
               <a
diff --git a/server/api/services/store-service.ts b/server/api/services/store-service.ts
index dfe95896..dd9bc0c7 100644
--- a/server/api/services/store-service.ts
+++ b/server/api/services/store-service.ts
@@ -574,7 +574,8 @@ class StoreService {
                 const costInCents = Math.round(parseFloat(opt.cost_excl_tax) * 100);
 
                 // Get delivery days for this shipping level (fallback to MAIL if not found)
-                const deliveryDays = shippingLevelDeliveryDays[opt.level] || shippingLevelDeliveryDays['MAIL'];
+                const shippingLevel = opt.level || 'MAIL';
+                const deliveryDays = shippingLevelDeliveryDays[shippingLevel] || shippingLevelDeliveryDays['MAIL'];
 
                 // Calculate date estimates
                 const productionStartDate = addBusinessDays(today, 2);
diff --git a/server/types/Store.ts b/server/types/Store.ts
index 1bc674af..e0effb0d 100644
--- a/server/types/Store.ts
+++ b/server/types/Store.ts
@@ -34,6 +34,12 @@ export type StoreShippingOption = {
     total_days_max: number;
     lulu_shipping_level: string;
     cost_excl_tax: number;
+    production_start_date_estimate: string;
+    production_end_date_estimate: string;
+    ship_date_start_estimate: string;
+    ship_date_end_estimate: string;
+    delivery_date_start_estimate: string;
+    delivery_date_end_estimate: string;
 }
 
 /**

From b5aa6664de1fc2a2441ff69223602847a661bbbd Mon Sep 17 00:00:00 2001
From: Akhileshwar Shriram <112577383+AkhilTheBoss@users.noreply.github.com>
Date: Sun, 18 Jan 2026 17:00:25 -0800
Subject: [PATCH 3/3] fix: fix checkout page horizontal overflow on mobile

---
 client/src/screens/conductor/store/shipping.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/screens/conductor/store/shipping.tsx b/client/src/screens/conductor/store/shipping.tsx
index c8deeef1..c4a4373f 100644
--- a/client/src/screens/conductor/store/shipping.tsx
+++ b/client/src/screens/conductor/store/shipping.tsx
@@ -522,7 +522,7 @@ export default function ShippingPage() {
     <AlternateLayout>
       <div className="mx-auto max-w-2xl px-4 pb-24 pt-16 sm:px-6 lg:max-w-7xl lg:px-8">
         <form
-          className="lg:grid lg:grid-cols-2 lg:gap-x-12 xl:gap-x-16 min-w-[90vw] lg:min-w-[1200px] lg:items-start"
+          className="lg:grid lg:grid-cols-2 lg:gap-x-12 xl:gap-x-16"
           onSubmit={(e) => {
             e.preventDefault();
           }}