From 9c8c41db10efa675bb3172a6e686f605d1210e84 Mon Sep 17 00:00:00 2001
From: corlard3y <corlardey@gmail.com>
Date: Mon, 18 Nov 2024 10:33:49 +0100
Subject: [PATCH] add upgrade plan modal

---
 .../userPlanAndBillings/UpgradePlanModal.tsx  |  89 ++++++++++
 .../UserPlanAndBillings.tsx                   | 150 +++++++++++++++++
 src/components/userSettings/UserSettings.tsx  | 155 +++++++++++++++---
 src/config/Themization.js                     |   6 +
 4 files changed, 375 insertions(+), 25 deletions(-)
 create mode 100644 src/components/userPlanAndBillings/UpgradePlanModal.tsx
 create mode 100644 src/components/userPlanAndBillings/UserPlanAndBillings.tsx

diff --git a/src/components/userPlanAndBillings/UpgradePlanModal.tsx b/src/components/userPlanAndBillings/UpgradePlanModal.tsx
new file mode 100644
index 0000000000..f4827ee2d5
--- /dev/null
+++ b/src/components/userPlanAndBillings/UpgradePlanModal.tsx
@@ -0,0 +1,89 @@
+import { Box, Cross, Modal, Text } from 'blocks';
+import { ModalResponse } from 'common';
+import { FC } from 'react';
+
+type UpgradePlanModalProps = {
+  modalControl: ModalResponse;
+};
+
+const UpgradePlanModal: FC<UpgradePlanModalProps> = ({ modalControl }) => {
+  const { isOpen, onClose } = modalControl;
+
+  const planFeatures = [
+    {
+      text: 'Telegram delivery will reduce to 1,000 from 5,000',
+    },
+    {
+      text: 'Email delivery will reduce to 1,000 from 5,000',
+    },
+    {
+      text: 'Features will reset to Free plan',
+    },
+  ];
+  return (
+    <Modal
+      size="medium"
+      isOpen={isOpen}
+      onClose={onClose}
+      acceptButtonProps={{
+        children: 'Go Back',
+        onClick: () => {
+          // handleAddSettings(formValues);
+        },
+      }}
+      cancelButtonProps={{
+        children: 'Cancel',
+      }}
+    >
+      <Box width="100%">
+        <Text
+          variant="h3-semibold"
+          color="text-primary"
+          textAlign="center"
+        >
+          We’re sorry to see you go
+        </Text>
+        <Text
+          variant="bs-regular"
+          color="text-tertiary"
+          textAlign="center"
+        >
+          If you cancel you will be able to continue using Pro features until November 20, 2024. Once the billing term
+          ends:
+        </Text>
+
+        <Box
+          display="flex"
+          flexDirection="column"
+          margin="spacing-md spacing-none"
+          gap="spacing-sm"
+        >
+          {planFeatures.map((item) => (
+            <Box
+              display="flex"
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+              gap="spacing-xxs"
+            >
+              <Cross
+                size={24}
+                color="icon-primary"
+              />
+
+              <Text
+                variant="bs-regular"
+                color="text-primary"
+                textAlign="center"
+              >
+                {item.text}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default UpgradePlanModal;
diff --git a/src/components/userPlanAndBillings/UserPlanAndBillings.tsx b/src/components/userPlanAndBillings/UserPlanAndBillings.tsx
new file mode 100644
index 0000000000..7e543c7001
--- /dev/null
+++ b/src/components/userPlanAndBillings/UserPlanAndBillings.tsx
@@ -0,0 +1,150 @@
+import { Box, Button, ProgressBar, Text } from 'blocks';
+import { useDisclosure } from 'common';
+import UpgradePlanModal from './UpgradePlanModal';
+
+const UserPlanAndBillings = () => {
+  const modalControl = useDisclosure();
+
+  const itemNotifications = [
+    { title: 'Email Notification Delivery', subtitle: '750 remaining' },
+    { title: 'Telegram Notification Delivery', subtitle: '750 remaining' },
+    { title: 'Discord Notification Delivery', subtitle: '750 remaining' },
+  ];
+  return (
+    <Box width="100%">
+      <Text
+        variant="bs-regular"
+        color="text-tertiary"
+      >
+        Take full control of your Push Notification plan, manage and stay up to date with your plan usage
+      </Text>
+
+      <Box
+        backgroundColor="surface-secondary"
+        margin="spacing-lg spacing-none spacing-none spacing-none"
+        padding="spacing-md"
+        borderRadius="radius-md"
+      >
+        <Box
+          display="flex"
+          width="100%"
+          flexDirection="row"
+          justifyContent="space-between"
+        >
+          <Text
+            variant="h2-semibold"
+            color="text-primary"
+          >
+            Pro Plan
+          </Text>
+          <Text
+            variant="h2-semibold"
+            color="text-primary"
+          >
+            $14.99/mo
+          </Text>
+        </Box>
+
+        <Box
+          display="flex"
+          width="100%"
+          flexDirection="row"
+          justifyContent="space-between"
+        >
+          <Text
+            variant="bm-regular"
+            color="text-tertiary"
+          >
+            For individuals
+          </Text>
+          <Text
+            variant="bm-regular"
+            color="text-tertiary"
+          >
+            billed yearly
+          </Text>
+        </Box>
+
+        <Box
+          margin="spacing-lg spacing-none spacing-none spacing-none"
+          display="flex"
+          width="100%"
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Button
+            variant="tertiary"
+            size="small"
+          >
+            Upgrade Plan
+          </Button>
+
+          <Text
+            variant="bs-semibold"
+            color="text-primary"
+            onClick={() => modalControl.open()}
+          >
+            Cancel Plan
+          </Text>
+        </Box>
+      </Box>
+
+      <Box margin="spacing-xl spacing-none spacing-none spacing-none">
+        <Text
+          variant="h4-semibold"
+          color="text-primary"
+        >
+          Plan Usage
+        </Text>
+        <Text
+          variant="bs-regular"
+          color="text-tertiary"
+        >
+          Keep track of usage in your current cycle
+        </Text>
+      </Box>
+
+      <Box
+        margin="spacing-lg spacing-none spacing-none spacing-none"
+        display="flex"
+        flexDirection="row"
+        width="100%"
+        justifyContent="space-between"
+        gap="spacing-md"
+      >
+        {itemNotifications.map((item) => (
+          <Box
+            display="flex"
+            flexDirection="column"
+            gap="spacing-xxs"
+            width="100%"
+          >
+            <Text
+              color="text-secondary"
+              variant="c-bold"
+            >
+              {item.title}
+            </Text>
+
+            <ProgressBar
+              progress={250}
+              max={1000}
+            />
+
+            <Text
+              color="text-secondary"
+              variant="c-regular"
+            >
+              {item.subtitle}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+
+      {modalControl.isOpen && <UpgradePlanModal modalControl={modalControl} />}
+    </Box>
+  );
+};
+
+export default UserPlanAndBillings;
diff --git a/src/components/userSettings/UserSettings.tsx b/src/components/userSettings/UserSettings.tsx
index c65f4dba5a..92f5453127 100644
--- a/src/components/userSettings/UserSettings.tsx
+++ b/src/components/userSettings/UserSettings.tsx
@@ -12,11 +12,13 @@ import { useAccount } from 'hooks';
 import { Button } from 'primaries/SharedStyling';
 import { ImageV2 } from 'components/reusables/SharedStylingV2';
 import { updateBulkSubscriptions, updateBulkUserSettings } from 'redux/slices/channelSlice';
+import { Alert, Box, Text } from 'blocks';
 
 // Internal Configs
 import { device } from 'config/Globals';
 import ChannelListSettings from 'components/channel/ChannelListSettings';
 import PushSnapSettings from 'components/PushSnap/PushSnapSettings';
+import UserPlanAndBillings from 'components/userPlanAndBillings/UserPlanAndBillings';
 
 interface ChannelListItem {
   channel: string;
@@ -97,11 +99,19 @@ function UserSettings() {
       value: 0,
       label: 'Notification Settings',
       title: 'Notification Settings',
+      section: 'top',
     },
     {
       value: 1,
       label: 'Push Snap',
       title: '',
+      section: 'top',
+    },
+    {
+      value: 2,
+      label: 'Plan & Billing',
+      title: 'Plan & Billing',
+      section: 'bottom',
     },
   ];
 
@@ -111,26 +121,82 @@ function UserSettings() {
       <PageDescription>Customize your Push profile or manage your notification preferences</PageDescription>
       <Wrapper>
         <SelectSection>
-          {selectOptions.map((selectOptions) => (
-            <SelectListOption
-              onClick={() => setSelectedOption(selectOptions.value)}
-              key={selectOptions.value}
-              isSelected={selectOptions.value === selectedOption}
+          {selectOptions
+            .filter((option) => option.section === 'top')
+            .map((option) => (
+              <SelectListOption
+                onClick={() => setSelectedOption(option.value)}
+                key={option.value}
+                isSelected={option.value === selectedOption}
+              >
+                {option.label}
+              </SelectListOption>
+            ))}
+          <Box margin="spacing-lg spacing-none spacing-none spacing-none">
+            <Text
+              variant="os-regular"
+              color="text-tertiary"
             >
-              {selectOptions.label}
-            </SelectListOption>
-          ))}
+              Developers
+            </Text>
+          </Box>
+
+          {selectOptions
+            .filter((option) => option.section === 'bottom')
+            .map((option) => (
+              <SelectListOption
+                onClick={() => setSelectedOption(option.value)}
+                key={option.value}
+                isSelected={option.value === selectedOption}
+              >
+                {option.label}
+              </SelectListOption>
+            ))}
         </SelectSection>
-        <ChannelWrapper>
-          <ChannelContainer>
-            {selectOptions[selectedOption]?.title && (
-              <SectionTitle>{selectOptions[selectedOption]?.title}</SectionTitle>
-            )}
-
-            {selectedOption === 0 && <ChannelListSettings />}
-            {selectedOption === 1 && <PushSnapSettings />}
-          </ChannelContainer>
-        </ChannelWrapper>
+
+        <ChannelBlock>
+          {/* {successMessage && (
+            <Box margin="spacing-sm spacing-none spacing-none spacing-none">
+              <Alert
+                variant="success"
+                heading={successMessage}
+              />
+            </Box>
+          )}
+
+          {errorMessage && (
+            <Box margin="spacing-sm spacing-none spacing-none spacing-none">
+              <Alert
+                variant="error"
+                heading={errorMessage}
+              />
+            </Box>
+          )} */}
+
+          {selectedOption === 2 && (
+            <Alert
+              showIcon={false}
+              heading="Go Pro for $14.99/mo and unlock access to more features"
+              onAction={() => console.log('idea')}
+              actionText="Upgrade Plan"
+              variant="info"
+            />
+          )}
+
+          <ChannelWrapper>
+            <ChannelContainer selectedOption={selectedOption}>
+              {selectOptions[selectedOption]?.title && (
+                <SectionTitle bottomSpacing={selectedOption == 2 ? false : true}>
+                  {selectOptions[selectedOption]?.title}
+                </SectionTitle>
+              )}
+
+              {selectedOption === 0 && <ChannelListSettings />}
+              {selectedOption === 1 && <PushSnapSettings />}
+              {selectedOption === 2 && <UserPlanAndBillings />}
+            </ChannelContainer>
+          </ChannelWrapper>
+        </ChannelBlock>
       </Wrapper>
     </Container>
   );
@@ -142,6 +208,8 @@ export default UserSettings;
 const Container = styled.div`
   padding: 32px 24px;
   flex: 1;
+  height: 100%;
+  overflow: hidden;
 
   @media ${device.tablet} {
     padding: 24px 12px;
@@ -182,6 +250,10 @@ const Wrapper = styled.div`
   flex-direction: row;
   justify-content: space-between;
 
+  height: 100%;
+  flex: 1;
+  min-height: 0;
+
   @media ${device.tablet} {
     flex-direction: column;
   }
@@ -220,10 +292,9 @@ const SelectListOption = styled(Button)<{ isSelected: boolean }>`
 `;
 
 const ChannelWrapper = styled.div`
-  border: 1px solid ${(props) => props.theme.default.borderColor};
+  border: 1px solid ${(props) => props.theme.userSettingsBorder};
   padding: 12px;
-  border-radius: 16px;
-  flex-grow: 1;
+  border-radius: 24px;
 
   @media ${device.tablet} {
     margin: 8px 0px;
@@ -231,9 +302,43 @@ const ChannelWrapper = styled.div`
   }
 `;
 
-const ChannelContainer = styled.div`
+const ChannelBlock = styled.div`
   overflow: hidden;
-  overflow-y: scroll;
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  height: auto;
+  flex-grow: 1;
+  min-height: 0;
+  gap: 16px;
+  padding-right: 12px;
+  overflow-y: auto;
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    position: absolute;
+    right: 10px;
+  }
+  &::-webkit-scrollbar {
+    background-color: transparent;
+    width: 4px;
+    position: absolute;
+    right: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d53a94;
+    border-radius: 99px;
+    width: 4px;
+    position: absolute;
+    right: 10px;
+  }
+  // Adding margin-bottom to the last child
+  & > *:last-child {
+    margin-bottom: 100px;
+  }
+`;
+
+const ChannelContainer = styled.div<{ selectedOption: number }>`
+  overflow-y: auto;
   height: 55vh;
   padding: 12px;
 
@@ -264,13 +369,13 @@ const ChannelContainer = styled.div`
   }
 `;
 
-const SectionTitle = styled.div`
+const SectionTitle = styled.div<{ bottomSpacing: boolean }>`
   font-size: 22px;
   font-weight: 500;
   line-height: 33px;
   letter-spacing: normal;
   text-align: left;
-  margin-bottom: 20px;
+  margin-bottom: ${(props) => (props.bottomSpacing ? '20px' : '0px')};
   color: ${(props) => props.theme.default.color};
 
   @media ${device.tablet} {
diff --git a/src/config/Themization.js b/src/config/Themization.js
index 8a1933a90e..7194737191 100644
--- a/src/config/Themization.js
+++ b/src/config/Themization.js
@@ -311,6 +311,9 @@ const themeLight = {
   //Connect Wallet and Push user Flow Modal
   userSecText: '#8C93A0',
   disabledBtnColor: '#E5E5E5',
+
+  //userSettings
+  userSettingsBorder: '#EAEBF2',
 };
 
 const themeDark = {
@@ -627,6 +630,9 @@ const themeDark = {
   //Connect Wallet and Push user Flow Modal
   userSecText: '#484D58',
   disabledBtnColor: '#484D58',
+
+  //userSettings
+  userSettingsBorder: '#313338',
 };
 
 export { themeDark, themeLight };