diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss index d65d1f184..427b4b1fb 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss @@ -18,7 +18,7 @@ } } - &-image-badge { + .ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge { margin-left: 7px; img { diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss index 8d64755fd..6c3976ed7 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss @@ -10,7 +10,7 @@ } &__line { - background-color: $color-gray-600; + background-color: $color-gray-400; height: 1px; } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss index e78c940ea..15c5265e6 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss @@ -7,16 +7,6 @@ margin: 0 0 32px 0; } - &__description { - text-align: center; - @include font(14, 22, 400); - font-style: italic; - - a { - color: $color-gray-700; - } - } - &__wrapper { padding: 8px; margin: 0 0 48px 0; diff --git a/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss b/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss index 5a00adc9d..cfef2e04f 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_onboarding.scss @@ -1,6 +1,7 @@ @import './onboarding/step-welcome'; @import './onboarding/step-business'; @import './onboarding/step-products'; +@import './onboarding/step-payment-methods'; .ppcp-r-tabs.onboarding, .ppcp-r-container--onboarding { diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-payment-methods.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-payment-methods.scss new file mode 100644 index 000000000..4ab630733 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-payment-methods.scss @@ -0,0 +1,38 @@ +.ppcp-r-page-optional-payment-methods { + .ppcp-r-select-box:first-child { + .ppcp-r-select-box__title { + margin-bottom: 20px; + } + } +} + +.ppcp-r-optional-payment-methods { + &__wrapper { + .ppcp-r-badge-box { + margin: 0 0 24px 0; + &:last-child { + margin: 0; + } + } + + .ppcp-r-badge-box__description { + margin: 12px 0 0 0; + @include font(14, 20, 400); + } + } + + &__description { + margin: 32px 0 0 0; + text-align: center; + @include font(14, 22, 400); + font-style: italic; + + a { + color: $color-gray-700; + } + } + + &__separator { + margin: 0 0 24px 0; + } +} diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss index f8fb42050..394b2bd10 100644 --- a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss +++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss @@ -16,13 +16,10 @@ text-align: center; } - .ppcp-r-page-welcome-or-separator { - margin: 0 0 16px 0; - } - .components-base-control__field { margin: 0 0 24px 0; } + .ppcp-r-toggle-block__toggled-content > button{ @include small-button; color: $color-white; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js new file mode 100644 index 000000000..18a5456af --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js @@ -0,0 +1,271 @@ +import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox'; +import { __, sprintf } from '@wordpress/i18n'; +import Separator from '../Separator'; + +const AcdcOptionalPaymentMethods = ( { + isFastlane, + isPayLater, + storeCountry, +} ) => { + if ( isFastlane && isPayLater && storeCountry === 'us' ) { + return ( +
+ 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 ' + ) } + /> +
+ ); + } + + if ( isPayLater && storeCountry === 'uk' ) { + return ( +
+ 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 ' + ) } + /> +
+ ); + } + + return ( +
+ + 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 ' + ) } + /> +
+ ); +}; + +export default AcdcOptionalPaymentMethods; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js new file mode 100644 index 000000000..d48c37fd5 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js @@ -0,0 +1,66 @@ +import BadgeBox from '../BadgeBox'; +import { __, sprintf } from '@wordpress/i18n'; + +const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => { + if ( isPayLater && storeCountry === 'us' ) { + return ( +
+ 1', + 'woocommerce-paypal-payments' + ) } + description={ sprintf( + // translators: %s: Link to PayPal REST application guide + __( + 'Process major credit and debit cards through PayPal’s card fields. Learn more', + 'woocommerce-paypal-payments' + ), + 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + ) } + /> +
+ ); + } + + return ( +
+ 1', + 'woocommerce-paypal-payments' + ) } + description={ sprintf( + // translators: %s: Link to PayPal REST application guide + __( + 'Process major credit and debit cards through PayPal’s card fields. Learn more', + 'woocommerce-paypal-payments' + ), + 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + ) } + /> +
+ ); +}; + +export default BcdcOptionalPaymentMethods; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js new file mode 100644 index 000000000..b83fad366 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js @@ -0,0 +1,28 @@ +import AcdcOptionalPaymentMethods from './AcdcOptionalPaymentMethods'; +import BcdcOptionalPaymentMethods from './BcdcOptionalPaymentMethods'; + +const OptionalPaymentMethods = ( { + useAcdc, + isFastlane, + isPayLater, + storeCountry, +} ) => { + return ( +
+ { useAcdc ? ( + + ) : ( + + ) } +
+ ); +}; + +export default OptionalPaymentMethods; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js index 18fc248b2..de52259a8 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js @@ -1,327 +1,276 @@ -import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; +import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox'; import { __, sprintf } from '@wordpress/i18n'; import Separator from '../Separator'; +import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods'; const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { - if (isFastlane && isPayLater && storeCountry === 'us') { - return ( -
-
- 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 ' - )} - /> -
-
- ); - } + if ( isFastlane && isPayLater && storeCountry === 'us' ) { + return ( +
+
+ 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 ' + ) } + /> +
+
+ + +
+
+ ); + } - if (isPayLater && storeCountry === 'uk') { - return ( -
-
- 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 ' - )} - /> -
-
- - 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 ' - )} - /> -
-
- ); - } + if ( isPayLater && storeCountry === 'uk' ) { + return ( +
+
+ 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 ' + ) } + /> +
+
+ + +
+
+ ); + } - return ( -
-
- 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 ' - )} - /> -
-
- - 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 ' - )} - /> -
-
- ); + return ( +
+
+ 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 ' + ) } + /> +
+
+ + +
+
+ ); }; export default AcdcFlow; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js index c2400ba62..9ba0d14e4 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js @@ -1,160 +1,184 @@ -import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; +import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox'; import { __, sprintf } from '@wordpress/i18n'; import Separator from '../Separator'; +import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods'; const BcdcFlow = ( { isPayLater, storeCountry } ) => { - if (isPayLater && storeCountry === 'us') { - return ( -
-
- 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 - __( - 'Process major credit and debit cards through PayPal’s card fields. Learn more', - 'woocommerce-paypal-payments' - ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' - )} - /> -
-
- ); - } + if ( isPayLater && storeCountry === 'us' ) { + return ( +
+
+ 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 ' + ) } + /> +
+
+ + +
+
+ ); + } - return ( -
- 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 ' - )} - /> - - - 1', 'woocommerce-paypal-payments')} - description={sprintf( - // translators: %s: Link to PayPal REST application guide - __( - 'Process major credit and debit cards through PayPal’s card fields. Learn more', - 'woocommerce-paypal-payments' - ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' - )} - /> -
- ); + return ( +
+ 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 ' + ) } + /> + + + +
+ ); }; export default BcdcFlow; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js index b32c1f85e..182f25b04 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js @@ -22,8 +22,8 @@ const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry, storeCurr )}

); diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js new file mode 100644 index 000000000..a9d2f6b9e --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js @@ -0,0 +1,78 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; +import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper'; +import SelectBox from '../../ReusableComponents/SelectBox'; +import { OnboardingHooks } from '../../../data'; +import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods'; + +const OPM_RADIO_GROUP_NAME = 'optional-payment-methods'; + +const StepPaymentMethods = ( {} ) => { + const { + areOptionalPaymentMethodsEnabled, + setAreOptionalPaymentMethodsEnabled, + } = OnboardingHooks.useOptionalPaymentMethods(); + const pricesBasedDescription = sprintf( + // translators: %s: Link to PayPal REST application guide + __( + '1Prices based on domestic transactions as of October 25th, 2024. Click here for full pricing details.', + 'woocommerce-paypal-payments' + ), + 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + ); + + return ( +
+ +
+ + + } + name={ OPM_RADIO_GROUP_NAME } + value={ true } + changeCallback={ setAreOptionalPaymentMethodsEnabled } + currentValue={ areOptionalPaymentMethodsEnabled } + type="radio" + > + + +

+
+
+ ); +}; + +export default StepPaymentMethods; 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 a5555180d..7e8ea1556 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js @@ -1,6 +1,7 @@ import StepWelcome from './StepWelcome'; import StepBusiness from './StepBusiness'; import StepProducts from './StepProducts'; +import StepPaymentMethods from './StepPaymentMethods'; import StepCompleteSetup from './StepCompleteSetup'; export const getSteps = ( flags ) => { @@ -8,6 +9,7 @@ export const getSteps = ( flags ) => { StepWelcome, StepBusiness, StepProducts, + StepPaymentMethods, StepCompleteSetup, ]; diff --git a/modules/ppcp-settings/resources/js/data/onboarding/actions.js b/modules/ppcp-settings/resources/js/data/onboarding/actions.js index 1742048e1..dcf401995 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/actions.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/actions.js @@ -80,6 +80,19 @@ export const setIsCasualSeller = ( isCasualSeller ) => ( { payload: { isCasualSeller }, } ); +/** + * Persistent. Sets the "areOptionalPaymentMethodsEnabled" value. + * + * @param {boolean} areOptionalPaymentMethodsEnabled + * @return {Action} The action. + */ +export const setAreOptionalPaymentMethodsEnabled = ( + areOptionalPaymentMethodsEnabled +) => ( { + type: ACTION_TYPES.SET_PERSISTENT, + payload: { areOptionalPaymentMethodsEnabled }, +} ); + /** * Persistent. Sets the "products" array. * diff --git a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js index e240f0863..4ae5bd947 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/hooks.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/hooks.js @@ -25,8 +25,14 @@ const usePersistent = ( key ) => ); const useHooks = () => { - const { persist, setStep, setCompleted, setIsCasualSeller, setProducts } = - useDispatch( STORE_NAME ); + const { + persist, + setStep, + setCompleted, + setIsCasualSeller, + setAreOptionalPaymentMethodsEnabled, + setProducts, + } = useDispatch( STORE_NAME ); // Read-only flags. const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] ); @@ -38,6 +44,9 @@ const useHooks = () => { const step = usePersistent( 'step' ); const completed = usePersistent( 'completed' ); const isCasualSeller = usePersistent( 'isCasualSeller' ); + const areOptionalPaymentMethodsEnabled = usePersistent( + 'areOptionalPaymentMethodsEnabled' + ); const products = usePersistent( 'products' ); const savePersistent = async ( setter, value ) => { @@ -60,6 +69,10 @@ const useHooks = () => { setIsCasualSeller: ( value ) => { return savePersistent( setIsCasualSeller, value ); }, + areOptionalPaymentMethodsEnabled, + setAreOptionalPaymentMethodsEnabled: ( value ) => { + return savePersistent( setAreOptionalPaymentMethodsEnabled, value ); + }, products, setProducts: ( activeProducts ) => { const validProducts = activeProducts.filter( ( item ) => @@ -82,6 +95,18 @@ export const useProducts = () => { return { products, setProducts }; }; +export const useOptionalPaymentMethods = () => { + const { + areOptionalPaymentMethodsEnabled, + setAreOptionalPaymentMethodsEnabled, + } = useHooks(); + + return { + areOptionalPaymentMethodsEnabled, + setAreOptionalPaymentMethodsEnabled, + }; +}; + export const useSteps = () => { const { flags, isReady, step, setStep, completed, setCompleted } = useHooks(); diff --git a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js index 4c80cccf1..176d4875d 100644 --- a/modules/ppcp-settings/resources/js/data/onboarding/reducer.js +++ b/modules/ppcp-settings/resources/js/data/onboarding/reducer.js @@ -27,6 +27,7 @@ const defaultPersistent = { completed: false, step: 0, isCasualSeller: null, // null value will uncheck both options in the UI. + areOptionalPaymentMethodsEnabled: true, products: [], }; diff --git a/modules/ppcp-settings/src/Data/OnboardingProfile.php b/modules/ppcp-settings/src/Data/OnboardingProfile.php index 3e812a009..b04d7879f 100644 --- a/modules/ppcp-settings/src/Data/OnboardingProfile.php +++ b/modules/ppcp-settings/src/Data/OnboardingProfile.php @@ -67,6 +67,7 @@ class OnboardingProfile extends AbstractDataModel { 'completed' => false, 'step' => 0, 'is_casual_seller' => null, + 'are_optional_payment_methods_enabled' => true, 'products' => array(), ); } @@ -127,6 +128,15 @@ class OnboardingProfile extends AbstractDataModel { $this->data['is_casual_seller'] = $casual_seller; } + /** + * Sets the optional payment methods flag. + * + * @param bool|null $are_optional_payment_methods_enabled Whether the PayPal optional payment methods are enabled. + */ + public function set_are_optional_payment_methods_enabled( ?bool $are_optional_payment_methods_enabled ) : void { + $this->data['are_optional_payment_methods_enabled'] = $are_optional_payment_methods_enabled; + } + /** * Gets the active product types for this store. * diff --git a/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php b/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php index 0a102c178..0fbb9fcf9 100644 --- a/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php +++ b/modules/ppcp-settings/src/Endpoint/OnboardingRestEndpoint.php @@ -53,6 +53,10 @@ class OnboardingRestEndpoint extends RestEndpoint { 'js_name' => 'isCasualSeller', 'sanitize' => 'to_boolean', ), + 'are_optional_payment_methods_enabled' => array( + 'js_name' => 'areOptionalPaymentMethodsEnabled', + 'sanitize' => 'to_boolean', + ), 'products' => array( 'js_name' => 'products', ),