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/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..e78c940ea --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_welcome-docs.scss @@ -0,0 +1,72 @@ +.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; + + &--one-col .ppcp-r-badge-box { + margin: 0 0 24px 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 24px 0 !important; + } +} 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; } } 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'; 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 759fe28bc..a8c63aedb 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js @@ -4,9 +4,8 @@ import { Button } from '@wordpress/components'; import OnboardingHeader from '../../ReusableComponents/OnboardingHeader'; import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons'; import Separator from '../../ReusableComponents/Separator'; -import BadgeBox, { - BADGE_BOX_TITLE_BIG, -} from '../../ReusableComponents/BadgeBox'; +import WelcomeDocs from '../../ReusableComponents/WelcomeDocs/WelcomeDocs'; + import AdvancedOptionsForm from './Components/AdvancedOptionsForm'; import AccordionSection from '../../ReusableComponents/AccordionSection'; @@ -44,7 +43,13 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => { - + { ); }; -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 ' - ) } - /> -
-
-

-
- ); -}; export default StepWelcome; 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