Merge pull request #198 from moderntribe/feature/update-payment-wizards-ui

Payment wizards content and navigation tweaks

Author: aykanburcak

packages/storebuilder/src/wizards/payments/paypal/PaymentsPaypalWizard.tsx

@@ -19,7 +19,7 @@ interface OauthInterface {
 }
 
 const PaymentsPaypalWizard = () => {
-	const { currentStep, goToNextStep, closeAll } = useWizard();
+	const { currentStep, goToNextStep, goToPreviousStep, closeAll } = useWizard();
 	const { paymentsPaypalState: {
 		steps,
 		plan,
@@ -179,15 +179,6 @@ const PaymentsPaypalWizard = () => {
 
 	const stepsMax = steps.length;
 
-	let nextText = '';
-	if (activeStep === 1) {
-		nextText = __('Activate PayPal', 'moderntribe-storebuilder');
-	} else if (activeStep === 2) {
-		nextText = __('Next', 'moderntribe-storebuilder');
-	} else {
-		nextText = __('Complete', 'moderntribe-storebuilder');
-	}
-
 	let errorComponent;
 	if (activeStep === 1) {
 		errorComponent = <ErrorPluginInstall supportLink={ supportLink } />;
@@ -244,7 +235,9 @@ const PaymentsPaypalWizard = () => {
 				steps={ steps }
 				save={ handleSave }
 				onNext={ handleNext }
-				nextText={ nextText }
+				onBack={ goToPreviousStep }
+				nextText={ steps[ stepIndex ].nextText }
+				backText={ __('Back', 'moderntribe-storebuilder') }
 				isLoading={ isLoading }
 				loadingText={ __('Loading…', 'moderntribe-storebuilder') }
 				disableNext={ error }

packages/storebuilder/src/wizards/payments/paypal/data/paypal-screen-data.tsx

@@ -61,12 +61,13 @@ const PaymentsPaypalScreenData = (): PaymentsPaypalInterface => ({
 			description: __('Nice! Now that you\'ve activated, we\'ve imported your keys here for you. These keys are specific to your account and will ensure you\'re all set to accept payments on your store.', 'moderntribe-storebuilder'),
 			subtext: <img src={ ` ${ IMAGE_DIR }paypal-logo-alternative.png ` } width={ 90 } alt={ 'Paypal logo' } />,
 			subtextIcon: null,
-			nextText: __('Next', 'moderntribe-storebuilder'),
+			nextText: __('Activate PayPal', 'moderntribe-storebuilder'),
+			hideBack: true,
 			screen: <AccountKeys />,
 		},
 		{
 			id: 2,
-			nextText: __('Complete', 'moderntribe-storebuilder'),
+			nextText: __('Save & Complete', 'moderntribe-storebuilder'),
 			title: __('You\'re ready to accept PayPal Payments on your Store!', 'moderntribe-storebuilder'),
 			description: __('That was easy. Your PayPal account is connected. If you\'d like you can customize your PayPal settings further in the WordPress Admin.', 'moderntribe-storebuilder'),
 			subtext: <img src={ ` ${ IMAGE_DIR }paypal-logo-alternative.png ` } width={ 90 } alt={ 'Paypal logo' } />,

packages/storebuilder/src/wizards/payments/stripe/PaymentsStripeWizard.tsx

@@ -11,7 +11,7 @@ import { ErrorKeys } from '@payments/shared-screens';
 import { ErrorPluginInstall } from '@payments/stripe/screens';
 
 const PaymentsStripeWizard = () => {
-	const { goToNextStep, closeAll } = useWizard();
+	const { goToNextStep, goToPreviousStep, closeAll } = useWizard();
 	const { paymentsStripeState: {
 		steps,
 		pluginActive,
@@ -98,15 +98,6 @@ const PaymentsStripeWizard = () => {
 
 	const stepsMax = steps.length;
 
-	let nextText = '';
-	if (activeStep === 1) {
-		nextText = __('Connect Stripe', 'moderntribe-storebuilder');
-	} else if (activeStep === 2) {
-		nextText = __('Next', 'moderntribe-storebuilder');
-	} else {
-		nextText = __('Save & Complete', 'moderntribe-storebuilder');
-	}
-
 	let errorComponent;
 	if (activeStep === 1) {
 		errorComponent = <ErrorPluginInstall supportLink={ supportLink } />;
@@ -163,8 +154,10 @@ const PaymentsStripeWizard = () => {
 				activeStep={ stepIndex }
 				steps={ steps }
 				save={ handleSave }
+				onBack={ goToPreviousStep }
 				onNext={ handleNext }
-				nextText={ nextText }
+				nextText={ steps[ stepIndex ].nextText }
+				backText={ __('Back', 'moderntribe-storebuilder') }
 				isLoading={ isLoading }
 				loadingText={ __('Loading…', 'moderntribe-storebuilder') }
 				disableNext={ error }

packages/storebuilder/src/wizards/payments/stripe/data/constants.ts

@@ -2,8 +2,6 @@ import { __ } from '@wordpress/i18n';
 
 export const paymentsStripeConsts = {
 	getStarted: {
-		heading: __('Get started with Stripe', 'moderntribe-storebuilder'),
-		copy: __('Connect or create a Stripe account to accept payments directly onsite, including Payment Request buttons (such as Apple Pay and Google Pay), iDEAL, SEPA, Sofort, and more international payment methods.', 'moderntribe-storebuilder'),
 		terms: __('By clicking "Connect Stripe", you agree to the Terms of Service.', 'moderntribe-storebuilder'),
 		label: __('Connect Your Account', 'moderntribe-storebuilder'),
 		stripeAlt: __('stripe logo', 'moderntribe-storebuilder')

packages/storebuilder/src/wizards/payments/stripe/data/stripe-screen-data.tsx

@@ -33,7 +33,7 @@ const PaymentsStripeScreenData = (): PaymentsStripeInterface => ({
 			id: 0,
 			label: paymentsStripeConsts.getStarted.label,
 			hideSkip: true,
-			nextText: __('Next', 'moderntribe-storebuilder'),
+			nextText: __('Connect Stripe', 'moderntribe-storebuilder'),
 			hideBack: true,
 			screen: <GetStarted />,
 		},
@@ -45,6 +45,7 @@ const PaymentsStripeScreenData = (): PaymentsStripeInterface => ({
 			subtext: <img src={ ` ${ IMAGE_DIR }stripe-logo-white.png ` } alt={ 'Stripe logo' } />,
 			subtextIcon: null,
 			nextText: __('Next', 'moderntribe-storebuilder'),
+			hideBack: true,
 			screen: <AccountKeys />,
 		},
 		{
@@ -53,7 +54,7 @@ const PaymentsStripeScreenData = (): PaymentsStripeInterface => ({
 			description: __('That was easy. Your Stripe account is connected. You can manage your Stripe payment settings to configure checkout experience, transaction preferences and more.', 'moderntribe-storebuilder'),
 			subtext: <img src={ ` ${ IMAGE_DIR }stripe-logo-white.png ` } alt={ 'Stripe logo' } />,
 			subtextIcon: null,
-			nextText: __('Complete', 'moderntribe-storebuilder'),
+			nextText: __('Save & Complete', 'moderntribe-storebuilder'),
 			hidePagination: true,
 			screen: <Success />
 		}

packages/storebuilder/src/wizards/payments/stripe/screens/AccountKeys.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Box, useTheme, CircularProgress, Stack } from '@mui/material';
-import { WizardSectionTitle, Form, FormField, TextInput } from '@moderntribe/wme-ui';
+import { Box, CircularProgress, Stack } from '@mui/material';
+import { Form, FormField, TextInput } from '@moderntribe/wme-ui';
 import { usePaymentsStripe } from '@store/hooks';
 import { paymentsStripeConsts } from '../data/constants';
 import { PAYMENTS_STRIPE_PROPS } from '@store/constants';
@@ -18,14 +18,11 @@ const AccountKeys = () => {
 	const stripeNonce = PAYMENTS_STRIPE_PROPS.ajax.nonce || '';
 	const stripeAction = PAYMENTS_STRIPE_PROPS.ajax.action || '';
 	const { accountKeys: {
-		heading,
-		copy,
 		livePublishableKey,
 		liveSecretKey,
 		livePublishableHelper,
 		liveSecretHelper
 	} } = paymentsStripeConsts;
-	const theme = useTheme();
 
 	useEffect(() => {
 		const fetchKeys = async () => {
@@ -55,16 +52,10 @@ const AccountKeys = () => {
 	}, []);
 
 	return (
-		<Box sx={ { maxWidth: 500 } }>
-			<WizardSectionTitle
-				heading={ heading }
-				headingVariant={ 'h2' }
-				copy={ copy }
-				sx={ { mb: theme.spacing(5) } }
-			/>
+		<Box sx={ { maxWidth: 415, width: '100%' } }>
 			{
 				! isLoading
-					? 		<Form>
+					? 	<Form>
 						<Stack spacing={ 2 }>
 							<FormField
 								field={ <TextInput