Updated gift subscriptions copy across Portal and email (TryGhost#27635)

no issues

- **Portal** — gift purchase, share, and redemption pages reworded;
account screen for gift members now shows the expiry line above a
focused continue-subscription box (matching the existing
complimentary-member pattern, which was hidden for gift members)
- **Email (purchase confirmation)** — new subject + preheader, reworded
copy, removed the prefilled-mailto "Send to recipient" button (read as
phishing) and the "Amount paid" row; dropped the now-unused
amount/currency plumbing through `gift-service`

---------

Co-authored-by: Sag <guptazy@gmail.com>

Author: minimaluminium

apps/portal/package.json

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

apps/portal/src/components/pages/AccountHomePage/components/account-welcome.js

@@ -22,6 +22,13 @@ const AccountWelcome = () => {
         const currentPeriodEnd = subscription?.current_period_end;
         const subscriptionExpiry = getSubscriptionExpiry({member});
         if (isGiftMember({member})) {
+            if (subscriptionExpiry) {
+                return (
+                    <div className='gh-portal-section' style={{marginBottom: 24}}>
+                        <p className='gh-portal-text-center gh-portal-free-ctatext'>{t(`Your gift subscription will expire on {expiryDate}`, {expiryDate: subscriptionExpiry})}</p>
+                    </div>
+                );
+            }
             return null;
         }
         if (isComplimentary && subscriptionExpiry) {

apps/portal/src/components/pages/AccountHomePage/components/continue-gift-subscription-banner.js

@@ -22,8 +22,8 @@ const ContinueGiftSubscriptionBanner = () => {
     return (
         <div className='gh-portal-cancelcontinue-container'>
             <div className='gh-portal-cancel-banner'>
-                <p style={{maxWidth: 'none', margin: '0 0 16px', textAlign: 'center'}}>
-                    Your gift subscription ends on <strong>{expiryDate}</strong>. Continue with a paid subscription to keep reading. Any remaining days will be added as free trial time.
+                <p style={{maxWidth: 'none', margin: '0 0 16px', textAlign: 'center', textWrap: 'pretty'}}>
+                    Continue with a paid subscription anytime. Your remaining gift period will be added as a free trial.
                 </p>
                 <ActionButton
                     onClick={() => doAction('continueGiftSubscription')}

apps/portal/src/components/pages/gift-page.js

@@ -116,13 +116,6 @@ export const GiftPageStyles = `
     border-color: transparent;
 }
 
-.gh-portal-content.gift .gh-portal-signup-message {
-    margin: 32px 0 40px;
-    color: var(--grey5);
-    text-align: center;
-    text-wrap: pretty;
-}
-
 @media (max-width: 480px) {
     .gh-portal-gift-hero {
         padding: 40px 24px 32px;
@@ -208,7 +201,7 @@ function GiftProductCard({brandColor, product, selectedInterval, isDisabled, isP
                 <div className='gh-portal-btn-product'>
                     <ActionButton
                         dataTestId='purchase-gift'
-                        label='Gift this'
+                        label='Continue'
                         onClick={e => onPurchase(e, product)}
                         disabled={isDisabled}
                         isRunning={isPurchasing}
@@ -285,8 +278,8 @@ const GiftPage = () => {
                 <div className='gh-portal-gift-hero-icon'>
                     <GiftIcon />
                 </div>
-                <h1 className='gh-portal-main-title'>Gift someone a membership</h1>
-                <p className='gh-portal-main-subtitle'>Pick a plan and send it to someone as a gift</p>
+                <h1 className='gh-portal-main-title'>Gift a membership</h1>
+                <p className='gh-portal-main-subtitle'>Share a full membership to {siteTitle} with a friend or colleague</p>
             </div>
         </>
     );
@@ -357,10 +350,6 @@ const GiftPage = () => {
                                 ))}
                             </div>
                         </section>
-
-                        <div className='gh-portal-signup-message'>
-                            <div>Only redeemable by free or new members.</div>
-                        </div>
                     </div>
                 </section>
             </div>

apps/portal/src/components/pages/gift-redemption-page.js

@@ -95,8 +95,9 @@ export const GiftRedemptionStyles = `
         margin: 20px 0 0;
         font-size: 2.4rem;
         font-weight: 700;
-        line-height: 1.1;
+        line-height: 1.3;
         letter-spacing: -0.015em;
+        text-wrap: pretty;
         color: var(--grey0);
     }
 
@@ -314,7 +315,11 @@ const GiftRedemptionPage = () => {
     const isRedeeming = action === 'redeemGift:running';
     const buttonLabel = isRedeeming
         ? 'Redeeming gift...' // TODO: Add translation strings once copy has been finalised
-        : 'Redeem gift membership'; // TODO: Add translation strings once copy has been finalised
+        : 'Redeem your membership'; // TODO: Add translation strings once copy has been finalised
+    const siteTitle = site?.title;
+    const headerText = siteTitle
+        ? `You've been gifted a membership to ${siteTitle}`
+        : 'You\'ve been gifted a membership';
 
     return (
         <div className='gh-portal-content gh-portal-gift-redemption'>
@@ -324,7 +329,7 @@ const GiftRedemptionPage = () => {
             <div className='gh-gift-redemption-panel'>
                 <div className='gh-gift-redemption-icon'><GiftIcon /></div>
                 <div className='gh-gift-redemption-kicker'>{'Gift membership'}</div>
-                <h1 className='gh-gift-redemption-title'>{'You\'ve been gifted a membership'}</h1>
+                <h1 className='gh-gift-redemption-title'>{headerText}</h1>
 
                 <div className='gh-gift-redemption-plan'>
                     <span className='gh-gift-redemption-tier'>{gift.tier.name}</span>

apps/portal/src/components/pages/gift-success-page.js

@@ -122,9 +122,9 @@ const GiftSuccessPage = () => {
 
             <div className="gh-portal-signup-header">
                 <div className="gh-gift-success-icon"><GiftIcon /></div>
-                <h1 className="gh-portal-main-title">Gift ready to share!</h1>
+                <h1 className="gh-portal-main-title">Your gift is ready!</h1>
                 <p className="gh-portal-main-subtitle gh-portal-text-center">
-                    Share this link with the recipient to let them redeem their gift membership.
+                    Send the link below to share it with whoever you&apos;d like.
                 </p>
             </div>
 
@@ -137,8 +137,7 @@ const GiftSuccessPage = () => {
             </div>
 
             <p className="gh-gift-footer-text">
-                This link can be redeemed once and expires in 365 days.<br />
-                We&apos;ve also sent a confirmation to your email with this link.
+                Not ready to share? We&apos;ve also emailed a copy to your inbox.
             </p>
         </div>
     );

apps/portal/test/portal-links.test.js

@@ -418,7 +418,7 @@ describe('Portal Data links:', () => {
             popupFrame = await utils.findByTitle(/portal-popup/i);
             expect(popupFrame).toBeInTheDocument();
 
-            const giftSubtitle = within(popupFrame.contentDocument).queryByText(/pick a plan and send it to someone as a gift/i);
+            const giftSubtitle = within(popupFrame.contentDocument).queryByText(/share a full membership.*with a friend or colleague/i);
             expect(giftSubtitle).toBeInTheDocument();
         });
 
@@ -605,7 +605,7 @@ describe('Portal Data links:', () => {
             popupFrame = await utils.findByTitle(/portal-popup/i);
             expect(popupFrame).toBeInTheDocument();
 
-            const giftTitle = within(popupFrame.contentDocument).queryByText(/gift ready to share/i);
+            const giftTitle = within(popupFrame.contentDocument).queryByText(/your gift is ready/i);
             expect(giftTitle).toBeInTheDocument();
 
             const redeemUrl = within(popupFrame.contentDocument).queryByText(/\/gift\/abc123$/);

apps/portal/test/unit/components/pages/AccountHomePage/account-welcome.test.js

@@ -14,6 +14,31 @@ const setup = (overrides) => {
 };
 
 describe('AccountWelcome', () => {
+    test('shows gift expiry message for gift members', () => {
+        const products = getProductsData({numOfProducts: 1});
+        const site = getSiteData({products, portalProducts: products.map(p => p.id)});
+
+        const member = getMemberData({
+            paid: true,
+            status: 'gift',
+            subscriptions: [
+                getSubscriptionData({
+                    status: 'active',
+                    amount: 0,
+                    currency: 'USD',
+                    interval: 'year',
+                    tier: {
+                        expiry_at: new Date('2099-04-12T12:00:00.000Z')
+                    }
+                })
+            ]
+        });
+
+        const {queryByText} = setup({site, member});
+
+        expect(queryByText('Your gift subscription will expire on 12 Apr 2099')).toBeInTheDocument();
+    });
+
     test('uses current period end for renewal date on free months offers', () => {
         const products = getProductsData({numOfProducts: 1});
         const site = getSiteData({products, portalProducts: products.map(p => p.id)});

apps/portal/test/unit/components/pages/gift-redemption-page.test.js

@@ -46,7 +46,7 @@ describe('GiftRedemptionPage', () => {
         expect(queryByLabelText(/your name/i)).not.toBeInTheDocument();
         expect(queryByLabelText(/your email/i)).not.toBeInTheDocument();
 
-        fireEvent.click(getByRole('button', {name: 'Redeem gift membership'}));
+        fireEvent.click(getByRole('button', {name: 'Redeem your membership'}));
 
         expect(mockDoActionFn).toHaveBeenCalledWith('redeemGift', {
             giftToken: 'gift-token-123'
@@ -56,7 +56,7 @@ describe('GiftRedemptionPage', () => {
     test('shows validation errors for anonymous visitors and only submits once valid', async () => {
         const {getByLabelText, getByRole, mockDoActionFn, getByText} = renderGiftRedemptionPage();
         const emailInput = getByLabelText(/your email/i);
-        const submitButton = getByRole('button', {name: 'Redeem gift membership'});
+        const submitButton = getByRole('button', {name: 'Redeem your membership'});
 
         fireEvent.click(submitButton);
         expect(getByText('Enter your email address')).toBeInTheDocument();

ghost/core/core/server/services/gifts/email-templates/gift-purchase-confirmation.hbs

@@ -18,6 +18,7 @@
     </style>
   </head>
   <body style="background-color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+    <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">Thank you for supporting {{siteTitle}}.</span>
     <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
       <tr>
         <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">&nbsp;</td>
@@ -40,7 +41,7 @@
                     <tr>
                       <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">
                         <h1 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 26px; color: #15212A; font-weight: bold; line-height: 28px; margin: 0; padding-bottom: 12px;">Your gift is ready to&nbsp;share!</h1>
-                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; padding-bottom: 24px;">Share the link below with the recipient to let them redeem their gift membership.</p>
+                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; color: #3A464C; font-weight: normal; margin: 0; padding-bottom: 24px;">Thank you for supporting {{siteTitle}}. Send the link below to share your gift with whoever you'd like.</p>
                         <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; width: 100%; min-width: 100%; box-sizing: border-box; background: #F4F5F6; border-radius: 8px;">
                           <tbody>
                             <tr>
@@ -50,30 +51,11 @@
                                     <td style="padding-right: 8px; background-color: #F4F5F6; text-align: left; vertical-align: middle;" valign="middle">
                                       <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; margin: 0; padding-bottom: 4px; color: #15171A; font-weight: 700;">Gift subscription</p>
                                       <p class="large" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; margin: 0; padding-bottom: 24px; color: #15171A; font-weight: 400;">{{gift.tierName}} &bull; {{gift.cadenceLabel}}</p>
-                                      <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; margin: 0; padding-bottom: 4px; color: #15171A; font-weight: 700;">Amount paid</p>
-                                      <p class="large" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; margin: 0; padding-bottom: 24px; color: #15171A; font-weight: 400;">{{gift.amount}}</p>
-                                      <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; margin: 0; padding-bottom: 4px; color: #15171A; font-weight: 700;">Redemption link</p>
-                                      <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; margin: 0; padding-bottom: 24px; color: #738A94; word-break: break-all;"><a href="{{gift.link}}" style="color: {{accentColor}}; text-decoration: none;">{{gift.link}}</a></p>
+                                      <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; margin: 0; padding-bottom: 4px; color: #15171A; font-weight: 700;">Gift link</p>
+                                      <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; margin: 0; padding-bottom: 0; color: #738A94; word-break: break-all;"><a href="{{gift.link}}" style="color: {{accentColor}}; text-decoration: none;">{{gift.link}}</a></p>
                                     </td>
                                   </tr>
                                 </table>
-                                <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
-                                  <tbody>
-                                    <tr>
-                                      <td align="left" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; vertical-align: top;">
-                                        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
-                                          <tbody>
-                                            <tr>
-                                              <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; vertical-align: top; background-color: {{accentColor}}; border-radius: 8px; text-align: center;">
-                                                <a href="{{gift.mailtoUrl}}" target="_blank" style="display: inline-block; color: #ffffff; background-color: {{accentColor}}; border: solid 1px {{accentColor}}; border-radius: 8px; padding: 10px 20px; text-decoration: none;">Send to recipient</a>
-                                              </td>
-                                            </tr>
-                                          </tbody>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                  </tbody>
-                                </table>
                               </td>
                             </tr>
                           </tbody>
@@ -83,7 +65,7 @@
                         <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding-top: 16px;">
                           <tr>
                             <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; vertical-align: top;">
-                              <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; margin: 0; padding-bottom: 0; color: #738A94;">This link can be redeemed once and expires on {{gift.expiresAt}}. It's only available to free or new members.</p>
+                              <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; margin: 0; padding-bottom: 0; color: #738A94;">This link expires on {{gift.expiresAt}} and can be redeemed once by anyone who isn't already a paid member of {{siteTitle}}.</p>
                             </td>
                           </tr>
                         </table>