{}
- : async () => await onPlanSelect(plan)
- }>
-
-
- {convertBytesToGBs(plan.storage, 0)}
-
-
- {' '}
- GB
-
-
-
- {`${plan.price} / ${plan.period}`}
-
-
+ current={isUserSubscribedPlan(plan, subscription)}
+ onClick={handleClick}>
+
+ {convertBytesToGBs(plan.storage, 0)}
+
+
+
+ {`${plan.price} / ${
+ plan.period === PLAN_PERIOD.MONTH
+ ? constants.MONTH_SHORT
+ : constants.YEAR_SHORT
+ }`}
+
+
+
);
}
diff --git a/src/components/pages/gallery/PlanSelector/plans/planTile.tsx b/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
index d9d245d00..30c2cbd98 100644
--- a/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
+++ b/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
@@ -1,48 +1,74 @@
-import { css, styled } from '@mui/material';
+import { styled } from '@mui/material';
-export const PlanTile = styled('div')<{ currentlySubscribed: boolean }>`
- border-radius: 20px;
- width: 220px;
- border: 2px solid #333;
- padding: 30px;
- margin: 10px;
- text-align: center;
- font-size: 20px;
- background-color: #ffffff00;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- cursor: ${(props) =>
- props.currentlySubscribed ? 'not-allowed' : 'pointer'};
- border-color: ${(props) => props.currentlySubscribed && '#56e066'};
- transition: all 0.3s ease-out;
- overflow: hidden;
- position: relative;
+// const OldPlanTile = styled('div')<{ currentlySubscribed: boolean }>`
+// border-radius: 20px;
+// width: 220px;
+// border: 2px solid #333;
+// padding: 30px;
+// margin: 10px;
+// text-align: center;
+// font-size: 20px;
+// background-color: #ffffff00;
+// display: flex;
+// justify-content: center;
+// align-items: center;
+// flex-direction: column;
+// cursor: ${(props) =>
+// props.currentlySubscribed ? 'not-allowed' : 'pointer'};
+// border-color: ${(props) => props.currentlySubscribed && '#56e066'};
+// transition: all 0.3s ease-out;
+// overflow: hidden;
+// position: relative;
- & > div:first-child::before {
- content: ' ';
- height: 600px;
- width: 50px;
- background-color: #444;
- left: 0;
- top: -50%;
- position: absolute;
- transform: rotate(45deg) translateX(-200px);
- transition: all 0.5s ease-out;
- }
+// & > div:first-child::before {
+// content: ' ';
+// height: 600px;
+// width: 50px;
+// background-color: #444;
+// left: 0;
+// top: -50%;
+// position: absolute;
+// transform: rotate(45deg) translateX(-200px);
+// transition: all 0.5s ease-out;
+// }
- &:hover
- ${(props) =>
- !props.currentlySubscribed &&
- css`
- {
- transform: scale(1.1);
- background-color: #ffffff11;
- }
- `}
- &:hover
- > div:first-child::before {
- transform: rotate(45deg) translateX(300px);
- }
-`;
+// &:hover
+// ${(props) =>
+// !props.currentlySubscribed &&
+// css`
+// {
+// transform: scale(1.1);
+// background-color: #ffffff11;
+// }
+// `}
+// &:hover
+// > div:first-child::before {
+// transform: rotate(45deg) translateX(300px);
+// }
+// `;
+
+const PlanTile = styled('div')<{ current: boolean }>(({ theme, current }) => ({
+ padding: theme.spacing(3),
+ border: `1px solid ${theme.palette.divider}`,
+
+ '&:hover': {
+ backgroundColor: ' rgba(40, 214, 101, 0.11)',
+ cursor: 'pointer',
+ },
+ ...(current && {
+ borderColor: theme.palette.accent.main,
+ cursor: 'not-allowed',
+ '&:hover': { backgroundColor: 'transparent' },
+ }),
+ width: ' 260px',
+ borderRadius: '8px 8px 0 0',
+ '&:not(:first-of-type)': {
+ borderTopLeftRadius: '0',
+ },
+
+ '&:not(:last-of-type)': {
+ borderTopRightRadius: '0',
+ },
+}));
+
+export default PlanTile;
diff --git a/src/utils/billing/index.ts b/src/utils/billing/index.ts
index 97b7ed29c..df73c9396 100644
--- a/src/utils/billing/index.ts
+++ b/src/utils/billing/index.ts
@@ -30,7 +30,7 @@ enum RESPONSE_STATUS {
}
export function convertBytesToGBs(bytes, precision?): string {
- return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2);
+ return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2) + ' GB';
}
export function convertBytesToHumanReadable(
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index f37f52a88..bbd1849a6 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -263,6 +263,7 @@ const englishConstants = {
CHOOSE_PLAN: 'Choose your subscription plan',
MANAGE_PLAN: 'Manage your subscription',
CHOOSE_PLAN_BTN: 'Choose plan',
+ ACTIVE: 'Active',
OFFLINE_MSG: 'You are offline, cached memories are being shown',
@@ -775,6 +776,8 @@ const englishConstants = {
FAMILY: 'Family',
FREE: 'free',
OF: 'of',
+ MONTH_SHORT: 'mo',
+ YEAR_SHORT: 'yr',
};
export default englishConstants;