Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Refined UI/UX for Portal flows (#234)

Browse source 
On the heels of multiple tiers going GA, this change brings a massive visual overhaul to Portal for almost all pages and flows, along with adding consistency between different multiple tier flows. It also overhauls the tests to match our new UI/UX for Portal.

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
This commit is contained in:
Rishabh Garg 2022-03-23 16:31:59 +05:30 • committed by GitHub
parent 20f12bc7d1
commit afe49de9c2
31 changed files with 1841 additions and 2404 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/portal/src/App.js
View file

@ -18,7 +18,7 @@ const React = require('react');
const DEV_MODE_DATA = {
showPopup: true,
site: Fixtures.site,
member: Fixtures.member.paid,
member: Fixtures.member.free,
page: 'accountHome',
...Fixtures.paidMemberOnTier(),
pageData: Fixtures.offer

1386
ghost/portal/src/components/Frame.styles.js
View file

File diff suppressed because it is too large Load diff

56
ghost/portal/src/components/Global.styles.js
View file

@ -39,7 +39,7 @@ export const GlobalStyles = `
line-height: 1.6em;
font-weight: 400;
font-style: normal;
color: var(--grey4);
color: var(--grey2);
box-sizing: border-box;
overflow: hidden;
}
@ -60,26 +60,26 @@ export const GlobalStyles = `
}
h1 {
font-size: 31px;
font-weight: 500;
letter-spacing: 0.2px;
font-size: 35px;
font-weight: 700;
letter-spacing: -0.022em;
}
h2 {
font-size: 23px;
font-weight: 500;
letter-spacing: 0.2px;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.021em;
}
h3 {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.2px;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.019em;
}
p {
font-size: 15px;
line-height: 1.55em;
line-height: 1.5em;
margin-bottom: 24px;
}
@ -106,6 +106,40 @@ export const GlobalStyles = `
padding: 10px;
line-height: 1.5em;
}
@media (max-width: 1440px) {
h1 {
font-size: 32px;
letter-spacing: -0.022em;
}
h2 {
font-size: 28px;
letter-spacing: -0.021em;
}
h3 {
font-size: 26px;
letter-spacing: -0.02em;
}
}
@media (max-width: 480px) {
h1 {
font-size: 30px;
letter-spacing: -0.021em;
}
h2 {
font-size: 26px;
letter-spacing: -0.02em;
}
h3 {
font-size: 24px;
letter-spacing: -0.019em;
}
}
`;
export default GlobalStyles;

2
ghost/portal/src/components/Notification.styles.js
View file

@ -23,7 +23,7 @@ const NotificationStyles = `
background: rgba(33,33,33,0.95);
backdrop-filter: blur(8px);
color: var(--white);
border-radius: 5px;
border-radius: 7px;
box-shadow: 0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px -5px rgba(0, 0, 0, 0.08);
animation: notification-slidein 0.55s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

50
ghost/portal/src/components/PopupModal.js
View file

@ -4,8 +4,8 @@ import AppContext from '../AppContext';
import {getFrameStyles} from './Frame.styles';
import Pages, {getActivePage} from '../pages';
import PopupNotification from './common/PopupNotification';
import {hasMultipleProducts, isCookiesDisabled, getSitePrices, isInviteOnlySite} from '../utils/helpers';
import {ReactComponent as GhostLogo} from '../images/ghost-logo-small.svg';
import PoweredBy from './common/PoweredBy';
import {getSiteProducts, isInviteOnlySite, isCookiesDisabled, hasFreeProductPrice} from '../utils/helpers';
const React = require('react');
@ -126,8 +126,9 @@ class PopupContent extends React.Component {
}
render() {
const {page, site, pageQuery, customSiteUrl} = this.context;
const {is_stripe_configured: isStripeConfigured} = site;
const {page, pageQuery, site, customSiteUrl} = this.context;
const products = getSiteProducts({site});
const noOfProducts = products.length;
getActivePage({page});
const Styles = StylesWrapper({page});
@ -135,20 +136,8 @@ class PopupContent extends React.Component {
...Styles.page[page]
};
let popupWidthStyle = '';
let popupSize = 'regular';
const portalPlans = getSitePrices({site, pageQuery});
if (page === 'signup' || page === 'signin' || page === 'offer') {
if (!isInviteOnlySite({site, pageQuery}) && portalPlans.length === 3 && (page === 'signup' || page === 'signin')) {
popupWidthStyle = ' gh-portal-container-wide';
}
if (portalPlans.length <= 1 || !isStripeConfigured) {
popupWidthStyle = 'gh-portal-container-narrow';
}
if (page === 'offer') {
popupWidthStyle = ' gh-portal-container-wide';
}
}
let cookieBannerText = '';
let pageClass = page;
switch (page) {
@ -173,8 +162,19 @@ class PopupContent extends React.Component {
break;
}
if (hasMultipleProducts({site}) && (page === 'signup' || page === 'signin')) {
pageClass += ' multiple-products';
if (noOfProducts > 1 && !isInviteOnlySite({site, pageQuery})) {
if (page === 'signup') {
pageClass += ' full-size';
popupSize = 'full';
}
}
const freeProduct = hasFreeProductPrice({site});
if ((freeProduct && noOfProducts > 2) || (!freeProduct && noOfProducts > 1)) {
if (page === 'accountPlan') {
pageClass += ' full-size';
popupSize = 'full';
}
}
let className = 'gh-portal-popup-container';
@ -199,15 +199,15 @@ class PopupContent extends React.Component {
<CookieDisabledBanner message={cookieBannerText} />
{this.renderPopupNotification()}
{this.renderActivePage()}
{(popupSize === 'full' ?
<div className={'gh-portal-powered inside ' + (hasMode(['preview']) ? 'hidden ' : '') + pageClass}>
<PoweredBy />
</div>
: '')}
</div>
</div>
<div className={'gh-portal-powered outside ' + (hasMode(['preview']) ? 'hidden ' : '') + pageClass}>
<a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
window.open('https://ghost.org', '_blank');
}}>
<GhostLogo />
Powered by Ghost
</a>
<PoweredBy />
</div>
</>
);

1
ghost/portal/src/components/common/ActionButton.js
View file

@ -6,7 +6,6 @@ export const ActionButtonStyles = `
.gh-portal-btn-main {
box-shadow: none;
position: relative;
height: 42px;
border: none;
}

7
ghost/portal/src/components/common/BackButton.js
View file

@ -8,15 +8,16 @@ export const BackButtonStyles = `
position: relative;
height: unset;
min-width: unset;
position: absolute;
top: -3px;
left: -16px;
position: fixed;
top: 29px;
left: 25px;
background: none;
padding: 8px;
margin: 0;
box-shadow: none;
color: var(--grey3);
border: none;
z-index: 10000;
}
.gh-portal-btn-back:hover {

11
ghost/portal/src/components/common/InputField.js
View file

@ -14,14 +14,13 @@ export const InputFieldStyles = `
color: inherit;
background: transparent;
outline: none;
border: 1px solid var(--grey12);
border-radius: 3px;
border: 1px solid var(--grey11);
border-radius: 6px;
width: 100%;
height: 40px;
height: 44px;
padding: 0 12px;
margin-bottom: 18px;
letter-spacing: 0.2px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
transition: border-color 0.25s ease-in-out;
}
@ -44,7 +43,7 @@ export const InputFieldStyles = `
}
.gh-portal-input:focus {
border-color: #cdcdcd;
border-color: var(--grey8);
}
.gh-portal-input.error {
@ -52,7 +51,7 @@ export const InputFieldStyles = `
}
.gh-portal-input::placeholder {
color: var(--grey7);
color: var(--grey8);
}
.gh-portal-popup-container:not(.preview) .gh-portal-input:disabled {

430
ghost/portal/src/components/common/PlansSection.js
View file

@ -1,8 +1,7 @@
import React, {useContext} from 'react';
import AppContext from '../../AppContext';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
import calculateDiscount from '../../utils/discount';
import {isCookiesDisabled, formatNumber, hasOnlyFreePlan, hasMultipleProductsFeature, getProductBenefits, getFreeTierDescription, getFreeTierTitle, getFreeProductBenefits, getProductFromPrice} from '../../utils/helpers';
import {isCookiesDisabled, formatNumber, hasOnlyFreePlan} from '../../utils/helpers';
import ProductsSection, {ChangeProductSection} from './ProductsSection';
export const PlanSectionStyles = `
@ -64,25 +63,21 @@ export const PlanSectionStyles = `
border-right: none;
}
.gh-portal-plans-container:not(.has-multiple-products) {
margin-bottom: 2px;
}
.gh-portal-plans-container.has-multiple-products:not(.empty-selected-benefits) .gh-portal-plan-section::before {
.gh-portal-plans-container:not(.empty-selected-benefits) .gh-portal-plan-section::before {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.gh-portal-plans-container.has-multiple-products.has-discount {
.gh-portal-plans-container.has-discount {
margin-top: 40px;
}
.gh-portal-plans-container.has-multiple-products.has-discount,
.gh-portal-plans-container.has-multiple-products.has-discount .gh-portal-plan-section:last-of-type::before {
.gh-portal-plans-container.has-discount,
.gh-portal-plans-container.has-discount .gh-portal-plan-section:last-of-type::before {
border-top-right-radius: 0;
}
.gh-portal-plans-container.is-change-plan.has-multiple-products .gh-portal-plan-section::before {
.gh-portal-plans-container.is-change-plan .gh-portal-plan-section::before {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@ -98,7 +93,7 @@ export const PlanSectionStyles = `
margin-top: 2px;
}
.gh-portal-plans-container.has-multiple-products .gh-portal-plan-pricelabel {
.gh-portal-plans-container .gh-portal-plan-pricelabel {
min-height: unset;
}
@ -167,75 +162,10 @@ export const PlanSectionStyles = `
word-break: break-word;
}
.gh-portal-plan-checkbox {
position: relative;
display: block;
font-size: 22px;
height: 18px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gh-portal-plans-container.disabled .gh-portal-plan-checkbox {
cursor: auto;
}
.gh-portal-plan-checkbox input {
position: absolute;
height: 0;
width: 0;
opacity: 0;
cursor: pointer;
}
.gh-portal-plan-checkbox .checkmark {
position: absolute;
top: 0;
left: -9px;
background-color: var(--grey12);
border-radius: 999px;
height: 18px;
width: 18px;
}
.gh-portal-plan-checkbox input:checked ~ .checkmark {
background-color: var(--brandcolor);
}
.gh-portal-plan-checkbox .checkmark::after {
position: absolute;
display: none;
content: "";
}
.gh-portal-plan-checkbox input:checked ~ .checkmark:after {
display: block;
}
.gh-portal-plan-checkbox .checkmark:after {
left: 6.5px;
top: 2.5px;
width: 5px;
height: 11px;
border: solid var(--white);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.gh-portal-plans-container.disabled .gh-portal-plan-checkbox input:checked ~ .checkmark {
opacity: 0.3;
}
.gh-portal-content.signup.singleplan .gh-portal-plan-section {
cursor: auto;
}
.gh-portal-content.signup.singleplan .gh-portal-plan-checkbox,
.gh-portal-content.signup.singleplan .gh-portal-plan-section.checked::before {
display: none;
}
@ -263,10 +193,6 @@ export const PlanSectionStyles = `
opacity: 0;
}
.gh-portal-plans-container.hide-checkbox .gh-portal-plan-checkbox {
display: none;
}
.gh-portal-plans-container.hide-checkbox .gh-portal-plan-section {
padding-top: 12px;
padding-bottom: 12px;
@ -281,107 +207,17 @@ export const PlanSectionStyles = `
margin: 3px 0 -2px;
}
.gh-portal-plans-container.vertical {
flex-direction: column;
}
.gh-portal-plans-container.vertical .gh-portal-plan-section {
display: grid;
flex-direction: unset;
grid-template-columns: 32px auto auto;
grid-template-rows: auto auto;
justify-items: start;
min-height: 60px;
border-right: none;
border-bottom: 1px solid var(--grey11);
padding: 10px;
}
.gh-portal-plans-container.vertical .gh-portal-plan-checkbox {
grid-column: 1 / 2;
grid-row: 1 / 3;
margin: 0 12px;
}
.gh-portal-plans-container.vertical .gh-portal-plan-pricelabel {
grid-column: 3 / 4;
grid-row: 1 / 3;
flex-direction: column;
justify-self: end;
align-items: flex-end;
margin: 4px 4px 0 12px;
min-height: unset;
}
.gh-portal-plans-container.vertical .gh-portal-plan-priceinterval {
line-height: unset;
line-height: 1.7;
}
.gh-portal-plans-container.vertical .gh-portal-plan-name {
text-transform: none;
font-size: 1.4rem;
line-height: 1.1em;
letter-spacing: 0.2px;
margin: 0;
min-height: unset;
}
.gh-portal-plans-container.vertical .gh-portal-plan-featurewrapper {
margin: 4px 0 0;
padding: 0;
border: none;
align-items: flex-start;
}
.gh-portal-plans-container.vertical .gh-portal-plan-feature {
text-align: left;
}
.gh-portal-plans-container.vertical .gh-portal-plan-section:last-of-type {
border-bottom: none;
}
.gh-portal-plans-container.vertical .gh-portal-plan-section:first-of-type::before {
border-radius: 5px 5px 0 0;
}
.gh-portal-plans-container.vertical .gh-portal-plan-section:last-of-type::before {
border-radius: 0 0 5px 5px;
}
.gh-portal-plans-container.vertical.hide-checkbox .gh-portal-plan-section {
grid-template-columns: auto auto;
}
.gh-portal-plans-container.vertical .gh-portal-plan-pricelabel {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
.gh-portal-plans-container.vertical.hide-checkbox .gh-portal-plan-featurewrapper {
grid-column: 1 / 2;
}
.gh-portal-plans-container.vertical .gh-portal-plan-name.no-description {
grid-row: 1 / 3;
}
.gh-portal-plans-container.multiple-products {
border: none;
}
.gh-portal-plans-container.has-multiple-products:not(.empty-selected-benefits) {
.gh-portal-plans-container:not(.empty-selected-benefits) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.gh-portal-plans-container.has-multiple-products.is-change-plan {
.gh-portal-plans-container.is-change-plan {
border-radius: 0 0 5px 5px;
border-top: none;
}
.gh-portal-plans-container.has-multiple-products.is-change-plan .gh-portal-plan-section {
.gh-portal-plans-container.is-change-plan .gh-portal-plan-section {
min-height: 90px;
}
@ -447,26 +283,6 @@ export const PlanSectionStyles = `
}
`;
function Checkbox({name, id, onPlanSelect, isChecked, disabled = false}) {
if (isCookiesDisabled()) {
disabled = true;
}
return (
<div className='gh-portal-plan-checkbox'>
<input
name={name}
key={id}
type="checkbox"
checked={isChecked}
aria-label={name}
onChange={e => onPlanSelect(e, id)}
disabled={disabled}
/>
<span className='checkmark'></span>
</div>
);
}
function PriceLabel({currencySymbol, price, interval}) {
const isSymbol = currencySymbol.length !== 3;
const currencyClass = isSymbol ? 'gh-portal-plan-currency gh-portal-plan-currency-symbol' : 'gh-portal-plan-currency gh-portal-plan-currency-code';
@ -495,175 +311,7 @@ function addDiscountToPlans(plans) {
}
}
function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
const {site} = useContext(AppContext);
addDiscountToPlans(plans);
return plans.map(({name, type, currency_symbol: currencySymbol, amount, description, interval, id}) => {
const price = amount / 100;
const isChecked = selectedPlan === id;
const planDetails = {};
let displayName = name;
if (type === 'free') {
displayName = getFreeTierTitle({site});
planDetails.feature = 'Free preview';
} else {
displayName = interval === 'month' ? 'Monthly' : 'Yearly';
planDetails.feature = description || 'Full access';
}
// switch (name) {
// case 'Free':
// displayName = getFreeTierTitle({site});
// planDetails.feature = 'Free preview';
// break;
// default:
// displayName = interval === 'month' ? 'Monthly' : 'Yearly';
// planDetails.feature = description || 'Full access';
// break;
// }
let planClass = isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section';
const planNameClass = planDetails.feature ? 'gh-portal-plan-name' : 'gh-portal-plan-name no-description';
const featureClass = hasMultipleProductsFeature({site}) ? 'gh-portal-plan-featurewrapper hidden' : 'gh-portal-plan-featurewrapper';
return (
<div className={planClass} key={id} onClick={e => onPlanSelect(e, id)}>
{(hasMultipleProductsFeature({site}) ? <PlanDiscount discount={description} /> : ``)}
<Checkbox name={name} id={id} isChecked={isChecked} onPlanSelect={onPlanSelect} />
<h4 className={planNameClass}>{displayName}</h4>
<PriceLabel currencySymbol={currencySymbol} price={price} interval={interval} />
<div className={featureClass}>
<PlanFeature feature={planDetails.feature} />
{(changePlan && selectedPlan === id ? <span className='gh-portal-plan-current'>Current plan</span> : '')}
</div>
</div>
);
});
}
function PlanDiscount({discount}) {
return (
<div className="gh-portal-discount-label">{discount}</div>
);
}
function PlanFeature({feature, hide = false}) {
if (hide) {
return null;
}
return (
<div className='gh-portal-plan-feature'>
{feature}
</div>
);
}
function PlanBenefit({benefit}) {
if (!benefit?.name) {
return null;
}
return (
<div className="gh-portal-product-benefit">
<CheckmarkIcon className='gh-portal-benefit-checkmark' />
<span className={benefit.className}>{benefit.name}</span>
</div>
);
}
function PlanBenefits({product, plans, selectedPlan}) {
const {site} = useContext(AppContext);
const productBenefits = getProductBenefits({product, site});
const plan = plans.find((_plan) => {
return _plan.id === selectedPlan;
});
let planBenefits = [];
let planDescription = product?.description || '';
if (selectedPlan === 'free') {
planBenefits = getFreeProductBenefits({site});
planDescription = getFreeTierDescription({site});
} else if (plan?.interval === 'month') {
planBenefits = productBenefits.monthly;
} else if (plan?.interval === 'year') {
planBenefits = productBenefits.yearly;
}
const benefits = planBenefits.map((benefit, idx) => {
const key = `${benefit.name}-${idx}`;
return (
<PlanBenefit benefit={benefit} key={key} />
);
});
if (!planDescription && benefits.length === 0) {
return '';
}
let benefitsClass = benefits.length === 0 ? `no-benefits` : '';
if (!product || hasOnlyFreePlan({plans})) {
benefitsClass += ' onlyfree';
}
return (
<div className={'gh-portal-singleproduct-benefits gh-portal-product-benefits ' + benefitsClass}>
{planDescription ? <div className='gh-portal-product-description'> {planDescription} </div> : ''}
{benefits}
</div>
);
}
function PlanLabel({showLabel}) {
if (!showLabel) {
return null;
}
return (
<label className='gh-portal-input-label'>Plan</label>
);
}
function productHasDescriptionOrBenefits({product}) {
if (product?.description || product?.benefits?.length) {
return true;
}
return false;
}
function getPlanClassNames({changePlan, cookiesDisabled, plans = [], selectedPlan, showVertical = false, site}) {
let className = 'gh-portal-plans-container';
if (changePlan) {
className += ' hide-checkbox';
}
if (cookiesDisabled) {
className += ' disabled';
}
if (changePlan || plans.length > 3 || showVertical) {
className += ' vertical';
}
if (hasMultipleProductsFeature({site})) {
className += ' has-multiple-products';
const selectedProduct = getProductFromPrice({site, priceId: selectedPlan});
if (!productHasDescriptionOrBenefits({product: selectedProduct})) {
className += ' empty-selected-benefits';
}
const filteredPlans = plans.filter(d => d.id !== 'free');
const monthlyPlan = plans.find((d) => {
return d.name === 'Monthly' && !d.description && d.interval === 'month';
});
const yearlyPlan = plans.find((d) => {
return d.name === 'Yearly' && !d.description && d.interval === 'year';
});
if (filteredPlans.length === 2 && monthlyPlan && yearlyPlan) {
const discount = calculateDiscount(monthlyPlan.amount, yearlyPlan.amount);
if (discount) {
className += ' has-discount';
}
}
}
return className;
}
export function MultipleProductsPlansSection({products, selectedPlan, onPlanSelect, changePlan = false}) {
export function MultipleProductsPlansSection({products, selectedPlan, onPlanSelect, onPlanCheckout, changePlan = false}) {
const cookiesDisabled = isCookiesDisabled();
/**Don't allow plans selection if cookies are disabled */
if (cookiesDisabled) {
@ -692,48 +340,21 @@ export function MultipleProductsPlansSection({products, selectedPlan, onPlanSele
type='upgrade'
products={products}
onPlanSelect={onPlanSelect}
handleChooseSignup={(...args) => {
onPlanCheckout(...args);
}}
/>
</div>
</section>
);
}
export function SingleProductPlansSection({product, plans, selectedPlan, onPlanSelect, changePlan = false}) {
const {site} = useContext(AppContext);
const cookiesDisabled = isCookiesDisabled();
/**Don't allow plans selection if cookies are disabled */
if (cookiesDisabled) {
onPlanSelect = () => {};
}
const className = getPlanClassNames({cookiesDisabled, changePlan, plans, selectedPlan, site});
if (!product || hasOnlyFreePlan({plans})) {
return (
<section>
<PlanBenefits product={product} plans={plans} selectedPlan={selectedPlan} />
</section>
);
}
return (
<section>
<div className={className}>
<PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} />
</div>
<PlanBenefits product={product} plans={plans} selectedPlan={selectedPlan} />
</section>
);
}
function getChangePlanClassNames({cookiesDisabled, site}) {
let className = 'gh-portal-plans-container is-change-plan hide-checkbox';
if (cookiesDisabled) {
className += ' disabled';
}
if (hasMultipleProductsFeature({site})) {
className += ' has-multiple-products';
}
return className;
}
@ -783,26 +404,3 @@ export function ChangeProductPlansSection({product, plans, selectedPlan, onPlanS
</section>
);
}
function PlansSection({plans, showLabel = true, selectedPlan, onPlanSelect, changePlan = false}) {
const {site} = useContext(AppContext);
if (hasOnlyFreePlan({plans})) {
return null;
}
const cookiesDisabled = isCookiesDisabled();
/**Don't allow plans selection if cookies are disabled */
if (cookiesDisabled) {
onPlanSelect = () => {};
}
const className = getPlanClassNames({cookiesDisabled, changePlan, plans, selectedPlan, site});
return (
<section className="gh-portal-plans">
<PlanLabel showLabel={showLabel} />
<div className={className}>
<PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} />
</div>
</section>
);
}
export default PlansSection;

39
ghost/portal/src/components/common/PlansSection.test.js
View file

@ -1,39 +0,0 @@
import React from 'react';
import {render} from '@testing-library/react';
import PlansSection from './PlansSection';
const setup = (overrides = {}) => {
const mockOnPlanSelectFn = jest.fn();
const props = {
plans: [
{type: 'free', price: 'Decide later', currency_symbol: '$', name: 'Free', id: 'free'},
{type: 'month', price: 12, currency_symbol: '$', name: 'Monthly', id: 'monthly'},
{type: 'year', price: 110, currency_symbol: '$', name: 'Yearly', id: 'yearly'}
],
selectedPlan: 'Monthly',
onPlanSelect: mockOnPlanSelectFn
};
const utils = render(
<PlansSection {...props} />
);
const freeCheckboxEl = utils.getByLabelText('Free');
const monthlyCheckboxEl = utils.getByLabelText('Monthly');
const yearlyCheckboxEl = utils.getByLabelText('Yearly');
return {
freeCheckboxEl,
monthlyCheckboxEl,
yearlyCheckboxEl,
mockOnPlanSelectFn,
...utils
};
};
describe('InputField', () => {
test('renders', () => {
const {freeCheckboxEl, monthlyCheckboxEl, yearlyCheckboxEl} = setup();
expect(freeCheckboxEl).toBeInTheDocument();
expect(monthlyCheckboxEl).toBeInTheDocument();
expect(yearlyCheckboxEl).toBeInTheDocument();
});
});

54
ghost/portal/src/components/common/PopupNotification.js
View file

@ -12,16 +12,16 @@ export const PopupNotificationStyles = `
top: 8px;
left: 8px;
right: 8px;
padding: 8px;
padding: 12px;
background: var(--grey2);
z-index: 9999;
border-radius: 4px;
font-size: 1.3rem;
z-index: 11000;
border-radius: 5px;
font-size: 1.5rem;
box-shadow: 0px 0.8151839971542358px 0.8151839971542358px 0px rgba(0,0,0,0.01),
0px 2.2538793087005615px 2.2538793087005615px 0px rgba(0,0,0,0.02),
0px 5.426473140716553px 5.426473140716553px 0px rgba(0,0,0,0.03),
0px 18px 18px 0px rgba(0,0,0,0.04);
animation: popupnotification-slidein 0.6s ease-in-out;
animation: popupnotification-slidein 0.3s ease-in-out;
}
.gh-portal-popupnotification.slideout {
@ -32,7 +32,7 @@ export const PopupNotificationStyles = `
color: var(--white);
margin: 0;
padding: 0 20px;
font-size: 1.4rem;
font-size: 1.5rem;
line-height: 1.5em;
letter-spacing: 0.2px;
text-align: center;
@ -44,10 +44,10 @@ export const PopupNotificationStyles = `
.gh-portal-popupnotification-icon {
position: absolute;
top: 10px;
left: 10px;
width: 16px;
height: 16px;
top: 12px;
left: 12px;
width: 20px;
height: 20px;
}
.gh-portal-popupnotification-icon.success {
@ -60,15 +60,15 @@ export const PopupNotificationStyles = `
.gh-portal-popupnotification .closeicon {
position: absolute;
top: 0px;
top: 3px;
bottom: 0;
right: 0;
right: 3px;
color: var(--white);
cursor: pointer;
width: 12px;
height: 12px;
width: 16px;
height: 16px;
padding: 12px;
transition: all 0.2s ease-in-out forwards;
transition: all 0.15s ease-in-out forwards;
opacity: 0.8;
}
@ -77,15 +77,27 @@ export const PopupNotificationStyles = `
}
@keyframes popupnotification-slidein {
0% { transform: translateY(-100px); }
60% { transform: translateY(8px); }
100% { transform: translateY(0); }
0% {
transform: translateY(-10px);
opacity: 0;
}
60% { transform: translateY(2px); }
100% {
transform: translateY(0);
opacity: 1.0;
}
}
@keyframes popupnotification-slideout {
0% { transform: translateY(0); }
40% { transform: translateY(8px); }
100% { transform: translateY(-100px); }
0% {
transform: translateY(0);
opacity: 1.0;
}
40% { transform: translateY(2px); }
100% {
transform: translateY(-10px);
opacity: 0;
}
}
`;

15
ghost/portal/src/components/common/PoweredBy.js Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
import {ReactComponent as GhostLogo} from '../../images/ghost-logo-small.svg';
export default class PoweredBy extends React.Component {
render() {
return (
<a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
window.open('https://ghost.org', '_blank');
}}>
<GhostLogo />
Powered by Ghost
</a>
);
}
}

904
ghost/portal/src/components/common/ProductsSection.js
View file

File diff suppressed because it is too large Load diff

15
ghost/portal/src/components/common/SiteTitleBackButton.js Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
import AppContext from '../../AppContext';
export default class SiteTitleBackButton extends React.Component {
static contextType = AppContext;
render() {
const {site} = this.context;
return (
<>
<button className='gh-portal-btn gh-portal-btn-site-title-back' onClick = {() => this.context.onAction('closePopup')}>&larr; {site.title}</button>
</>
);
}
}

22
ghost/portal/src/components/common/Switch.js
View file

@ -6,8 +6,8 @@ export const SwitchStyles = `
.gh-portal-for-switch .container {
position: relative;
display: inline-block;
width: 36px !important;
height: 22px !important;
width: 44px !important;
height: 26px !important;
cursor: pointer;
}
@ -30,11 +30,10 @@ export const SwitchStyles = `
left: 0;
right: 0;
bottom: 0;
background: var(--grey13);
border: 1px solid var(--grey11);
background: #e9e9e9;
transition: .3s;
width: 36px !important;
height: 22px !important;
width: 44px !important;
height: 26px !important;
border-radius: 999px;
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
cursor: pointer;
@ -48,13 +47,12 @@ export const SwitchStyles = `
.gh-portal-for-switch .input-toggle-component:before {
position: absolute;
content: "";
top: 2px !important;
left: 2px !important;
height: 16px !important;
width: 16px !important;
top: 3px !important;
left: 3px !important;
height: 20px !important;
width: 20px !important;
background-color: white;
transition: .3s;
box-shadow: 0 0 1px rgba(0,0,0,.3), 0 4px 6px rgba(0,0,0,.1);
border-radius: 999px;
}
@ -64,7 +62,7 @@ export const SwitchStyles = `
}
.gh-portal-for-switch input:checked + .input-toggle-component:before {
transform: translateX(14px);
transform: translateX(18px);
box-shadow: none;
}

11
ghost/portal/src/components/pages/AccountHomePage.js
View file

@ -12,11 +12,6 @@ import {useContext} from 'react';
const React = require('react');
export const AccountHomePageStyles = `
.gh-portal-account-main {
background: var(--grey13);
padding: 32px 32px 0;
}
.gh-portal-account-header {
display: flex;
flex-direction: column;
@ -29,14 +24,11 @@ export const AccountHomePageStyles = `
}
.gh-portal-account-data {
margin-bottom: 32px;
margin-bottom: 40px;
}
footer.gh-portal-account-footer {
display: flex;
padding: 32px;
height: 104px;
border-top: 1px solid #eaeaea;
}
.gh-portal-account-footer.paid {
@ -45,6 +37,7 @@ export const AccountHomePageStyles = `
.gh-portal-account-footermenu {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;

72
ghost/portal/src/components/pages/AccountPlanPage.js
View file

@ -3,18 +3,23 @@ import AppContext from '../../AppContext';
import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
import BackButton from '../common/BackButton';
import PlansSection, {MultipleProductsPlansSection, SingleProductPlansSection} from '../common/PlansSection';
import {MultipleProductsPlansSection} from '../common/PlansSection';
import {getDateString} from '../../utils/date-time';
import {formatNumber, getAvailablePrices, getFilteredPrices, getMemberActivePrice, getMemberSubscription, getPriceFromSubscription, getProductFromPrice, getSubscriptionFromId, getUpgradeProducts, hasMultipleProducts, hasMultipleProductsFeature, isPaidMember} from '../../utils/helpers';
import {formatNumber, getAvailablePrices, getFilteredPrices, getMemberActivePrice, getMemberSubscription, getPriceFromSubscription, getProductFromPrice, getSubscriptionFromId, getUpgradeProducts, hasMultipleProductsFeature, isPaidMember} from '../../utils/helpers';
export const AccountPlanPageStyles = `
.account-plan.full-size .gh-portal-main-title {
font-size: 3.2rem;
margin-top: 32px;
}
.gh-portal-accountplans-main {
margin-top: 24px;
margin-bottom: 0;
}
.gh-portal-expire-container {
margin: 24px 0 0;
margin: 32px 0 0;
}
.gh-portal-cancellation-form p {
@ -46,14 +51,13 @@ function getConfirmationPageTitle({confirmationType}) {
}
const Header = ({onBack, showConfirmation, confirmationType}) => {
const {member, brandColor, lastPage} = useContext(AppContext);
const {member} = useContext(AppContext);
let title = isPaidMember({member}) ? 'Change plan' : 'Choose a plan';
if (showConfirmation) {
title = getConfirmationPageTitle({confirmationType});
}
return (
<header className='gh-portal-detail-header'>
<BackButton brandColor={brandColor} onClick={e => onBack(e)} hidden={!lastPage && !showConfirmation} />
<h3 className='gh-portal-main-title'>{title}</h3>
</header>
);
@ -122,7 +126,7 @@ const PlanConfirmationSection = ({plan, type, onConfirm}) => {
if (type === 'changePlan') {
return (
<>
<div className='gh-portal-list outline mb6'>
<div className='gh-portal-list mb6'>
<section>
<div className='gh-portal-list-detail'>
<h3>Account</h3>
@ -205,46 +209,16 @@ const ChangePlanSection = ({plans, selectedPlan, onPlanSelect, onCancelSubscript
);
};
function PlansOrProductSection({showLabel, plans, selectedPlan, onPlanSelect, changePlan = false}) {
function PlansOrProductSection({showLabel, plans, selectedPlan, onPlanSelect, onPlanCheckout, changePlan = false}) {
const {site, member} = useContext(AppContext);
const products = getUpgradeProducts({site, member});
if (hasMultipleProductsFeature({site})) {
if (changePlan === true) {
return (
<MultipleProductsPlansSection
products={products}
selectedPlan={selectedPlan}
changePlan={true}
onPlanSelect={onPlanSelect}
/>
);
} else if (hasMultipleProducts({site})) {
return (
<MultipleProductsPlansSection
products={products}
selectedPlan={selectedPlan}
changePlan={changePlan}
onPlanSelect={onPlanSelect}
/>
);
} else {
return (
<SingleProductPlansSection
product={products?.[0]}
plans={plans}
selectedPlan={selectedPlan}
onPlanSelect={onPlanSelect}
/>
);
}
}
return (
<PlansSection
showLabel={showLabel}
plans={plans}
<MultipleProductsPlansSection
products={products}
selectedPlan={selectedPlan}
changePlan={changePlan}
onPlanSelect={onPlanSelect}
onPlanCheckout={onPlanCheckout}
/>
);
}
@ -253,8 +227,8 @@ function PlansOrProductSection({showLabel, plans, selectedPlan, onPlanSelect, ch
const UpgradePlanSection = ({
plans, selectedPlan, onPlanSelect, onPlanCheckout
}) => {
const {action, brandColor} = useContext(AppContext);
const isRunning = ['checkoutPlan:running'].includes(action);
// const {action, brandColor} = useContext(AppContext);
// const isRunning = ['checkoutPlan:running'].includes(action);
let singlePlanClass = '';
if (plans.length === 1) {
singlePlanClass = 'singleplan';
@ -267,16 +241,17 @@ const UpgradePlanSection = ({
plans={plans}
selectedPlan={selectedPlan}
onPlanSelect={onPlanSelect}
onPlanCheckout={onPlanCheckout}
/>
</div>
<ActionButton
{/* <ActionButton
onClick={e => onPlanCheckout(e)}
isRunning={isRunning}
isPrimary={true}
brandColor={brandColor}
label={'Continue'}
style={{height: '40px', width: '100%', marginTop: '24px'}}
/>
/> */}
</section>
);
};
@ -381,7 +356,10 @@ export default class AccountPlanPage extends React.Component {
onPlanCheckout(e, priceId) {
const {onAction, member} = this.context;
const {confirmationPlan, selectedPlan} = this.state;
let {confirmationPlan, selectedPlan} = this.state;
if (priceId) {
selectedPlan = priceId;
}
if (isPaidMember({member})) {
const subscription = getMemberSubscription({member});
const subscriptionId = subscription ? subscription.id : '';
@ -459,16 +437,18 @@ export default class AccountPlanPage extends React.Component {
if (confirmationType === 'cancel') {
return this.onCancelSubscriptionConfirmation(data);
} else if (['changePlan', 'subscribe'].includes(confirmationType)) {
return this.onPlanCheckout(data);
return this.onPlanCheckout();
}
}
render() {
const plans = this.prices;
const {selectedPlan, showConfirmation, confirmationPlan, confirmationType} = this.state;
const {lastPage} = this.context;
return (
<>
<div className='gh-portal-content'>
<BackButton onClick={e => this.onBack(e)} hidden={!lastPage && !showConfirmation} />
<CloseButton />
<Header
onBack={e => this.onBack(e)}

22
ghost/portal/src/components/pages/AccountPlanPage.test.js
View file

@ -12,13 +12,15 @@ const setup = (overrides) => {
}
}
);
const monthlyCheckboxEl = utils.getByLabelText('Monthly');
const yearlyCheckboxEl = utils.getByLabelText('Yearly');
const monthlyCheckboxEl = utils.queryByRole('button', {name: 'Monthly'});
const yearlyCheckboxEl = utils.queryByRole('button', {name: 'Yearly'});
const continueBtn = utils.queryByRole('button', {name: 'Continue'});
const chooseBtns = utils.queryAllByRole('button', {name: 'Choose'});
return {
monthlyCheckboxEl,
yearlyCheckboxEl,
continueBtn,
chooseBtns,
mockOnActionFn,
context,
...utils
@ -44,26 +46,24 @@ const customSetup = (overrides) => {
describe('Account Plan Page', () => {
test('renders', () => {
const {monthlyCheckboxEl, yearlyCheckboxEl, continueBtn} = setup();
const {monthlyCheckboxEl, yearlyCheckboxEl, chooseBtns} = setup();
expect(monthlyCheckboxEl).toBeInTheDocument();
expect(yearlyCheckboxEl).toBeInTheDocument();
expect(continueBtn).toBeInTheDocument();
expect(chooseBtns).toHaveLength(1);
});
test('can choose plan and continue', async () => {
const siteData = getSiteData({
products: getProductsData({numOfProducts: 1})
});
const {mockOnActionFn, monthlyCheckboxEl, yearlyCheckboxEl, continueBtn} = setup({site: siteData});
const {mockOnActionFn, monthlyCheckboxEl, yearlyCheckboxEl, chooseBtns} = setup({site: siteData});
fireEvent.click(monthlyCheckboxEl);
expect(monthlyCheckboxEl.checked).toEqual(false);
expect(monthlyCheckboxEl.className).toEqual('gh-portal-btn active');
fireEvent.click(yearlyCheckboxEl);
expect(yearlyCheckboxEl.checked).toEqual(true);
expect(continueBtn).toBeEnabled();
fireEvent.click(continueBtn);
expect(mockOnActionFn).toHaveBeenCalledWith('checkoutPlan', {plan: siteData.products[0].monthlyPrice.id});
expect(yearlyCheckboxEl.className).toEqual('gh-portal-btn active');
fireEvent.click(chooseBtns[0]);
expect(mockOnActionFn).toHaveBeenCalledWith('checkoutPlan', {plan: siteData.products[0].yearlyPrice.id});
});
test('can cancel subscription for member on hidden tier', async () => {

388
ghost/portal/src/components/pages/OfferPage.js
View file

@ -3,216 +3,126 @@ import AppContext from '../../AppContext';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
import CloseButton from '../common/CloseButton';
import InputForm from '../common/InputForm';
import {getCurrencySymbol, getProductFromId, hasMultipleProductsFeature, isSameCurrency} from '../../utils/helpers';
import {getCurrencySymbol, getProductFromId, hasMultipleProductsFeature, isSameCurrency, formatNumber} from '../../utils/helpers';
import {ValidateInputForm} from '../../utils/form';
const React = require('react');
export const OfferPageStyles = `
.gh-portal-offer {
padding-bottom: 0;
overflow: unset;
max-height: unset;
}
export const OfferPageStyles = ({site}) => {
return `
.gh-portal-offer {
padding-bottom: 0;
overflow: unset;
max-height: unset;
}
.gh-portal-offer h4 {
color: var(--grey0);
margin: 0 0 7px;
}
.gh-portal-offer-container {
display: flex;
flex-direction: column;
}
.gh-portal-offer p {
color: var(--grey3);
font-size: 1.25rem;
font-weight: 400;
margin: 0 0 6px;
}
.gh-portal-plans-container.offer {
justify-content: space-between;
border-color: var(--grey12);
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: 12px 16px;
font-size: 1.3rem;
}
.gh-portal-offer-container {
display: flex;
flex-direction: column;
}
.gh-portal-offer-bar {
position: relative;
padding: 26px 28px 28px;
margin-bottom: 24px;
/*border: 1px dashed var(--brandcolor);*/
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='99.9%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23C3C3C3' stroke-width='3' stroke-dasharray='3%2c 9' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: 6px;
}
.gh-portal-plans-container.offer {
justify-content: space-between;
border-color: var(--grey12);
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: 12px 16px;
font-size: 1.3rem;
}
.gh-portal-offer-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.gh-portal-offer-bar {
position: relative;
padding: 20px;
margin-bottom: 24px;
}
.gh-portal-offer-title h4 {
font-size: 1.8rem;
margin: 0 80px 0 0;
width: 100%;
}
.gh-portal-offer-bar::before {
border-radius: 5px;
position: absolute;
display: block;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--brandcolor);
opacity: 0.1;
z-index: -1;
}
.gh-portal-offer-title h4.placeholder {
opacity: 0.4;
}
.gh-portal-offer-title {
display: flex;
justify-content: space-between;
margin-right: -20px;
}
.gh-portal-offer-bar .gh-portal-discount-label {
position: absolute;
top: 23px;
right: 25px;
}
.gh-portal-offer-title h4 {
font-weight: 500;
font-size: 1.7rem;
margin-bottom: 0;
line-height: 1.3em;
}
.gh-portal-offer-bar p {
padding-bottom: 0;
margin: 12px 0 0;
}
.gh-portal-offer-tag {
background: var(--brandcolor);
color: #fff;
padding: 4px 8px 4px 12px;
font-weight: 500;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 999px 0 0 999px;
max-height: 22px;
white-space: nowrap;
}
.gh-portal-offer-title h4 + p {
margin: 12px 0 0;
}
.gh-portal-offer-bar p {
padding-bottom: 0;
font-size: 1.35rem;
}
.gh-portal-offer-details .gh-portal-plan-name,
.gh-portal-offer-details p {
margin-right: 8px;
}
.gh-portal-offer-title h4 + p {
margin: 12px 0 0;
}
.gh-portal-offer .footnote {
font-size: 1.35rem;
color: var(--grey8);
margin: 4px 0 0;
}
.gh-portal-offer-details .gh-portal-plan-name,
.gh-portal-offer-details p {
margin-right: 8px;
}
.offer .gh-portal-product-card {
max-width: unset;
min-height: 0;
}
.gh-portal-offer .gh-portal-plan-section {
cursor: auto;
padding: 20px;
flex-direction: row;
justify-content: space-between;
}
.offer .gh-portal-product-card .gh-portal-product-card-pricecontainer {
margin-top: 0px;
}
.gh-portal-offer .gh-portal-plan-section:before {
display: none;
}
.offer .gh-portal-product-card-header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.gh-portal-offer-container.bordered {
border: 1px solid var(--grey11) !important;
border-radius: 5px;
margin-bottom: 5px;
}
.gh-portal-offer-oldprice {
display: flex;
position: relative;
font-size: 1.8rem;
font-weight: 300;
color: var(--grey8);
line-height: 1;
white-space: nowrap;
margin: 16px 0 4px;
}
.gh-portal-offer-container.bordered p.footnote {
margin: 0;
}
.gh-portal-offer-oldprice:after {
position: absolute;
display: block;
content: "";
left: 0;
top: 50%;
right: 0;
height: 1px;
background: var(--grey8);
}
.gh-portal-offer-container.bordered .gh-portal-plan-section {
padding: 12px 20px;
}
.gh-portal-offer-planname {
padding-right: 20px;
}
.gh-portal-offer .gh-portal-plan-name {
margin: 0;
text-align: left;
line-height: 1.5em;
}
.gh-portal-offer .footnote {
color: var(--grey7);
margin: 0 0 12px;
}
.gh-portal-offer-price {
display: flex;
flex-direction: column;
align-items: flex-end;
margin: 0;
}
.gh-portal-offer-price .old {
text-decoration: line-through;
color: var(--grey5);
line-height: 1;
white-space: nowrap;
}
.gh-portal-offer-price .new {
display: flex;
align-items: flex-start;
margin-top: 6px;
white-space: nowrap;
}
.gh-portal-offer-price .new .currency {
font-weight: 500;
line-height: 1;
font-size: 1.5rem;
margin-right: 1px;
white-space: nowrap;
}
.gh-portal-offer-price .new .value {
font-size: 2.4rem;
font-weight: 500;
white-space: nowrap;
}
.gh-portal-offer-details p {
margin-bottom: 12px;
}
.gh-portal-offer .gh-portal-product-benefit {
margin-bottom: 4px;
}
.gh-portal-offer .gh-portal-singleproduct-benefits {
padding: 16px 20px 12px !important
}
.gh-portal-offer .gh-portal-singleproduct-benefits:not(.no-benefits) .gh-portal-product-description {
text-align: left;
padding-left: 0;
}
.gh-portal-offer .gh-portal-singleproduct-benefits .gh-portal-product-benefit {
padding: 0;
}
.gh-portal-offer .gh-portal-singleproduct-benefits:not(.no-benefits) .gh-portal-product-description {
border: none;
padding-bottom: 0;
}
.gh-portal-offer .gh-portal-product-benefits {
padding-bottom: 0;
}
.gh-portal-offer-planname .gh-portal-offer-tag {
display: inline-block;
border-radius: 0 999px 999px 0;
margin: -8px 0 0 -20px;
padding-left: 20px;
}
`;
.gh-portal-offer-details p {
margin-bottom: 12px;
}
`;
};
export default class OfferPage extends React.Component {
static contextType = AppContext;
@ -386,6 +296,7 @@ export default class OfferPage extends React.Component {
label={label}
isRunning={isRunning}
tabIndex='3'
classes={'sticky bottom'}
/>
);
}
@ -412,13 +323,20 @@ export default class OfferPage extends React.Component {
renderOfferTag() {
const {pageData: offer} = this.context;
if (offer.amount <= 0) {
return (
<></>
);
}
if (offer.type === 'fixed') {
return (
<h5 className="gh-portal-offer-tag">{getCurrencySymbol(offer.currency)}{offer.amount / 100} off</h5>
<h5 className="gh-portal-discount-label">{getCurrencySymbol(offer.currency)}{offer.amount / 100} off</h5>
);
}
return (
<h5 className="gh-portal-offer-tag">{offer.amount}% off</h5>
<h5 className="gh-portal-discount-label">{offer.amount}% off</h5>
);
}
@ -431,7 +349,7 @@ export default class OfferPage extends React.Component {
return (
<div className="gh-portal-product-benefit" key={`${benefit.name}-${idx}`}>
<CheckmarkIcon className='gh-portal-benefit-checkmark' />
<span className="gh-portal-product-benefit">{benefit.name}</span>
<div className="gh-portal-benefit-title">{benefit.name}</div>
</div>
);
});
@ -525,75 +443,55 @@ export default class OfferPage extends React.Component {
const price = offer.cadence === 'month' ? product.monthlyPrice : product.yearlyPrice;
const updatedPrice = this.getUpdatedPrice({offer, product});
const benefits = product.benefits || [];
let planNameContainerClass = 'gh-portal-plans-container gh-portal-offer-container has-multiple-products';
planNameContainerClass += !benefits.length && !product.description ? ' bordered' : '';
const currencyClass = (getCurrencySymbol(price.currency)).length > 1 ? 'long' : '';
return (
<>
<div className='gh-portal-content gh-portal-offer'>
<CloseButton />
{this.renderFormHeader()}
{(offer.display_title || offer.display_description ?
<div className="gh-portal-offer-bar">
<div className="gh-portal-offer-title">
<div>
{(offer.display_title ?
<h4>{offer.display_title}</h4>
: '')}
{(offer.display_description ? <p>{offer.display_description}</p> : '')}
</div>
{this.renderOfferTag()}
</div>
<div className="gh-portal-offer-bar">
<div className="gh-portal-offer-title">
{(offer.display_title ? <h4>{offer.display_title}</h4> : <h4 className='placeholder'>Black Friday</h4>)}
{this.renderOfferTag()}
</div>
: '')}
{(offer.display_description ? <p>{offer.display_description}</p> : '')}
</div>
{this.renderForm()}
<div className={planNameContainerClass}>
<div className="gh-portal-plan-section">
<div className="gh-portal-offer-planname">
{(!offer.display_title && !offer.display_description ?
this.renderOfferTag()
: '')}
<h4 className="gh-portal-plan-name">{product.name} - {(offer.cadence === 'month' ? 'Monthly' : 'Yearly')}</h4>
{(!benefits.length && !product.description ?
this.renderOfferMessage({offer, product})
: '')}
</div>
<div className="gh-portal-plan-pricelabel">
<div className="gh-portal-plan-pricecontainer">
<div className="gh-portal-offer-price">
<div className="old">{getCurrencySymbol(price.currency)}{price.amount / 100}</div>
<div className="new">
<span className="currency">{getCurrencySymbol(price.currency)}</span>
<span className="value">{this.renderRoundedPrice(updatedPrice)}</span>
</div>
</div>
<div className='gh-portal-product-card top'>
<div className='gh-portal-product-card-header'>
<h4 className="gh-portal-product-name">{product.name} - {(offer.cadence === 'month' ? 'Monthly' : 'Yearly')}</h4>
<div className="gh-portal-offer-oldprice">{getCurrencySymbol(price.currency)} {formatNumber(price.amount / 100)}</div>
<div className="gh-portal-product-card-pricecontainer">
<div className="gh-portal-product-price">
<span className={'currency-sign ' + currencyClass}>{getCurrencySymbol(price.currency)}</span>
<span className="amount">{formatNumber(this.renderRoundedPrice(updatedPrice))}</span>
<span className="billing-period">/year</span>
</div>
</div>
{this.renderOfferMessage({offer, product})}
</div>
</div>
{(benefits.length || product.description ?
<div className="gh-portal-singleproduct-benefits gh-portal-product-benefits">
{(product.description ?
<div className="gh-portal-product-description">{product.description}</div>
: '')}
{(benefits.length ?
this.renderBenefits({product})
: '')}
{this.renderOfferMessage({offer, product})}
<div>
<div className='gh-portal-product-card bottom'>
<div className='gh-portal-product-card-detaildata'>
{(product.description ? <div className="gh-portal-product-description">{product.description}</div> : '')}
{(benefits.length ? this.renderBenefits({product}) : '')}
</div>
</div>
: '')}
<div className='gh-portal-btn-container sticky m32'>
{this.renderSubmitButton()}
</div>
{this.renderLoginMessage()}
</div>
</div>
<footer className='gh-portal-signup-footer'>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
</footer>
</>
);
}

26
ghost/portal/src/components/pages/SigninPage.js
View file

@ -1,5 +1,6 @@
import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
// import SiteTitleBackButton from '../common/SiteTitleBackButton';
import AppContext from '../../AppContext';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
@ -133,12 +134,12 @@ export default class SigninPage extends React.Component {
}
renderFormHeader() {
const siteTitle = this.context.site.title || 'Site Title';
// const siteTitle = this.context.site.title || 'Site Title';
return (
<header className='gh-portal-signin-header'>
{this.renderSiteLogo()}
<h2 className="gh-portal-main-title">Log in to {siteTitle}</h2>
<h1 className="gh-portal-main-title">Sign in</h1>
</header>
);
}
@ -146,15 +147,20 @@ export default class SigninPage extends React.Component {
render() {
return (
<>
<div className='gh-portal-content signin'>
<CloseButton />
{this.renderFormHeader()}
{this.renderForm()}
{/* <div className='gh-portal-back-sitetitle'>
<SiteTitleBackButton />
</div> */}
<CloseButton />
<div className='gh-portal-logged-out-form-container'>
<div className='gh-portal-content signin'>
{this.renderFormHeader()}
{this.renderForm()}
</div>
<footer className='gh-portal-signin-footer'>
{this.renderSubmitButton()}
{this.renderSignupMessage()}
</footer>
</div>
<footer className='gh-portal-signin-footer'>
{this.renderSubmitButton()}
{this.renderSignupMessage()}
</footer>
</>
);
}

557
ghost/portal/src/components/pages/SignupPage.js
View file

@ -1,234 +1,209 @@
import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
import AppContext from '../../AppContext';
import PlansSection, {SingleProductPlansSection} from '../common/PlansSection';
import CloseButton from '../common/CloseButton';
import SiteTitleBackButton from '../common/SiteTitleBackButton';
import ProductsSection from '../common/ProductsSection';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
import {getSiteProducts, getSitePrices, hasMultipleProducts, hasOnlyFreePlan, isInviteOnlySite, getAvailableProducts, hasMultipleProductsFeature, freeHasBenefitsOrDescription} from '../../utils/helpers';
import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, getFreeProductBenefits, getFreeTierDescription} from '../../utils/helpers';
import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
import {ReactComponent as GhostLogo} from '../../images/ghost-logo-small.svg';
const React = require('react');
export const SignupPageStyles = `
.gh-portal-back-sitetitle {
position: absolute;
top: 35px;
left: 32px;
}
.gh-portal-back-sitetitle .gh-portal-btn {
padding: 0;
border: 0;
font-size: 1.5rem;
height: auto;
line-height: 1em;
color: var(--grey1);
}
.gh-portal-popup-wrapper:not(.full-size) .gh-portal-back-sitetitle,
.gh-portal-popup-wrapper.preview .gh-portal-back-sitetitle {
display: none;
}
.gh-portal-signup-logo {
position: relative;
display: block;
background-position: 50%;
background-size: cover;
border-radius: 2px;
width: 60px;
height: 60px;
margin: 12px 0 10px;
}
.gh-portal-signup-header,
.gh-portal-signin-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 32px;
margin-bottom: 32px;
}
.gh-portal-popup-wrapper.full-size .gh-portal-signup-header {
margin-top: 32px;
}
.gh-portal-signup-header .gh-portal-main-title,
.gh-portal-signin-header .gh-portal-main-title {
margin-top: 12px;
}
.gh-portal-signup-logo + .gh-portal-main-title {
margin: 4px 0 0;
}
.gh-portal-signup-header .gh-portal-main-subtitle {
font-size: 1.5rem;
text-align: center;
line-height: 1.45em;
margin: 4px 0 0;
color: var(--grey3);
}
.gh-portal-logged-out-form-container {
width: 100%;
max-width: 420px;
margin: 0 auto;
}
.signup .gh-portal-input-section:last-of-type {
margin-bottom: 40px;
}
.gh-portal-signup-message {
display: flex;
justify-content: center;
color: var(--grey4);
font-size: 1.5rem;
margin-top: 8px;
}
.full-size .gh-portal-signup-message {
margin-bottom: 40px;
}
@media (max-width: 480px) {
.preview .gh-portal-products + .gh-portal-signup-message {
margin-bottom: 40px;
}
}
.gh-portal-signup-message button {
font-size: 1.4rem;
font-weight: 600;
margin-left: 4px !important;
}
.gh-portal-signup-message button span {
display: inline-block;
padding-bottom: 2px;
margin-bottom: -2px;
}
.gh-portal-content.signup.invite-only {
background: none;
}
footer.gh-portal-signup-footer,
footer.gh-portal-signin-footer {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-top: 24px;
height: unset;
}
.gh-portal-content.signup,
.gh-portal-content.signin {
max-height: unset !important;
padding-bottom: 0;
}
.gh-portal-content.signin {
padding-bottom: 4px;
}
.gh-portal-content.signup .gh-portal-section {
margin-bottom: 0;
}
.gh-portal-content.signup.noplan {
margin-bottom: -8px;
}
.gh-portal-content.signup.single-field {
margin-bottom: 4px;
}
.gh-portal-content.signup.single-field .gh-portal-input,
.gh-portal-content.signin .gh-portal-input {
margin-bottom: 8px;
}
.gh-portal-content.signup.single-field + .gh-portal-signup-footer,
footer.gh-portal-signin-footer {
padding-top: 12px;
}
.gh-portal-content.signin .gh-portal-section {
margin-bottom: 0;
}
footer.gh-portal-signup-footer.invite-only {
height: unset;
}
footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
margin-top: 0;
}
.gh-portal-invite-only-notification {
margin: 8px 32px 24px;
padding: 0;
text-align: center;
color: var(--grey2);
}
.gh-portal-icon-invitation {
width: 44px;
height: 44px;
margin: 12px 0 2px;
}
.gh-portal-popup-wrapper.full-size .gh-portal-popup-container.preview footer.gh-portal-signup-footer {
padding-bottom: 32px;
}
@media (min-width: 480px) {
}
@media (max-width: 480px) {
.gh-portal-signup-logo {
position: relative;
display: block;
background-position: 50%;
background-size: cover;
border-radius: 2px;
width: 56px;
height: 56px;
margin: 12px 0 10px;
width: 48px;
height: 48px;
}
}
.gh-portal-signup-header,
.gh-portal-signin-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 32px 24px;
}
.gh-portal-signup-header .gh-portal-main-title,
.gh-portal-signin-header .gh-portal-main-title {
margin-top: 12px;
}
.gh-portal-signup-logo + .gh-portal-main-title {
margin: 4px 0 0;
}
.gh-portal-signup-header .gh-portal-main-subtitle {
font-size: 1.5rem;
text-align: center;
line-height: 1.45em;
margin: 4px 0 0;
color: var(--grey3);
}
.gh-portal-signup-header.nodivider {
border: none;
margin-bottom: 0;
}
.gh-portal-signup-message {
display: flex;
justify-content: center;
color: var(--grey4);
font-size: 1.3rem;
letter-spacing: 0.2px;
margin-top: 8px;
}
.gh-portal-signup-message button {
font-size: 1.3rem;
font-weight: 600;
margin-left: 4px;
}
.gh-portal-signup-message button span {
display: inline-block;
padding-bottom: 2px;
margin-bottom: -2px;
}
.gh-portal-content.signup.invite-only {
background: none;
}
footer.gh-portal-signup-footer,
footer.gh-portal-signin-footer {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-top: 24px;
height: unset;
}
.gh-portal-content.signup,
.gh-portal-content.signin {
max-height: unset !important;
padding-bottom: 0;
}
.gh-portal-content.signin {
padding-bottom: 4px;
}
.gh-portal-content.signup .gh-portal-section {
margin-bottom: 0;
}
.gh-portal-content.signup.noplan {
margin-bottom: -8px;
}
.gh-portal-content.signup.single-field {
margin-bottom: 4px;
}
.gh-portal-content.signup.single-field .gh-portal-input,
.gh-portal-content.signin .gh-portal-input {
margin-bottom: 8px;
}
.gh-portal-content.signup.single-field + .gh-portal-signup-footer,
footer.gh-portal-signin-footer {
padding-top: 12px;
}
.gh-portal-content.signin .gh-portal-section {
margin-bottom: 0;
}
.gh-portal-content.signup.single-field + footer.gh-portal-signup-footer,
.gh-portal-content.signin + footer.gh-portal-signin-footer {
height: 120px;
}
footer.gh-portal-signup-footer.invite-only {
height: unset;
}
footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
margin-top: 0;
}
.gh-portal-popup-wrapper.multiple-products .gh-portal-powered {
display: flex;
margin-top: 48px;
margin-bottom: 0;
padding-bottom: 0 !important;
}
.gh-portal-invite-only-notification {
margin: 8px 32px;
padding: 0;
text-align: center;
color: var(--grey2);
}
.gh-portal-icon-invitation {
width: 44px;
height: 44px;
margin: 12px 0 2px;
}
/* Multiple products signup */
.gh-portal-popup-wrapper.signup.multiple-products .gh-portal-content,
.gh-portal-popup-wrapper.signin.multiple-products .gh-portal-content {
width: 100%;
background: #fff;
}
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer,
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
flex: 1;
width: 100%;
height: unset;
padding: 0 32px !important;
margin: 24px 32px;
}
.gh-portal-popup-wrapper.multiple-products footer .gh-portal-btn {
max-width: 420px;
}
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
padding-top: 24px;
}
.gh-portal-powered.multiple-products.signup {
display: none;
}
@media (max-width: 480px) {
.gh-portal-popup-wrapper.multiple-products .gh-portal-powered {
margin-top: 0;
margin-bottom: -32px;
}
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer,
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
max-width: unset;
padding: 0 32px !important;
}
.gh-portal-popup-wrapper.multiple-products.preview footer.gh-portal-signup-footer,
.gh-portal-popup-wrapper.multiple-products.preview footer.gh-portal-signin-footer {
padding-bottom: 32px !important;
}
.gh-portal-popup-wrapper.signup.multiple-products.preview .gh-portal-content,
.gh-portal-popup-wrapper.signin.multiple-products.preview .gh-portal-content {
overflow: unset;
}
}
@media (max-width: 390px) {
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer,
.gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer {
padding: 0 24px !important;
}
}
@media (min-width: 480px) and (max-width: 820px) {
.gh-portal-powered.outside {
left: 50%;
transform: translateX(-50%);
}
}
@media (min-width: 480px) {
.gh-portal-popup-wrapper:not(.multiple-products) .gh-portal-powered {
display: none;
}
@media (min-width: 480px) and (max-width: 820px) {
.gh-portal-powered.outside {
left: 50%;
transform: translateX(-50%);
}
}
`;
class SignupPage extends React.Component {
@ -294,6 +269,25 @@ class SignupPage extends React.Component {
});
}
handleChooseSignup(e, plan) {
e.preventDefault();
this.setState((state) => {
return {
errors: ValidateInputForm({fields: this.getInputFields({state})})
};
}, () => {
const {onAction} = this.context;
const {name, email, errors} = this.state;
const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
if (!hasFormErrors) {
onAction('signup', {name, email, plan});
this.setState({
errors: {}
});
}
});
}
handleInputChange(e, field) {
const fieldName = field.name;
const value = e.target.value;
@ -385,6 +379,8 @@ class SignupPage extends React.Component {
let label = 'Continue';
if (hasOnlyFreePlan({site})) {
label = 'Sign up';
} else {
return null;
}
let isRunning = false;
@ -413,40 +409,13 @@ class SignupPage extends React.Component {
);
}
renderPlans() {
const {site, pageQuery} = this.context;
const prices = getSitePrices({site, pageQuery});
if (hasMultipleProductsFeature({site})) {
const availableProducts = getAvailableProducts({site});
const product = availableProducts?.[0];
return (
<SingleProductPlansSection
product={product}
plans={prices}
selectedPlan={this.state.plan}
onPlanSelect={(e, id) => {
this.handleSelectPlan(e, id);
}}
/>
);
}
return (
<PlansSection
plans={prices}
selectedPlan={this.state.plan}
onPlanSelect={(e, id) => {
this.handleSelectPlan(e, id);
}}
/>
);
}
renderProducts() {
const {site, pageQuery} = this.context;
const products = getSiteProducts({site, pageQuery});
return (
<>
<ProductsSection
handleChooseSignup={(...args) => this.handleChooseSignup(...args)}
products={products}
onPlanSelect={this.handleSelectPlan}
/>
@ -470,15 +439,6 @@ class SignupPage extends React.Component {
);
}
renderProductsOrPlans() {
const {site} = this.context;
if (hasMultipleProducts({site})) {
return this.renderProducts();
} else {
return this.renderPlans();
}
}
renderForm() {
const fields = this.getInputFields({state: this.state});
const {site, pageQuery} = this.context;
@ -488,20 +448,40 @@ class SignupPage extends React.Component {
<section>
<div className='gh-portal-section'>
<p className='gh-portal-invite-only-notification'>This site is invite-only, contact the owner for access.</p>
{this.renderLoginMessage()}
</div>
</section>
);
}
const freeBenefits = getFreeProductBenefits({site});
const freeDescription = getFreeTierDescription({site});
const hasOnlyFree = hasOnlyFreeProduct({site});
const sticky = freeBenefits.length || freeDescription;
return (
<section>
<div className='gh-portal-section'>
<InputForm
fields={fields}
onChange={(e, field) => this.handleInputChange(e, field)}
onKeyDown={e => this.onKeyDown(e)}
/>
{this.renderProductsOrPlans()}
<div className='gh-portal-logged-out-form-container'>
<InputForm
fields={fields}
onChange={(e, field) => this.handleInputChange(e, field)}
onKeyDown={e => this.onKeyDown(e)}
/>
</div>
<div>
{this.renderProducts()}
{(hasOnlyFree ?
<div className={'gh-portal-btn-container' + (sticky ? ' sticky m24' : '')}>
<div className='gh-portal-logged-out-form-container'>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
</div>
</div>
:
this.renderLoginMessage())}
</div>
</div>
</section>
);
@ -533,7 +513,7 @@ class SignupPage extends React.Component {
return (
<header className='gh-portal-signup-header'>
{this.renderSiteLogo()}
<h2 className="gh-portal-main-title">{siteTitle}</h2>
<h1 className="gh-portal-main-title">{siteTitle}</h1>
</header>
);
}
@ -563,64 +543,23 @@ class SignupPage extends React.Component {
return {sectionClass, footerClass};
}
renderMultipleProducts() {
let {sectionClass, footerClass} = this.getClassNames();
return (
<>
<div className={'gh-portal-content signup' + sectionClass}>
<CloseButton />
{this.renderFormHeader()}
{this.renderForm()}
</div>
<footer className={'gh-portal-signup-footer ' + footerClass}>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
</footer>
</>
);
}
renderSingleProduct() {
let {sectionClass, footerClass} = this.getClassNames();
return (
<>
<div className={'gh-portal-content signup ' + sectionClass}>
<CloseButton />
{this.renderFormHeader()}
{this.renderForm()}
</div>
<footer className={'gh-portal-signup-footer ' + footerClass}>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
</footer>
</>
);
}
render() {
let {sectionClass, footerClass} = this.getClassNames();
let {sectionClass} = this.getClassNames();
return (
<>
<div className='gh-portal-back-sitetitle'>
<SiteTitleBackButton />
</div>
<CloseButton />
<div className={'gh-portal-content signup ' + sectionClass}>
<CloseButton />
{this.renderFormHeader()}
{this.renderForm()}
</div>
<footer className={'gh-portal-signup-footer ' + footerClass}>
{/* <footer className={'gh-portal-signup-footer gh-portal-logged-out-form-container ' + footerClass}>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
<div className="gh-portal-powered inside">
<a href='https://ghost.org' target='_blank' rel='noopener noreferrer' onClick={() => {
window.open('https://ghost.org', '_blank');
}}>
<GhostLogo />
<span>Powered by Ghost</span>
</a>
</div>
</footer>
</footer> */}
</>
);
}

10
ghost/portal/src/components/pages/SignupPage.test.js
View file

@ -14,11 +14,13 @@ const setup = (overrides) => {
const emailInput = utils.getByLabelText(/email/i);
const nameInput = utils.getByLabelText(/name/i);
const submitButton = utils.queryByRole('button', {name: 'Continue'});
const chooseButton = utils.queryAllByRole('button', {name: 'Choose'});
const signinButton = utils.queryByRole('button', {name: 'Sign in'});
return {
nameInput,
emailInput,
submitButton,
chooseButton,
signinButton,
mockOnActionFn,
...utils
@ -27,16 +29,16 @@ const setup = (overrides) => {
describe('SignupPage', () => {
test('renders', () => {
const {nameInput, emailInput, submitButton, signinButton} = setup();
const {nameInput, emailInput, chooseButton, signinButton} = setup();
expect(nameInput).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseButton).toHaveLength(2);
expect(signinButton).toBeInTheDocument();
});
test('can call signup action with name, email and plan', () => {
const {nameInput, emailInput, submitButton, mockOnActionFn} = setup();
const {nameInput, emailInput, chooseButton, mockOnActionFn} = setup();
const nameVal = 'J Smith';
const emailVal = 'jsmith@example.com';
const planVal = 'free';
@ -46,7 +48,7 @@ describe('SignupPage', () => {
expect(nameInput).toHaveValue(nameVal);
expect(emailInput).toHaveValue(emailVal);
fireEvent.click(submitButton);
fireEvent.click(chooseButton[0]);
expect(mockOnActionFn).toHaveBeenCalledWith('signup', {email: emailVal, name: nameVal, plan: planVal});
});

4
ghost/portal/src/images/icons/checkmark.svg
View file

@ -1 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><polyline id="Path" class="a" points="1.6 14.5120847 8.66491448 21.5769992 22.3412274 2.5769992"></polyline></g></svg>
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 6.89286L6.10714 12L13.9643 1" stroke="#222222" stroke-width="2"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 429 B

After

Width:  |  Height:  |  Size: 180 B

2
ghost/portal/src/images/icons/close.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px}</style></defs><path class="a" d="M.75 23.249l22.5-22.5M23.25 23.249L.75.749"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px !important;}</style></defs><path class="a" d="M.75 23.249l22.5-22.5M23.25 23.249L.75.749"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 253 B

After

Width:  |  Height:  |  Size: 265 B

85
ghost/portal/src/tests/SignupFlow.test.js
View file

@ -37,9 +37,10 @@ const offerSetup = async ({site, member = null, offer}) => {
const emailInput = within(popupIframeDocument).queryByLabelText(/email/i);
const nameInput = within(popupIframeDocument).queryByLabelText(/name/i);
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const chooseBtns = within(popupIframeDocument).queryAllByRole('button', {name: 'Choose'});
const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(popupIframeDocument).queryByText(site.title);
const offerName = within(popupIframeDocument).queryByText(offer.name);
const offerName = within(popupIframeDocument).queryByText(offer.display_title);
const offerDescription = within(popupIframeDocument).queryByText(offer.display_description);
const freePlanTitle = within(popupIframeDocument).queryByText('Free');
@ -56,6 +57,7 @@ const offerSetup = async ({site, member = null, offer}) => {
nameInput,
signinButton,
submitButton,
chooseBtns,
freePlanTitle,
monthlyPlanTitle,
yearlyPlanTitle,
@ -93,6 +95,7 @@ const setup = async ({site, member = null}) => {
const emailInput = within(popupIframeDocument).queryByLabelText(/email/i);
const nameInput = within(popupIframeDocument).queryByLabelText(/name/i);
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const chooseBtns = within(popupIframeDocument).queryAllByRole('button', {name: 'Choose'});
const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(popupIframeDocument).queryByText(site.title);
const freePlanTitle = within(popupIframeDocument).queryByText('Free');
@ -109,6 +112,7 @@ const setup = async ({site, member = null}) => {
nameInput,
signinButton,
submitButton,
chooseBtns,
freePlanTitle,
monthlyPlanTitle,
yearlyPlanTitle,
@ -144,6 +148,7 @@ const multiTierSetup = async ({site, member = null}) => {
const emailInput = within(popupIframeDocument).queryByLabelText(/email/i);
const nameInput = within(popupIframeDocument).queryByLabelText(/name/i);
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const chooseBtns = within(popupIframeDocument).queryAllByRole('button', {name: 'Choose'});
const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(popupIframeDocument).queryByText(site.title);
const freePlanTitle = within(popupIframeDocument).queryAllByText(/free$/i);
@ -166,6 +171,7 @@ const multiTierSetup = async ({site, member = null}) => {
yearlyPlanTitle,
fullAccessTitle,
freePlanDescription,
chooseBtns,
...utils
};
};
@ -174,8 +180,8 @@ describe('Signup', () => {
describe('as free member on single tier site', () => {
test('with default settings', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, fullAccessTitle
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, chooseBtns
} = await setup({
site: FixtureSite.singleTier.basic
});
@ -188,16 +194,17 @@ describe('Signup', () => {
expect(freePlanTitle).toBeInTheDocument();
expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument();
expect(fullAccessTitle).toBeInTheDocument();
// expect(fullAccessTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
// expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2);
fireEvent.change(nameInput, {target: {value: 'Jamie Larsen'}});
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
expect(emailInput).toHaveValue('jamie@example.com');
expect(nameInput).toHaveValue('Jamie Larsen');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[0]);
expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
name: 'Jamie Larsen',
@ -209,8 +216,8 @@ describe('Signup', () => {
test('without name field', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, fullAccessTitle
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, chooseBtns
} = await setup({
site: FixtureSite.singleTier.withoutName
});
@ -223,14 +230,14 @@ describe('Signup', () => {
expect(freePlanTitle).toBeInTheDocument();
expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument();
expect(fullAccessTitle).toBeInTheDocument();
// expect(fullAccessTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2);
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
expect(emailInput).toHaveValue('jamie@example.com');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[0]);
expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
@ -286,8 +293,8 @@ describe('Signup', () => {
describe('as paid member on single tier site', () => {
test('with default settings on monthly plan', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, fullAccessTitle
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle
} = await setup({
site: FixtureSite.singleTier.basic
});
@ -300,9 +307,8 @@ describe('Signup', () => {
expect(freePlanTitle).toBeInTheDocument();
expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument();
expect(fullAccessTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2);
const monthlyPlanContainer = within(popupIframeDocument).queryByText(/Monthly$/);
const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid');
@ -316,19 +322,19 @@ describe('Signup', () => {
await within(popupIframeDocument).findByText(benefitText);
expect(emailInput).toHaveValue('jamie@example.com');
expect(nameInput).toHaveValue('Jamie Larsen');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[1]);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
name: 'Jamie Larsen',
offerId: undefined,
plan: singleTierProduct.monthlyPrice.id
plan: singleTierProduct.yearlyPrice.id
});
});
test('with default settings on yearly plan', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, fullAccessTitle
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle
} = await setup({
site: FixtureSite.singleTier.basic
});
@ -341,9 +347,8 @@ describe('Signup', () => {
expect(freePlanTitle).toBeInTheDocument();
expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument();
expect(fullAccessTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2);
const yearlyPlanContainer = within(popupIframeDocument).queryByText(/Yearly$/);
const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid');
@ -357,7 +362,7 @@ describe('Signup', () => {
await within(popupIframeDocument).findByText(benefitText);
expect(emailInput).toHaveValue('jamie@example.com');
expect(nameInput).toHaveValue('Jamie Larsen');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[1]);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
name: 'Jamie Larsen',
@ -370,8 +375,8 @@ describe('Signup', () => {
test('without name field on monthly plan', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle, fullAccessTitle
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle
} = await setup({
site: FixtureSite.singleTier.withoutName
});
@ -388,17 +393,16 @@ describe('Signup', () => {
expect(freePlanTitle).toBeInTheDocument();
expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument();
expect(fullAccessTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(2);
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
fireEvent.click(monthlyPlanContainer.parentNode);
fireEvent.click(monthlyPlanContainer);
await within(popupIframeDocument).findByText(benefitText);
expect(emailInput).toHaveValue('jamie@example.com');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[1]);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
@ -410,7 +414,7 @@ describe('Signup', () => {
test('with only paid plans available', async () => {
let {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, freePlanTitle, monthlyPlanTitle, yearlyPlanTitle
} = await setup({
site: FixtureSite.singleTier.onlyPaidPlan
@ -425,7 +429,7 @@ describe('Signup', () => {
expect(monthlyPlanTitle).toBeInTheDocument();
expect(yearlyPlanTitle).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(1);
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
fireEvent.change(nameInput, {target: {value: 'Jamie Larsen'}});
@ -433,14 +437,14 @@ describe('Signup', () => {
expect(emailInput).toHaveValue('jamie@example.com');
expect(nameInput).toHaveValue('Jamie Larsen');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[0]);
const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid');
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
name: 'Jamie Larsen',
offerId: undefined,
plan: singleTierProduct.monthlyPrice.id
plan: singleTierProduct.yearlyPrice.id
});
});
@ -524,7 +528,7 @@ describe('Signup', () => {
describe('as free member on multi tier site', () => {
test('with default settings', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle
} = await multiTierSetup({
site: FixtureSite.multipleTiers.basic
@ -537,14 +541,14 @@ describe('Signup', () => {
expect(nameInput).toBeInTheDocument();
expect(freePlanTitle[0]).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(4);
fireEvent.change(nameInput, {target: {value: 'Jamie Larsen'}});
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
expect(emailInput).toHaveValue('jamie@example.com');
expect(nameInput).toHaveValue('Jamie Larsen');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[0]);
expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
name: 'Jamie Larsen',
@ -556,7 +560,7 @@ describe('Signup', () => {
test('without name field', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle
} = await multiTierSetup({
site: FixtureSite.multipleTiers.withoutName
@ -569,12 +573,11 @@ describe('Signup', () => {
expect(nameInput).not.toBeInTheDocument();
expect(freePlanTitle[0]).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
expect(emailInput).toHaveValue('jamie@example.com');
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[0]);
expect(ghostApi.member.sendMagicLink).toHaveBeenLastCalledWith({
email: 'jamie@example.com',
@ -627,7 +630,7 @@ describe('Signup', () => {
describe('as paid member on multi tier site', () => {
test('with default settings', async () => {
const {
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, submitButton,
ghostApi, popupFrame, triggerButtonFrame, emailInput, nameInput, signinButton, chooseBtns,
siteTitle, popupIframeDocument, freePlanTitle
} = await multiTierSetup({
site: FixtureSite.multipleTiers.basic
@ -645,7 +648,7 @@ describe('Signup', () => {
expect(nameInput).toBeInTheDocument();
expect(freePlanTitle[0]).toBeInTheDocument();
expect(signinButton).toBeInTheDocument();
expect(submitButton).toBeInTheDocument();
expect(chooseBtns).toHaveLength(4);
fireEvent.change(nameInput, {target: {value: 'Jamie Larsen'}});
fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}});
@ -661,7 +664,7 @@ describe('Signup', () => {
// added fake timeout for react state delay in setting plan
await new Promise(r => setTimeout(r, 10));
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[1]);
await waitFor(() => expect(ghostApi.member.checkoutPlan).toHaveBeenCalledTimes(1));
});

23
ghost/portal/src/tests/UpgradeFlow.test.js
View file

@ -34,12 +34,16 @@ const offerSetup = async ({site, member = null, offer}) => {
const popupFrame = await utils.findByTitle(/portal-popup/i);
const triggerButtonFrame = utils.queryByTitle(/portal-trigger/i);
const popupIframeDocument = popupFrame.contentDocument;
const emailInput = within(popupIframeDocument).queryByLabelText(/email/i);
const nameInput = within(popupIframeDocument).queryByLabelText(/name/i);
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const chooseBtns = within(popupIframeDocument).queryAllByRole('button', {name: 'Choose'});
const signinButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign in'});
const siteTitle = within(popupIframeDocument).queryByText(site.title);
const offerName = within(popupIframeDocument).queryByText(offer.name);
const offerName = within(popupIframeDocument).queryByText(offer.display_title);
const offerDescription = within(popupIframeDocument).queryByText(offer.display_description);
const freePlanTitle = within(popupIframeDocument).queryByText('Free');
@ -56,6 +60,7 @@ const offerSetup = async ({site, member = null, offer}) => {
nameInput,
signinButton,
submitButton,
chooseBtns,
freePlanTitle,
monthlyPlanTitle,
yearlyPlanTitle,
@ -197,8 +202,12 @@ describe('Logged-in free member', () => {
const singleTierProduct = FixtureSite.singleTier.basic.products.find(p => p.type === 'paid');
fireEvent.click(viewPlansButton);
await within(popupIframeDocument).findByText('Monthly');
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const monthlyPlanContainer = await within(popupIframeDocument).findByText('Monthly');
fireEvent.click(monthlyPlanContainer);
// added fake timeout for react state delay in setting plan
await new Promise(r => setTimeout(r, 10));
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Choose'});
fireEvent.click(submitButton);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
@ -229,11 +238,11 @@ describe('Logged-in free member', () => {
fireEvent.click(viewPlansButton);
await within(popupIframeDocument).findByText('Monthly');
const yearlyPlanContainer = await within(popupIframeDocument).findByText('Yearly');
fireEvent.click(yearlyPlanContainer.parentNode);
fireEvent.click(yearlyPlanContainer);
// added fake timeout for react state delay in setting plan
await new Promise(r => setTimeout(r, 10));
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Choose'});
fireEvent.click(submitButton);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
@ -347,9 +356,9 @@ describe('Logged-in free member', () => {
// allow default checkbox switch to yearly
await new Promise(r => setTimeout(r, 10));
const submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Continue'});
const chooseBtns = within(popupIframeDocument).queryAllByRole('button', {name: 'Choose'});
fireEvent.click(submitButton);
fireEvent.click(chooseBtns[0]);
expect(ghostApi.member.checkoutPlan).toHaveBeenLastCalledWith({
metadata: {
checkoutType: 'upgrade'

2
ghost/portal/src/tests/data-attributes.test.js
View file

@ -303,7 +303,7 @@ describe('Portal Data attributes:', () => {
fireEvent.click(portalElement);
popupFrame = await utils.findByTitle(/portal-popup/i);
expect(popupFrame).toBeInTheDocument();
const loginTitle = within(popupFrame.contentDocument).queryByText(/log in/i);
const loginTitle = within(popupFrame.contentDocument).queryByText(/sign in/i);
expect(loginTitle).toBeInTheDocument();
});
});

2
ghost/portal/src/tests/portal-links.test.js
View file

@ -116,7 +116,7 @@ describe('Portal Data links:', () => {
expect(triggerButtonFrame).toBeInTheDocument();
popupFrame = await utils.findByTitle(/portal-popup/i);
expect(popupFrame).toBeInTheDocument();
const loginTitle = within(popupFrame.contentDocument).queryByText(/log in/i);
const loginTitle = within(popupFrame.contentDocument).queryByText(/sign in/i);
expect(loginTitle).toBeInTheDocument();
});
});

4
ghost/portal/src/utils/fixtures-generator.js
View file

@ -66,8 +66,8 @@ export function getSiteData({
export function getOfferData({
name = 'Black Friday',
code = 'black-friday',
displayTitle = 'Black Friday',
displayDescription = 'Special deal',
displayTitle = 'Black Friday Sale!',
displayDescription = 'Special deal for Black Friday. Subscribe now for only $15 per month and get additional benefits like accessing our podcast.',
type = 'percent',
cadence = 'month',
amount = 50,

30
ghost/portal/src/utils/fixtures.js
View file

@ -8,7 +8,7 @@ const products = [
name: 'Free',
description: 'Free tier description which is actually a pretty long description',
// description: '',
numOfBenefits: 0
numOfBenefits: 2
})
,
getProductData({
@ -17,13 +17,13 @@ const products = [
description: '',
monthlyPrice: getPriceData({
interval: 'month',
amount: 700
amount: 500
}),
yearlyPrice: getPriceData({
interval: 'year',
amount: 7000
amount: 5000
}),
numOfBenefits: 1
numOfBenefits: 3
})
,
getProductData({
@ -37,9 +37,24 @@ const products = [
interval: 'year',
amount: 11000
}),
numOfBenefits: 1
numOfBenefits: 4
})
// ,
// getProductData({
// name: 'Silver',
// description: 'Access to all members articles and weekly podcast',
// monthlyPrice: getPriceData({
// interval: 'month',
// amount: 1200
// }),
// yearlyPrice: getPriceData({
// interval: 'year',
// amount: 12000
// }),
// numOfBenefits: 3
// })
//
// ,
// getProductData({
// name: 'Friends of the Blueprint',
@ -146,7 +161,10 @@ export const member = {
};
export function paidMemberOnTier() {
let price = site?.products?.[2].monthlyPrice;
if (!products || !products[1]) {
return null;
}
let price = site?.products?.[1].monthlyPrice;
let updatedMember = getMemberData({
paid: true,
subscriptions: [

13
ghost/portal/src/utils/helpers.js
View file

@ -297,7 +297,7 @@ export function getSiteProducts({site, pageQuery}) {
if (showOnlyFree) {
return [];
}
if (hasFreeProductPrice({site}) && products.length > 0) {
if (hasFreeProductPrice({site})) {
products.unshift({
id: 'free'
});
@ -311,7 +311,11 @@ export function getFreeProductBenefits({site}) {
}
export function getFreeTierTitle({site}) {
return 'Free';
if (hasOnlyFreeProduct({site})) {
return 'Free membership';
} else {
return 'Free';
}
}
export function getFreeTierDescription({site}) {
@ -369,6 +373,11 @@ export function hasFreeProductPrice({site}) {
return allowSelfSignup && portalPlans.includes('free');
}
export function hasOnlyFreeProduct({site}) {
const products = getSiteProducts({site});
return (products.length === 1 && hasFreeProductPrice({site}));
}
export function getProductFromPrice({site, priceId}) {
if (priceId === 'free') {
return getFreeProduct({site});