From 7b3ab5901e423156a741da1feecf142656d2c56f Mon Sep 17 00:00:00 2001
From: Benson Cho <100653148+choden-dev@users.noreply.github.com>
Date: Sat, 25 Apr 2026 19:16:15 +1200
Subject: [PATCH 1/2] feat: distinguish 'change' vs 'select' timeslot in pickup
 UI

When the user already has a timeslot and navigates to the pickup
step, the UI now clearly indicates they are changing their timeslot:

TimeslotSelector:
- New optional currentTimeslot prop
- Shows an orange 'CURRENT TIMESLOT' card at the top with the
  existing date/time when changing
- Heading changes to 'Change Pickup Timeslot' vs 'Select a Pickup Timeslot'
- Button text changes to 'Update Timeslot' / 'Updating...' vs
  'Confirm Timeslot' / 'Confirming...'

OrderSteps:
- Passes orderDetails.pickupTimeslot to TimeslotSelector
- Heading changes to 'Change Pickup Time' vs 'Select Pickup Time'
- Description text adapts accordingly
---
 components/ordercontainer/OrderSteps.tsx | 20 +++++++++--
 components/pickup/TimeslotSelector.tsx   | 44 ++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/components/ordercontainer/OrderSteps.tsx b/components/ordercontainer/OrderSteps.tsx
index afc15d1..32c76fd 100644
--- a/components/ordercontainer/OrderSteps.tsx
+++ b/components/ordercontainer/OrderSteps.tsx
@@ -440,20 +440,34 @@ export default function OrderSteps({
 	// ── Pickup step ────────────────────────────────────────────────
 
 	if (step === OrderStep.PICKUP) {
+		const hasExistingTimeslot = !!orderDetails?.pickupTimeslot;
+
 		return (
 			<Box {...containerProps}>
 				<StepIndicator />
 				<Heading size="lg" mb={2}>
-					📍 Select Pickup Time
+					{hasExistingTimeslot
+						? "📍 Change Pickup Time"
+						: "📍 Select Pickup Time"}
 				</Heading>
 				<Text color="gray.600" mb={4}>
-					Order <strong>{orderNumber}</strong> has been paid. Choose when
-					you&apos;d like to collect it.
+					{hasExistingTimeslot ? (
+						<>
+							Order <strong>{orderNumber}</strong> already has a pickup time.
+							Select a new timeslot below.
+						</>
+					) : (
+						<>
+							Order <strong>{orderNumber}</strong> has been paid. Choose when
+							you&apos;d like to collect it.
+						</>
+					)}
 				</Text>
 				<OrderSummary />
 				<Divider mb={6} />
 				<TimeslotSelector
 					orderId={orderId}
+					currentTimeslot={orderDetails?.pickupTimeslot ?? null}
 					onTimeslotSelected={() => onPickupConfirmed()}
 					onCancel={() => router.push("/my-orders")}
 				/>
diff --git a/components/pickup/TimeslotSelector.tsx b/components/pickup/TimeslotSelector.tsx
index 58da5e9..f25d568 100644
--- a/components/pickup/TimeslotSelector.tsx
+++ b/components/pickup/TimeslotSelector.tsx
@@ -44,8 +44,17 @@ interface TimeslotResponse {
 	hasMore: boolean;
 }
 
+interface CurrentTimeslot {
+	date: string;
+	startTime: string;
+	endTime: string;
+	label?: string;
+}
+
 interface TimeslotSelectorProps {
 	orderId: string;
+	/** If provided, indicates the user is changing an existing timeslot. */
+	currentTimeslot?: CurrentTimeslot | null;
 	onTimeslotSelected: (
 		timeslotId: string,
 		pickupInstructions?: unknown[],
@@ -106,9 +115,11 @@ async function fetchTimeslots(page: number): Promise<TimeslotResponse> {
  */
 export function TimeslotSelector({
 	orderId,
+	currentTimeslot,
 	onTimeslotSelected,
 	onCancel,
 }: TimeslotSelectorProps) {
+	const isChanging = !!currentTimeslot;
 	const [selectedId, setSelectedId] = useState<string | null>(null);
 	const [submitting, setSubmitting] = useState(false);
 	const [submitError, setSubmitError] = useState<string | null>(null);
@@ -204,9 +215,36 @@ export function TimeslotSelector({
 			transition="opacity 0.15s ease"
 		>
 			<Heading size="md" mb={4}>
-				Select a Pickup Timeslot
+				{isChanging ? "Change Pickup Timeslot" : "Select a Pickup Timeslot"}
 			</Heading>
 
+			{/* Show current timeslot when changing */}
+			{isChanging && currentTimeslot && (
+				<Box
+					p={4}
+					mb={5}
+					bg="orange.50"
+					borderRadius="lg"
+					borderLeft="4px solid"
+					borderLeftColor="orange.400"
+				>
+					<Text fontSize="xs" fontWeight={700} color="orange.700" mb={1}>
+						CURRENT TIMESLOT
+					</Text>
+					<Text fontWeight={600} fontSize="sm">
+						{formatDateHeading(
+							currentTimeslot.date.includes("T")
+								? currentTimeslot.date.split("T")[0]
+								: currentTimeslot.date,
+						)}
+					</Text>
+					<Text fontSize="sm" color="gray.600">
+						{currentTimeslot.startTime} – {currentTimeslot.endTime}
+						{currentTimeslot.label ? ` · ${currentTimeslot.label}` : ""}
+					</Text>
+				</Box>
+			)}
+
 			{submitError && (
 				<Alert status="error" mb={3} borderRadius="md">
 					<AlertIcon />
@@ -328,9 +366,9 @@ export function TimeslotSelector({
 					onClick={handleSubmit}
 					isDisabled={!selectedId || submitting}
 					isLoading={submitting}
-					loadingText="Confirming..."
+					loadingText={isChanging ? "Updating..." : "Confirming..."}
 				>
-					Confirm Timeslot
+					{isChanging ? "Update Timeslot" : "Confirm Timeslot"}
 				</Button>
 				<Button variant="outline" onClick={onCancel}>
 					Cancel

From 7f2110d2bfc3c08171c666d69be7a733b9b3b922 Mon Sep 17 00:00:00 2001
From: Benson Cho <100653148+choden-dev@users.noreply.github.com>
Date: Sat, 25 Apr 2026 19:17:29 +1200
Subject: [PATCH 2/2] refactor: show pickup type info instead of date in
 current timeslot card

Replace the date heading in the 'CURRENT TIMESLOT' card with the
pickup instruction profile name and short summary (e.g. the pickup
method/location) since the date is already visible in the timeslot
list below. The card now shows:
- Time range and label
- Pickup type name with optional short summary
---
 components/pickup/TimeslotSelector.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/components/pickup/TimeslotSelector.tsx b/components/pickup/TimeslotSelector.tsx
index f25d568..05b6c05 100644
--- a/components/pickup/TimeslotSelector.tsx
+++ b/components/pickup/TimeslotSelector.tsx
@@ -49,6 +49,10 @@ interface CurrentTimeslot {
 	startTime: string;
 	endTime: string;
 	label?: string;
+	pickupInstructionProfile?:
+		| { id: string; name: string; shortSummary?: string }
+		| string
+		| null;
 }
 
 interface TimeslotSelectorProps {
@@ -232,16 +236,21 @@ export function TimeslotSelector({
 						CURRENT TIMESLOT
 					</Text>
 					<Text fontWeight={600} fontSize="sm">
-						{formatDateHeading(
-							currentTimeslot.date.includes("T")
-								? currentTimeslot.date.split("T")[0]
-								: currentTimeslot.date,
-						)}
-					</Text>
-					<Text fontSize="sm" color="gray.600">
 						{currentTimeslot.startTime} – {currentTimeslot.endTime}
 						{currentTimeslot.label ? ` · ${currentTimeslot.label}` : ""}
 					</Text>
+					{typeof currentTimeslot.pickupInstructionProfile === "object" &&
+						currentTimeslot.pickupInstructionProfile && (
+							<Text fontSize="sm" color="blue.600" mt={1}>
+								📍 {currentTimeslot.pickupInstructionProfile.name}
+								{currentTimeslot.pickupInstructionProfile.shortSummary && (
+									<Text as="span" color="gray.500">
+										{" "}
+										— {currentTimeslot.pickupInstructionProfile.shortSummary}
+									</Text>
+								)}
+							</Text>
+						)}
 				</Box>
 			)}