feat(research): updated the url path and content in newsletters page,…

… and tweaked the ui to match figma
k33hq · Sep 14, 2023 · af1e76a · af1e76a
1 parent b080f54
commit af1e76a
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/apps/research/src/components/settings/emails/EmailSetting.tsx b/apps/research/src/components/settings/emails/EmailSetting.tsx
@@ -3,6 +3,7 @@ import { Button, Divider, Switch, Tag, Typography, theme, Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import * as React from 'react';
 import { useSupressionGroupActions } from '@/hooks';
+import styles from './styles.module.scss';
 
 interface EmailSettingProps extends SupressedGroup {
   description: string;
@@ -39,14 +40,7 @@ const EmailSetting: React.FC<EmailSettingProps> = ({
 
   return (
     <>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          gap: 16,
-        }}
-      >
+      <div className={styles.emailSettings}>
         <div
           style={{
             display: 'flex',
@@ -63,8 +57,8 @@ const EmailSetting: React.FC<EmailSettingProps> = ({
               alignSelf: 'stretch',
             }}
           >
-            {isPro && <Tag color="black">Pro</Tag>}
-            <Typography.Title level={5} style={{ margin: 0 }}>
+            {isPro && <Tag color="black">PRO</Tag>}
+            <Typography.Title level={5} style={{ margin: 0, padding: 0 }}>
               {name}
             </Typography.Title>
           </div>
@@ -77,14 +71,12 @@ const EmailSetting: React.FC<EmailSettingProps> = ({
           </Typography.Text>
         </div>
         {(productStatus === 'active' || !isPro) && (
-          <div style={{ display: 'flex', gap: 2 }}>
-            <Switch
-              defaultChecked={!suppressed}
-              checked={!suppressed}
-              onChange={switchHandler}
-            />
-            {isLoading && <Spin indicator={antIcon} />}
-          </div>
+          <Switch
+            defaultChecked={!suppressed}
+            checked={!suppressed}
+            onChange={switchHandler}
+            loading={isLoading}
+          />
         )}
         {productStatus === 'ended' && isPro && (
           <Button onClick={openProductModal}>Renew Subscription</Button>

diff --git a/apps/research/src/components/settings/emails/styles.module.scss b/apps/research/src/components/settings/emails/styles.module.scss
@@ -0,0 +1,18 @@
+@import 'src/styles/variables';
+@import 'src/styles/screens';
+
+.emailSettings {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+@include medium() {
+  .emailSettings {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: start;
+    width: 100%;
+  }
+}
diff --git a/apps/research/src/pages/settings/index.tsx b/apps/research/src/pages/settings/index.tsx
@@ -25,9 +25,9 @@ Settings.getLayout = function getLayout(page: React.ReactElement) {
       tabs={[
         { key: 'payments', label: 'Payments', url: '/settings' },
         {
-          key: 'email-settings',
-          label: 'Email Settings',
-          url: '/settings/email-settings',
+          key: 'newsletters',
+          label: 'Newsletters',
+          url: '/settings/newsletters',
         },
       ]}
     >

diff --git a/...c/pages/settings/email-settings/index.tsx → .../src/pages/settings/newsletters/index.tsx b/...c/pages/settings/email-settings/index.tsx → .../src/pages/settings/newsletters/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Skeleton, Typography, theme, Modal } from 'antd';
+import { Skeleton, Typography, theme, Modal, Button } from 'antd';
 import { NextPageWithLayout } from 'platform-js';
 
 import { EmailSetting, PrivateLayout, ProCheckoutCard } from '@/components';
@@ -49,7 +49,7 @@ const EmailSettings: NextPageWithLayout = () => {
         style={{
           display: 'flex',
           flexDirection: 'column',
-          gap: 4,
+          gap: 16,
           width: '100%',
         }}
       >
@@ -76,13 +76,15 @@ const EmailSettings: NextPageWithLayout = () => {
           alignItems: 'flex-start',
         }}
       >
-        <Typography.Title level={5}>Newsletters</Typography.Title>
+        <Typography.Title level={5}>Newsletters Access</Typography.Title>
         <Typography.Text
           style={{
             fontSize: fontSizeSM,
           }}
         >
-          Opt in or out for the newsletters you receive in your mailbox.
+          {productStatus.state === 'active'
+            ? "You are a PRO subscriber, which means you have access to all our newsletters. Still, you shall only get the ones you want. Manage your newsletters subscriptions below to avoid the emails you don't want."
+            : 'You are not a PRO subscriber, which means you only have access to the newsletter This Week in Crypto. If you don’t want to receive This Week in Crypto, toggle the subscription off below. To gain access to Navigating Narratives and Ahead of the Curve, become a PRO subscriber.'}
         </Typography.Text>
       </div>
       {Object.keys(appStructure.notifications)
@@ -116,6 +118,7 @@ const EmailSettings: NextPageWithLayout = () => {
         title="Register to K33 Research Pro"
         open={showModal}
         onCancel={handleCloseModal}
+        footer={null}
       >
         <ProCheckoutCard
           handleYearlyCheckout={doYearlyCheckOut}
@@ -124,6 +127,19 @@ const EmailSettings: NextPageWithLayout = () => {
           label="Start 30-Day Free Trial"
           isFreeTrial
         />
+        <div
+          style={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Button type="text" onClick={handleCloseModal}>
+            Cancel
+          </Button>
+        </div>
       </Modal>
     </div>
   );
@@ -133,14 +149,14 @@ EmailSettings.getLayout = function getLayout(page: React.ReactElement) {
   return (
     <PrivateLayout
       seoTitle='"K33 - Settings | Emails"'
-      activeKey="/settings/email-settings"
+      activeKey="/settings/newsletters"
       title="Settings"
       tabs={[
         { key: 'payments', label: 'Payments', url: '/settings' },
         {
-          key: 'email-settings',
-          label: 'Email Settings',
-          url: '/settings/email-settings',
+          key: 'newsletters',
+          label: 'Newsletters',
+          url: '/settings/newsletters',
         },
       ]}
     >