feat(tip): support dynamic gift products

src/app/_hooks/use-payment-route-flow.ts

@@ -19,6 +19,9 @@ export interface UsePaymentRouteFlowInput {
   initialPayChannel: PayChannel;
   paymentType: PendingPaymentSubscriptionType;
   shouldResumePendingOrder: boolean;
+  characterId?: string;
+  initialCategory?: string | null;
+  initialPlanId?: string | null;
 }
 
 export interface PaymentRouteFlow {
@@ -35,10 +38,19 @@ export function usePaymentRouteFlow({
   initialPayChannel,
   paymentType,
   shouldResumePendingOrder,
+  characterId,
+  initialCategory = null,
+  initialPlanId = null,
 }: UsePaymentRouteFlowInput): PaymentRouteFlow {
   const payment = usePaymentState();
   const paymentDispatch = usePaymentDispatch();
-  const initialPayChannelAppliedRef = useRef(false);
+  const initializedCatalogKeyRef = useRef<string | null>(null);
+  const catalogKey = [
+    catalog,
+    characterId ?? "",
+    initialCategory ?? "",
+    initialPlanId ?? "",
+  ].join(":");
 
   usePendingPaymentOrderLifecycle({
     payment,
@@ -48,34 +60,23 @@ export function usePaymentRouteFlow({
   });
 
   useEffect(() => {
-    if (payment.status === "idle") {
-      initialPayChannelAppliedRef.current = true;
-      paymentDispatch({
-        type: "PaymentInit",
-        catalog,
-        payChannel: initialPayChannel,
-      });
-      return;
-    }
-
-    if (
-      initialPayChannelAppliedRef.current ||
-      payment.status !== "ready"
-    ) {
-      return;
-    }
-
-    initialPayChannelAppliedRef.current = true;
-    if (payment.payChannel === initialPayChannel) return;
+    if (initializedCatalogKeyRef.current === catalogKey) return;
+    initializedCatalogKeyRef.current = catalogKey;
     paymentDispatch({
-      type: "PaymentPayChannelChanged",
+      type: "PaymentInit",
+      catalog,
       payChannel: initialPayChannel,
+      ...(characterId ? { characterId } : {}),
+      ...(initialCategory ? { category: initialCategory } : {}),
+      ...(initialPlanId ? { planId: initialPlanId } : {}),
     });
   }, [
     catalog,
+    catalogKey,
+    characterId,
+    initialCategory,
+    initialPlanId,
     initialPayChannel,
-    payment.payChannel,
-    payment.status,
     paymentDispatch,
   ]);