From 41528e90bf36d9bf3c23ea2ce72af9d87ba3aa27 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 29 Apr 2021 16:30:58 +0530 Subject: [PATCH] Fixed current plan selection not working --- ghost/portal/src/App.js | 2 +- .../src/components/pages/AccountHomePage.js | 7 +-- .../src/components/pages/AccountPlanPage.js | 47 +++++++------------ ghost/portal/src/utils/fixtures.js | 12 ++--- ghost/portal/src/utils/helpers.js | 11 ++++- 5 files changed, 38 insertions(+), 41 deletions(-) diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js index 8d9e1ea74a..6229919b5f 100644 --- a/ghost/portal/src/App.js +++ b/ghost/portal/src/App.js @@ -16,7 +16,7 @@ const DEV_MODE_DATA = { showPopup: true, site: Fixtures.site, member: Fixtures.member.paid, - page: 'signup' + page: 'accountHome' }; export default class App extends React.Component { constructor(props) { diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js index 7656e992f6..231226e5c7 100644 --- a/ghost/portal/src/components/pages/AccountHomePage.js +++ b/ghost/portal/src/components/pages/AccountHomePage.js @@ -141,8 +141,8 @@ const UserHeader = ({member, brandColor}) => { }; const PaidAccountActions = ({member, site, openUpdatePlan, onEditBilling}) => { - const PlanLabel = ({plan, isComplimentary}) => { - const {amount = 0, currency, interval} = plan; + const PlanLabel = ({plan, price, isComplimentary}) => { + const {amount = 0, currency, interval} = price; let label = `${Intl.NumberFormat('en', {currency, style: 'currency'}).format(amount / 100)}/${interval}`; if (isComplimentary) { label = `Complimentary (${label})`; @@ -200,6 +200,7 @@ const PaidAccountActions = ({member, site, openUpdatePlan, onEditBilling}) => { let isComplimentary = isComplimentaryMember({member}); const { plan, + price, default_payment_card_last4: defaultCardLast4 } = subscription; return ( @@ -207,7 +208,7 @@ const PaidAccountActions = ({member, site, openUpdatePlan, onEditBilling}) => {

Plan

- +
diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js index efc3859b18..fedee84555 100644 --- a/ghost/portal/src/components/pages/AccountPlanPage.js +++ b/ghost/portal/src/components/pages/AccountPlanPage.js @@ -5,7 +5,7 @@ import CloseButton from '../common/CloseButton'; import BackButton from '../common/BackButton'; import PlansSection from '../common/PlansSection'; import {getDateString} from '../../utils/date-time'; -import {formatNumber, getMemberActivePlan, getMemberActivePrice, getMemberSubscription, getPlanFromSubscription, getPriceFromSubscription, getSitePlans, getSitePrices, getSubscriptionFromId, isPaidMember} from '../../utils/helpers'; +import {formatNumber, getFilteredPrices, getMemberActivePlan, getMemberActivePrice, getMemberSubscription, getPlanFromSubscription, getPriceFromSubscription, getSitePlans, getSitePrices, getSubscriptionFromId, isPaidMember} from '../../utils/helpers'; export const AccountPlanPageStyles = ` .gh-portal-accountplans-main { @@ -130,7 +130,7 @@ const PlanConfirmationSection = ({action, member, plan, type, brandColor, onConf planStartDate = 'today'; } const priceString = formatNumber(plan.price); - const planStartMessage = `${plan.currency}${priceString}/${plan.type} – Starting ${planStartDate}`; + const planStartMessage = `${plan.currency_symbol}${priceString}/${plan.interval} – Starting ${planStartDate}`; if (type === 'changePlan') { return ( <> @@ -301,24 +301,21 @@ export default class AccountPlanPage extends React.Component { getInitialState() { const {member, site} = this.context; - // this.plans = getSitePlans({site, includeFree: false}); - this.plans = getSitePrices({site, includeFree: false}); - let activePlan = getMemberActivePrice({member}); - let selectedPlan = activePlan ? this.plans.find((d) => { - return (d.name === activePlan.name && d.price === activePlan.price && (d.currency || '').toLowerCase() === (activePlan.currency || '').toLowerCase()); + this.prices = getSitePrices({site, includeFree: false}); + let activePrice = getMemberActivePrice({member}); + let selectedPrice = activePrice ? this.prices.find((d) => { + return (d.id === activePrice.id); }) : null; - if (selectedPlan) { - this.plans = this.plans.filter((d) => { - return (d.currency || '').toLowerCase() === (selectedPlan.currency || '').toLowerCase(); - }); + if (selectedPrice) { + this.prices = getFilteredPrices({prices: this.prices, currency: selectedPrice.currency}); } // Select first plan as default for free member - if (!isPaidMember({member}) && this.plans.length > 0) { - selectedPlan = this.plans[0]; + if (!isPaidMember({member}) && this.prices.length > 0) { + selectedPrice = this.prices[0]; } - const selectedPlanName = selectedPlan ? selectedPlan.name : null; + const selectedPriceId = selectedPrice ? selectedPrice.id : null; return { - selectedPlan: selectedPlanName + selectedPlan: selectedPriceId }; } @@ -357,7 +354,7 @@ export default class AccountPlanPage extends React.Component { } } - onPlanSelect(e, name) { + onPlanSelect(e, priceId) { e.preventDefault(); const {member} = this.context; @@ -368,17 +365,17 @@ export default class AccountPlanPage extends React.Component { this.timeoutId = setTimeout(() => { this.setState((state) => { return { - selectedPlan: name + selectedPlan: priceId }; }); }, 5); } else { - const confirmationPlan = this.plans.find(d => d.id === name); + const confirmationPrice = this.prices.find(d => d.id === priceId); const activePlan = this.getActivePriceId({member}); const confirmationType = activePlan ? 'changePlan' : 'subscribe'; - if (name !== this.state.selectedPlan) { + if (priceId !== this.state.selectedPlan) { this.setState({ - confirmationPlan, + confirmationPlan: confirmationPrice, confirmationType, showConfirmation: true }); @@ -416,14 +413,6 @@ export default class AccountPlanPage extends React.Component { }); } - getActivePlanName({member}) { - const activePlan = getMemberActivePlan({member}); - if (activePlan) { - return activePlan.name; - } - return null; - } - getActivePriceId({member}) { const activePrice = getMemberActivePrice({member}); if (activePrice) { @@ -443,7 +432,7 @@ export default class AccountPlanPage extends React.Component { render() { const {member, brandColor, lastPage} = this.context; - const plans = this.plans; + const plans = this.prices; const {selectedPlan, showConfirmation, confirmationPlan, confirmationType} = this.state; return ( <> diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js index 56d3d3eeac..5e06a4b3b1 100644 --- a/ghost/portal/src/utils/fixtures.js +++ b/ghost/portal/src/utils/fixtures.js @@ -30,8 +30,8 @@ export const site = { nickname: 'Test Price One Time', currency: 'usd', amount: 1500, - type: 'one_time', - interval: null + type: 'recurring', + interval: 'month' }, { id: '6086eb2a823dd7240afc8081', @@ -145,12 +145,12 @@ export const member = { currency: 'USD' }, price: { - id: 'price_1IkXgCFToJelIqAsTP3V1paQ', + id: 'price_1IkXLAFToJelIqAseQdK4WSU', nickname: 'Yearly', - amount: 12000, - interval: 'year', + currency: 'usd', + amount: 1500, type: 'recurring', - currency: 'USD', + interval: 'month', product: { id: 'prod_JNGGBrrogUXcoM', name: 'Main Product', diff --git a/ghost/portal/src/utils/helpers.js b/ghost/portal/src/utils/helpers.js index 004d9ba0ab..0eb2ffc402 100644 --- a/ghost/portal/src/utils/helpers.js +++ b/ghost/portal/src/utils/helpers.js @@ -69,12 +69,19 @@ export function getPlanFromSubscription({subscription}) { return null; } +export function getFilteredPrices({prices, currency}) { + return prices.filter((d) => { + return (d.currency || '').toLowerCase() === (currency || '').toLowerCase(); + }); +} + export function getPriceFromSubscription({subscription}) { if (subscription && subscription.price) { return { ...subscription.price, - price: subscription.plan.amount / 100, - name: subscription.plan.nickname + price: subscription.price.amount / 100, + name: subscription.price.nickname, + currency_symbol: getCurrencySymbol(subscription.price.currency) }; } return null;