Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-25 02:31:59 -05:00
Code Issues Activity

Fixed newsletter selection on offer page

Browse source 
- newsletter selection is moved inline instead of new page for offer signups
This commit is contained in:
Rishabh 2022-05-18 08:35:47 +05:30
parent 8ca7192d35
commit 6c776af10b
1 changed files with 59 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import CloseButton from '../common/CloseButton';
import InputForm from '../common/InputForm';
import {getCurrencySymbol, getProductFromId, hasMultipleProductsFeature, isSameCurrency, formatNumber, hasMultipleNewsletters} from '../../utils/helpers';
import {ValidateInputForm} from '../../utils/form';
import NewsletterSelectionPage from './NewsletterSelectionPage';
const React = require('react');
export const OfferPageStyles = ({site}) => {
@ -132,7 +133,8 @@ export default class OfferPage extends React.Component {
this.state = {
name: context?.member?.name || '',
email: context?.member?.email || '',
plan: 'free'
plan: 'free',
showNewsletterSelection: false
};
}
@ -213,10 +215,10 @@ export default class OfferPage extends React.Component {
offerId: offer?.id
};
if (hasMultipleNewsletters({site})) {
onAction('switchPage', {
page: 'signupNewsletter',
lastPage: 'signup',
pageData: signupData
this.setState({
showNewsletterSelection: true,
pageData: signupData,
errors: {}
});
} else {
onAction('signup', signupData);
@ -266,6 +268,19 @@ export default class OfferPage extends React.Component {
renderForm() {
const fields = this.getInputFields({state: this.state});
if (this.state.showNewsletterSelection) {
return (
<NewsletterSelectionPage
pageData={this.state.pageData}
onBack={() => {
this.setState({
showNewsletterSelection: false
});
}}
/>
);
}
return (
<section>
<div className='gh-portal-section'>
@ -443,34 +458,12 @@ export default class OfferPage extends React.Component {
);
}
render() {
const {pageData: offer, site} = this.context;
if (!offer) {
renderProductCard({product, offer, currencyClass, updatedPrice, price, benefits}) {
if (this.state.showNewsletterSelection) {
return null;
}
const product = getProductFromId({site, productId: offer.tier.id});
const price = offer.cadence === 'month' ? product.monthlyPrice : product.yearlyPrice;
const updatedPrice = this.getUpdatedPrice({offer, product});
const benefits = product.benefits || [];
const currencyClass = (getCurrencySymbol(price.currency)).length > 1 ? 'long' : '';
return (
<>
<div className='gh-portal-content gh-portal-offer'>
<CloseButton />
{this.renderFormHeader()}
<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='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>
@ -499,6 +492,38 @@ export default class OfferPage extends React.Component {
{this.renderLoginMessage()}
</div>
</>
);
}
render() {
const {pageData: offer, site} = this.context;
if (!offer) {
return null;
}
const product = getProductFromId({site, productId: offer.tier.id});
const price = offer.cadence === 'month' ? product.monthlyPrice : product.yearlyPrice;
const updatedPrice = this.getUpdatedPrice({offer, product});
const benefits = product.benefits || [];
const currencyClass = (getCurrencySymbol(price.currency)).length > 1 ? 'long' : '';
return (
<>
<div className='gh-portal-content gh-portal-offer'>
<CloseButton />
{this.renderFormHeader()}
<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()}
{this.renderProductCard({product, offer, currencyClass, updatedPrice, price, benefits})}
</div>
</>
);