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

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

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