feat(tip): add selectable coffee gift tiers

src/app/tip/tip-screen.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import Image from "next/image";
 import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 
@@ -17,6 +17,7 @@ import {
   buildTipCoffeePath,
   DEFAULT_TIP_COFFEE_TYPE,
   getTipCoffeeOption,
+  TIP_COFFEE_OPTIONS,
   type TipCoffeeType,
 } from "@/lib/tip/tip_coffee";
 import { useAppNavigator } from "@/router/use-app-navigator";
@@ -27,6 +28,10 @@ import {
 } from "@/stores/payment/payment-context";
 
 import { TipCheckoutButton } from "./tip-checkout-button";
+import {
+  TipCoffeeTierSelector,
+  type TipCoffeeTierItem,
+} from "./tip-coffee-tier-selector";
 import {
   findTipCoffeePlan,
   formatTipPrice,
@@ -55,17 +60,44 @@ export function TipScreen({
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
   const initialPayChannelAppliedRef = useRef(false);
-  const coffeeOption = getTipCoffeeOption(coffeeType);
-  const returnPath = buildTipCoffeePath(coffeeType);
+  const [selectedCoffeeType, setSelectedCoffeeType] =
+    useState<TipCoffeeType>(coffeeType);
+  const coffeeOption = getTipCoffeeOption(selectedCoffeeType);
+  const returnPath = buildTipCoffeePath(selectedCoffeeType);
   const resolvedInitialPayChannel =
     initialPayChannel ?? navigator.getDefaultPayChannel();
 
-  const coffeePlan = useMemo(
-    () => findTipCoffeePlan(payment.plans, coffeeType),
-    [coffeeType, payment.plans],
+  const coffeeTiers = useMemo(
+    () =>
+      TIP_COFFEE_OPTIONS.map((option) => ({
+        option,
+        plan: findTipCoffeePlan(payment.plans, option.type),
+      })),
+    [payment.plans],
   );
-  const priceLabel = formatTipPrice(coffeePlan, coffeeType);
-  usePaymentPlanAnalytics(coffeePlan ? [coffeePlan] : [], TIP_ANALYTICS_CONTEXT);
+  const coffeePlan =
+    coffeeTiers.find(({ option }) => option.type === selectedCoffeeType)?.plan ??
+    null;
+  const priceLabel = formatTipPrice(coffeePlan, selectedCoffeeType);
+  const availableCoffeePlans = useMemo(
+    () => coffeeTiers.flatMap(({ plan }) => (plan ? [plan] : [])),
+    [coffeeTiers],
+  );
+  const tierItems = useMemo<readonly TipCoffeeTierItem[]>(
+    () =>
+      coffeeTiers.map(({ option, plan }) => ({
+        type: option.type,
+        tierLabel: option.tierLabel,
+        displayName: option.displayName,
+        priceLabel: formatTipPrice(plan, option.type),
+        unavailable:
+          payment.status === "ready" &&
+          !payment.isLoadingPlans &&
+          plan === null,
+      })),
+    [coffeeTiers, payment.isLoadingPlans, payment.status],
+  );
+  usePaymentPlanAnalytics(availableCoffeePlans, TIP_ANALYTICS_CONTEXT);
   const isPaymentBusy =
     payment.isCreatingOrder || payment.isPollingOrder || payment.isPaid;
   const canCreateOrder =
@@ -77,6 +109,8 @@ export function TipScreen({
     !isPaymentBusy;
   const showMissingPlan =
     payment.status === "ready" && !payment.isLoadingPlans && coffeePlan === null;
+  const isTierSelectionDisabled =
+    payment.status !== "ready" || payment.isLoadingPlans || isPaymentBusy;
   const isAuthLoading = !authState.hasInitialized || authState.isLoading;
 
   usePaymentOrderLifecycle({
@@ -159,6 +193,20 @@ export function TipScreen({
     paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
   };
 
+  const handleCoffeeTypeChange = (type: TipCoffeeType) => {
+    if (isTierSelectionDisabled) return;
+    const nextPlan = findTipCoffeePlan(payment.plans, type);
+    if (!nextPlan) return;
+
+    setSelectedCoffeeType(type);
+    if (payment.selectedPlanId !== nextPlan.planId) {
+      paymentDispatch({
+        type: "PaymentPlanSelected",
+        planId: nextPlan.planId,
+      });
+    }
+  };
+
   const handleBack = () => {
     navigator.back();
   };
@@ -207,12 +255,12 @@ export function TipScreen({
         </section>
 
         <section className={styles.productCard} aria-label="Coffee tip product">
-          <div className={styles.coffeeStage} aria-hidden="true">
+          <div className={styles.coffeeStage}>
             <Image
-              src="/images/tip/coffee.jpg"
-              alt=""
-              width={736}
-              height={736}
+              src={coffeeOption.image.src}
+              alt={`${coffeeOption.displayName} coffee`}
+              width={coffeeOption.image.width}
+              height={coffeeOption.image.height}
               sizes="(max-width: 380px) 220px, 211px"
               className={styles.coffeeImage}
             />
@@ -224,10 +272,17 @@ export function TipScreen({
               Coffee Gift
             </span>
             <h2 className={styles.productName}>
-              {coffeePlan?.planName || coffeeOption.fallbackName}
+              {coffeeOption.displayName}
             </h2>
             <p className={styles.productPrice}>{priceLabel}</p>
           </div>
+
+          <TipCoffeeTierSelector
+            disabled={isTierSelectionDisabled}
+            items={tierItems}
+            onChange={handleCoffeeTypeChange}
+            selectedType={selectedCoffeeType}
+          />
         </section>
 
         {showMissingPlan ? (
@@ -257,7 +312,7 @@ export function TipScreen({
 
         <div className={styles.checkoutSlot}>
           <TipCheckoutButton
-            coffeeType={coffeeType}
+            coffeeType={selectedCoffeeType}
             disabled={
               showMissingPlan ||
               (!canCreateOrder && isRealLoginStatus(authState.loginStatus))