feat(tip): add personalized payment success experience

src/app/tip/tip-screen.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
 import Image from "next/image";
-import { Heart, Sparkles } from "lucide-react";
+import { Sparkles } from "lucide-react";
 
 import { BackButton, CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
@@ -38,6 +38,7 @@ import {
   findTipCoffeePlan,
   formatTipPrice,
 } from "./tip-screen.helpers";
+import { TipSuccessView } from "./tip-success-view";
 import styles from "./tip-screen.module.css";
 
 const TIP_ANALYTICS_CONTEXT: PaymentAnalyticsContext = {
@@ -197,6 +198,21 @@ export function TipScreen({
     paymentDispatch({ type: "PaymentReset" });
   };
 
+  if (payment.isPaid) {
+    return (
+      <TipSuccessView
+        characterName={character.displayName}
+        characterAvatar={character.assets.avatar}
+        characterCover={character.assets.cover}
+        coffeeOption={coffeeOption}
+        splashHref={characterRoutes.splash}
+        tipCount={payment.tipCount}
+        thankYouMessage={payment.thankYouMessage}
+        onSendAgain={handleResetPaidState}
+      />
+    );
+  }
+
   return (
     <MobileShell background="#fff5ed">
       <main
@@ -288,25 +304,6 @@ export function TipScreen({
           </p>
         ) : null}
 
-        {payment.isPaid ? (
-          <section className={styles.successCard} aria-live="polite">
-            <Heart size={18} aria-hidden="true" />
-            <div>
-              <p className={styles.successTitle}>Coffee sent</p>
-              <p className={styles.successText}>
-                Thank you. Your payment has been confirmed.
-              </p>
-            </div>
-            <button
-              type="button"
-              className={styles.successButton}
-              onClick={handleResetPaidState}
-            >
-              Send again
-            </button>
-          </section>
-        ) : null}
-
         <div className={styles.checkoutSlot}>
           <TipCheckoutButton
             coffeeType={selectedCoffeeType}