-
+
+ Your is set to ‘Nobody’, which disables all newsletter sending. Change to ‘Invite-only’ to send newsletters to existing members without allowing new signups.
+
+ }
}
]}
diff --git a/apps/admin-x-settings/test/acceptance/membership/access.test.ts b/apps/admin-x-settings/test/acceptance/membership/access.test.ts
index 3bcbafa7e52..d0d8f961b44 100644
--- a/apps/admin-x-settings/test/acceptance/membership/access.test.ts
+++ b/apps/admin-x-settings/test/acceptance/membership/access.test.ts
@@ -127,7 +127,7 @@ test.describe('Access settings', async () => {
await expect(section.getByTestId('subscription-access-select')).toContainText('Nobody');
await expect(page.getByTestId('portal').getByRole('button', {name: 'Customize'})).toBeDisabled();
- await expect(page.getByTestId('enable-newsletters')).toContainText('only existing members will receive newsletters');
+ await expect(page.getByTestId('enable-newsletters')).toContainText('which disables all newsletter sending');
});
test('Supports selecting specific tiers', async ({page}) => {
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 9b03d82906c..159e3e5f95e 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -49,7 +49,7 @@
"tailwindcss": "^4.2.2",
"typescript": "5.9.3",
"typescript-eslint": "8.58.0",
- "vite": "7.1.12",
+ "vite": "7.3.2",
"vite-tsconfig-paths": "5.1.4",
"vitest": "4.1.2"
},
diff --git a/apps/portal/package.json b/apps/portal/package.json
index 74ac87f0455..a817618c5c5 100644
--- a/apps/portal/package.json
+++ b/apps/portal/package.json
@@ -1,6 +1,6 @@
{
"name": "@tryghost/portal",
- "version": "2.68.27",
+ "version": "2.68.28",
"license": "MIT",
"repository": "https://github.com/TryGhost/Ghost",
"author": "Ghost Foundation",
diff --git a/apps/portal/src/app.js b/apps/portal/src/app.js
index 9abeed56b8b..11a241aa0bc 100644
--- a/apps/portal/src/app.js
+++ b/apps/portal/src/app.js
@@ -600,13 +600,17 @@ export default class App extends React.Component {
if (qParams.get('stripe') === 'gift-purchase-success') {
const token = qParams.get('gift_token');
- clearURLParams(['stripe', 'gift_token']);
+ const tierId = qParams.get('gift_tier');
+ const cadence = qParams.get('gift_cadence');
+ clearURLParams(['stripe', 'gift_token', 'gift_tier', 'gift_cadence']);
if (token) {
return {
showPopup: true,
page: 'giftSuccess',
pageData: {
- token
+ token,
+ tierId,
+ cadence
}
};
}
diff --git a/apps/portal/src/components/pages/gift-page.js b/apps/portal/src/components/pages/gift-page.js
index fb4b9b66964..d33f6032b0f 100644
--- a/apps/portal/src/components/pages/gift-page.js
+++ b/apps/portal/src/components/pages/gift-page.js
@@ -1,357 +1,637 @@
-import {useContext, useState} from 'react';
+import {useContext, useEffect, useRef, useState} from 'react';
import AppContext from '../../app-context';
import CloseButton from '../common/close-button';
-import SiteTitleBackButton from '../common/site-title-back-button';
import ActionButton from '../common/action-button';
import LoadingPage from './loading-page';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
-import {ReactComponent as GiftIcon} from '../../images/icons/gift.svg';
import {getAvailableProducts, getCurrencySymbol, formatNumber, getStripeAmount, isCookiesDisabled, getActiveInterval} from '../../utils/helpers';
-import calculateDiscount from '../../utils/discount';
+import useCardTilt from '../../utils/use-card-tilt';
// TODO: wrap strings with t() once copy is finalised
/* eslint-disable i18next/no-literal-string */
export const GiftPageStyles = `
-.gh-portal-content.gift {
- position: relative;
- padding-top: 0;
+.gh-portal-popup-container.full-size.gift,
+.gh-portal-popup-container.full-size.giftSuccess,
+.gh-portal-popup-container.full-size.giftRedemption {
+ padding: 0;
+ /* The default opacity/translate popup-in animation feels heavy on the
+ full-bleed 50/50 layout — let the page render in place instead. */
+ animation: none;
}
-.gh-portal-gift-bg {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 320px;
- background: linear-gradient(180deg, var(--brandcolor), transparent);
- opacity: 0.08;
- pointer-events: none;
- z-index: 0;
+.gh-portal-content.gift,
+.gh-portal-content.giftSuccess,
+.gh-portal-content.giftRedemption {
+ position: relative;
+ padding: 0;
+ min-height: 100vh;
}
-.gh-portal-popup-wrapper.full-size .gh-portal-gift-bg {
- top: -2vmin;
- left: -6vmin;
- right: -6vmin;
- height: calc(320px + 2vmin);
+.gh-portal-gift-checkout {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ min-height: 100vh;
+ width: 100%;
}
-.gh-portal-gift-sitetitle {
+.gh-portal-gift-checkout-left {
position: relative;
- z-index: 1;
display: flex;
align-items: center;
justify-content: center;
+ background: var(--white);
+ padding: 64px 48px 128px;
+ overflow: hidden;
+}
+
+.gh-portal-gift-checkout-bg {
+ display: none;
+}
+
+.gh-portal-gift-checkout-inner {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ max-width: 496px;
+ display: flex;
+ flex-direction: column;
+}
+
+.gh-portal-gift-checkout-header {
+ margin-bottom: 8px;
+}
+
+.gh-portal-gift-checkout-header .gh-portal-main-title {
+ text-align: start;
+ margin: 0 0 12px;
+}
+
+.gh-portal-gift-checkout-subtitle {
+ margin: 0;
+ font-size: 1.6rem;
+ line-height: 1.45em;
+ color: var(--grey3);
+}
+
+.gh-portal-gift-checkout-section {
+ margin-top: 24px;
+}
+
+.gh-portal-gift-checkout-label {
+ font-size: 1.2rem;
+ font-weight: 500;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: var(--grey6);
+ margin-bottom: 12px;
+}
+
+.gh-portal-gift-checkout .gh-portal-products-pricetoggle {
+ margin: 0;
+}
+
+.gh-portal-gift-checkout-tiers {
+ display: flex;
+ flex-direction: column;
gap: 8px;
- padding: 15px 32px 0;
}
-.gh-portal-gift-sitetitle-icon {
- display: block;
- width: 24px;
- height: 24px;
- border-radius: 4px;
- background-position: 50%;
- background-size: cover;
- object-fit: cover;
+.gh-portal-gift-checkout-tier {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ width: 100%;
+ background: var(--white);
+ border: 1px solid var(--grey11);
+ border-radius: 10px;
+ padding: 16px 20px;
+ cursor: pointer;
+ text-align: start;
+ transition: border-color 0.2s ease, background-color 0.2s ease;
+ font: inherit;
+ color: inherit;
+}
+
+.gh-portal-gift-checkout-tier:hover {
+ border-color: var(--grey9);
+}
+
+.gh-portal-gift-checkout-tier.selected {
+ border-color: var(--brandcolor);
+ background: color-mix(in srgb, var(--brandcolor) 6%, var(--white));
+ box-shadow: 0 0 0 1px var(--brandcolor) inset;
+}
+
+.gh-portal-gift-checkout-tier-radio {
+ flex-shrink: 0;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 1.5px solid var(--grey9);
+ background: var(--white);
+ position: relative;
+}
+
+.gh-portal-gift-checkout-tier.selected .gh-portal-gift-checkout-tier-radio {
+ border-color: var(--brandcolor);
+ background: var(--brandcolor);
}
-.gh-portal-gift-sitetitle-name {
+.gh-portal-gift-checkout-tier.selected .gh-portal-gift-checkout-tier-radio::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: var(--white);
+ transform: translate(-50%, -50%);
+}
+
+.gh-portal-gift-checkout-tier-name {
+ flex: 1;
font-size: 1.5rem;
font-weight: 500;
color: var(--grey0);
- line-height: 1;
}
-.gh-portal-gift-hero {
- position: relative;
- z-index: 1;
+.gh-portal-gift-checkout-tier-price {
+ font-size: 1.5rem;
+ font-weight: 500;
+ color: var(--grey0);
+}
+
+.gh-portal-gift-checkout-benefits {
display: flex;
flex-direction: column;
- align-items: center;
- text-align: center;
- padding: 56px 32px 40px;
+ gap: 10px;
+ padding-left: 4px;
}
-.gh-portal-gift-hero-icon {
- display: inline-flex;
+.gh-portal-gift-checkout-benefit {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ color: var(--grey1);
+ font-size: 1.45rem;
+ line-height: 1.4;
+}
+
+.gh-portal-gift-checkout-benefit svg {
+ width: 14px;
+ height: 14px;
+ margin-top: 4px;
+ color: var(--grey1);
+ flex-shrink: 0;
+}
+
+.gh-portal-gift-checkout .gh-portal-btn-primary {
+ border-radius: 999px;
+}
+
+.gh-portal-gift-checkout-cta {
+ width: 100%;
+ height: 48px;
+ margin-top: 32px;
+ font-size: 1.5rem;
+ font-weight: 600;
+}
+
+.gh-portal-gift-checkout-right {
+ position: sticky;
+ top: 0;
+ align-self: start;
+ height: 100vh;
+ display: flex;
align-items: center;
justify-content: center;
- width: 48px;
- height: 48px;
- color: var(--brandcolor);
- margin-bottom: 20px;
+ background: linear-gradient(to bottom, var(--white), color-mix(in srgb, var(--brandcolor) 5%, var(--white)));
+ padding: 64px 48px 128px;
+ overflow-y: auto;
}
-.gh-portal-gift-hero-icon svg {
- width: 48px;
- height: 48px;
- stroke-width: 1.5;
+.gh-portal-gift-checkout-card-stack {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ max-width: 440px;
}
-.gh-portal-gift-hero .gh-portal-main-title {
- margin: 0 0 14px;
+/* Wraps the card so we can tilt it forward when "Gift details" is expanded,
+ making the benefits feel like they're sliding out from behind the card.
+ Composes cleanly with the cursor-driven tilt applied to the card itself. */
+.gh-portal-gift-checkout-card-frame {
+ width: 100%;
+ transform-style: preserve-3d;
+ perspective: 1200px;
+ transition: transform 0.3s ease;
}
-.gh-portal-gift-hero .gh-portal-main-subtitle {
- margin: 0;
- font-size: 1.7rem;
- line-height: 1.45em;
+.gh-portal-gift-checkout-card-stack[data-revealing="true"] .gh-portal-gift-checkout-card-frame {
+ transform: rotate(3deg);
+}
+
+.gh-portal-gift-checkout-card-benefits {
+ width: 100%;
+ margin-top: 28px;
+ overflow: hidden;
+ transition: height 0.3s ease;
+}
+
+.gh-portal-gift-checkout-details-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ margin-top: 24px;
+ padding: 8px 12px;
+ background: transparent;
+ border: none;
+ color: var(--grey5);
+ font-size: 1.4rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: color 0.15s ease;
+}
+
+.gh-portal-gift-checkout-details-toggle:hover {
color: var(--grey3);
- text-align: center;
}
-.gh-portal-content.gift > section {
+.gh-portal-gift-checkout-details-toggle svg {
+ width: 12px;
+ height: 12px;
+ transition: transform 0.2s ease;
+}
+
+.gh-portal-gift-checkout-details-toggle.is-open svg {
+ transform: rotate(-180deg);
+}
+
+.gh-portal-gift-checkout-details {
+ width: 100%;
+ display: grid;
+ grid-template-rows: 0fr;
+ transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
+ margin-top: 0;
+}
+
+.gh-portal-gift-checkout-details[data-open="true"] {
+ grid-template-rows: 1fr;
+ margin-top: 32px;
+}
+
+.gh-portal-gift-checkout-details-inner {
+ overflow: hidden;
+}
+
+.gh-portal-gift-checkout-card {
position: relative;
- z-index: 1;
+ width: 100%;
+ max-width: 440px;
+ aspect-ratio: 1.7 / 1;
+ background: linear-gradient(to top right, var(--white), color-mix(in srgb, var(--brandcolor) 8%, var(--white)));
+ border-radius: 32px;
+ padding: 28px;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 48px rgba(var(--blackrgb), 0.08), 0 4px 12px rgba(var(--blackrgb), 0.04);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+ transform-style: preserve-3d;
+ will-change: transform;
}
-.gh-portal-popup-wrapper.gift .gh-portal-btn-site-title-back {
- background: transparent;
- border-color: transparent;
+.gh-portal-gift-checkout-card-site {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ gap: 8px;
}
-.gh-portal-popup-wrapper.gift .gh-portal-btn-site-title-back:hover {
- border-color: transparent;
+.gh-portal-gift-checkout-card-site-icon {
+ width: 24px;
+ height: 24px;
+ border-radius: 5px;
+ object-fit: cover;
}
-@media (max-width: 480px) {
- .gh-portal-gift-hero {
- padding: 40px 24px 32px;
- }
+.gh-portal-gift-checkout-card-site-name {
+ font-size: 1.4rem;
+ font-weight: 600;
+ letter-spacing: -0.01em;
+ color: var(--grey0);
+}
- .gh-portal-gift-bg {
- height: 240px;
- }
+.gh-portal-gift-checkout-card-meta {
+ position: relative;
+ z-index: 2;
}
-`;
-function GiftProductCardBenefits({product}) {
- if (!product.benefits || !product.benefits.length) {
- return null;
- }
+.gh-portal-gift-checkout-card-duration {
+ font-size: 2.6rem;
+ font-weight: 600;
+ color: var(--grey0);
+ letter-spacing: -0.01em;
+ line-height: 1.1;
+}
- return (
-
+
+ {isDisabled &&
+
- {product.benefits.map((benefit, idx) => {
- const key = benefit?.id || `benefit-${idx}`;
-
- return (
-
- );
+.gh-portal-gift-checkout-card-tier {
+ margin-top: 6px;
+ font-size: 1.4rem;
+ color: var(--grey3);
+ line-height: 1.3;
}
-function GiftProductCardPrice({product, selectedInterval}) {
- const monthlyPrice = product.monthlyPrice;
- const yearlyPrice = product.yearlyPrice;
+/* Wrapped-present cross ribbon: vertical + horizontal straps, bow at intersection */
+.gh-portal-gift-checkout-card-ribbon-v,
+.gh-portal-gift-checkout-card-ribbon-h {
+ position: absolute;
+ background: var(--brandcolor);
+ opacity: 0.3;
+ z-index: 1;
+}
- if (!monthlyPrice || !yearlyPrice) {
- return null;
- }
+.gh-portal-gift-checkout-card-ribbon-v {
+ top: 0;
+ bottom: 0;
+ right: 22%;
+ width: 12px;
+}
- const activePrice = selectedInterval === 'month' ? monthlyPrice : yearlyPrice;
- const currencySymbol = getCurrencySymbol(activePrice.currency);
- const yearlyDiscount = calculateDiscount(monthlyPrice.amount, yearlyPrice.amount);
+.gh-portal-gift-checkout-card-ribbon-h {
+ left: 0;
+ right: 0;
+ top: 32%;
+ height: 12px;
+ transform: translateY(-50%);
+}
- return (
-
-
- );
- })}
- {benefit.name}
-
-
- );
+.gh-portal-gift-checkout-card-bow {
+ position: absolute;
+ top: calc(32% - 42px);
+ right: calc(22% - 40px);
+ width: 90px;
+ height: 86px;
+ z-index: 2;
+ color: var(--brandcolor);
+ pointer-events: none;
+ filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06)) drop-shadow(0 16px 32px rgba(0, 0, 0, 0.06));
}
-function GiftProductCard({brandColor, product, selectedInterval, isDisabled, isPurchasing, onPurchase}) {
- let productDescription = product.description;
- if ((!product.benefits || !product.benefits.length) && !productDescription) {
- productDescription = 'Full access';
+@media (max-width: 880px) {
+ .gh-portal-gift-checkout {
+ grid-template-columns: 1fr;
+ min-height: 0;
}
- return (
-
-
- one-time payment
-
- 1 ? ' long' : '')}>{currencySymbol}
- {formatNumber(getStripeAmount(activePrice.amount))}
-
- {selectedInterval === 'year' && yearlyDiscount > 0 && (
- {yearlyDiscount}% discount
- )}
-
-
- );
+ /* Drop sticky/100vh sizing — on mobile the right column should sit naturally
+ above the left content, taking only the height it needs. */
+ .gh-portal-gift-checkout-right {
+ order: -1;
+ position: static;
+ height: auto;
+ padding: 32px 24px;
+ overflow: visible;
+ }
+
+ .gh-portal-gift-checkout-left {
+ padding: 32px 24px 80px;
+ }
+
+ .gh-portal-gift-checkout-card,
+ .gh-portal-gift-checkout-card-stack {
+ max-width: 320px;
+ }
+}
+
+@media (max-width: 480px) {
+ .gh-portal-gift-checkout-header .gh-portal-main-title {
+ font-size: 2.6rem;
+ }
+
+ .gh-portal-gift-checkout-card-duration {
+ font-size: 2rem;
+ }
}
+`;
-function GiftPriceSwitch({selectedInterval, setSelectedInterval, products}) {
+function GiftPriceSwitch({selectedInterval, setSelectedInterval}) {
const {site} = useContext(AppContext);
const {portal_plans: portalPlans} = site;
- const discounts = products.map(product => calculateDiscount(product.monthlyPrice?.amount, product.yearlyPrice?.amount));
- const highestDiscount = Math.max(...discounts);
if (!portalPlans.includes('monthly') || !portalPlans.includes('yearly')) {
return null;
}
return (
-
-
- {product.name}
-
-
-
- {productDescription && (
-
-
- {productDescription}
-
- )}
-
- onPurchase(e, product)}
- disabled={isDisabled}
- isRunning={isPurchasing}
- brandColor={brandColor}
- style={{width: '100%'}}
- />
-
-
-
-
-
-
+
+
+
);
}
+function getTierPriceLabel(product, selectedInterval) {
+ const activePrice = selectedInterval === 'month' ? product.monthlyPrice : product.yearlyPrice;
+
+ if (!activePrice) {
+ return '';
+ }
+
+ const currencySymbol = getCurrencySymbol(activePrice.currency);
+ return `${currencySymbol}${formatNumber(getStripeAmount(activePrice.amount))}`;
+}
+
+function getDurationLabel(selectedInterval) {
+ return selectedInterval === 'month' ? '1 month' : '1 year';
+}
+
const GiftPage = () => {
const {site, brandColor, action, doAction} = useContext(AppContext);
const [selectedInterval, setSelectedInterval] = useState(null);
- const [selectedProduct, setSelectedProduct] = useState(null);
+ const [selectedProductId, setSelectedProductId] = useState(null);
+ const benefitsInnerRef = useRef(null);
+ const [benefitsHeight, setBenefitsHeight] = useState(undefined);
+ const {cardRef, containerProps: cardTiltProps} = useCardTilt();
+
+ useEffect(() => {
+ const node = benefitsInnerRef.current;
+ if (!node || typeof ResizeObserver === 'undefined') {
+ return;
+ }
+ const observer = new ResizeObserver((entries) => {
+ setBenefitsHeight(entries[0].contentRect.height);
+ });
+ observer.observe(node);
+ return () => observer.disconnect();
+ }, []);
if (!site) {
return
- {siteIcon && (
- 
- )}
- {siteTitle}
-
-
-
-
- );
-
if (products.length === 0) {
return (
<>
-
-
- Gift a membership
-Share a full membership to {siteTitle} with a friend or colleague
-
-
- {giftPageHeader}
-
-
-
- Gift subscriptions are not available right now. -
+
+
);
}
+ const activeProduct = products.find(p => p.id === selectedProductId) || products[0];
const isPurchasing = action === 'checkoutGift:running';
const isDisabled = isCookiesDisabled() || isPurchasing;
- const handlePurchase = (e, product) => {
+ const handlePurchase = (e) => {
e.preventDefault();
- setSelectedProduct(product.id);
-
doAction('checkoutGift', {
- tierId: product.id,
+ tierId: activeProduct.id,
cadence: activeInterval
});
};
return (
<>
-
+
+
+
-
+
+
+
+
+
Gift a membership
++ Gift subscriptions are not available right now. +
+
-
- {giftPageHeader}
-
-
-
-
-
+
+
);
diff --git a/apps/portal/src/components/pages/gift-redemption-page.js b/apps/portal/src/components/pages/gift-redemption-page.js
index d958a97c09c..bf5d163f324 100644
--- a/apps/portal/src/components/pages/gift-redemption-page.js
+++ b/apps/portal/src/components/pages/gift-redemption-page.js
@@ -5,189 +5,27 @@ import CloseButton from '../common/close-button';
import InputForm from '../common/input-form';
import {ValidateInputForm} from '../../utils/form';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
-import {ReactComponent as GiftIcon} from '../../images/icons/gift.svg';
import {getGiftDurationLabel, getGiftRedemptionErrorMessage} from '../../utils/gift-redemption-notification';
import {t} from '../../utils/i18n';
import {hasGiftSubscriptions, removePortalLinkFromUrl} from '../../utils/helpers';
+import useCardTilt from '../../utils/use-card-tilt';
export const GiftRedemptionStyles = `
- .gh-portal-popup-container.giftRedemption {
- width: calc(100vw - 24px);
- max-width: 500px;
- padding: 0;
- overflow: hidden;
- flex-shrink: 0;
- }
-
- .gh-portal-popup-container.giftRedemption .gh-portal-closeicon-container {
- position: absolute;
- top: 16px;
- right: 16px;
- z-index: 5;
- }
-
- html[dir="rtl"] .gh-portal-popup-container.giftRedemption .gh-portal-closeicon-container {
- right: unset;
- left: 18px;
- }
-
- .gh-portal-popup-container.giftRedemption .gh-portal-closeicon {
- color: rgba(24, 32, 38, 0.14);
- }
-
- .gh-portal-popup-container.giftRedemption .gh-portal-closeicon:hover {
- color: rgba(24, 32, 38, 0.28);
- }
-
- .gh-portal-gift-redemption {
- position: relative;
- overflow: hidden;
- }
-
- .gh-gift-redemption-bg {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 400px;
- background: linear-gradient(180deg, var(--brandcolor), transparent);
- opacity: 0.08;
- pointer-events: none;
- z-index: 0;
- }
-
- .gh-gift-redemption-panel {
- position: relative;
- z-index: 1;
- padding: 40px 32px 32px;
- }
-
- .gh-gift-redemption-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 48px;
- height: 48px;
- margin: -8px 0 0 -3px;
- color: var(--brandcolor);
- }
-
- html[dir="rtl"] .gh-gift-redemption-icon {
- margin: -8px -3px 0 0;
- }
-
- .gh-gift-redemption-icon svg {
- width: 52px;
- height: 52px;
- }
-
- .gh-gift-redemption-kicker {
- margin-top: 0;
- font-size: 1.3rem;
- font-weight: 600;
- letter-spacing: 0.02em;
- text-transform: uppercase;
- color: var(--brandcolor);
- }
-
- .gh-gift-redemption-title {
- max-width: none;
- margin: 20px 0 0;
- font-size: 2.4rem;
- font-weight: 700;
- line-height: 1.3;
- letter-spacing: -0.015em;
- text-wrap: pretty;
- color: var(--grey0);
- }
-
- .gh-gift-redemption-plan {
- margin-top: 8px;
- font-size: 1.5rem;
- color: var(--grey3);
- }
-
- .gh-gift-redemption-tier {
- font-weight: 700;
- }
-
- .gh-gift-redemption-cadence {
- font-weight: 400;
- }
-
- .gh-gift-redemption-benefits {
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin-top: 20px;
- }
-
- .gh-gift-redemption-form {
- margin-top: 36px;
- }
-
- .gh-gift-redemption-inline-cta {
- margin-top: 36px;
- }
-
- .gh-gift-redemption-benefit {
- display: flex;
- align-items: flex-start;
- gap: 10px;
- color: var(--grey2);
- font-size: 1.45rem;
- line-height: 1.35;
- text-align: left;
- }
-
- .gh-gift-redemption-benefit svg {
- width: 14px;
- height: 14px;
- margin-top: 3px;
- color: var(--grey1);
- flex-shrink: 0;
- }
-
- html[dir="rtl"] .gh-gift-redemption-benefit {
- text-align: right;
- flex-direction: row-reverse;
- }
-
- .gh-gift-redemption-submit {
- width: 100%;
- height: 44px;
- margin-top: 20px;
- font-size: 1.5rem;
- font-weight: 600;
- }
-
- @media (max-width: 480px) {
- .gh-portal-popup-container.giftRedemption {
- padding: 0 !important;
- }
-
- .gh-gift-redemption-panel {
- padding: 32px 24px 24px;
- }
-
- .gh-gift-redemption-title {
- font-size: 2.1rem;
- }
+.gh-portal-gift-redemption-form {
+ margin-top: 24px;
+}
- .gh-gift-redemption-benefit {
- font-size: 1.4rem;
- }
-
- html[dir="rtl"] .gh-gift-redemption-benefit {
- text-align: right;
- }
-
- .gh-gift-redemption-bg {
- height: 300px;
- }
- }
+.gh-portal-gift-redemption-form + .gh-portal-gift-checkout-cta {
+ margin-top: 16px;
+}
`;
+const ChevronIcon = () => (
+
+);
+
// TODO: Add translation strings once copy has been finalised
const GiftRedemptionPage = () => {
const {action, brandColor, doAction, member, pageData, site} = useContext(AppContext);
@@ -197,6 +35,8 @@ const GiftRedemptionPage = () => {
const [name, setName] = useState(member?.name || '');
const [email, setEmail] = useState(member?.email || '');
const [errors, setErrors] = useState({});
+ const [showDetails, setShowDetails] = useState(false);
+ const {cardRef, containerProps: cardTiltProps} = useCardTilt();
useEffect(() => {
setName(member?.name || '');
@@ -316,75 +156,111 @@ const GiftRedemptionPage = () => {
const buttonLabel = isRedeeming
? 'Redeeming gift...' // 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 siteIcon = site?.icon;
+ const siteTitle = site?.title || '';
const headerText = siteTitle
? `You've been gifted a membership to ${siteTitle}`
: 'You\'ve been gifted a membership';
+ const benefits = gift.tier.benefits || [];
return (
-
+
+
+
+
+
+
+
+ Gift a membership
++ Share a full membership to {siteTitle} with a friend or colleague +
+
+
+
+ Duration
+
+
+
+ Tier
+
+ {products.map((product) => {
+ const isSelected = product.id === activeProduct.id;
+ return (
+
+ );
+ })}
+
+
- {products.map(product => (
-
+
+
-
+
+
+
-
+
+ {activeProduct.benefits && activeProduct.benefits.length > 0 && (
+
+ {siteIcon && (
+
+ )}
+ {siteTitle}
+
+
+
+
+
+
{getDurationLabel(activeInterval)}
+ {activeProduct.name}
+
+
+ )}
+
+ {activeProduct.benefits.map((benefit, idx) => {
+ const key = benefit?.id || `benefit-${idx}`;
+ return (
+
+
+
+ );
+ })}
+
+ <>
-
{'Gift membership'}
- {headerText}
- -
- {gift.tier.name}
- ·
- {getGiftDurationLabel(gift)}
-
-
- {gift.tier.benefits.length > 0 && (
-
- {gift.tier.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 (
-
-
+
+
);
};
diff --git a/apps/portal/src/components/pages/gift-success-page.js b/apps/portal/src/components/pages/gift-success-page.js
index e57144a89d0..44b5c283ca9 100644
--- a/apps/portal/src/components/pages/gift-success-page.js
+++ b/apps/portal/src/components/pages/gift-success-page.js
@@ -1,115 +1,112 @@
import {useContext, useState} from 'react';
import AppContext from '../../app-context';
-import {ReactComponent as GiftIcon} from '../../images/icons/gift.svg';
import CloseButton from '../common/close-button';
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';
// TODO: wrap strings with t() once copy is finalised
/* eslint-disable i18next/no-literal-string */
export const GiftSuccessStyle = `
- .gh-portal-gift-success .gh-portal-signup-header {
- margin-bottom: 0;
- padding: 0;
- }
-
- .gh-portal-gift-success .gh-gift-success-icon {
- margin: 12px auto 0;
- text-align: center;
- color: var(--brandcolor);
- width: 56px;
- height: 56px;
- }
-
- .gh-portal-gift-success .gh-gift-success-icon svg {
- width: 56px;
- height: 56px;
- }
-
- .gh-portal-gift-success h1.gh-portal-main-title {
- font-size: 32px;
- margin-top: 16px;
- }
-
- .gh-portal-gift-success .gh-portal-main-subtitle {
- margin-top: 12px;
- }
-
- .gh-portal-gift-success .gh-gift-link-container {
- display: flex;
- align-items: center;
- height: 48px;
- background-color: #f3f3f3;
- border-radius: 8px;
- padding: 6px 6px 6px 12px;
- margin-top: 24px;
- gap: 8px;
- }
-
- .gh-portal-gift-success .gh-gift-link-url {
- flex: 1;
- font-size: 1.5rem;
- color: var(--grey1);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- min-width: 0;
- user-select: all;
- }
-
- .gh-portal-gift-success .gh-gift-copy-btn {
- display: flex;
- align-items: center;
- gap: 4px;
- height: 36px;
- background: var(--brandcolor);
- color: #fff;
- border: none;
- border-radius: 6px;
- padding: 8px 16px 8px 14px;
- font-size: 14px;
- font-weight: 500;
- cursor: pointer;
- white-space: nowrap;
- flex-shrink: 0;
- transition: opacity 0.15s ease;
- will-change: opacity;
- }
-
- .gh-portal-gift-success .gh-gift-copy-btn:hover {
- opacity: 0.9;
- }
-
- .gh-portal-gift-success .gh-gift-footer-text {
- margin: 36px 0 0;
- font-size: 1.3rem;
- color: var(--grey7);
- text-align: center;
- line-height: 1.5;
- }
+.gh-portal-gift-success-link {
+ display: flex;
+ align-items: center;
+ height: 56px;
+ background: color-mix(in srgb, var(--brandcolor) 8%, var(--white));
+ border-radius: 999px;
+ padding: 4px 8px 4px 24px;
+ gap: 8px;
+}
+
+.gh-portal-gift-success-link-url {
+ flex: 1;
+ font-size: 1.6rem;
+ font-weight: 400;
+ color: var(--brandcolor);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ user-select: all;
+}
+
+.gh-portal-gift-success-copy {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ height: 40px;
+ padding: 0 18px;
+ background: var(--brandcolor);
+ color: var(--white);
+ border: none;
+ border-radius: 999px;
+ font-size: 1.4rem;
+ font-weight: 600;
+ cursor: pointer;
+ flex-shrink: 0;
+ transition: opacity 0.15s ease;
+ will-change: opacity;
+}
+
+.gh-portal-gift-success-copy:hover {
+ opacity: 0.9;
+}
+
+.gh-portal-gift-success-copy svg {
+ width: 14px;
+ height: 14px;
+}
+
+.gh-portal-gift-success-footer {
+ margin-top: 24px;
+ margin-bottom: 0;
+ font-size: 1.4rem;
+ color: var(--grey6);
+ line-height: 1.5;
+}
`;
const CopyIcon = () => (
-
+
-
+
+
- )}
-
- {isLoggedIn ? (
-
+
+ {/* eslint-disable-next-line i18next/no-literal-string -- copy not yet finalised */}
+
+
+ {!isLoggedIn && (
+
A gift, just for you
+{headerText}
+
+
- );
- })}
+ )}
+
+
-
- ) : (
-
-
+
- )}
+
+
+
+
+ {benefits.length > 0 && (
+ <>
+
+
+
+ {siteIcon && (
+
+ )}
+ {siteTitle}
+
+
+
+
+
+
+ {getGiftDurationLabel(gift)}
+ {gift.tier.name}
+
+
+
+
+ )}
+
+
+
+ {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 (
+
+
+
+ );
+ })}
+