diff --git a/src/components/pages/gallery/PlanSelector/card/paid.tsx b/src/components/pages/gallery/PlanSelector/card/paid.tsx index 3aeb853ef..fb08d313f 100644 --- a/src/components/pages/gallery/PlanSelector/card/paid.tsx +++ b/src/components/pages/gallery/PlanSelector/card/paid.tsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { SpaceBetweenFlex } from 'components/Container'; import React from 'react'; -import { convertBytesToGBs } from 'utils/billing'; +import { convertBytesToGBs, isSubscriptionCancelled } from 'utils/billing'; import constants from 'utils/strings/constants'; import { ManageSubscription } from '../manageSubscription'; import { PeriodToggler } from '../periodToggler'; @@ -76,9 +76,13 @@ export default function PaidSubscriptionPlanSelectorCard({ - {constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO( - subscription.expiryTime - )} + {!isSubscriptionCancelled(subscription) + ? constants.RENEWAL_ACTIVE_SUBSCRIPTION_STATUS( + subscription.expiryTime + ) + : constants.RENEWAL_CANCELLED_SUBSCRIPTION_STATUS( + subscription.expiryTime + )} diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 4b14dc642..d0f1c2fd2 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -270,9 +270,12 @@ const englishConstants = { FAMILY_SUBSCRIPTION_INFO: 'You are on a family plan managed by', - RENEWAL_ACTIVE_SUBSCRIPTION_INFO: (expiryTime) => ( + RENEWAL_ACTIVE_SUBSCRIPTION_STATUS: (expiryTime) => ( <>Renews on {dateString(expiryTime)} ), + RENEWAL_CANCELLED_SUBSCRIPTION_STATUS: (expiryTime) => ( + <>Ends on {dateString(expiryTime)} + ), RENEWAL_CANCELLED_SUBSCRIPTION_INFO: (expiryTime) => ( <>Your subscription will be cancelled on {dateString(expiryTime)}