Update cancellation message

apps/photos/public/locales/en/translation.json

@@ -172,6 +172,7 @@
     "UPDATE_SUBSCRIPTION": "Change plan",
     "CANCEL_SUBSCRIPTION": "Cancel subscription",
     "CANCEL_SUBSCRIPTION_MESSAGE": "<p>All of your data will be deleted from our servers at the end of this billing period.</p><p>Are you sure that you want to cancel your subscription?</p>",
+    "CANCEL_SUBSCRIPTION_WITH_ADDON_MESSAGE": "<p>Are you sure you want to cancel your subscription?</p> <p>Your data will be scheduled for deletion at the end of your add-on pack's validity.</p>",
     "SUBSCRIPTION_CANCEL_FAILED": "Failed to cancel subscription",
     "SUBSCRIPTION_CANCEL_SUCCESS": "Subscription canceled successfully",
     "REACTIVATE_SUBSCRIPTION": "Reactivate subscription",

apps/photos/src/components/pages/gallery/PlanSelector/card/free.tsx

@@ -5,6 +5,8 @@ import React from 'react';
 import { t } from 'i18next';
 import { PeriodToggler } from '../periodToggler';
 import Plans from '../plans';
+import { hasAddOnBonus } from 'utils/billing';
+import { BFAddOnRow } from '../plans/BfAddOnRow';
 
 export default function FreeSubscriptionPlanSelectorCard({
     plans,
@@ -40,6 +42,12 @@ export default function FreeSubscriptionPlanSelectorCard({
                         bonusData={bonusData}
                         closeModal={closeModal}
                     />
+                    {hasAddOnBonus(bonusData) && (
+                        <BFAddOnRow
+                            bonusData={bonusData}
+                            closeModal={closeModal}
+                        />
+                    )}
                 </Stack>
             </Box>
         </>

apps/photos/src/components/pages/gallery/PlanSelector/card/paid.tsx

@@ -5,15 +5,21 @@ import Typography from '@mui/material/Typography';
 import { SpaceBetweenFlex } from '@ente/shared/components/Container';
 import React from 'react';
 import { t } from 'i18next';
-import { convertBytesToGBs, isSubscriptionCancelled } from 'utils/billing';
+import {
+    convertBytesToGBs,
+    hasAddOnBonus,
+    isSubscriptionCancelled,
+} from 'utils/billing';
 import { ManageSubscription } from '../manageSubscription';
 import { PeriodToggler } from '../periodToggler';
 import Plans from '../plans';
 import { Trans } from 'react-i18next';
+import { BFAddOnRow } from '../plans/BfAddOnRow';
 
 export default function PaidSubscriptionPlanSelectorCard({
     plans,
     subscription,
+    bonusData,
     closeModal,
     usage,
     planPeriod,
@@ -71,6 +77,7 @@ export default function PaidSubscriptionPlanSelectorCard({
                         planPeriod={planPeriod}
                         onPlanSelect={onPlanSelect}
                         subscription={subscription}
+                        bonusData={bonusData}
                         closeModal={closeModal}
                     />
                 </Stack>
@@ -85,11 +92,18 @@ export default function PaidSubscriptionPlanSelectorCard({
                                   date: subscription.expiryTime,
                               })}
                     </Typography>
+                    {hasAddOnBonus(bonusData) && (
+                        <BFAddOnRow
+                            bonusData={bonusData}
+                            closeModal={closeModal}
+                        />
+                    )}
                 </Box>
             </Box>
 
             <ManageSubscription
                 subscription={subscription}
+                bonusData={bonusData}
                 closeModal={closeModal}
                 setLoading={setLoading}
             />

apps/photos/src/components/pages/gallery/PlanSelector/manageSubscription/index.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
 import { AppContext } from 'pages/_app';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Trans } from 'react-i18next';
 import { t } from 'i18next';
 import { Subscription } from 'types/billing';
@@ -12,16 +12,21 @@ import {
     manageFamilyMethod,
     hasStripeSubscription,
     isSubscriptionCancelled,
+    hasAddOnBonus,
 } from 'utils/billing';
 import ManageSubscriptionButton from './button';
+import { BonusData } from 'types/user';
+
 interface Iprops {
     subscription: Subscription;
+    bonusData?: BonusData;
     closeModal: () => void;
     setLoading: SetLoading;
 }
 
 export function ManageSubscription({
     subscription,
+    bonusData,
     closeModal,
     setLoading,
 }: Iprops) {
@@ -29,11 +34,18 @@ export function ManageSubscription({
     const openFamilyPortal = () =>
         manageFamilyMethod(appContext.setDialogMessage, setLoading);
 
+    // define a function that will be only called once when component mounts
+    // this is to prevent the dialog from being opened on every render
+    useEffect(() => {
+        console.log('bonusData:', bonusData);
+    }, [bonusData]);
+
     return (
         <Stack spacing={1}>
             {hasStripeSubscription(subscription) && (
                 <StripeSubscriptionOptions
                     subscription={subscription}
+                    bonusData={bonusData}
                     closeModal={closeModal}
                     setLoading={setLoading}
                 />
@@ -49,6 +61,7 @@ export function ManageSubscription({
 
 function StripeSubscriptionOptions({
     subscription,
+    bonusData,
     setLoading,
     closeModal,
 }: Iprops) {
@@ -77,7 +90,11 @@ function StripeSubscriptionOptions({
     const confirmCancel = () =>
         appContext.setDialogMessage({
             title: t('CANCEL_SUBSCRIPTION'),
-            content: <Trans i18nKey={'CANCEL_SUBSCRIPTION_MESSAGE'} />,
+            content: hasAddOnBonus(bonusData) ? (
+                <Trans i18nKey={'CANCEL_SUBSCRIPTION_WITH_ADDON_MESSAGE'} />
+            ) : (
+                <Trans i18nKey={'CANCEL_SUBSCRIPTION_MESSAGE'} />
+            ),
             proceed: {
                 text: t('CANCEL_SUBSCRIPTION'),
                 action: cancelSubscription.bind(

apps/photos/src/components/pages/gallery/PlanSelector/plans/BfAddOnRow.tsx

@@ -6,8 +6,8 @@ import { Trans } from 'react-i18next';
 import { makeHumanReadableStorage } from 'utils/billing';
 
 const RowContainer = styled(SpaceBetweenFlex)(({ theme }) => ({
-    gap: theme.spacing(1.5),
-    padding: theme.spacing(1.5, 1),
+    // gap: theme.spacing(1.5),
+    padding: theme.spacing(1, 0),
     cursor: 'pointer',
     '&:hover .endIcon': {
         backgroundColor: 'rgba(255,255,255,0.08)',
@@ -21,7 +21,7 @@ export function BFAddOnRow({ bonusData, closeModal }) {
                     return (
                         <RowContainer key={bonus.id} onClick={closeModal}>
                             <Box>
-                                <Typography variant="small" color="text.muted">
+                                <Typography color="text.muted">
                                     <Trans
                                         i18nKey={'ADD_ON_AVAILABLE_TILL'}
                                         values={{

apps/photos/src/components/pages/gallery/PlanSelector/plans/index.tsx

@@ -11,7 +11,6 @@ import { PlanRow } from './planRow';
 import { Plan, Subscription } from 'types/billing';
 import { PLAN_PERIOD } from 'constants/gallery';
 import { BonusData } from 'types/user';
-import { BFAddOnRow } from './BfAddOnRow';
 
 interface Iprops {
     plans: Plan[];
@@ -46,9 +45,6 @@ const Plans = ({
         {!hasPaidSubscription(subscription) && !hasAddOnBonus(bonusData) && (
             <FreePlanRow closeModal={closeModal} />
         )}
-        {hasAddOnBonus(bonusData) && (
-            <BFAddOnRow bonusData={bonusData} closeModal={closeModal} />
-        )}
     </Stack>
 );