refactor(promotion banner): added promotion banner in articles

k33hq · Nov 7, 2023 · a0b09bf · a0b09bf
1 parent e7a6d4e
commit a0b09bf
Show file tree

Hide file tree

Showing 22 changed files with 1,024 additions and 177 deletions.
diff --git a/apps/research/public/aoc_settings.svg b/apps/research/public/aoc_settings.svg
diff --git a/apps/research/public/nn_settings.svg b/apps/research/public/nn_settings.svg
diff --git a/apps/research/public/pro_product.svg b/apps/research/public/pro_product.svg
diff --git a/apps/research/public/pro_settings.svg b/apps/research/public/pro_settings.svg
diff --git a/apps/research/public/twic_settings.svg b/apps/research/public/twic_settings.svg
diff --git a/apps/research/src/components/article/Article.tsx b/apps/research/src/components/article/Article.tsx
@@ -10,6 +10,7 @@ import {
   ArticleRecommendations,
 } from './article-body';
 import { Divider } from 'antd';
+import { TopPromotion } from '../platform';
 
 interface ArticleProps
   extends Omit<

diff --git a/apps/research/src/components/article/article-actions/StartTrialCall.tsx b/apps/research/src/components/article/article-actions/StartTrialCall.tsx
@@ -65,7 +65,7 @@ const StartTrialCall: React.FC<EndedCallProps> = ({
           handleYearlyCheckout={isLoggedOut ? signIn : yearlyCheckout}
           isLoading={isLoading}
           handleCheckout={isLoggedOut ? signIn : checkout}
-          label="Start 30-Day Free Trial"
+          label="Subscribe Now"
           isFreeTrial
           features={appStructure.payments[productKeys].features}
           yearlyPrice={appStructure.payments[productKeys].yearlyPrice}
@@ -76,7 +76,7 @@ const StartTrialCall: React.FC<EndedCallProps> = ({
           Already subscribed?{' '}
           <Link
             href={{
-              pathname: `https://${process.env.NEXT_PUBLIC_WEB_DOMAIN}/services/auth/signup`,
+              pathname: `https://${process.env.NEXT_PUBLIC_WEB_DOMAIN}/services/auth`,
               query: { redirect: window.location.href },
             }}
           >

diff --git a/apps/research/src/components/article/article-body/PrivateArticle.tsx b/apps/research/src/components/article/article-body/PrivateArticle.tsx
@@ -12,6 +12,7 @@ import { useCustomerCheckout, useProductInfo } from '@/hooks';
 import { motion } from 'framer-motion';
 import { appStructure } from '@/config';
 import { getProductSection, sectionKeys } from '@/utils';
+import { TopPromotion } from '@/components';
 
 interface PrivateArticleProps
   extends React.PropsWithChildren,
@@ -102,11 +103,14 @@ const PrivateArticle: React.FC<PrivateArticleProps> = ({
       case 'blocked':
         return <BlockedCall />;
       case 'ended':
+        if (completePackageStatus.state === 'ended') {
+          return null;
+        }
         return (
           <EndedCall
-            yearlyCheckout={doProyearlyCheckout}
-            isLoading={isProMonthlyLoading || isProYearlyLoading}
-            checkout={doProMonthlyCheckout}
+            yearlyCheckout={doYearlyCheckOut}
+            isLoading={isLoading || isYearlyLoading}
+            checkout={doCheckOut}
             isReport={isReport}
           />
         );
@@ -148,19 +152,29 @@ const PrivateArticle: React.FC<PrivateArticleProps> = ({
     );
 
   return (
-    <motion.div
-      key={productStatus.state}
-      variants={variants}
-      animate={'show'}
-      initial="hide"
-      style={{
-        width: '100%',
-      }}
-    >
-      <ActionLayout publicSnippet={publicSnippet}>
-        {getCallToAction(productStatus.state)}
-      </ActionLayout>
-    </motion.div>
+    <>
+      <motion.div
+        key={productStatus.state}
+        variants={variants}
+        animate={'show'}
+        initial="hide"
+        style={{
+          width: '100%',
+        }}
+      >
+        <ActionLayout publicSnippet={publicSnippet}>
+          {completePackageStatus.state === 'ended' && (
+            <EndedCall
+              yearlyCheckout={doProyearlyCheckout}
+              isLoading={isProMonthlyLoading || isProYearlyLoading}
+              checkout={doProMonthlyCheckout}
+              isReport={isReport}
+            />
+          )}
+          {getCallToAction(productStatus.state)}
+        </ActionLayout>
+      </motion.div>
+    </>
   );
 };
 

diff --git a/apps/research/src/components/article/article-header/ArticleHeader.tsx b/apps/research/src/components/article/article-header/ArticleHeader.tsx
@@ -7,6 +7,7 @@ import ArticleMetaData from '../ArticleMetaData';
 import { downloadResource, getProductSection, sectionKeys } from '@/utils';
 import { useProductInfo } from '@/hooks';
 import { appStructure } from '@/config';
+import { TopPromotion } from '@/components';
 
 const { Title, Text } = Typography;
 const { useToken } = theme;
@@ -22,47 +23,77 @@ const ArticleHeader: React.FC<ArticleHeaderProps> = ({
   reportDocument,
   ...metadata
 }) => {
-  const { productStatus, appState } = useProductInfo(
+  const { productStatus: proProductStatus, appState } = useProductInfo(
     appStructure.payments.pro.productId
   );
   const {
     token: { fontSizeSM },
   } = useToken();
 
-  const productSection = getProductSection(metadata.sectionsCollection);
-  const productKey = sectionKeys[productSection?.name!] ?? 'pro';
+  const productSection =
+    getProductSection(metadata.sectionsCollection)?.name ?? '';
+  const productKey = sectionKeys[productSection] ?? 'pro';
+
+  const { productStatus } = useProductInfo(
+    appStructure.payments[productKey].productId
+  );
+
+  React.useEffect(() => {
+    console.log(
+      !['active', 'ended', 'blocked'].includes(productStatus.state ?? 'loading')
+    );
+    console.log(
+      !['active', 'ended', 'blocked'].includes(
+        proProductStatus.state ?? 'loading'
+      )
+    );
+  }, [proProductStatus, productStatus]);
 
   return (
-    <div id="article-header" className={styles.header}>
-      <ArticleMetaData {...metadata} title={title} />
-      <Title level={2} style={{ margin: 0, padding: 0 }}>
-        {title}
-      </Title>
-      <Text type="secondary">{subtitle}</Text>
-      <div className={styles.headerImage}>
-        <Image src={image.url} style={{ margin: 0 }} alt={image.title ?? ''} />
-        {image.description && (
-          <Typography.Text style={{ fontSize: fontSizeSM }} type="secondary">
-            {image.description}
-          </Typography.Text>
+    <>
+      {!['active', 'ended', 'blocked'].includes(
+        productStatus.state ?? 'loading'
+      ) &&
+        !['active', 'ended', 'blocked'].includes(
+          proProductStatus.state ?? 'loading'
+        ) && <TopPromotion />}
+      <div id="article-header" className={styles.header}>
+        <ArticleMetaData {...metadata} title={title} />
+        <Title level={2} style={{ margin: 0, padding: 0 }}>
+          {title}
+        </Title>
+        <Text type="secondary">{subtitle}</Text>
+        <div className={styles.headerImage}>
+          <Image
+            src={image.url}
+            style={{ margin: 0 }}
+            alt={image.title ?? ''}
+          />
+          {image.description && (
+            <Typography.Text style={{ fontSize: fontSizeSM }} type="secondary">
+              {image.description}
+            </Typography.Text>
+          )}
+        </div>
+        {reportDocument && (
+          <>
+            {(productStatus.state === 'active' ||
+              proProductStatus.state === 'active' ||
+              productKey === 'pro') && (
+              <Button
+                type="primary"
+                onClick={() => downloadResource(reportDocument.url)}
+                block
+                size="large"
+              >
+                Download Report
+              </Button>
+            )}
+          </>
         )}
+        <Divider style={{ margin: 0 }} />
       </div>
-      {reportDocument && (
-        <>
-          {(productStatus.state === 'active' || productKey === 'pro') && (
-            <Button
-              type="primary"
-              onClick={() => downloadResource(reportDocument.url)}
-              block
-              size="large"
-            >
-              Download Report
-            </Button>
-          )}
-        </>
-      )}
-      <Divider style={{ margin: 0 }} />
-    </div>
+    </>
   );
 };
 

diff --git a/apps/research/src/components/platform/BottomPromotion.tsx b/apps/research/src/components/platform/BottomPromotion.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { Button, Divider, Grid, Image, Typography } from 'antd';
+import styles from './styles.module.scss';
+import Link from 'next/link';
+
+const BottomPromotion: React.FC = () => {
+  const { lg, xl } = Grid.useBreakpoint();
+  return (
+    <Link href={'/pricing'} className={styles.topPromotion}>
+      <div
+        id="top-promotion-info"
+        style={{
+          backgroundColor: '#202328',
+        }}
+      >
+        <div>
+          <Typography.Title
+            style={{
+              color: 'white',
+              opacity: 0.85,
+              margin: 0,
+            }}
+            level={lg ? (xl ? 1 : 2) : 3}
+          >
+            Digital Assets Research
+          </Typography.Title>
+          <Typography.Text
+            style={{
+              color: 'white',
+              opacity: 0.85,
+              fontSize: lg ? (xl ? 24 : 18) : 16,
+            }}
+          >
+            For Professional and Institutional Investors
+          </Typography.Text>
+        </div>
+        <Link href={'/pricing'}>
+          <Button size="large">Sign Up Now</Button>
+        </Link>
+      </div>
+      <div />
+    </Link>
+  );
+};
+
+export default BottomPromotion;
diff --git a/apps/research/src/components/platform/PricingCard.tsx b/apps/research/src/components/platform/PricingCard.tsx
@@ -32,7 +32,7 @@ const PricingCard: React.FC<PricingCardProps> = ({
     token: { colorInfo },
   } = theme.useToken();
   return (
-    <Badge count={badge} offset={[-150, 0]} color="blue">
+    <Badge count={badge} offset={[-158, 0]} color="blue">
       <Card
         style={{
           width: '100%',