feat(research): added new user yearly and monthly checkout

k33hq · Sep 4, 2023 · f72a46c · f72a46c
1 parent 8df7a5d
commit f72a46c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/apps/research/src/components/article/article-actions/StartTrialCall.tsx b/apps/research/src/components/article/article-actions/StartTrialCall.tsx
@@ -6,6 +6,7 @@ import styles from './styles.module.scss';
 
 interface EndedCallProps {
   checkout: () => void;
+  yearlyCheckout: () => void;
   isLoading?: boolean;
   isReport?: boolean;
 }
@@ -15,6 +16,7 @@ const { useToken } = theme;
 
 const StartTrialCall: React.FC<EndedCallProps> = ({
   checkout,
+  yearlyCheckout,
   isLoading = false,
   isReport = false,
 }) => {
@@ -40,6 +42,7 @@ const StartTrialCall: React.FC<EndedCallProps> = ({
           </Text> */}
         </Space>
         <ProCheckoutCard
+          handleYearlyCheckout={yearlyCheckout}
           isLoading={isLoading}
           handleCheckout={checkout}
           label="Start 30-Day Free Trial"

diff --git a/apps/research/src/components/article/article-body/PrivateArticle.tsx b/apps/research/src/components/article/article-body/PrivateArticle.tsx
@@ -40,6 +40,9 @@ const PrivateArticle: React.FC<PrivateArticleProps> = ({
     appStructure.payments.monthlyPriceId
   );
 
+  const { doCheckOut: doYearlyCheckOut, isLoading: isYearlyLoading } =
+    useCustomerCheckout(appStructure.payments.annualPriceId);
+
   const { productStatus, appState } = useProductInfo(
     appStructure.payments.productId
   );
@@ -85,7 +88,8 @@ const PrivateArticle: React.FC<PrivateArticleProps> = ({
       default:
         return (
           <StartTrialCall
-            isLoading={isLoading}
+            yearlyCheckout={doYearlyCheckOut}
+            isLoading={isLoading || isYearlyLoading}
             checkout={doCheckOut}
             isReport={isReport}
           />
@@ -96,18 +100,12 @@ const PrivateArticle: React.FC<PrivateArticleProps> = ({
   if (appState === 'SIGNED_OUT')
     return (
       <ActionLayout publicSnippet={publicSnippet}>
-        {/* <SignUpCall
+        <SignUpCall
           title={
             isReport
               ? 'Try K33 Research Pro for free to download the report'
               : 'Try K33 Research Pro for free to read the article'
           }
-        /> */}
-
-        <StartTrialCall
-          isLoading={isLoading}
-          checkout={doCheckOut}
-          isReport={isReport}
         />
       </ActionLayout>
     );

diff --git a/apps/research/src/components/article/article-payments/ProCheckoutCard.tsx b/apps/research/src/components/article/article-payments/ProCheckoutCard.tsx
@@ -24,13 +24,15 @@ const features = [
 
 interface ProCheckoutCardProps {
   handleCheckout: () => void;
+  handleYearlyCheckout: () => void;
   label: string;
   isFreeTrial?: boolean;
   isLoading?: boolean;
 }
 
 const ProCheckoutCard: React.FC<ProCheckoutCardProps> = ({
   handleCheckout,
+  handleYearlyCheckout,
   label,
   isFreeTrial = false,
   isLoading = false,
@@ -144,15 +146,27 @@ const ProCheckoutCard: React.FC<ProCheckoutCardProps> = ({
           </List.Item>
         )}
       />
-      <Button
-        loading={isLoading}
-        size="large"
-        type="primary"
-        block
-        onClick={handleCheckout}
-      >
-        {label}
-      </Button>
+      {plan === 'monthly' ? (
+        <Button
+          loading={isLoading}
+          size="large"
+          type="primary"
+          block
+          onClick={handleCheckout}
+        >
+          {label}
+        </Button>
+      ) : (
+        <Button
+          loading={isLoading}
+          size="large"
+          type="primary"
+          block
+          onClick={handleYearlyCheckout}
+        >
+          {label}
+        </Button>
+      )}
     </Space>
   );
 };