From 7985c658fe94cb358aa7727df49ddc2e3357bf5a Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 16 Sep 2020 16:00:48 +0200 Subject: [PATCH] Refined plan change confirmation no refs. - refined copy and design for plan change and confirmation --- ghost/portal/src/App.js | 2 +- ghost/portal/src/components/Frame.styles.js | 97 ++++++++++++++++++- .../src/components/pages/AccountPlanPage.js | 82 ++++++++++------ ghost/portal/src/utils/fixtures.js | 4 +- 4 files changed, 151 insertions(+), 34 deletions(-) diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js index e356da0a37..fef2dcbc94 100644 --- a/ghost/portal/src/App.js +++ b/ghost/portal/src/App.js @@ -13,7 +13,7 @@ const DEV_MODE_DATA = { showPopup: true, site: Fixtures.site, member: Fixtures.member.paid, - page: 'signup' + page: 'accountPlan' }; export default class App extends React.Component { constructor(props) { diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index 3f9da96670..94f8f345bf 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -337,7 +337,7 @@ const GlobalStyles = ` } .gh-portal-container-narrow { - width: 380px; + width: 388px; } .gh-portal-popup-container.preview { @@ -452,6 +452,11 @@ const GlobalStyles = ` box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05); } + .gh-portal-list.outline { + box-shadow: none; + border: 1px solid var(--grey12); + } + .gh-portal-list section { display: flex; align-items: center; @@ -497,6 +502,96 @@ const GlobalStyles = ` .gh-portal-icon { color: var(--brandcolor); } + + /* Spacing modifiers + /* ----------------------------------------------------- */ + .mt1 { margin-top: 4px; } + .mt2 { margin-top: 8px; } + .mt3 { margin-top: 12px; } + .mt4 { margin-top: 16px; } + .mt5 { margin-top: 20px; } + .mt6 { margin-top: 24px; } + .mt7 { margin-top: 28px; } + .mt8 { margin-top: 32px; } + .mt9 { margin-top: 36px; } + .mt10 { margin-top: 40px; } + + .mr1 { margin-right: 4px; } + .mr2 { margin-right: 8px; } + .mr3 { margin-right: 12px; } + .mr4 { margin-right: 16px; } + .mr5 { margin-right: 20px; } + .mr6 { margin-right: 24px; } + .mr7 { margin-right: 28px; } + .mr8 { margin-right: 32px; } + .mr9 { margin-right: 36px; } + .mr10 { margin-right: 40px; } + + .mb1 { margin-bottom: 4px; } + .mb2 { margin-bottom: 8px; } + .mb3 { margin-bottom: 12px; } + .mb4 { margin-bottom: 16px; } + .mb5 { margin-bottom: 20px; } + .mb6 { margin-bottom: 24px; } + .mb7 { margin-bottom: 28px; } + .mb8 { margin-bottom: 32px; } + .mb9 { margin-bottom: 36px; } + .mb10 { margin-bottom: 40px; } + + .ml1 { margin-left: 4px; } + .ml2 { margin-left: 8px; } + .ml3 { margin-left: 12px; } + .ml4 { margin-left: 16px; } + .ml5 { margin-left: 20px; } + .ml6 { margin-left: 24px; } + .ml7 { margin-left: 28px; } + .ml8 { margin-left: 32px; } + .ml9 { margin-left: 36px; } + .ml10 { margin-left: 40px; } + + .pt1 { padding-top: 4px; } + .pt2 { padding-top: 8px; } + .pt3 { padding-top: 12px; } + .pt4 { padding-top: 16px; } + .pt5 { padding-top: 20px; } + .pt6 { padding-top: 24px; } + .pt7 { padding-top: 28px; } + .pt8 { padding-top: 32px; } + .pt9 { padding-top: 36px; } + .pt10 { padding-top: 40px; } + + .pr1 { padding-right: 4px; } + .pr2 { padding-right: 8px; } + .pr3 { padding-right: 12px; } + .pr4 { padding-right: 16px; } + .pr5 { padding-right: 20px; } + .pr6 { padding-right: 24px; } + .pr7 { padding-right: 28px; } + .pr8 { padding-right: 32px; } + .pr9 { padding-right: 36px; } + .pr10 { padding-right: 40px; } + + .pb1 { padding-bottom: 4px; } + .pb2 { padding-bottom: 8px; } + .pb3 { padding-bottom: 12px; } + .pb4 { padding-bottom: 16px; } + .pb5 { padding-bottom: 20px; } + .pb6 { padding-bottom: 24px; } + .pb7 { padding-bottom: 28px; } + .pb8 { padding-bottom: 32px; } + .pb9 { padding-bottom: 36px; } + .pb10 { padding-bottom: 40px; } + + .pl1 { padding-left: 4px; } + .pl2 { padding-left: 8px; } + .pl3 { padding-left: 12px; } + .pl4 { padding-left: 16px; } + .pl5 { padding-left: 20px; } + .pl6 { padding-left: 24px; } + .pl7 { padding-left: 28px; } + .pl8 { padding-left: 32px; } + .pl9 { padding-left: 36px; } + .pl10 { padding-left: 40px; } `; const MobileStyles = ` diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js index ad839479fc..3fe0f72f63 100644 --- a/ghost/portal/src/components/pages/AccountPlanPage.js +++ b/ghost/portal/src/components/pages/AccountPlanPage.js @@ -20,7 +20,7 @@ const React = require('react'); function getConfirmationPageTitle({confirmationType}) { if (confirmationType === 'changePlan') { - return 'Change plan'; + return 'Confirm subscription'; } else if (confirmationType === 'cancel') { return 'Confirm cancellation'; } else if (confirmationType === 'subscribe') { @@ -102,7 +102,7 @@ const CancelContinueSubscription = ({member, onCancelContinueSubscription, onAct }; const Header = ({member, lastPage, brandColor, onBack, showConfirmation, confirmationType}) => { - let title = member.paid ? 'Choose plan' : 'Choose your plan'; + let title = member.paid ? 'Change plan' : 'Choose a plan'; if (showConfirmation) { title = getConfirmationPageTitle({confirmationType}); } @@ -115,35 +115,57 @@ const Header = ({member, lastPage, brandColor, onBack, showConfirmation, confirm }; const PlanConfirmation = ({action, member, plan, type, brandColor, onConfirm}) => { - let actionDescription = ''; - let confirmMessage = 'Are you sure ?'; - if (type === 'changePlan') { - actionDescription = `You are switching to a ${plan.name} plan with pricing ${plan.currency} ${plan.price} / ${plan.type} `; - } else if (type === 'subscribe') { - actionDescription = `You are subscribing to a ${plan.name} plan with pricing ${plan.currency} ${plan.price} / ${plan.type} `; - } else if (type === 'cancel') { - const subscription = getMemberSubscription({member}); - actionDescription = `If you confirm and end your subscription now, you can still access it until ${getDateString(subscription.current_period_end)}`; - } + const subscription = getMemberSubscription({member}); const isRunning = ['updateSubscription:running', 'checkoutPlan:running', 'cancelSubscription:running'].includes(action); const label = 'Confirm'; - return ( -
-
{actionDescription}
-
{confirmMessage}
- onConfirm(e, plan)} - isRunning={isRunning} - isPrimary={true} - brandColor={brandColor} - label={label} - style={{ - width: '100%', - height: '40px' - }} - /> -
- ); + if (type === 'changePlan') { + return ( +
+
+
+
+

Account

+

{member.email}

+
+
+
+
+

Price

+

{plan.currency}{plan.price}/{plan.type} – Starting {getDateString(subscription.current_period_end)}

+
+
+
+ onConfirm(e, plan)} + isRunning={isRunning} + isPrimary={true} + brandColor={brandColor} + label={label} + style={{ + width: '100%', + height: '40px' + }} + /> +
+ ); + } else { + return ( +
+

If you confirm and end your subscription now, you can still access it until {getDateString(subscription.current_period_end)}.

+ onConfirm(e, plan)} + isRunning={isRunning} + isPrimary={true} + brandColor={brandColor} + label={label} + style={{ + width: '100%', + height: '40px' + }} + /> +
+ ); + } }; const PlanChooser = ({plans, selectedPlan, errors, member, onAction, onCancelContinueSubscription, action, brandColor, onPlanSelect}) => { @@ -178,7 +200,7 @@ const PlanMain = ({ ); } return ( - + ); }; export default class AccountPlanPage extends React.Component { diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js index 0d0148bc3a..21da456647 100644 --- a/ghost/portal/src/utils/fixtures.js +++ b/ghost/portal/src/utils/fixtures.js @@ -6,7 +6,7 @@ export const site = { accent_color: '#AB19E4', url: 'http://localhost:2368/', plans: { - monthly: 12, + monthly: 5, yearly: 110, currency: 'USD', currency_symbol: '$' @@ -15,7 +15,7 @@ export const site = { is_stripe_configured: true, portal_button: true, portal_name: true, - portal_plans: ['free', 'yearly'], + portal_plans: ['free', 'monthly', 'yearly'], portal_button_icon: 'icon-1', portal_button_signup_text: 'Subscribe now', portal_button_style: 'icon-and-text',