diff --git a/public/images/family_plan_leave@3x.png b/public/images/family_plan_leave@3x.png
new file mode 100644
index 000000000..0949dbf0e
Binary files /dev/null and b/public/images/family_plan_leave@3x.png differ
diff --git a/src/components/MemberSubscriptionManage.tsx b/src/components/MemberSubscriptionManage.tsx
new file mode 100644
index 000000000..9015ec58f
--- /dev/null
+++ b/src/components/MemberSubscriptionManage.tsx
@@ -0,0 +1,73 @@
+import { Button, DialogContent, Typography } from '@mui/material';
+import VerticallyCentered from 'components/Container';
+import DialogBoxBase from 'components/DialogBox/base';
+import DialogTitleWithCloseButton from 'components/DialogBox/titleWithCloseButton';
+import { AppContext } from 'pages/_app';
+import React, { useContext } from 'react';
+import billingService from 'services/billingService';
+import { getFamilyPlanAdmin } from 'utils/billing';
+import constants from 'utils/strings/constants';
+export function MemberSubscriptionManage({ open, userDetails, onClose }) {
+ const { setDialogMessage } = useContext(AppContext);
+
+ async function onLeaveFamilyClick() {
+ try {
+ await billingService.leaveFamily();
+ } catch (e) {
+ setDialogMessage({
+ title: constants.ERROR,
+ close: { variant: 'danger' },
+ content: constants.UNKNOWN_ERROR,
+ });
+ }
+ }
+ const confirmLeaveFamily = () =>
+ setDialogMessage({
+ title: `${constants.LEAVE_FAMILY}`,
+ content: constants.LEAVE_FAMILY_CONFIRM,
+ proceed: {
+ text: constants.LEAVE_FAMILY,
+ action: onLeaveFamilyClick,
+ variant: 'danger',
+ },
+ close: {
+ text: constants.CANCEL,
+ },
+ });
+
+ if (!userDetails) {
+ return <>>;
+ }
+
+ return (
+
+
+ {constants.SUBSCRIPTION}
+
+ {constants.FAMILY_PLAN}
+
+
+
+
+
+ {constants.FAMILY_SUBSCRIPTION_INFO(
+ getFamilyPlanAdmin(userDetails.familyData)?.email
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Sidebar/SubscriptionCard/index.tsx b/src/components/Sidebar/SubscriptionCard/index.tsx
index e7ddc3430..24df2de24 100644
--- a/src/components/Sidebar/SubscriptionCard/index.tsx
+++ b/src/components/Sidebar/SubscriptionCard/index.tsx
@@ -12,10 +12,13 @@ import {
import { SubscriptionCardContentOverlay } from './contentOverlay';
interface Iprops {
userDetails: UserDetails;
- closeSidebar: () => void;
+ openMemberSubscriptionDialog: () => void;
}
-export default function SubscriptionCard({ userDetails }: Iprops) {
+export default function SubscriptionCard({
+ userDetails,
+ openMemberSubscriptionDialog,
+}: Iprops) {
const { showPlanSelectorModal } = useContext(GalleryContext);
if (!userDetails) {
@@ -30,9 +33,9 @@ export default function SubscriptionCard({ userDetails }: Iprops) {
);
}
- const allowClick =
- !isPartOfFamily(userDetails.familyData) ||
- isFamilyAdmin(userDetails.familyData);
+ const isMemberSubscription =
+ isPartOfFamily(userDetails.familyData) &&
+ !isFamilyAdmin(userDetails.familyData);
return (
@@ -43,7 +46,13 @@ export default function SubscriptionCard({ userDetails }: Iprops) {
}}
src="/images/subscription-card-background.png"
/>
- {allowClick && }
+
+ onClick={showPlanSelectorModal}
+ sx={{ cursor: 'pointer' }}>
{isSubscriptionActive(userDetails.subscription)
? isOnFreePlan(userDetails.subscription)
? constants.FREE_SUBSCRIPTION_INFO(
diff --git a/src/components/Sidebar/SubscriptionStatus/index.tsx b/src/components/Sidebar/SubscriptionStatus/index.tsx
index 71d895e91..b25939a48 100644
--- a/src/components/Sidebar/SubscriptionStatus/index.tsx
+++ b/src/components/Sidebar/SubscriptionStatus/index.tsx
@@ -1,9 +1,8 @@
-import { MemberSubscriptionStatus } from './member';
-import { AdminSubscriptionStatus as AdminSubscriptionStatus } from './admin';
import { GalleryContext } from 'pages/gallery';
import React, { useContext, useMemo } from 'react';
import {
hasNonAdminFamilyMembers,
+ hasPaidSubscription,
isFamilyAdmin,
isOnFreePlan,
isSubscriptionActive,
@@ -11,6 +10,8 @@ import {
} from 'utils/billing';
import Box from '@mui/material/Box';
import { UserDetails } from 'types/user';
+import constants from 'utils/strings/constants';
+import { Typography } from '@mui/material';
export default function SubscriptionStatus({
userDetails,
@@ -34,14 +35,29 @@ export default function SubscriptionStatus({
return (
- {!hasNonAdminFamilyMembers(userDetails.familyData) ||
- isFamilyAdmin(userDetails.familyData) ? (
-
- ) : (
-
+ {(!hasNonAdminFamilyMembers(userDetails.familyData) ||
+ isFamilyAdmin(userDetails.familyData) ||
+ hasPaidSubscription(userDetails.subscription)) && (
+
+ {isSubscriptionActive(userDetails.subscription)
+ ? isOnFreePlan(userDetails.subscription)
+ ? constants.FREE_SUBSCRIPTION_INFO(
+ userDetails.subscription?.expiryTime
+ )
+ : isSubscriptionCancelled(
+ userDetails.subscription
+ ) &&
+ constants.RENEWAL_CANCELLED_SUBSCRIPTION_INFO(
+ userDetails.subscription?.expiryTime
+ )
+ : constants.SUBSCRIPTION_EXPIRED_MESSAGE(
+ showPlanSelectorModal
+ )}
+
)}
);
diff --git a/src/components/Sidebar/SubscriptionStatus/member.tsx b/src/components/Sidebar/SubscriptionStatus/member.tsx
deleted file mode 100644
index c5a4dc82c..000000000
--- a/src/components/Sidebar/SubscriptionStatus/member.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Button, Stack, Typography } from '@mui/material';
-import { AppContext } from 'pages/_app';
-import React, { useContext } from 'react';
-import billingService from 'services/billingService';
-import { getFamilyPlanAdmin } from 'utils/billing';
-import constants from 'utils/strings/constants';
-export function MemberSubscriptionStatus({ userDetails }) {
- const { setDialogMessage } = useContext(AppContext);
-
- async function onLeaveFamilyClick() {
- try {
- await billingService.leaveFamily();
- } catch (e) {
- setDialogMessage({
- title: constants.ERROR,
- close: { variant: 'danger' },
- content: constants.UNKNOWN_ERROR,
- });
- }
- }
- const confirmLeaveFamily = () =>
- setDialogMessage({
- title: `${constants.LEAVE_FAMILY}`,
- content: constants.LEAVE_FAMILY_CONFIRM,
- proceed: {
- text: constants.LEAVE_FAMILY,
- action: onLeaveFamilyClick,
- variant: 'danger',
- },
- close: {
- text: constants.CANCEL,
- },
- });
- return (
-
-
- {constants.FAMILY_PLAN_MANAGE_ADMIN_ONLY(
- getFamilyPlanAdmin(userDetails.familyData)?.email
- )}
-
-
-
- );
-}
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index cea9ff4c1..ae360099d 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -24,10 +24,7 @@ export default function Sidebar({
-
+
(
LS_KEYS.USER_DETAILS
);
+ const [memberSubscriptionManageView, setMemberSubscriptionManageView] =
+ useState(false);
+
+ const openMemberSubscriptionManage = () =>
+ setMemberSubscriptionManageView(true);
+ const closeMemberSubscriptionManage = () =>
+ setMemberSubscriptionManageView(false);
+
useEffect(() => {
if (!sidebarView) {
return;
@@ -26,20 +35,28 @@ export default function UserDetailsSection({ sidebarView, closeSidebar }) {
}, [sidebarView]);
return (
-
-
- {userDetails ? (
- userDetails.email
- ) : (
-
- )}
-
+ <>
+
+
+ {userDetails ? (
+ userDetails.email
+ ) : (
+
+ )}
+
-
+
+
+
+
-
-
+ >
);
}
diff --git a/src/themes/darkThemeOptions.tsx b/src/themes/darkThemeOptions.tsx
index e478c1770..e4ddc7335 100644
--- a/src/themes/darkThemeOptions.tsx
+++ b/src/themes/darkThemeOptions.tsx
@@ -84,7 +84,6 @@ const darkThemeOptions = createTheme({
},
styleOverrides: {
root: {
- textTransform: 'none',
padding: '12px 16px',
borderRadius: '4px',
},
@@ -171,9 +170,27 @@ const darkThemeOptions = createTheme({
display: 'block',
},
caption: {
+ display: 'block',
fontSize: '12px',
lineHeight: '15px',
},
+ h1: {
+ fontSize: '36px',
+ lineHeight: '44px',
+ },
+ h2: {
+ fontSize: '30px',
+ lineHeight: '36px',
+ },
+ h3: {
+ fontSize: '24px',
+ lineHeight: '29px',
+ },
+ h4: {
+ fontSize: '18px',
+ lineHeight: '22px',
+ },
+
fontFamily: ['Inter', 'sans-serif'].join(','),
},
});
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index ed9ab9b8a..00f3135b1 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -252,6 +252,7 @@ const englishConstants = {
// ========================
// Subscription
// ========================
+ SUBSCRIPTION: 'Subscription',
SUBSCRIBE: 'Subscribe',
SUBSCRIPTION_PLAN: 'Subscription plan',
USAGE_DETAILS: 'Usage',
@@ -273,10 +274,9 @@ const englishConstants = {
>
),
- FAMILY_PLAN_MANAGE_ADMIN_ONLY: (adminEmail) => (
+ FAMILY_SUBSCRIPTION_INFO: (adminEmail) => (
<>
- Only your family plan admin {adminEmail} can change
- the plan
+ You are on a family plan managed by {adminEmail}
>
),
RENEWAL_ACTIVE_SUBSCRIPTION_INFO: (expiryTime) => (
@@ -777,6 +777,7 @@ const englishConstants = {
OF: 'of',
MONTH_SHORT: 'mo',
YEAR_SHORT: 'yr',
+ FAMILY_PLAN: 'Family plan',
};
export default englishConstants;