Feature/pricing paywall

apps/research/src/components/article/article-actions/EndedCall.tsx

@@ -5,6 +5,7 @@ import { ProCheckoutCard } from '../article-payments';
 
 interface EndedCallProps {
   checkout: () => void;
+  yearlyCheckout: () => void;
   isLoading?: boolean;
   isReport?: boolean;
 }
@@ -14,6 +15,7 @@ const { useToken } = theme;
 
 const EndedCall: React.FC<EndedCallProps> = ({
   checkout,
+  yearlyCheckout,
   isLoading = false,
   isReport = false,
 }) => {
@@ -29,15 +31,10 @@ const EndedCall: React.FC<EndedCallProps> = ({
               ? 'Renew your K33 Research Pro subscription to download the report'
               : 'Renew your K33 Research Pro subscription to keep reading the article'}
           </Title>
-          <Text
-            style={{
-              fontSize: fontSizeSM,
-            }}
-          >
-            Subscribe again and regain full access to all research.
-          </Text>
         </Space>
         <ProCheckoutCard
+          isEx={true}
+          handleYearlyCheckout={yearlyCheckout}
           isLoading={isLoading}
           handleCheckout={checkout}
           label="Renew Your Subscription"

apps/research/src/components/article/article-actions/StartTrialCall.tsx

@@ -2,9 +2,11 @@ import * as React from 'react';
 import CallToActionCard from './CallToActionCard';
 import { Space, Typography, theme } from 'antd';
 import { ProCheckoutCard } from '../article-payments';
+import styles from './styles.module.scss';
 
 interface EndedCallProps {
   checkout: () => void;
+  yearlyCheckout: () => void;
   isLoading?: boolean;
   isReport?: boolean;
 }
@@ -14,6 +16,7 @@ const { useToken } = theme;
 
 const StartTrialCall: React.FC<EndedCallProps> = ({
   checkout,
+  yearlyCheckout,
   isLoading = false,
   isReport = false,
 }) => {
@@ -22,23 +25,24 @@ const StartTrialCall: React.FC<EndedCallProps> = ({
   } = useToken();
   return (
     <CallToActionCard>
-      <Space size={16}>
+      <div style={{ gap: 16, width: '100%' }}>
         <Space id="ended-header" direction="vertical" size={8}>
           <Title level={5} style={{ margin: 0 }}>
             {isReport
               ? 'Register to K33 Research Pro to download the report'
               : 'Register to K33 Research Pro to keep reading the article'}
           </Title>
-          <Text
+          {/* <Text
             style={{
               fontSize: fontSizeSM,
             }}
           >
             Subscribe and get full access to all research. No credit card needed
             for free trial.
-          </Text>
+          </Text> */}
         </Space>
         <ProCheckoutCard
+          handleYearlyCheckout={yearlyCheckout}
           isLoading={isLoading}
           handleCheckout={checkout}
           label="Start 30-Day Free Trial"
@@ -53,7 +57,7 @@ const StartTrialCall: React.FC<EndedCallProps> = ({
             No charge until the trial is complete. Cancel anytime.
           </Text>
         </Space>
-      </Space>
+      </div>
     </CallToActionCard>
   );
 };

apps/research/src/components/article/article-actions/styles.module.scss

@@ -74,6 +74,13 @@
   }
 }
 
+.paymentCard {
+  width: 100% !important;
+  > div {
+    width: 100% !important;
+  }
+}
+
 .signupHeader {
   padding: 0px 8px;
   gap: 8px;

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
   );
@@ -77,6 +80,7 @@ const PrivateArticle: React.FC<PrivateArticleProps> = ({
       case 'ended':
         return (
           <EndedCall
+            yearlyCheckout={doYearlyCheckOut}
             isLoading={isLoading}
             checkout={doCheckOut}
             isReport={isReport}
@@ -85,7 +89,8 @@ const PrivateArticle: React.FC<PrivateArticleProps> = ({
       default:
         return (
           <StartTrialCall
-            isLoading={isLoading}
+            yearlyCheckout={doYearlyCheckOut}
+            isLoading={isLoading || isYearlyLoading}
             checkout={doCheckOut}
             isReport={isReport}
           />

apps/research/src/components/article/article-payments/ProCheckoutCard.tsx

@@ -1,6 +1,16 @@
 import * as React from 'react';
-import { Space, Divider, List, theme, Typography, Button } from 'antd';
+import {
+  Space,
+  Divider,
+  List,
+  theme,
+  Typography,
+  Button,
+  Switch,
+  Tag,
+} from 'antd';
 import { CheckCircleFilled } from '@ant-design/icons';
+import { usePlan } from '@/hooks';
 
 const { Title, Text } = Typography;
 const { useToken } = theme;
@@ -14,90 +24,195 @@ const features = [
 
 interface ProCheckoutCardProps {
   handleCheckout: () => void;
+  handleYearlyCheckout: () => void;
   label: string;
   isFreeTrial?: boolean;
   isLoading?: boolean;
+  isEx?: boolean;
 }
 
 const ProCheckoutCard: React.FC<ProCheckoutCardProps> = ({
   handleCheckout,
+  handleYearlyCheckout,
   label,
   isFreeTrial = false,
   isLoading = false,
+  isEx = false,
 }) => {
   const {
-    token: { colorBgContainer, borderRadius, colorPrimary },
+    token: {
+      colorBgContainer,
+      borderRadius,
+      colorPrimary,
+      colorTextQuaternary,
+    },
   } = useToken();
+  const { plan, setPlan } = usePlan();
   return (
-    <Space
+    <div
       id="ended-body"
       style={{
         backgroundColor: colorBgContainer,
         borderRadius: borderRadius,
         textAlign: 'start',
         padding: '20px 28px',
+        width: '100%',
+        flexDirection: 'column',
+        gap: 20,
       }}
-      direction="vertical"
-      size={20}
     >
-      <Space direction="vertical">
-        <Title level={5} style={{ margin: 0 }}>
-          K33 Research Pro
-        </Title>
-        <Space
-          size="small"
-          align="center"
-          split={isFreeTrial ? <Divider type="vertical" /> : null}
+      <Space
+        direction="vertical"
+        align="center"
+        style={{
+          width: '100%',
+        }}
+        size={16}
+      >
+        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2 }}>
+          <Button onClick={() => setPlan('monthly')} type="text">
+            <Text
+              {...(plan === 'year' && {
+                style: {
+                  color: colorTextQuaternary,
+                },
+              })}
+            >
+              Monthly
+            </Text>
+          </Button>
+          <div style={{ paddingBottom: 5 }}>
+            <Switch
+              defaultChecked={plan === 'year'}
+              checked={plan === 'year'}
+              onChange={(isYear) => {
+                setPlan(isYear ? 'year' : 'monthly');
+              }}
+            />
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Tag color="blue">Save $100</Tag>
+            <Button onClick={() => setPlan('year')} type="text">
+              <Text
+                {...(plan === 'monthly' && {
+                  style: {
+                    color: colorTextQuaternary,
+                  },
+                })}
+              >
+                Yearly
+              </Text>
+            </Button>
+          </div>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            marginBottom: isEx ? 24 : 0,
+          }}
         >
-          <Space>
-            <Title level={2} style={{ margin: 0 }}>
-              $50
-            </Title>
-            <Text>month</Text>
-          </Space>
-          {isFreeTrial && (
+          <Space
+            size="small"
+            align="center"
+            split={isFreeTrial ? <Divider type="vertical" /> : null}
+          >
+            <Space>
+              {plan === 'monthly' ? (
+                <>
+                  <Title level={2} style={{ margin: 0 }}>
+                    $50
+                  </Title>
+                  <Text>month</Text>
+                </>
+              ) : (
+                <>
+                  <Title level={2} style={{ margin: 0 }}>
+                    $500
+                  </Title>
+                  <Text>year</Text>
+                </>
+              )}
+            </Space>
+            {/* {isFreeTrial && (
             <Space>
               <Text>After Free Trial</Text>
             </Space>
-          )}
-        </Space>
+          )} */}
+          </Space>
+          <Title level={5} style={{ margin: 0 }}>
+            K33 Research Pro
+          </Title>
+        </div>
       </Space>
-      <Divider style={{ margin: 0 }} />
-      <List
-        split={false}
-        style={{
-          width: '100%',
-          padding: 0,
-        }}
-        dataSource={features}
-        renderItem={(feat) => (
-          <List.Item
+
+      {!isEx && (
+        <>
+          <Divider />
+          <List
+            split={false}
             style={{
-              margin: 0,
-              paddingBottom: 8,
+              width: '100%',
+              padding: 0,
+              paddingBottom: 16,
             }}
-          >
-            <Space align="start">
-              <CheckCircleFilled
+            dataSource={features}
+            renderItem={(feat) => (
+              <List.Item
                 style={{
-                  color: colorPrimary,
+                  margin: 0,
+                  paddingBottom: 0,
                 }}
-              />
-              <Text>{feat}</Text>
-            </Space>
-          </List.Item>
-        )}
-      />
-      <Button
-        loading={isLoading}
-        size="large"
-        type="primary"
-        block
-        onClick={handleCheckout}
-      >
-        {label}
-      </Button>
-    </Space>
+              >
+                <Space align="start">
+                  <CheckCircleFilled
+                    style={{
+                      color: colorPrimary,
+                      fontSize: 24,
+                    }}
+                  />
+                  <Text
+                    style={{
+                      fontWeight: 400,
+                    }}
+                  >
+                    {feat}
+                  </Text>
+                </Space>
+              </List.Item>
+            )}
+          />
+        </>
+      )}
+
+      {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>
+      )}
+    </div>
   );
 };