Merge remote-tracking branch 'origin/trunk' into PCP-3930-Make-the-webhook-resubscribe/simulate-logic-usable-in-React-application

This commit is contained in:
inpsyde-maticluznar 2024-12-13 12:27:02 +01:00
commit 484ecc17d7
No known key found for this signature in database
GPG key ID: D005973F231309F6
15 changed files with 186 additions and 205 deletions

View file

@ -1,6 +1,4 @@
import data from '../../utils/data';
import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
import { __ } from '@wordpress/i18n';
const BadgeBox = ( props ) => {
const titleSize =
@ -29,12 +27,7 @@ const BadgeBox = ( props ) => {
</span>
) }
{ props.textBadge && (
<TitleBadge
type={ TITLE_BADGE_INFO }
text={ props.textBadge }
/>
) }
{ props.textBadge }
</span>
<div className="ppcp-r-badge-box__description">
{ props?.description && (

View file

@ -1,14 +1,13 @@
import BadgeBox from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n';
import BadgeBox from '../BadgeBox';
import Separator from '../Separator';
import generatePriceText from '../../../utils/badgeBoxUtils';
import { countryPriceInfo } from '../../../utils/countryPriceInfo';
import PricingTitleBadge from '../PricingTitleBadge';
const AcdcOptionalPaymentMethods = ( {
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
} ) => {
if ( isFastlane && isPayLater && storeCountry === 'US' ) {
return (
@ -24,11 +23,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ generatePriceText(
'ccf',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="ccf" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -48,11 +43,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ generatePriceText(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="dw" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -73,11 +64,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-blik.svg',
'icon-button-bancontact.svg',
] }
textBadge={ generatePriceText(
'apm',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="apm" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -91,11 +78,9 @@ const AcdcOptionalPaymentMethods = ( {
<BadgeBox
title={ __( '', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-payment-method-fastlane-small.svg' ] }
textBadge={ generatePriceText(
'fastlane',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge item="fast country currency=storeCurrency=storeCountrylane" />
}
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -123,11 +108,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ generatePriceText(
'ccf',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="ccf" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -147,11 +128,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ generatePriceText(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="dw" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -173,11 +150,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-blik.svg',
'icon-button-bancontact.svg',
] }
textBadge={ generatePriceText(
'apm',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="apm" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -204,11 +177,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ generatePriceText(
'ccf',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="ccf" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -225,11 +194,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ generatePriceText(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="dw" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(
@ -251,11 +216,7 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-blik.svg',
'icon-button-bancontact.svg',
] }
textBadge={ generatePriceText(
'apm',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="apm" /> }
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(

View file

@ -1,13 +1,9 @@
import BadgeBox from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n';
import generatePriceText from '../../../utils/badgeBoxUtils';
import { countryPriceInfo } from '../../../utils/countryPriceInfo';
const BcdcOptionalPaymentMethods = ( {
isPayLater,
storeCountry,
storeCurrency,
} ) => {
import BadgeBox from '../BadgeBox';
import PricingTitleBadge from '../PricingTitleBadge';
const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
if ( isPayLater && storeCountry === 'us' ) {
return (
<div className="ppcp-r-optional-payment-methods__wrapper">
@ -22,11 +18,9 @@ const BcdcOptionalPaymentMethods = ( {
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ generatePriceText(
'standardCardFields',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge item="standardCardFields" />
}
description={ sprintf(
// translators: %s: Link to PayPal REST application guide
__(
@ -53,11 +47,7 @@ const BcdcOptionalPaymentMethods = ( {
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ generatePriceText(
'standardCardFields',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="standardCardFields" /> }
description={ sprintf(
// translators: %s: Link to PayPal REST application guide
__(

View file

@ -6,7 +6,6 @@ const OptionalPaymentMethods = ( {
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
} ) => {
return (
<div className="ppcp-r-optional-payment-methods">
@ -15,13 +14,11 @@ const OptionalPaymentMethods = ( {
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
) : (
<BcdcOptionalPaymentMethods
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
) }
</div>

View file

@ -0,0 +1,38 @@
import { __, sprintf } from '@wordpress/i18n';
import { countryPriceInfo } from '../../utils/countryPriceInfo';
import { CommonHooks } from '../../data';
const PricingDescription = () => {
const { storeCountry } = CommonHooks.useWooSettings();
if ( ! countryPriceInfo[ storeCountry ] ) {
return null;
}
const lastDate = 'October 25th, 2024'; // TODO -- needs to be the last plugin update date.
const detailsUrl =
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input';
const label = sprintf(
// translators: %1$s: Pricing date, %2$s Link to PayPal price-details page.
__(
'Prices based on domestic transactions as of %1$s. <a target="_blank" href="%2$s">Click here</a> for full pricing details.',
'woocommerce-paypal-payments'
),
lastDate,
detailsUrl
);
return (
<p
className="ppcp-r-optional-payment-methods__description"
data-country={ storeCountry }
>
<sup>1</sup>
<span dangerouslySetInnerHTML={ { __html: label } } />
</p>
);
};
export default PricingDescription;

View file

@ -0,0 +1,43 @@
import { __, sprintf } from '@wordpress/i18n';
import { CommonHooks } from '../../data';
import { countryPriceInfo } from '../../utils/countryPriceInfo';
import { formatPrice } from '../../utils/formatPrice';
import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
const getFixedAmount = ( currency, priceList ) => {
if ( priceList[ currency ] ) {
return formatPrice( priceList[ currency ], currency );
}
const [ defaultCurrency, defaultPrice ] = Object.entries( priceList )[ 0 ];
return formatPrice( defaultPrice, defaultCurrency );
};
const PricingTitleBadge = ( { item } ) => {
const { storeCountry } = CommonHooks.useWooSettings();
const infos = countryPriceInfo[ storeCountry ];
if ( ! infos || ! infos[ item ] ) {
return null;
}
const percentage = infos[ item ].toFixed( 2 );
const fixedAmount = getFixedAmount( storeCountry, infos.fixedFee );
const label = sprintf(
__( 'from %1$s%% + %2$s', 'woocommerce-paypal-payments' ),
percentage,
fixedAmount
);
return (
<TitleBadge
type={ TITLE_BADGE_INFO }
text={ `${ label }<sup>1</sup>` }
/>
);
};
export default PricingTitleBadge;

View file

@ -1,17 +1,11 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n';
import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import Separator from '../Separator';
import generatePriceText from '../../../utils/badgeBoxUtils';
import { countryPriceInfo } from '../../../utils/countryPriceInfo';
import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
import PricingTitleBadge from '../PricingTitleBadge';
const AcdcFlow = ( {
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
} ) => {
const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
if ( isFastlane && isPayLater && storeCountry === 'US' ) {
return (
<div className="ppcp-r-welcome-docs__wrapper">
@ -22,11 +16,7 @@ const AcdcFlow = ( {
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ generatePriceText(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="checkout" /> }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
@ -116,7 +106,6 @@ const AcdcFlow = ( {
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
</div>
</div>
@ -133,11 +122,7 @@ const AcdcFlow = ( {
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ generatePriceText(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="checkout" /> }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
@ -201,7 +186,6 @@ const AcdcFlow = ( {
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
</div>
</div>
@ -217,11 +201,7 @@ const AcdcFlow = ( {
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ generatePriceText(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="checkout" /> }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
@ -280,7 +260,6 @@ const AcdcFlow = ( {
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
</div>
</div>

View file

@ -1,11 +1,11 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator';
import generatePriceText from '../../../utils/badgeBoxUtils';
import { countryPriceInfo } from '../../../utils/countryPriceInfo';
import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import Separator from '../Separator';
import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
import PricingTitleBadge from '../PricingTitleBadge';
const BcdcFlow = ( { isPayLater, storeCountry } ) => {
if ( isPayLater && storeCountry === 'US' ) {
return (
<div className="ppcp-r-welcome-docs__wrapper">
@ -16,11 +16,7 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ generatePriceText(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="checkout" /> }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
@ -110,7 +106,6 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
isFastlane={ false }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
</div>
</div>
@ -122,11 +117,7 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
<BadgeBox
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ generatePriceText(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={ <PricingTitleBadge item="checkout" /> }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
@ -181,7 +172,6 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
isFastlane={ false }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
</div>
);

View file

@ -1,16 +1,10 @@
import { __ } from '@wordpress/i18n';
import PricingDescription from '../PricingDescription';
import AcdcFlow from './AcdcFlow';
import BcdcFlow from './BcdcFlow';
import { countryPriceInfo } from '../../../utils/countryPriceInfo';
import { pricesBasedDescription } from './pricesBasedDescription';
const WelcomeDocs = ( {
useAcdc,
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
} ) => {
const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry } ) => {
return (
<div className="ppcp-r-welcome-docs">
<h2 className="ppcp-r-welcome-docs__title">
@ -24,23 +18,14 @@ const WelcomeDocs = ( {
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
) : (
<BcdcFlow
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
) }
{ storeCountry in countryPriceInfo && (
<p
className="ppcp-r-optional-payment-methods__description"
dangerouslySetInnerHTML={ {
__html: pricesBasedDescription,
} }
></p>
) }
<PricingDescription />
</div>
);
};

View file

@ -1,10 +0,0 @@
import { __, sprintf } from '@wordpress/i18n';
export const pricesBasedDescription = sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'<sup>1</sup>Prices based on domestic transactions as of October 25th, 2024. <a target="_blank" href="%s">Click here</a> for full pricing details.',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
);

View file

@ -1,12 +1,11 @@
import { __ } from '@wordpress/i18n';
import { CommonHooks, OnboardingHooks } from '../../../data';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../ReusableComponents/SelectBox';
import { CommonHooks, OnboardingHooks } from '../../../data';
import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods';
import { pricesBasedDescription } from '../../ReusableComponents/WelcomeDocs/pricesBasedDescription';
import { countryPriceInfo } from '../../../utils/countryPriceInfo';
import PricingDescription from '../../ReusableComponents/PricingDescription';
const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';
@ -60,14 +59,7 @@ const StepPaymentMethods = ( {} ) => {
type="radio"
></SelectBox>
</SelectBoxWrapper>
{ storeCountry in countryPriceInfo && (
<p
className="ppcp-r-optional-payment-methods__description"
dangerouslySetInnerHTML={ {
__html: pricesBasedDescription,
} }
></p>
) }
<PricingDescription />
</div>
</div>
);

View file

@ -12,7 +12,7 @@ import { CommonHooks } from '../../../data';
import BusyStateWrapper from '../../ReusableComponents/BusyStateWrapper';
const StepWelcome = ( { setStep, currentStep } ) => {
const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
const { storeCountry } = CommonHooks.useWooSettings();
return (
<div className="ppcp-r-page-welcome">
@ -54,7 +54,6 @@ const StepWelcome = ( { setStep, currentStep } ) => {
isFastlane={ true }
isPayLater={ true }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
/>
<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />
<AccordionSection

View file

@ -1,18 +0,0 @@
import { __ } from '@wordpress/i18n';
const generatePriceText = ( type, selectedCountryPrice, storeCurrency ) => {
if ( ! selectedCountryPrice || ! selectedCountryPrice[ type ] ) {
console.warn( `Invalid type or price data for: ${ type }` );
return '';
}
const percentage = selectedCountryPrice[ type ].toFixed( 2 );
const fixedFee = `${ selectedCountryPrice.currencySymbol }${ selectedCountryPrice.fixedFee }`;
return __(
`from ${ percentage }% + ${ fixedFee } ${ storeCurrency }<sup>1</sup>`,
'woocommerce-paypal-payments'
);
};
export default generatePriceText;

View file

@ -1,7 +1,8 @@
export const countryPriceInfo = {
US: {
currencySymbol: '$',
fixedFee: 0.49,
fixedFee: {
USD: 0.49,
},
checkout: 3.49,
ccf: 2.59,
dw: 2.59,
@ -10,8 +11,9 @@ export const countryPriceInfo = {
standardCardFields: 2.99,
},
UK: {
currencySymbol: '£',
fixedFee: 0.3,
fixedFee: {
GPB: 0.3,
},
checkout: 2.9,
ccf: 1.2,
dw: 1.2,
@ -19,8 +21,9 @@ export const countryPriceInfo = {
standardCardFields: 1.2,
},
CA: {
currencySymbol: '$',
fixedFee: 0.3,
fixedFee: {
CAD: 0.3,
},
checkout: 2.9,
ccf: 2.7,
dw: 2.7,
@ -28,8 +31,9 @@ export const countryPriceInfo = {
standardCardFields: 2.9,
},
AU: {
currencySymbol: '$',
fixedFee: 0.3,
fixedFee: {
AUD: 0.3,
},
checkout: 2.6,
ccf: 1.75,
dw: 1.75,
@ -37,8 +41,9 @@ export const countryPriceInfo = {
standardCardFields: 2.6,
},
FR: {
currencySymbol: '€',
fixedFee: 0.35,
fixedFee: {
EUR: 0.35,
},
checkout: 2.9,
ccf: 1.2,
dw: 1.2,
@ -46,8 +51,9 @@ export const countryPriceInfo = {
standardCardFields: 1.2,
},
IT: {
currencySymbol: '€',
fixedFee: 0.35,
fixedFee: {
EUR: 0.35,
},
checkout: 3.4,
ccf: 1.2,
dw: 1.2,
@ -55,8 +61,9 @@ export const countryPriceInfo = {
standardCardFields: 1.2,
},
DE: {
currencySymbol: '€',
fixedFee: 0.39,
fixedFee: {
EUR: 0.39,
},
checkout: 2.99,
ccf: 2.99,
dw: 2.99,
@ -64,8 +71,9 @@ export const countryPriceInfo = {
standardCardFields: 2.99,
},
ES: {
currencySymbol: '€',
fixedFee: 0.35,
fixedFee: {
EUR: 0.35,
},
checkout: 2.9,
ccf: 1.2,
dw: 1.2,

View file

@ -0,0 +1,34 @@
const priceFormatInfo = {
USD: {
prefix: '$',
suffix: 'USD',
},
CAD: {
prefix: '$',
suffix: 'CAD',
},
AUD: {
prefix: '$',
suffix: 'AUD',
},
EUR: {
prefix: '€',
suffix: '',
},
GPB: {
prefix: '£',
suffix: '',
},
};
export const formatPrice = ( value, currency ) => {
const currencyInfo = priceFormatInfo[ currency ];
const amount = value.toFixed( 2 );
if ( ! currencyInfo ) {
console.error( `Unsupported currency: ${ currency }` );
return amount;
}
return `${ currencyInfo.prefix }${ amount } ${ currencyInfo.suffix }`;
};