From a5ae046021c98201ae5faf56b66530d1cc02d97f Mon Sep 17 00:00:00 2001 From: Emili Castells Guasch Date: Tue, 12 Nov 2024 15:01:29 +0100 Subject: [PATCH] Add components --- modules/ppcp-settings/node_modules/.gitkeep | 0 .../reusable-components/_button.scss | 2 - .../_onboarding-header.scss | 2 +- .../Screens/Onboarding/Onboarding.js | 39 +- .../Screens/Onboarding/StepCompleteSetup.js | 43 +++ .../Screens/Onboarding/StepWelcome.js | 343 +++++++++++------- .../Screens/Onboarding/availableSteps.js | 8 +- node_modules/.gitkeep | 0 8 files changed, 274 insertions(+), 163 deletions(-) delete mode 100644 modules/ppcp-settings/node_modules/.gitkeep create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js delete mode 100644 node_modules/.gitkeep 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