banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tip): add selectable coffee gift tiers

Browse Source
This commit is contained in:
chenhang
2026-07-15 17:00:25 +08:00
parent e1a43a641b
commit c277b3e6ca
16 changed files with 480 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/external-entry/external-entry-persist.tsx
+1 -4
View File
@@ -26,7 +26,6 @@ interface ExternalEntryPersistProps {
psid: string | null;
avatarUrl: string | null;
target: string | null;
coffeeType: string | null;
mode: string | null;
promotionType: string | null;
}
@@ -37,7 +36,6 @@ export default function ExternalEntryPersist({
psid,
avatarUrl,
target,
coffeeType,
mode,
promotionType,
}: ExternalEntryPersistProps) {
@@ -47,7 +45,7 @@ export default function ExternalEntryPersist({
const [hasPersisted, setHasPersisted] = useState(false);
const hasNavigatedRef = useRef(false);
const targetRoute = resolveExternalEntryTarget({ target });
const destination = resolveExternalEntryDestination({ target, coffeeType });
const destination = resolveExternalEntryDestination({ target });
const resolvedPromotionType = resolveExternalEntryPromotionType({
mode,
promotionType,
@@ -85,7 +83,6 @@ export default function ExternalEntryPersist({
}, [
avatarUrl,
asid,
coffeeType,
destination,
deviceId,
mode,
src/app/external-entry/page.tsx
+1 -2
View File
@@ -4,7 +4,7 @@
* 外部应用可以通过 query 传入 Facebook 相关信息和最终目标页，例如：
* `/external-entry?target=chat&asid=xxx&psid=yyy`
* `/external-entry?target=chat&mode=promotion&promotion_type=voice`
* `/external-entry?target=tip&coffee_type=medium`
* `/external-entry?target=tip`
*
* 页面不直接 `redirect()`，而是把数据交给 Client 组件先写入本地存储，
* 再通过 `router.replace()` 清理 URL 并跳转到最终页面。
@@ -30,7 +30,6 @@ export default async function ExternalEntryPage({
psid={pickParam(params.psid)}
avatarUrl={pickParam(params.avatar_url)}
target={pickParam(params.target)}
coffeeType={pickParam(params.coffee_type)}
mode={pickParam(params.mode)}
promotionType={pickParam(params.promotion_type)}
/>
src/app/tip/__tests__/tip-coffee-tier-selector.test.tsx
+99
View File
@@ -0,0 +1,99 @@
/* @vitest-environment jsdom */
import { act, useState } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it } from "vitest";
import type { TipCoffeeType } from "@/lib/tip/tip_coffee";
import {
TipCoffeeTierSelector,
type TipCoffeeTierItem,
} from "../tip-coffee-tier-selector";
const items: readonly TipCoffeeTierItem[] = [
{
type: "small",
tierLabel: "Small",
displayName: "Velvet Espresso",
priceLabel: "US$ 4.99",
unavailable: false,
},
{
type: "medium",
tierLabel: "Medium",
displayName: "Golden Reserve",
priceLabel: "US$ 9.99",
unavailable: false,
},
{
type: "large",
tierLabel: "Large",
displayName: "Imperial Grand Cru",
priceLabel: "US$ 19.99",
unavailable: false,
},
];
function Harness({ tierItems = items }: { tierItems?: readonly TipCoffeeTierItem[] }) {
const [selectedType, setSelectedType] =
useState<TipCoffeeType>("medium");
return (
<TipCoffeeTierSelector
disabled={false}
items={tierItems}
onChange={setSelectedType}
selectedType={selectedType}
/>
);
}
describe("TipCoffeeTierSelector", () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
.IS_REACT_ACT_ENVIRONMENT = true;
container = document.createElement("div");
document.body.append(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
});
it("renders every luxury tier and selects medium by default", () => {
act(() => root.render(<Harness />));
expect(container.textContent).toContain("Velvet Espresso");
expect(container.textContent).toContain("Golden Reserve");
expect(container.textContent).toContain("Imperial Grand Cru");
expect(
container.querySelector<HTMLInputElement>('input[value="medium"]')
?.checked,
).toBe(true);
});
it("switches to an available tier and keeps unavailable tiers disabled", () => {
const tierItems = items.map((item) =>
item.type === "large" ? { ...item, unavailable: true } : item,
);
act(() => root.render(<Harness tierItems={tierItems} />));
const small = container.querySelector<HTMLInputElement>(
'input[value="small"]',
);
const large = container.querySelector<HTMLInputElement>(
'input[value="large"]',
);
act(() => small?.click());
expect(small?.checked).toBe(true);
expect(large?.disabled).toBe(true);
expect(container.textContent).toContain("Unavailable");
});
});
src/app/tip/tip-coffee-tier-selector.tsx
+72
View File
@@ -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>
);
}
src/app/tip/tip-screen.module.css
+160
View File
@@ -236,6 +236,156 @@
letter-spacing: -0.04em;
}
.tierSelector {
grid-column: 1 / -1;
min-width: 0;
margin: 2px 0 0;
padding: 0;
border: 0;
}
.tierLegend {
width: 100%;
margin-bottom: 12px;
color: #6f5055;
font-size: clamp(13px, 3.148vw, 15px);
font-weight: 850;
letter-spacing: 0.025em;
}
.tierList {
display: grid;
gap: 10px;
}
.tierOption {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 28px;
align-items: center;
gap: 12px;
min-height: 72px;
padding: 12px 14px 12px 16px;
border: 1px solid rgba(112, 71, 65, 0.12);
border-radius: 20px;
background: rgba(255, 255, 255, 0.68);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
cursor: pointer;
transition:
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.tierOption[data-selected="true"] {
border-color: var(--color-accent, #f84d96);
background:
linear-gradient(105deg, rgba(255, 255, 255, 0.94), rgba(255, 235, 243, 0.9)),
#ffffff;
box-shadow:
0 12px 28px rgba(248, 77, 150, 0.16),
inset 3px 0 0 var(--color-accent, #f84d96);
}
.tierOption[data-unavailable="true"],
.tierSelector:disabled .tierOption {
cursor: not-allowed;
}
.tierOption[data-unavailable="true"] {
filter: grayscale(0.25);
opacity: 0.56;
}
.tierSelector:disabled .tierOption {
opacity: 0.72;
}
.tierInput {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.tierOption:has(.tierInput:focus-visible) {
outline: 3px solid rgba(248, 77, 150, 0.28);
outline-offset: 3px;
}
.tierDetails,
.tierPriceBlock {
display: flex;
min-width: 0;
flex-direction: column;
}
.tierDetails {
gap: 4px;
}
.tierLabel {
color: #a36d73;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.tierName {
overflow: hidden;
color: #2a1b1e;
font-family: var(--font-athelas), Georgia, serif;
font-size: clamp(17px, 4.259vw, 21px);
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.05;
text-overflow: ellipsis;
white-space: nowrap;
}
.tierPriceBlock {
align-items: flex-end;
gap: 3px;
text-align: right;
}
.tierPrice {
color: #d23f79;
font-size: clamp(14px, 3.519vw, 17px);
font-weight: 950;
white-space: nowrap;
}
.tierUnavailable {
color: #8f7376;
font-size: 10px;
font-weight: 800;
}
.tierCheck {
display: grid;
width: 25px;
height: 25px;
place-items: center;
border: 1px solid rgba(111, 76, 73, 0.2);
border-radius: 999px;
color: transparent;
}
.tierOption[data-selected="true"] .tierCheck {
border-color: var(--color-accent, #f84d96);
background: var(--color-accent, #f84d96);
color: #ffffff;
box-shadow: 0 5px 14px rgba(248, 77, 150, 0.26);
}
.successCard {
display: flex;
align-items: center;
@@ -352,6 +502,10 @@
width: min(100%, 220px);
justify-self: center;
}
.tierName {
white-space: normal;
}
}
@media (hover: hover) {
@@ -359,6 +513,12 @@
.checkoutButton:not(:disabled):hover {
transform: translateY(-1px);
}
.tierSelector:not(:disabled)
.tierOption:not([data-unavailable="true"]):hover {
border-color: rgba(248, 77, 150, 0.42);
transform: translateY(-1px);
}
}
@keyframes floatIn {
src/app/tip/tip-screen.tsx
+70 -15
View File
@@ -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))