fix: change subscription

OneKeyHQ · Jan 14, 2025 · 5d0eb1d · 5d0eb1d
1 parent 527a7d7
commit 5d0eb1d
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 31 deletions.
diff --git a/packages/kit/src/views/Prime/pages/PrimeDashboard/PrimeDashboard.tsx b/packages/kit/src/views/Prime/pages/PrimeDashboard/PrimeDashboard.tsx
@@ -23,6 +23,7 @@ import PrimeBannerBgDark from '@onekeyhq/kit/assets/animations/prime-banner-bg-d
 import { ListItem } from '@onekeyhq/kit/src/components/ListItem';
 import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
 import { usePromiseResult } from '@onekeyhq/kit/src/hooks/usePromiseResult';
+import { EWebEmbedRoutePath } from '@onekeyhq/shared/src/consts/webEmbedConsts';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 import openUrlUtils from '@onekeyhq/shared/src/utils/openUrlUtils';
 import timerUtils from '@onekeyhq/shared/src/utils/timerUtils';
@@ -33,7 +34,6 @@ import { usePrimePayment } from '../../hooks/usePrimePayment';
 
 import { PrimeSubscriptionPlans } from './PrimeSubscriptionPlans';
 import { PrimeUserInfo } from './PrimeUserInfo';
-import { EWebEmbedRoutePath } from '@onekeyhq/shared/src/consts/webEmbedConsts';
 
 function showDebugMessageByDialog(obj: any) {
   Dialog.debugMessage({
@@ -190,7 +190,8 @@ export default function PrimeDashboard() {
     });
   }, [navigation, user?.privyUserId, user?.email]);
 
-  const onConfirm = useCallback(async () => {
+  // TODO move to jotai context method
+  const doPurchase = useCallback(async () => {
     try {
       setIsLoading(true);
       if (!user?.isLoggedIn) {
@@ -270,6 +271,22 @@ export default function PrimeDashboard() {
     }
   }, [getPaywallPackagesWeb]);
 
+  const subscriptionPlans = useMemo(() => {
+    if (
+      user?.isLoggedIn &&
+      // !user?.primeSubscription?.isActive &&
+      paywallPackages?.packages?.length
+    ) {
+      return (
+        <PrimeSubscriptionPlans
+          packages={paywallPackages?.packages}
+          onPackageSelected={setSelectedPackageId}
+        />
+      );
+    }
+    return null;
+  }, [user?.isLoggedIn, paywallPackages]);
+
   return (
     <>
       <Theme name="dark">
@@ -308,15 +325,10 @@ export default function PrimeDashboard() {
                 </YStack>
               ) : null}
               <PrimeBanner />
-              {user?.isLoggedIn ? <PrimeUserInfo /> : null}
-              {user?.isLoggedIn &&
-              !user?.primeSubscription?.isActive &&
-              paywallPackages?.packages?.length ? (
-                <PrimeSubscriptionPlans
-                  packages={paywallPackages?.packages}
-                  onPackageSelected={setSelectedPackageId}
-                />
+              {user?.isLoggedIn ? (
+                <PrimeUserInfo doPurchase={doPurchase} />
               ) : null}
+              {subscriptionPlans}
             </Stack>
             <PrimeBenefitsList />
             <XStack flexWrap="wrap">
@@ -387,7 +399,7 @@ export default function PrimeDashboard() {
             </XStack>
           </Page.Body>
           <Page.Footer
-            onConfirm={shouldShowConfirmButton ? onConfirm : undefined}
+            onConfirm={shouldShowConfirmButton ? doPurchase : undefined}
             onConfirmText="Subscribe"
             confirmButtonProps={
               shouldShowConfirmButton

diff --git a/packages/kit/src/views/Prime/pages/PrimeDashboard/PrimeUserInfo.tsx b/packages/kit/src/views/Prime/pages/PrimeDashboard/PrimeUserInfo.tsx
@@ -6,7 +6,11 @@ import { usePrimeAuth } from '../../hooks/usePrimeAuth';
 
 import { PrimeUserInfoMoreButton } from './PrimeUserInfoMoreButton';
 
-export function PrimeUserInfo() {
+export function PrimeUserInfo({
+  doPurchase,
+}: {
+  doPurchase?: () => Promise<void>;
+}) {
   const { user, privy } = usePrimeAuth();
   const isPrime = user?.primeSubscription?.isActive;
 
@@ -46,7 +50,7 @@ export function PrimeUserInfo() {
           Free
         </Badge>
       )}
-      <PrimeUserInfoMoreButton />
+      <PrimeUserInfoMoreButton doPurchase={doPurchase} />
     </XStack>
   );
 }
diff --git a/packages/kit/src/views/Prime/pages/PrimeDashboard/PrimeUserInfoMoreButton.tsx b/packages/kit/src/views/Prime/pages/PrimeDashboard/PrimeUserInfoMoreButton.tsx
@@ -20,8 +20,10 @@ import { usePrimePayment } from '../../hooks/usePrimePayment';
 
 function PrimeUserInfoMoreButtonDropDownMenu({
   handleActionListClose,
+  doPurchase,
 }: {
   handleActionListClose: () => void;
+  doPurchase?: () => Promise<void>;
 }) {
   const { user, logout, updateEmail } = usePrimeAuth();
   const isPrime = user?.primeSubscription?.isActive;
@@ -77,21 +79,31 @@ function PrimeUserInfoMoreButtonDropDownMenu({
         }}
       />
       {isPrime ? (
-        <ActionList.Item
-          label="Manage subscription"
-          icon="CreditCardOutline"
-          onClose={handleActionListClose}
-          onPress={async () => {
-            if (user.subscriptionManageUrl) {
-              openUrlUtils.openUrlExternal(user.subscriptionManageUrl);
-            } else {
-              Toast.message({
-                title: 'Please try again later',
-              });
-              await Promise.all([fetchPrimeUserInfo(), getCustomerInfo()]);
-            }
-          }}
-        />
+        <>
+          <ActionList.Item
+            label="Manage subscription"
+            icon="CreditCardOutline"
+            onClose={handleActionListClose}
+            onPress={async () => {
+              if (user.subscriptionManageUrl) {
+                openUrlUtils.openUrlExternal(user.subscriptionManageUrl);
+              } else {
+                Toast.message({
+                  title: 'Please try again later',
+                });
+                await Promise.all([fetchPrimeUserInfo(), getCustomerInfo()]);
+              }
+            }}
+          />
+          <ActionList.Item
+            label="Change Subscription"
+            icon="CreditCardOutline"
+            onClose={handleActionListClose}
+            onPress={async () => {
+              void doPurchase?.();
+            }}
+          />
+        </>
       ) : null}
       <Divider mx="$2" my="$1" />
       <ActionList.Item
@@ -112,7 +124,11 @@ function PrimeUserInfoMoreButtonDropDownMenu({
   );
 }
 
-export function PrimeUserInfoMoreButton() {
+export function PrimeUserInfoMoreButton({
+  doPurchase,
+}: {
+  doPurchase?: () => Promise<void>;
+}) {
   const renderItems = useCallback(
     ({
       handleActionListClose,
@@ -122,9 +138,10 @@ export function PrimeUserInfoMoreButton() {
     }) => (
       <PrimeUserInfoMoreButtonDropDownMenu
         handleActionListClose={handleActionListClose}
+        doPurchase={doPurchase}
       />
     ),
-    [],
+    [doPurchase],
   );
   return (
     <ActionList

diff --git a/packages/shared/src/modules3rdParty/stripe-v3/index.js b/packages/shared/src/modules3rdParty/stripe-v3/index.js