From a990f5082b5ef4cbe46121741f1e96b331bffea7 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Tue, 21 Jul 2026 14:24:26 +0800
Subject: [PATCH] fix(tip): refine gift presentation

---
 .../tip/__tests__/tip-screen.helpers.test.ts  | 32 +++++++++++++++++++
 src/app/tip/tip-gift-product-selector.tsx     |  5 ---
 src/app/tip/tip-screen.helpers.ts             | 13 +++++++-
 src/app/tip/tip-screen.module.css             | 19 -----------
 src/app/tip/tip-screen.tsx                    |  5 ---
 src/app/tip/tip-success-view.tsx              |  2 +-
 6 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/app/tip/__tests__/tip-screen.helpers.test.ts b/src/app/tip/__tests__/tip-screen.helpers.test.ts
index a0a4bedb..250acb76 100644
--- a/src/app/tip/__tests__/tip-screen.helpers.test.ts
+++ b/src/app/tip/__tests__/tip-screen.helpers.test.ts
@@ -57,4 +57,36 @@ describe("tip screen helpers", () => {
       ),
     ).toEqual([TIP_GIFT_PLACEHOLDER_IMAGE]);
   });
+
+  it.each([
+    ["coffee_small", "/images/tip/small.jpg"],
+    ["coffee_medium", "/images/tip/medium.png"],
+    ["coffee_large", "/images/tip/large.png"],
+  ])("uses the %s tier image as its local fallback", (tipType, expected) => {
+    const tierProduct = GiftProductSchema.parse({
+      ...product,
+      tipType,
+      imageUrl: null,
+    });
+    const categoryWithoutImage = GiftCategorySchema.parse({
+      ...category,
+      imageUrl: null,
+    });
+
+    expect(getGiftImageSources(tierProduct, categoryWithoutImage)).toEqual([
+      expected,
+    ]);
+  });
+
+  it("uses the generic placeholder for unknown gift types", () => {
+    const unknownProduct = GiftProductSchema.parse({
+      ...product,
+      tipType: "flowers",
+      imageUrl: null,
+    });
+
+    expect(getGiftImageSources(unknownProduct, null)).toEqual([
+      TIP_GIFT_PLACEHOLDER_IMAGE,
+    ]);
+  });
 });
diff --git a/src/app/tip/tip-gift-product-selector.tsx b/src/app/tip/tip-gift-product-selector.tsx
index 07982328..e54fec0b 100644
--- a/src/app/tip/tip-gift-product-selector.tsx
+++ b/src/app/tip/tip-gift-product-selector.tsx
@@ -43,11 +43,6 @@ export function TipGiftProductSelector({
               />
               <span className={styles.tierDetails}>
                 <span className={styles.tierName}>{product.planName}</span>
-                {product.description ? (
-                  <span className={styles.tierDescription}>
-                    {product.description}
-                  </span>
-                ) : null}
               </span>
               <span className={styles.tierPriceBlock}>
                 <span className={styles.tierPrice}>
diff --git a/src/app/tip/tip-screen.helpers.ts b/src/app/tip/tip-screen.helpers.ts
index 049db002..ad997b43 100644
--- a/src/app/tip/tip-screen.helpers.ts
+++ b/src/app/tip/tip-screen.helpers.ts
@@ -5,6 +5,12 @@ import type {
 
 export const TIP_GIFT_PLACEHOLDER_IMAGE = "/images/tip/medium.png";
 
+const TIP_GIFT_PLACEHOLDER_BY_TIP_TYPE: Readonly<Record<string, string>> = {
+  coffee_small: "/images/tip/small.jpg",
+  coffee_medium: "/images/tip/medium.png",
+  coffee_large: "/images/tip/large.png",
+};
+
 export function formatGiftPrice(
   amountCents: number,
   currency: string,
@@ -25,10 +31,15 @@ export function getGiftImageSources(
   product: GiftProduct | null,
   category: GiftCategory | null,
 ): readonly string[] {
+  const placeholderImage = product
+    ? (TIP_GIFT_PLACEHOLDER_BY_TIP_TYPE[product.tipType] ??
+      TIP_GIFT_PLACEHOLDER_IMAGE)
+    : TIP_GIFT_PLACEHOLDER_IMAGE;
+
   return [
     product?.imageUrl,
     category?.imageUrl,
-    TIP_GIFT_PLACEHOLDER_IMAGE,
+    placeholderImage,
   ].filter(
     (source, index, sources): source is string =>
       Boolean(source) && sources.indexOf(source) === index,
diff --git a/src/app/tip/tip-screen.module.css b/src/app/tip/tip-screen.module.css
index f85ddc05..e50c5c4e 100644
--- a/src/app/tip/tip-screen.module.css
+++ b/src/app/tip/tip-screen.module.css
@@ -226,14 +226,6 @@
   letter-spacing: -0.04em;
 }
 
-.productDescription {
-  margin: 10px 0 0;
-  color: #7d6264;
-  font-size: clamp(12px, 3.148vw, 15px);
-  font-weight: 620;
-  line-height: 1.45;
-}
-
 .visuallyHidden {
   position: absolute;
   width: 1px;
@@ -352,17 +344,6 @@
   white-space: nowrap;
 }
 
-.tierDescription {
-  display: -webkit-box;
-  overflow: hidden;
-  color: #80676a;
-  font-size: 11px;
-  font-weight: 620;
-  line-height: 1.35;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
 .tierPriceBlock {
   align-items: flex-end;
   gap: 3px;
diff --git a/src/app/tip/tip-screen.tsx b/src/app/tip/tip-screen.tsx
index b1e95630..96ee1d39 100644
--- a/src/app/tip/tip-screen.tsx
+++ b/src/app/tip/tip-screen.tsx
@@ -286,11 +286,6 @@ export function TipScreen({
                   selectedProduct.currency,
                 )}
               </p>
-              {selectedProduct.description ? (
-                <p className={styles.productDescription}>
-                  {selectedProduct.description}
-                </p>
-              ) : null}
             </div>
 
             <TipGiftProductSelector
diff --git a/src/app/tip/tip-success-view.tsx b/src/app/tip/tip-success-view.tsx
index 6dc60c5e..a0f0044b 100644
--- a/src/app/tip/tip-success-view.tsx
+++ b/src/app/tip/tip-success-view.tsx
@@ -102,7 +102,7 @@ export function TipSuccessView({
             className={styles.title}
             tabIndex={-1}
           >
-            You made {characterName} smile.
+            Thank you. Your gift made me smile.
           </h1>
           <div className={styles.copy}>
             <p>