feat(tip): add selectable coffee gift tiers

2026-07-15 17:00:25 +08:00
parent e1a43a641b
commit c277b3e6ca
16 changed files with 480 additions and 98 deletions
@@ -0,0 +1,72 @@
+import { Check } from "lucide-react";
+
+import type { TipCoffeeType } from "@/lib/tip/tip_coffee";
+
+import styles from "./tip-screen.module.css";
+
+export interface TipCoffeeTierItem {
+  type: TipCoffeeType;
+  tierLabel: string;
+  displayName: string;
+  priceLabel: string;
+  unavailable: boolean;
+}
+
+interface TipCoffeeTierSelectorProps {
+  disabled: boolean;
+  items: readonly TipCoffeeTierItem[];
+  onChange: (type: TipCoffeeType) => void;
+  selectedType: TipCoffeeType;
+}
+
+export function TipCoffeeTierSelector({
+  disabled,
+  items,
+  onChange,
+  selectedType,
+}: TipCoffeeTierSelectorProps) {
+  return (
+    <fieldset className={styles.tierSelector} disabled={disabled}>
+      <legend className={styles.tierLegend}>Choose your coffee</legend>
+      <div className={styles.tierList}>
+        {items.map((item) => {
+          const isSelected = item.type === selectedType;
+
+          return (
+            <label
+              key={item.type}
+              className={styles.tierOption}
+              data-selected={isSelected ? "true" : "false"}
+              data-unavailable={item.unavailable ? "true" : "false"}
+            >
+              <input
+                type="radio"
+                name="tip-coffee-tier"
+                value={item.type}
+                checked={isSelected}
+                disabled={item.unavailable}
+                className={styles.tierInput}
+                data-analytics-key={`tip.select_${item.type}`}
+                data-analytics-label={`Select ${item.displayName}`}
+                onChange={() => onChange(item.type)}
+              />
+              <span className={styles.tierDetails}>
+                <span className={styles.tierLabel}>{item.tierLabel}</span>
+                <span className={styles.tierName}>{item.displayName}</span>
+              </span>
+              <span className={styles.tierPriceBlock}>
+                <span className={styles.tierPrice}>{item.priceLabel}</span>
+                {item.unavailable ? (
+                  <span className={styles.tierUnavailable}>Unavailable</span>
+                ) : null}
+              </span>
+              <span className={styles.tierCheck} aria-hidden="true">
+                {isSelected ? <Check size={16} strokeWidth={3} /> : null}
+              </span>
+            </label>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}