Updated retention offer copy

apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx

@@ -230,7 +230,7 @@ const RetentionOfferSidebar: React.FC<{
                                 <TextField
                                     error={Boolean(errors.displayTitle)}
                                     hint={errors.displayTitle}
-                                    placeholder='Before you go...'
+                                    placeholder='Before you go'
                                     title='Display title'
                                     value={formState.displayTitle}
                                     onChange={(e) => {
@@ -239,7 +239,7 @@ const RetentionOfferSidebar: React.FC<{
                                     onKeyDown={() => clearError('displayTitle')}
                                 />
                                 <TextArea
-                                    placeholder='We&#39;d hate to see you go! How about a special offer to stay?'
+                                    placeholder='We&#39;d hate to see you leave. How about a special offer to stay?'
                                     title='Display description'
                                     value={formState.displayDescription}
                                     onChange={(e) => {
@@ -434,11 +434,26 @@ const EditRetentionOfferModal: React.FC<{id: string}> = ({id}) => {
             const shouldCreateInactiveDraft = !formState.enabled && !editableRetentionOffer && hasFormChangesFromDefault(formState, defaultState);
 
             const createRetentionOffer = async (status: 'active' | 'archived') => {
-                // Generate a random 8-character hex string
-                const hash = Array.from(crypto.getRandomValues(new Uint8Array(4)), b => b.toString(16).padStart(2, '0')).join('');
+                const hash = crypto.getRandomValues(new Uint16Array(1))[0].toString(16).padStart(4, '0');
+
+                let offerDesc: string;
+                if (formTerms.type === 'free_months') {
+                    const monthText = formTerms.amount === 1 ? 'free month' : 'free months';
+                    offerDesc = `${formTerms.amount} ${monthText}`;
+                } else {
+                    let durationText: string;
+                    if (formTerms.duration === 'once') {
+                        durationText = 'next payment';
+                    } else if (formTerms.duration === 'repeating') {
+                        durationText = `for ${formTerms.durationInMonths} ${formTerms.durationInMonths === 1 ? 'month' : 'months'}`;
+                    } else {
+                        durationText = 'forever';
+                    }
+                    offerDesc = `${formTerms.amount}% off ${durationText}`;
+                }
 
                 await addOffer({
-                    name: `Special offer ${hash}`,
+                    name: `Retention ${offerDesc} (${hash})`,
                     code: hash,
                     display_title: displayTitle,
                     display_description: displayDescription,

apps/admin-x-settings/test/acceptance/membership/offers.test.ts

@@ -670,8 +670,8 @@ test.describe('Offers Modal', () => {
             });
 
             const createdOffer = (lastApiRequests.addOffer?.body as {offers: Array<{name: string; code: string}>})?.offers?.[0];
-            expect(createdOffer?.name).toMatch(/^Special offer [a-f0-9]{8}$/);
-            expect(createdOffer?.code).toMatch(/^[a-f0-9]{8}$/);
+            expect(createdOffer?.name).toMatch(/^Retention 35% off forever \([a-f0-9]{4}\)$/);
+            expect(createdOffer?.code).toMatch(/^[a-f0-9]{4}$/);
         });
 
         test('Edits existing retention offer when only display fields change', async ({page}) => {

apps/portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/portal",
-  "version": "2.64.8",
+  "version": "2.64.9",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",

apps/portal/src/components/pages/AccountHomePage/components/paid-account-actions.js

@@ -67,7 +67,7 @@ const PaidAccountActions = () => {
                     <p className={oldPriceClassName}>
                         {label}
                     </p>
-                    <FreeMonthsLabel nextPayment={nextPayment} />
+                    <FreeMonthsLabel nextPayment={nextPayment} subscription={subscription} />
                 </>
             );
         }
@@ -202,9 +202,11 @@ function FreeTrialLabel({subscription}) {
 }
 
 // TODO: Add i18n once copy is finalized
-function FreeMonthsLabel({nextPayment}) {
-    const months = nextPayment.discount.amount;
-    const label = months === 1 ? '1 month free' : `${months} months free`;
+function FreeMonthsLabel({nextPayment, subscription}) {
+    const months = nextPayment?.discount?.amount ?? 0;
+    const renewalDate = getDateString(subscription?.current_period_end);
+    const monthsText = months === 1 ? '1 month free' : `${months} months free`;
+    const label = renewalDate ? `${monthsText} - Renews ${renewalDate}` : monthsText;
 
     return (
         <p className="gh-portal-account-discountcontainer" data-testid="offer-label">

apps/portal/src/components/pages/account-plan-page.js

@@ -251,13 +251,24 @@ function PlansOrProductSection({selectedPlan, onPlanSelect, onPlanCheckout, chan
 }
 
 // TODO: Add i18n once copy is finalized
-function getOfferMessage(offer, originalPrice, currency, amountOff) {
+function getOfferMessage(offer, originalPrice, currency, amountOff, subscription) {
     if (offer.type === 'free_months') {
         const months = offer.amount;
-        const monthLabel = months === 1 ? '1 month' : `${months} months`;
-        const dayLabel = months * 30;
+        const monthLabel = months === 1 ? '1 free month' : `${months} free months`;
+
+        if (subscription?.current_period_end) {
+            const date = new Date(subscription.current_period_end);
+            const originalDay = date.getUTCDate();
+            let targetMonth = date.getUTCMonth() + months;
+            let targetYear = date.getUTCFullYear() + Math.floor(targetMonth / 12);
+            targetMonth = targetMonth % 12;
+            const daysInTargetMonth = new Date(Date.UTC(targetYear, targetMonth + 1, 0)).getUTCDate();
+            const newDate = new Date(Date.UTC(targetYear, targetMonth, Math.min(originalDay, daysInTargetMonth)));
+            const newBillingDate = newDate.toLocaleDateString('en-GB', {year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC'});
+            return `Enjoy ${monthLabel} on us. Your next billing date will be ${newBillingDate}.`;
+        }
 
-        return `Enjoy ${monthLabel} on us. Your next billing date will be pushed back by ${dayLabel} days.`;
+        return `Enjoy ${monthLabel} on us.`;
     }
 
     if (offer.duration === 'forever') {
@@ -281,8 +292,9 @@ function getOfferMessage(offer, originalPrice, currency, amountOff) {
 
 // TODO: Add i18n once copy is finalized
 const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineOffer}) => {
-    const {brandColor, action} = useContext(AppContext);
+    const {brandColor, action, member} = useContext(AppContext);
     const isAcceptingOffer = action === 'applyOffer:running';
+    const subscription = getMemberSubscription({member});
 
     const originalPrice = formatNumber(price.amount / 100);
     const currency = getCurrencySymbol(price.currency);
@@ -291,9 +303,9 @@ const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineO
     const discountText = offer.type === 'free_months' ? `${amountOff} free` : `${amountOff} off`;
     const cadenceLabel = offer.cadence === 'month' ? 'Monthly' : 'Yearly';
     const productCadenceLabel = `${product.name} - ${cadenceLabel}`;
-    const displayDescription = offer.display_description || 'We\'d hate to see you go! How about a special offer to stay?';
+    const displayDescription = offer.display_description || 'We\'d hate to see you leave. How about a special offer to stay?';
 
-    const offerMessage = getOfferMessage(offer, originalPrice, currency, amountOff);
+    const offerMessage = getOfferMessage(offer, originalPrice, currency, amountOff, subscription);
 
     // TODO: Add i18n once copy is finalized
     return (

apps/portal/src/utils/fixtures.js

@@ -193,7 +193,7 @@ export const member = {
             getSubscriptionData({
                 amount: 1500,
                 startDate: '2019-05-01T11:42:40.000Z',
-                currentPeriodEnd: '2021-06-05T11:42:40.000Z'
+                currentPeriodEnd: new Date().toISOString()
             })
         ]
     })

apps/portal/test/unit/components/pages/account-plan-page.test.js

@@ -435,7 +435,7 @@ describe('Account Plan Page', () => {
         fireEvent.click(cancelButton);
 
         expect(queryByText('1 month free')).toBeInTheDocument();
-        expect(queryByText('Enjoy 1 month on us. Your next billing date will be pushed back by 30 days.')).toBeInTheDocument();
+        expect(queryByText('Enjoy 1 free month on us. Your next billing date will be 5 Nov 2022.')).toBeInTheDocument();
     });
 
     test('renders forever percent retention offers', async () => {