Fixed current plan selection not working

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) {

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}) => {
                 <section>
                     <div className='gh-portal-list-detail'>
                         <h3>Plan</h3>
-                        <PlanLabel plan={plan} isComplimentary={isComplimentary} />
+                        <PlanLabel plan={plan} price={price} isComplimentary={isComplimentary} />
                     </div>
                     <PlanUpdateButton isComplimentary={isComplimentary} />
                 </section>

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 (
             <>

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',

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;