diff --git a/modules/ppcp-settings/node_modules/.gitkeep b/modules/ppcp-settings/node_modules/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
index dbf41614c..e33085763 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
@@ -12,8 +12,6 @@ button.components-button, a.components-button {
border-radius: 2px;
padding: 14px 17px;
height: auto;
-
-
}
&.is-primary {
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss
index d6ea2b3f4..b73908da3 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss
@@ -29,7 +29,7 @@
&__description {
@include font(14, 22, 400);
- margin: 0;
+ margin: 0 20%;
text-align: center;
}
}
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
index 587d59253..a91eabb48 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
@@ -1,8 +1,7 @@
import Container from '../../ReusableComponents/Container';
import { useOnboardingStep } from '../../../data';
import { getSteps } from './availableSteps';
-import {__} from "@wordpress/i18n";
-import Navigation from "../../ReusableComponents/Navigation";
+import Navigation from '../../ReusableComponents/Navigation';
const getCurrentStep = ( requestedStep, steps ) => {
const isValidStep = ( step ) =>
@@ -22,24 +21,24 @@ const Onboarding = () => {
const CurrentStepComponent = getCurrentStep( step, steps );
return (
- <>
-
-
-
-
-
-
- >
+ <>
+
+
+
+
+
+
+ >
);
};
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js
new file mode 100644
index 000000000..90650be72
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js
@@ -0,0 +1,43 @@
+import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
+import { __ } from '@wordpress/i18n';
+import { Button, Icon } from '@wordpress/components';
+
+const StepCompleteSetup = ( {
+ setStep,
+ currentStep,
+ stepperOrder,
+ setCompleted,
+} ) => {
+ const ButtonIcon = () => ;
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default StepCompleteSetup;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
index 759fe28bc..7eb276361 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
@@ -19,7 +19,7 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
'woocommerce-paypal-payments'
) }
description={ __(
- 'Your all-in-one integration for PayPal checkout solutions that enable buyers
to pay via PayPal, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
+ 'Your all-in-one integration for PayPal checkout solutions that enable buyers to pay via PayPal, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
'woocommerce-paypal-payments'
) }
/>
@@ -100,144 +100,209 @@ const WelcomeDocs = () => {
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
);
- return (
-
-
{ __( `Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments' ) }
-
-
- 1', 'woocommerce-paypal-payments' ) }
- description={ __(
- 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
- 'woocommerce-paypal-payments'
- ) }
- />
-
- Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
- Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
- Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
- Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
-
-
-
1', 'woocommerce-paypal-payments' ) }
- description={ sprintf(
- // translators: %s: Link to PayPal REST application guide
- __(
- 'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
- 1', 'woocommerce-paypal-payments' ) }
- description={ sprintf(
- // translators: %s: Link to PayPal REST application guide
- __(
- 'Accept Apple Pay on eligible devices and Google Pay through mobile and web. Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
- 1', 'woocommerce-paypal-payments' ) }
- description={ sprintf(
- // translators: %s: Link to PayPal REST application guide
- __(
- 'Seamless payments for customers across the globe using their preferred payment methods. Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
- 1', 'woocommerce-paypal-payments' ) }
- description={ sprintf(
- // translators: %s: Link to PayPal REST application guide
- __(
- 'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. Learn more',
- 'woocommerce-paypal-payments'
- ),
- 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
- ) }
- />
-
-
-
-
- );
+ return (
+
+
+ { __(
+ `Want to know more about PayPal Payments?`,
+ 'woocommerce-paypal-payments'
+ ) }
+
+
+
+ 1',
+ 'woocommerce-paypal-payments'
+ ) }
+ description={ __(
+ 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
+ 'woocommerce-paypal-payments'
+ ) }
+ />
+
+ Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+ Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+ Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+ Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+
+
+
1',
+ 'woocommerce-paypal-payments'
+ ) }
+ description={ sprintf(
+ // translators: %s: Link to PayPal REST application guide
+ __(
+ 'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+ 1',
+ 'woocommerce-paypal-payments'
+ ) }
+ description={ sprintf(
+ // translators: %s: Link to PayPal REST application guide
+ __(
+ 'Accept Apple Pay on eligible devices and Google Pay through mobile and web. Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+ 1',
+ 'woocommerce-paypal-payments'
+ ) }
+ description={ sprintf(
+ // translators: %s: Link to PayPal REST application guide
+ __(
+ 'Seamless payments for customers across the globe using their preferred payment methods. Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+ 1',
+ 'woocommerce-paypal-payments'
+ ) }
+ description={ sprintf(
+ // translators: %s: Link to PayPal REST application guide
+ __(
+ 'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. Learn more',
+ 'woocommerce-paypal-payments'
+ ),
+ 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
+ ) }
+ />
+
+
+
+
+ );
};
export default StepWelcome;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js
index 32034ec57..a5555180d 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js
@@ -1,9 +1,15 @@
import StepWelcome from './StepWelcome';
import StepBusiness from './StepBusiness';
import StepProducts from './StepProducts';
+import StepCompleteSetup from './StepCompleteSetup';
export const getSteps = ( flags ) => {
- const allSteps = [ StepWelcome, StepBusiness, StepProducts ];
+ const allSteps = [
+ StepWelcome,
+ StepBusiness,
+ StepProducts,
+ StepCompleteSetup,
+ ];
if ( ! flags.canUseCasualSelling ) {
return allSteps.filter( ( step ) => step !== StepBusiness );
diff --git a/node_modules/.gitkeep b/node_modules/.gitkeep
deleted file mode 100644
index e69de29bb..000000000