From 5e18bf0d7c801acdc6b2fd2ecdc87d1fe9d2ec23 Mon Sep 17 00:00:00 2001 From: Diego Curbelo Date: Mon, 11 Nov 2024 19:12:28 -0300 Subject: [PATCH 1/6] woorelease: Product version bump update --- changelog.txt | 2 +- readme.txt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/changelog.txt b/changelog.txt index e42dcbcd1..0ca9ce6eb 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,6 +1,6 @@ *** Changelog *** -= 2.9.4 - xxxx-xx-xx = += 2.9.4 - 2024-11-11 = * Fix - Apple Pay button preview missing in Standard payment and Advanced Processing tabs #2755 * Fix - Set "Sold individually" only for subscription connected to PayPal #2710 * Fix - Ensure Google Pay button does not appear for subscriptions #2718 diff --git a/readme.txt b/readme.txt index 03852e33f..4dd03591f 100644 --- a/readme.txt +++ b/readme.txt @@ -179,7 +179,7 @@ If you encounter issues with the PayPal buttons not appearing after an update, p == Changelog == -= 2.9.4 - xxxx-xx-xx = += 2.9.4 - 2024-11-11 = * Fix - Apple Pay button preview missing in Standard payment and Advanced Processing tabs #2755 * Fix - Set "Sold individually" only for subscription connected to PayPal #2710 * Fix - Ensure Google Pay button does not appear for subscriptions #2718 From db94393525b939a240763f90b83a499dc8ef7be3 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Tue, 12 Nov 2024 18:03:55 +0400 Subject: [PATCH 2/6] separate welcome docs into a component --- .../ReusableComponents/WelcomeDocs.js | 155 ++++++++++++++++++ .../Screens/Onboarding/StepWelcome.js | 152 +---------------- 2 files changed, 156 insertions(+), 151 deletions(-) create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js new file mode 100644 index 000000000..67fa1a411 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js @@ -0,0 +1,155 @@ +import BadgeBox, { BADGE_BOX_TITLE_BIG } from "./BadgeBox"; +import { __, sprintf } from '@wordpress/i18n'; +import Separator from './Separator'; + +const WelcomeDocs = ( props ) => { + 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 ( +
+

{ __( `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 WelcomeDocs; 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 e1760cb8e..c0e32f949 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js @@ -5,9 +5,8 @@ import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock'; import Separator from '../../ReusableComponents/Separator'; import { useOnboardingStepWelcome, useManualConnect } from '../../../data'; - +import WelcomeDocs from '../../ReusableComponents/WelcomeDocs'; import DataStoreControl from '../../ReusableComponents/DataStoreControl'; -import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../../ReusableComponents/BadgeBox"; const StepWelcome = ( { setStep, currentStep, setCompleted } ) => { return ( @@ -78,155 +77,6 @@ const WelcomeFeatures = () => { ); }; -const WelcomeDocs = () => { - 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 ( -
-

{ __( `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 ' - ) } - /> -
-
-

-
- ); -}; const WelcomeForm = ( { setCompleted } ) => { const { From 0993780243e985f42cea23d3e0cf5b031e6fadd1 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Tue, 12 Nov 2024 19:23:30 +0400 Subject: [PATCH 3/6] Create the welcome docs flows --- .../ReusableComponents/WelcomeDocs.js | 155 --------- .../WelcomeDocs/AcdcFlow.js | 327 ++++++++++++++++++ .../WelcomeDocs/BcdcFlow.js | 160 +++++++++ .../WelcomeDocs/WelcomeDocs.js | 32 ++ .../Screens/Onboarding/StepWelcome.js | 10 +- 5 files changed, 527 insertions(+), 157 deletions(-) delete mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js deleted file mode 100644 index 67fa1a411..000000000 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs.js +++ /dev/null @@ -1,155 +0,0 @@ -import BadgeBox, { BADGE_BOX_TITLE_BIG } from "./BadgeBox"; -import { __, sprintf } from '@wordpress/i18n'; -import Separator from './Separator'; - -const WelcomeDocs = ( props ) => { - 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 ( -
-

{ __( `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 WelcomeDocs; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js new file mode 100644 index 000000000..18fc248b2 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js @@ -0,0 +1,327 @@ +import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; +import { __, sprintf } from '@wordpress/i18n'; +import Separator from '../Separator'; + +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 (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 ' + )} + /> +
+
+ ); + } + + 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 ' + )} + /> +
+
+ ); +}; + +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 new file mode 100644 index 000000000..c2400ba62 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js @@ -0,0 +1,160 @@ +import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; +import { __, sprintf } from '@wordpress/i18n'; +import Separator from '../Separator'; + +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 ' + )} + /> +
+
+ ); + } + + 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 ' + )} + /> +
+ ); +}; + +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 new file mode 100644 index 000000000..b32c1f85e --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js @@ -0,0 +1,32 @@ +import { __, sprintf } from '@wordpress/i18n'; +import AcdcFlow from "./AcdcFlow"; +import BcdcFlow from "./BcdcFlow"; +import {Button} from "@wordpress/components"; + +const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry, storeCurrency } ) => { + 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 ( +
+

{__(`Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments')}

+ {useAcdc ? ( + + ) : ( + + )} +

+
+ ); +}; + +export default WelcomeDocs; 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 23e3db2a6..793672c0d 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js @@ -4,7 +4,7 @@ import { Button } from '@wordpress/components'; import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; import Separator from '../../ReusableComponents/Separator'; -import WelcomeDocs from '../../ReusableComponents/WelcomeDocs'; +import WelcomeDocs from '../../ReusableComponents/WelcomeDocs/WelcomeDocs'; import AdvancedOptionsForm from './Components/AdvancedOptionsForm'; import AccordionSection from '../../ReusableComponents/AccordionSection'; @@ -43,7 +43,13 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => { - + Date: Tue, 12 Nov 2024 19:24:06 +0400 Subject: [PATCH 4/6] Separate the welcome docs css --- .../reusable-components/_welcome-docs.scss | 68 +++++++++++++++++++ .../screens/onboarding/_step-welcome.scss | 66 ------------------ .../ppcp-settings/resources/css/style.scss | 1 + 3 files changed, 69 insertions(+), 66 deletions(-) create mode 100644 modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss 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 new file mode 100644 index 000000000..61f6864c4 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss @@ -0,0 +1,68 @@ +.ppcp-r-welcome-docs { + margin: 0 0 48px 0; + + &__title { + text-align: center; + @include font(20, 28, 700); + 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; + + &:not(&--one-col) { + display: flex; + justify-content: center; + + @media screen and (max-width: 480px) { + flex-wrap: wrap; + row-gap: 8px; + } + } + } + + &__col { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; + + > p { + margin: 0; + @include font(13, 16, 400); + color: $color-gray-700; + } + + &:not(:last-child) { + padding-right: 48px; + border-right: 1px solid $color-gray-200; + margin-right: 48px; + } + + @media screen and (max-width: 480px) { + width: 100%; + text-align: center; + border-right: 0 !important; + padding-right: 0 !important; + + &:not(:last-child) { + padding-bottom: 8px; + } + } + } + + .ppcp-r-page-welcome-mode-separator { + margin: 8px 0 16px 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 cdbde3b43..63328f8cb 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 @@ -89,69 +89,3 @@ } } -.ppcp-r-welcome-docs { - margin: 0 0 48px 0; - - &__title { - text-align: center; - @include font(20, 28, 700); - margin: 0 0 32px 0; - } - - &__description { - text-align: center; - @include font(14, 22, 400); - font-style: italic; - - a { - color: $color-gray-700; - } - } - - &__wrapper { - display: flex; - justify-content: center; - padding: 8px; - margin: 0 0 48px 0; - - @media screen and (max-width: 480px) { - flex-wrap: wrap; - row-gap: 8px; - } - } - - &__col { - display: flex; - flex-direction: column; - gap: 4px; - flex: 1; - - > p { - margin: 0; - @include font(13, 16, 400); - color: $color-gray-700; - } - - &:not(:last-child) { - padding-right: 48px; - border-right: 1px solid $color-gray-200; - margin-right: 48px; - } - - @media screen and (max-width: 480px) { - width: 100%; - text-align: center; - border-right: 0 !important; - padding-right: 0 !important; - - &:not(:last-child) { - padding-bottom: 8px; - } - } - } - - .ppcp-r-page-welcome-mode-separator { - margin: 8px 0 16px 0; - } -} - diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index 53215f1de..2731b0283 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -19,6 +19,7 @@ @import './components/reusable-components/accordion-section'; @import './components/reusable-components/badge-box'; @import './components/reusable-components/spinner-overlay'; + @import './components/reusable-components/welcome-docs'; @import './components/screens/onboarding'; @import './components/screens/dashboard/tab-dashboard'; @import './components/screens/dashboard/tab-payment-methods'; From a838c97cd0ea511310c86c28530029d5b91a5fa1 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Tue, 12 Nov 2024 19:38:42 +0400 Subject: [PATCH 5/6] Fix the heading hidden style --- .../resources/css/components/screens/_onboarding-global.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss b/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss index 22a2f1260..04b10f386 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss @@ -1,7 +1,7 @@ body:has(.ppcp-r-container--onboarding) { background-color: #fff !important; - .notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce h2:first-of-type { + .notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce form > h2 { display: none !important; } } From 913f4ab2b3c2b01e776e59e766e1dfa905f6cac9 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Tue, 12 Nov 2024 19:52:30 +0400 Subject: [PATCH 6/6] Fix the docs 1 column styles --- .../css/components/reusable-components/_welcome-docs.scss | 6 +++++- .../js/Components/Screens/Onboarding/StepWelcome.js | 6 +++--- 2 files changed, 8 insertions(+), 4 deletions(-) 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 61f6864c4..e78c940ea 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 @@ -21,6 +21,10 @@ padding: 8px; margin: 0 0 48px 0; + &--one-col .ppcp-r-badge-box { + margin: 0 0 24px 0; + } + &:not(&--one-col) { display: flex; justify-content: center; @@ -63,6 +67,6 @@ } .ppcp-r-page-welcome-mode-separator { - margin: 8px 0 16px 0; + margin: 8px 0 24px 0 !important; } } 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 793672c0d..a8c63aedb 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js @@ -44,9 +44,9 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {