From 22bf26b7ff4383df22601724ab8ad04ae8ba802e Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 19:26:26 +0800
Subject: [PATCH 01/10] Simplified Portal gift selection UI when only one paid
 tier is available

---
 apps/portal/src/components/pages/gift-page.js | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index ff4c1642882..bfe74637af6 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -137,6 +137,10 @@ export const GiftPageStyles = `
     border-color: var(--grey9);
 }
 
+.gh-portal-gift-checkout-tiers.single .gh-portal-gift-checkout-tier-item:hover {
+    border-color: var(--grey11);
+}
+
 .gh-portal-gift-checkout-tier-item.selected {
     border-color: var(--brandcolor);
     background: color-mix(in srgb, var(--brandcolor) 6%, var(--white));
@@ -157,6 +161,10 @@ export const GiftPageStyles = `
     color: inherit;
 }
 
+.gh-portal-gift-checkout-tiers.single .gh-portal-gift-checkout-tier {
+    cursor: default;
+}
+
 .gh-portal-gift-checkout-tier-radio {
     flex-shrink: 0;
     width: 18px;
@@ -646,6 +654,7 @@ const GiftPage = () => {
     }
 
     const activeProduct = products.find(p => p.id === selectedProductId) || products[0];
+    const isSingleTier = products.length === 1;
     const isPurchasing = action === 'checkoutGift:running';
     const isDisabled = isCookiesDisabled() || isPurchasing;
 
@@ -681,25 +690,31 @@ const GiftPage = () => {
                             </div>
 
                             <div className='gh-portal-gift-checkout-section'>
-                                <div className='gh-portal-gift-checkout-label'>Tier</div>
-                                <div className='gh-portal-gift-checkout-tiers' role='radiogroup' aria-label='Tier'>
+                                <div className='gh-portal-gift-checkout-label'>{isSingleTier ? 'Membership details' : 'Tier'}</div>
+                                <div
+                                    className={'gh-portal-gift-checkout-tiers' + (isSingleTier ? ' single' : '')}
+                                    role={isSingleTier ? undefined : 'radiogroup'}
+                                    aria-label={isSingleTier ? undefined : 'Tier'}
+                                >
                                     {products.map((product) => {
                                         const isSelected = product.id === activeProduct.id;
                                         const benefits = product.benefits || [];
                                         return (
                                             <div
                                                 key={product.id}
-                                                className={'gh-portal-gift-checkout-tier-item' + (isSelected ? ' selected' : '')}
+                                                className={'gh-portal-gift-checkout-tier-item' + (isSelected && !isSingleTier ? ' selected' : '')}
                                             >
                                                 <button
                                                     type='button'
-                                                    role='radio'
-                                                    aria-checked={isSelected}
+                                                    role={isSingleTier ? undefined : 'radio'}
+                                                    aria-checked={isSingleTier ? undefined : isSelected}
                                                     className='gh-portal-gift-checkout-tier'
                                                     onClick={() => setSelectedProductId(product.id)}
                                                     data-test-tier={product.name}
                                                 >
-                                                    <span className='gh-portal-gift-checkout-tier-radio' aria-hidden='true' />
+                                                    {!isSingleTier && (
+                                                        <span className='gh-portal-gift-checkout-tier-radio' aria-hidden='true' />
+                                                    )}
                                                     <span className='gh-portal-gift-checkout-tier-name'>{product.name}</span>
                                                     <span className='gh-portal-gift-checkout-tier-price'>{getTierPriceLabel(product, activeInterval)}</span>
                                                 </button>

From 6da97ab1d550914c6e8e51f2a4744685e4df2d16 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 19:59:02 +0800
Subject: [PATCH 02/10] Surfaced tier description in Portal gift selection and
 details

---
 apps/portal/src/components/pages/gift-page.js | 49 +++++++++++++++++--
 .../components/pages/gift-redemption-page.js  | 42 +++++++++-------
 .../src/components/pages/gift-success-page.js | 29 ++++++-----
 .../src/components/pages/magic-link-page.js   | 42 +++++++++-------
 4 files changed, 110 insertions(+), 52 deletions(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index bfe74637af6..f28c1b982cf 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -149,7 +149,7 @@ export const GiftPageStyles = `
 
 .gh-portal-gift-checkout-tier {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 10px;
     width: 100%;
     background: transparent;
@@ -169,6 +169,7 @@ export const GiftPageStyles = `
     flex-shrink: 0;
     width: 18px;
     height: 18px;
+    margin-top: 3px;
     border-radius: 50%;
     border: 1.5px solid var(--grey9);
     background: var(--white);
@@ -192,6 +193,20 @@ export const GiftPageStyles = `
     transform: translate(-50%, -50%);
 }
 
+.gh-portal-gift-checkout-tier-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.gh-portal-gift-checkout-tier-heading {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+}
+
 .gh-portal-gift-checkout-tier-name {
     flex: 1;
     font-size: 1.5rem;
@@ -205,6 +220,14 @@ export const GiftPageStyles = `
     color: var(--grey0);
 }
 
+.gh-portal-gift-checkout-tier-description {
+    margin: 0;
+    margin-top: -2px;
+    font-size: 1.4rem;
+    line-height: 1.4;
+    color: var(--grey4);
+}
+
 .gh-portal-gift-checkout-tier-benefits {
     display: grid;
     grid-template-rows: 0fr;
@@ -245,7 +268,7 @@ export const GiftPageStyles = `
 .gh-portal-gift-checkout-benefit svg {
     width: 14px;
     height: 14px;
-    margin-top: 4px;
+    margin-top: 3px;
     color: var(--grey1);
     flex-shrink: 0;
 }
@@ -367,6 +390,17 @@ export const GiftPageStyles = `
     overflow: hidden;
 }
 
+.gh-portal-gift-checkout-details-description {
+    margin: 0 0 12px;
+    font-size: 1.45rem;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.gh-portal-gift-checkout-details-description:last-child {
+    margin-bottom: 0;
+}
+
 .gh-portal-gift-checkout-card {
     position: relative;
     width: 100%;
@@ -715,8 +749,15 @@ const GiftPage = () => {
                                                     {!isSingleTier && (
                                                         <span className='gh-portal-gift-checkout-tier-radio' aria-hidden='true' />
                                                     )}
-                                                    <span className='gh-portal-gift-checkout-tier-name'>{product.name}</span>
-                                                    <span className='gh-portal-gift-checkout-tier-price'>{getTierPriceLabel(product, activeInterval)}</span>
+                                                    <div className='gh-portal-gift-checkout-tier-content'>
+                                                        <div className='gh-portal-gift-checkout-tier-heading'>
+                                                            <span className='gh-portal-gift-checkout-tier-name'>{product.name}</span>
+                                                            <span className='gh-portal-gift-checkout-tier-price'>{getTierPriceLabel(product, activeInterval)}</span>
+                                                        </div>
+                                                        {product.description && (
+                                                            <p className='gh-portal-gift-checkout-tier-description'>{product.description}</p>
+                                                        )}
+                                                    </div>
                                                 </button>
                                                 {benefits.length > 0 && (
                                                     <div
diff --git a/apps/portal/src/components/pages/gift-redemption-page.js b/apps/portal/src/components/pages/gift-redemption-page.js
index 24dfdb82440..419be7b51dc 100644
--- a/apps/portal/src/components/pages/gift-redemption-page.js
+++ b/apps/portal/src/components/pages/gift-redemption-page.js
@@ -163,6 +163,7 @@ const GiftRedemptionPage = () => {
         ? `You've been gifted a membership to ${siteTitle}`
         : 'You\'ve been gifted a membership';
     const benefits = gift.tier.benefits || [];
+    const tierDescription = gift.tier.description || '';
 
     return (
         <>
@@ -229,7 +230,7 @@ const GiftRedemptionPage = () => {
                                     </div>
                                 </div>
 
-                                {benefits.length > 0 && (
+                                {(tierDescription || benefits.length > 0) && (
                                     <>
                                         <div
                                             className='gh-portal-gift-checkout-details'
@@ -237,23 +238,28 @@ const GiftRedemptionPage = () => {
                                             aria-hidden={!showDetails}
                                         >
                                             <div className='gh-portal-gift-checkout-details-inner'>
-                                                <div className='gh-portal-gift-checkout-benefits'>
-                                                    {benefits.map((benefit, index) => {
-                                                        const benefitName = typeof benefit === 'string' ? benefit : benefit?.name;
-                                                        const benefitKey = typeof benefit === 'string' ? benefit : benefit?.id || `gift-benefit-${index}`;
-
-                                                        if (!benefitName) {
-                                                            return null;
-                                                        }
-
-                                                        return (
-                                                            <div className='gh-portal-gift-checkout-benefit' key={benefitKey}>
-                                                                <CheckmarkIcon alt='' />
-                                                                <span>{benefitName}</span>
-                                                            </div>
-                                                        );
-                                                    })}
-                                                </div>
+                                                {tierDescription && (
+                                                    <p className='gh-portal-gift-checkout-details-description'>{tierDescription}</p>
+                                                )}
+                                                {benefits.length > 0 && (
+                                                    <div className='gh-portal-gift-checkout-benefits'>
+                                                        {benefits.map((benefit, index) => {
+                                                            const benefitName = typeof benefit === 'string' ? benefit : benefit?.name;
+                                                            const benefitKey = typeof benefit === 'string' ? benefit : benefit?.id || `gift-benefit-${index}`;
+
+                                                            if (!benefitName) {
+                                                                return null;
+                                                            }
+
+                                                            return (
+                                                                <div className='gh-portal-gift-checkout-benefit' key={benefitKey}>
+                                                                    <CheckmarkIcon alt='' />
+                                                                    <span>{benefitName}</span>
+                                                                </div>
+                                                            );
+                                                        })}
+                                                    </div>
+                                                )}
                                             </div>
                                         </div>
                                         <button
diff --git a/apps/portal/src/components/pages/gift-success-page.js b/apps/portal/src/components/pages/gift-success-page.js
index 309d8264223..95dd0d7e1b4 100644
--- a/apps/portal/src/components/pages/gift-success-page.js
+++ b/apps/portal/src/components/pages/gift-success-page.js
@@ -174,7 +174,7 @@ const GiftSuccessPage = () => {
                                     </div>
                                 </div>
 
-                                {tier && tier.benefits && tier.benefits.length > 0 && (
+                                {tier && (tier.description || (tier.benefits && tier.benefits.length > 0)) && (
                                     <>
                                         <div
                                             className='gh-portal-gift-checkout-details'
@@ -182,17 +182,22 @@ const GiftSuccessPage = () => {
                                             aria-hidden={!showDetails}
                                         >
                                             <div className='gh-portal-gift-checkout-details-inner'>
-                                                <div className='gh-portal-gift-checkout-benefits'>
-                                                    {tier.benefits.map((benefit, idx) => {
-                                                        const key = benefit?.id || `benefit-${idx}`;
-                                                        return (
-                                                            <div className='gh-portal-gift-checkout-benefit' key={key}>
-                                                                <CheckmarkIcon alt='' />
-                                                                <span>{benefit.name}</span>
-                                                            </div>
-                                                        );
-                                                    })}
-                                                </div>
+                                                {tier.description && (
+                                                    <p className='gh-portal-gift-checkout-details-description'>{tier.description}</p>
+                                                )}
+                                                {tier.benefits && tier.benefits.length > 0 && (
+                                                    <div className='gh-portal-gift-checkout-benefits'>
+                                                        {tier.benefits.map((benefit, idx) => {
+                                                            const key = benefit?.id || `benefit-${idx}`;
+                                                            return (
+                                                                <div className='gh-portal-gift-checkout-benefit' key={key}>
+                                                                    <CheckmarkIcon alt='' />
+                                                                    <span>{benefit.name}</span>
+                                                                </div>
+                                                            );
+                                                        })}
+                                                    </div>
+                                                )}
                                             </div>
                                         </div>
                                         <button
diff --git a/apps/portal/src/components/pages/magic-link-page.js b/apps/portal/src/components/pages/magic-link-page.js
index 640cd394f0e..b29259731ed 100644
--- a/apps/portal/src/components/pages/magic-link-page.js
+++ b/apps/portal/src/components/pages/magic-link-page.js
@@ -324,6 +324,7 @@ export default class MagicLinkPage extends React.Component {
             submittedEmailOrInbox
         });
         const benefits = gift.tier?.benefits || [];
+        const tierDescription = gift.tier?.description || '';
         const submittedName = (pageData?.name || '').trim();
 
         return (
@@ -376,7 +377,7 @@ export default class MagicLinkPage extends React.Component {
                                         </div>
                                     </div>
 
-                                    {benefits.length > 0 && (
+                                    {(tierDescription || benefits.length > 0) && (
                                         <>
                                             <div
                                                 className='gh-portal-gift-checkout-details'
@@ -384,23 +385,28 @@ export default class MagicLinkPage extends React.Component {
                                                 aria-hidden={!this.state.showDetails}
                                             >
                                                 <div className='gh-portal-gift-checkout-details-inner'>
-                                                    <div className='gh-portal-gift-checkout-benefits'>
-                                                        {benefits.map((benefit, index) => {
-                                                            const benefitName = typeof benefit === 'string' ? benefit : benefit?.name;
-                                                            const benefitKey = typeof benefit === 'string' ? benefit : benefit?.id || `gift-benefit-${index}`;
-
-                                                            if (!benefitName) {
-                                                                return null;
-                                                            }
-
-                                                            return (
-                                                                <div className='gh-portal-gift-checkout-benefit' key={benefitKey}>
-                                                                    <CheckmarkIcon />
-                                                                    <span>{benefitName}</span>
-                                                                </div>
-                                                            );
-                                                        })}
-                                                    </div>
+                                                    {tierDescription && (
+                                                        <p className='gh-portal-gift-checkout-details-description'>{tierDescription}</p>
+                                                    )}
+                                                    {benefits.length > 0 && (
+                                                        <div className='gh-portal-gift-checkout-benefits'>
+                                                            {benefits.map((benefit, index) => {
+                                                                const benefitName = typeof benefit === 'string' ? benefit : benefit?.name;
+                                                                const benefitKey = typeof benefit === 'string' ? benefit : benefit?.id || `gift-benefit-${index}`;
+
+                                                                if (!benefitName) {
+                                                                    return null;
+                                                                }
+
+                                                                return (
+                                                                    <div className='gh-portal-gift-checkout-benefit' key={benefitKey}>
+                                                                        <CheckmarkIcon />
+                                                                        <span>{benefitName}</span>
+                                                                    </div>
+                                                                );
+                                                            })}
+                                                        </div>
+                                                    )}
                                                 </div>
                                             </div>
                                             <button

From 8879fef6c89cbdc0fc595f00c3ad7e9785e5bc10 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 20:23:50 +0800
Subject: [PATCH 03/10] Pinned gift card preview to the top while details
 scroll

---
 apps/portal/src/components/pages/gift-page.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index f28c1b982cf..2601cc88a3d 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -315,13 +315,15 @@ export const GiftPageStyles = `
 .gh-portal-gift-checkout-right-panel {
     flex: 1;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
     background:
         linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%),
         var(--brandcolor);
     border-radius: 32px;
     padding: 64px 48px 64px;
+    overflow-y: auto;
+    min-height: 0;
 }
 
 .gh-portal-gift-checkout-card-stack {
@@ -330,6 +332,8 @@ export const GiftPageStyles = `
     align-items: center;
     width: 100%;
     max-width: 280px;
+    margin-block: auto;
+    flex-shrink: 0;
 }
 
 .gh-portal-gift-checkout-card-frame {
@@ -337,6 +341,9 @@ export const GiftPageStyles = `
     transform-style: preserve-3d;
     perspective: 1200px;
     transition: transform 0.3s ease;
+    position: sticky;
+    top: 0;
+    z-index: 1;
 }
 
 .gh-portal-gift-checkout-card-stack[data-revealing="true"] .gh-portal-gift-checkout-card-frame {

From d67d24a3c2ccf728cb089a31a3484ef2c8ad7ab4 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 20:27:45 +0800
Subject: [PATCH 04/10] Removed Powered by Ghost branding from gift 50/50
 screens

- also balanced .gh-portal-gift-checkout-left bottom padding to match the top
---
 apps/portal/src/components/pages/gift-page.js | 2 +-
 apps/portal/src/components/popup-modal.js     | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index 2601cc88a3d..f195fcf4de2 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -64,7 +64,7 @@ export const GiftPageStyles = `
     align-items: center;
     justify-content: center;
     background: var(--white);
-    padding: 64px 48px 128px;
+    padding: 64px 48px;
 }
 
 /* Selection page only: useLayoutEffect locks the inner's vertical
diff --git a/apps/portal/src/components/popup-modal.js b/apps/portal/src/components/popup-modal.js
index 2e16dcdfb1b..a6558f83986 100644
--- a/apps/portal/src/components/popup-modal.js
+++ b/apps/portal/src/components/popup-modal.js
@@ -230,6 +230,7 @@ class PopupContent extends React.Component {
         }
 
         const containerClassName = `${className} ${popupWidthStyle} ${pageClass}`;
+        const isGiftLayout = page === 'gift' || page === 'giftSuccess' || page === 'giftRedemption' || (page === 'magiclink' && lastPage === 'gift');
         this.sendPortalPreviewReadyEvent();
         return (
             <>
@@ -238,14 +239,14 @@ class PopupContent extends React.Component {
                     <div className={containerClassName} style={pageStyle} ref={node => (this.node = node)} tabIndex={-1}>
                         <CookieDisabledBanner message={cookieBannerText} />
                         {this.renderActivePage()}
-                        {(popupSize === 'full' ?
+                        {(popupSize === 'full' && !isGiftLayout ?
                             <div className={'gh-portal-powered inside ' + (hasMode(['preview']) ? 'hidden ' : '') + pageClass}>
                                 <PoweredBy />
                             </div>
                             : '')}
                     </div>
                 </div>
-                {page !== 'share' && (
+                {page !== 'share' && !isGiftLayout && (
                     <div className={'gh-portal-powered outside ' + (hasMode(['preview']) ? 'hidden ' : '') + pageClass}>
                         <PoweredBy />
                     </div>

From 38dee215e6cbd103a55a0b586b9687ed095acb3f Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 20:28:41 +0800
Subject: [PATCH 05/10] Improved gift selection screen spacing

---
 apps/portal/src/components/pages/gift-page.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index f195fcf4de2..7be9fe70bb2 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -122,7 +122,7 @@ export const GiftPageStyles = `
 .gh-portal-gift-checkout-tiers {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 12px;
 }
 
 .gh-portal-gift-checkout-tier-item {
@@ -289,7 +289,7 @@ export const GiftPageStyles = `
 .gh-portal-gift-checkout-cta-wrapper {
     position: sticky;
     bottom: 0;
-    margin: 32px 0 -64px;
+    margin: 0 0 -64px;
     padding: 32px 0 64px;
     background: linear-gradient(0deg, rgba(var(--whitergb), 1) 60%, rgba(var(--whitergb), 0) 100%);
     z-index: 1;

From f52f838b3f87221f7edd6a5d2720c0384b8b881b Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 21:03:19 +0800
Subject: [PATCH 06/10] Improved mobile styling of gift 50/50 screens

---
 apps/portal/src/components/pages/gift-page.js | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index 7be9fe70bb2..71c6b35afae 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -525,6 +525,12 @@ export const GiftPageStyles = `
 
 
 @media (max-width: 880px) {
+    .gh-portal-popup-container.full-size.gift,
+    .gh-portal-popup-container.full-size.giftSuccess,
+    .gh-portal-popup-container.full-size.giftRedemption {
+        padding: 0 !important;
+    }
+
     .gh-portal-gift-checkout {
         grid-template-columns: 1fr;
         min-height: 0;
@@ -534,21 +540,34 @@ export const GiftPageStyles = `
         order: -1;
         position: static;
         height: auto;
-        padding: 12px 12px 0;
+        padding: 0;
         overflow: visible;
     }
 
     .gh-portal-gift-checkout-right-panel {
-        padding: 32px 24px;
+        padding: 56px 24px 32px;
+        border-radius: 0 0 32px 32px;
     }
 
     .gh-portal-gift-checkout-left {
-        padding: 32px 24px 80px;
+        padding: 32px 24px 0;
+    }
+
+    /* Screens without a sticky CTA wrapper need their own bottom padding. */
+    .gh-portal-content.giftSuccess .gh-portal-gift-checkout-left,
+    .gh-portal-content.giftRedemption .gh-portal-gift-checkout-left {
+        padding-bottom: 24px;
     }
 
     .gh-portal-gift-checkout-card,
     .gh-portal-gift-checkout-card-stack {
-        max-width: 320px;
+        max-width: 240px;
+    }
+
+    .gh-portal-gift-checkout-cta-wrapper {
+        bottom: 0;
+        margin: 0;
+        padding: 32px 0 24px;
     }
 }
 
@@ -635,6 +654,8 @@ const GiftPage = () => {
     // half. After this single measurement we never recompute — so when the
     // benefits change height on tier switch, only the bottom of the column
     // (the CTA) shifts, leaving the title and tier picker anchored.
+    // Skipped on mobile (single-column stack) where natural top-aligned flow
+    // is what we want; centering would push content under the sticky CTA.
     useLayoutEffect(() => {
         if (centeringDoneRef.current) {
             return;
@@ -644,6 +665,11 @@ const GiftPage = () => {
         if (!inner || !left) {
             return;
         }
+        if (window.matchMedia('(max-width: 880px)').matches) {
+            inner.style.marginTop = '';
+            centeringDoneRef.current = true;
+            return;
+        }
         const leftRect = left.getBoundingClientRect();
         if (leftRect.height === 0) {
             return;

From bbb2e34c579c1ba7d8ec5981292f2f39b1c17a6c Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 21:35:55 +0800
Subject: [PATCH 07/10] Replaced expiry date with gift value on gift card

---
 apps/portal/src/components/pages/gift-page.js | 32 ++++++-------------
 .../components/pages/gift-redemption-page.js  |  6 ++--
 .../src/components/pages/gift-success-page.js |  8 ++---
 .../src/components/pages/magic-link-page.js   |  6 ++--
 4 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index 71c6b35afae..3795da97533 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -610,36 +610,22 @@ function GiftPriceSwitch({selectedInterval, setSelectedInterval}) {
     );
 }
 
-function getTierPriceLabel(product, selectedInterval) {
-    const activePrice = selectedInterval === 'month' ? product.monthlyPrice : product.yearlyPrice;
-
-    if (!activePrice) {
+export function formatGiftValue({amount, currency} = {}) {
+    if (amount === null || amount === undefined || !currency) {
         return '';
     }
+    return `${getCurrencySymbol(currency)}${formatNumber(getStripeAmount(amount))}`;
+}
 
-    const currencySymbol = getCurrencySymbol(activePrice.currency);
-    return `${currencySymbol}${formatNumber(getStripeAmount(activePrice.amount))}`;
+function getTierPriceLabel(product, selectedInterval) {
+    const activePrice = selectedInterval === 'month' ? product.monthlyPrice : product.yearlyPrice;
+    return formatGiftValue(activePrice);
 }
 
 function getDurationLabel(selectedInterval) {
     return selectedInterval === 'month' ? '1 month' : '1 year';
 }
 
-const GIFT_EXPIRY_DAYS = 365;
-
-export function getPreviewGiftExpiresAt(fromDate = new Date()) {
-    const date = new Date(fromDate);
-    date.setDate(date.getDate() + GIFT_EXPIRY_DAYS);
-    return date;
-}
-
-export function formatGiftExpiresAt(date) {
-    const d = date instanceof Date ? date : new Date(date);
-    const day = d.getDate();
-    const month = d.toLocaleDateString('en-US', {month: 'short'});
-    return `${day} ${month}, ${d.getFullYear()}`;
-}
-
 const GiftPage = () => {
     const {site, brandColor, action, doAction} = useContext(AppContext);
     const [selectedInterval, setSelectedInterval] = useState(null);
@@ -844,8 +830,8 @@ const GiftPage = () => {
                                     </div>
                                     <div className='gh-portal-gift-checkout-card-details'>
                                         <div className='gh-portal-gift-checkout-card-detail'>
-                                            <div className='gh-portal-gift-checkout-card-detail-label'>Expires</div>
-                                            <div className='gh-portal-gift-checkout-card-detail-value'>{formatGiftExpiresAt(getPreviewGiftExpiresAt())}</div>
+                                            <div className='gh-portal-gift-checkout-card-detail-label'>Gift value</div>
+                                            <div className='gh-portal-gift-checkout-card-detail-value'>{getTierPriceLabel(activeProduct, activeInterval)}</div>
                                         </div>
                                     </div>
                                     <div className='gh-portal-gift-checkout-card-site'>
diff --git a/apps/portal/src/components/pages/gift-redemption-page.js b/apps/portal/src/components/pages/gift-redemption-page.js
index 419be7b51dc..f0ffe72a14a 100644
--- a/apps/portal/src/components/pages/gift-redemption-page.js
+++ b/apps/portal/src/components/pages/gift-redemption-page.js
@@ -9,7 +9,7 @@ import {getGiftDurationLabel, getGiftRedemptionErrorMessage} from '../../utils/g
 import {t} from '../../utils/i18n';
 import {hasGiftSubscriptions, removePortalLinkFromUrl} from '../../utils/helpers';
 import useCardTilt from '../../utils/use-card-tilt';
-import {formatGiftExpiresAt, getPreviewGiftExpiresAt} from './gift-page';
+import {formatGiftValue} from './gift-page';
 
 export const GiftRedemptionStyles = `
 .gh-portal-gift-redemption-form {
@@ -217,8 +217,8 @@ const GiftRedemptionPage = () => {
                                             )}
                                             <div className='gh-portal-gift-checkout-card-detail'>
                                                 {/* eslint-disable-next-line i18next/no-literal-string -- copy not yet finalised */}
-                                                <div className='gh-portal-gift-checkout-card-detail-label'>Expires</div>
-                                                <div className='gh-portal-gift-checkout-card-detail-value'>{formatGiftExpiresAt(gift.expires_at || getPreviewGiftExpiresAt())}</div>
+                                                <div className='gh-portal-gift-checkout-card-detail-label'>Gift value</div>
+                                                <div className='gh-portal-gift-checkout-card-detail-value'>{formatGiftValue(gift)}</div>
                                             </div>
                                         </div>
                                         <div className='gh-portal-gift-checkout-card-site'>
diff --git a/apps/portal/src/components/pages/gift-success-page.js b/apps/portal/src/components/pages/gift-success-page.js
index 95dd0d7e1b4..e93bf36865f 100644
--- a/apps/portal/src/components/pages/gift-success-page.js
+++ b/apps/portal/src/components/pages/gift-success-page.js
@@ -5,7 +5,7 @@ import copyTextToClipboard from '../../utils/copy-to-clipboard';
 import {getAvailableProducts} from '../../utils/helpers';
 import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
 import useCardTilt from '../../utils/use-card-tilt';
-import {formatGiftExpiresAt, getPreviewGiftExpiresAt} from './gift-page';
+import {formatGiftValue} from './gift-page';
 
 // TODO: wrap strings with t() once copy is finalised
 /* eslint-disable i18next/no-literal-string */
@@ -157,11 +157,11 @@ const GiftSuccessPage = () => {
                                                 <div className='gh-portal-gift-checkout-card-tier'>{`${tier.name} membership`}</div>
                                             </div>
                                         )}
-                                        {cadence && (
+                                        {tier && cadence && (
                                             <div className='gh-portal-gift-checkout-card-details'>
                                                 <div className='gh-portal-gift-checkout-card-detail'>
-                                                    <div className='gh-portal-gift-checkout-card-detail-label'>Expires</div>
-                                                    <div className='gh-portal-gift-checkout-card-detail-value'>{formatGiftExpiresAt(getPreviewGiftExpiresAt())}</div>
+                                                    <div className='gh-portal-gift-checkout-card-detail-label'>Gift value</div>
+                                                    <div className='gh-portal-gift-checkout-card-detail-value'>{formatGiftValue(cadence === 'month' ? tier.monthlyPrice : tier.yearlyPrice)}</div>
                                                 </div>
                                             </div>
                                         )}
diff --git a/apps/portal/src/components/pages/magic-link-page.js b/apps/portal/src/components/pages/magic-link-page.js
index b29259731ed..4c23acf244f 100644
--- a/apps/portal/src/components/pages/magic-link-page.js
+++ b/apps/portal/src/components/pages/magic-link-page.js
@@ -8,7 +8,7 @@ import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg'
 import {isIos} from '../../utils/is-ios';
 import {t} from '../../utils/i18n';
 import {getGiftDurationLabel} from '../../utils/gift-redemption-notification';
-import {formatGiftExpiresAt, getPreviewGiftExpiresAt} from './gift-page';
+import {formatGiftValue} from './gift-page';
 
 const ChevronIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -364,8 +364,8 @@ export default class MagicLinkPage extends React.Component {
                                                 )}
                                                 <div className='gh-portal-gift-checkout-card-detail'>
                                                     {/* eslint-disable-next-line i18next/no-literal-string -- copy not yet finalised */}
-                                                    <div className='gh-portal-gift-checkout-card-detail-label'>Expires</div>
-                                                    <div className='gh-portal-gift-checkout-card-detail-value'>{formatGiftExpiresAt(gift.expires_at || getPreviewGiftExpiresAt())}</div>
+                                                    <div className='gh-portal-gift-checkout-card-detail-label'>Gift value</div>
+                                                    <div className='gh-portal-gift-checkout-card-detail-value'>{formatGiftValue(gift)}</div>
                                                 </div>
                                             </div>
                                             <div className='gh-portal-gift-checkout-card-site'>

From a86a129c969ec165e6c8a7deebed90a9298b2ebc Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 21:39:07 +0800
Subject: [PATCH 08/10] Released @tryghost/portal v2.68.33

Changelog for v2.68.32 -> 2.68.33:
---
 apps/portal/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/portal/package.json b/apps/portal/package.json
index df1783783ca..c8e0728e04b 100644
--- a/apps/portal/package.json
+++ b/apps/portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/portal",
-  "version": "2.68.32",
+  "version": "2.68.33",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",

From edae610411aad492e7d17a33a22be3ab3722f7f3 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 21:53:39 +0800
Subject: [PATCH 09/10] Guarded window.matchMedia for unit test environment

---
 apps/portal/src/components/pages/gift-page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index 3795da97533..a4846d1b072 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -651,7 +651,7 @@ const GiftPage = () => {
         if (!inner || !left) {
             return;
         }
-        if (window.matchMedia('(max-width: 880px)').matches) {
+        if (typeof window.matchMedia === 'function' && window.matchMedia('(max-width: 880px)').matches) {
             inner.style.marginTop = '';
             centeringDoneRef.current = true;
             return;

From 51feab84e44224802bfac8ddd1028c3b7bf04f3f Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 7 May 2026 22:03:53 +0800
Subject: [PATCH 10/10] Handled null price object in formatGiftValue

---
 apps/portal/src/components/pages/gift-page.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index a4846d1b072..4a9e0d5fee3 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -610,7 +610,8 @@ function GiftPriceSwitch({selectedInterval, setSelectedInterval}) {
     );
 }
 
-export function formatGiftValue({amount, currency} = {}) {
+export function formatGiftValue(price) {
+    const {amount, currency} = price ?? {};
     if (amount === null || amount === undefined || !currency) {
         return '';
     }