mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge branch 'trunk' into PCP-3917-things-to-do-next-component-functionality
This commit is contained in:
Emili Castells Guasch
commit
4d4ab689f5
121 changed files with 5004 additions and 3431 deletions
|
|
@ -1,8 +1,6 @@
|
|||
import { Icon } from '@wordpress/components';
|
||||
import { chevronDown, chevronUp } from '@wordpress/icons';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { useAccordionState } from '../../hooks/useAccordionState';
|
||||
|
||||
// Provide defaults for all layout components so the generic version just works.
|
||||
|
|
@ -24,6 +22,13 @@ const DefaultDescription = ( { children } ) => (
|
|||
<div className="ppcp-r-accordion__description">{ children }</div>
|
||||
);
|
||||
|
||||
const AccordionContent = ( { isOpen, children } ) => {
|
||||
if ( ! isOpen || ! children ) {
|
||||
return null;
|
||||
}
|
||||
return <div className="ppcp-r-accordion__content">{ children }</div>;
|
||||
};
|
||||
|
||||
const Accordion = ( {
|
||||
title,
|
||||
id = '',
|
||||
|
|
@ -65,9 +70,7 @@ const Accordion = ( {
|
|||
) }
|
||||
</Header>
|
||||
</button>
|
||||
{ isOpen && children && (
|
||||
<div className="ppcp-r-accordion__content">{ children }</div>
|
||||
) }
|
||||
<AccordionContent isOpen={ isOpen }>{ children }</AccordionContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
import {
|
||||
Children,
|
||||
isValidElement,
|
||||
cloneElement,
|
||||
useMemo,
|
||||
createContext,
|
||||
useContext,
|
||||
} from '@wordpress/element';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { CommonHooks } from '../../data';
|
||||
import SpinnerOverlay from './SpinnerOverlay';
|
||||
|
||||
// Create context to track the busy state across nested wrappers
|
||||
const BusyContext = createContext( false );
|
||||
|
||||
/**
|
||||
* Wraps interactive child elements and modifies their behavior based on the global `isBusy` state.
|
||||
* Allows custom processing of child props via the `onBusy` callback.
|
||||
*
|
||||
* @param {Object} props - Component properties.
|
||||
* @param {Children} props.children - Child components to wrap.
|
||||
* @param {boolean} props.enabled - Enables or disables the busy-state logic.
|
||||
* @param {boolean} props.busySpinner - Allows disabling the spinner in busy-state.
|
||||
* @param {string} props.className - Additional class names for the wrapper.
|
||||
* @param {Function} props.onBusy - Callback to process child props when busy.
|
||||
*/
|
||||
const BusyStateWrapper = ( {
|
||||
children,
|
||||
enabled = true,
|
||||
busySpinner = true,
|
||||
className = '',
|
||||
onBusy = () => ( { disabled: true } ),
|
||||
} ) => {
|
||||
const { isBusy } = CommonHooks.useBusyState();
|
||||
const hasBusyParent = useContext( BusyContext );
|
||||
|
||||
const isBusyComponent = isBusy && enabled;
|
||||
const showSpinner = busySpinner && isBusyComponent && ! hasBusyParent;
|
||||
|
||||
const wrapperClassName = classNames( 'ppcp-r-busy-wrapper', className, {
|
||||
'ppcp--is-loading': isBusyComponent,
|
||||
} );
|
||||
|
||||
const memoizedChildren = useMemo(
|
||||
() =>
|
||||
Children.map( children, ( child ) =>
|
||||
isValidElement( child )
|
||||
? cloneElement(
|
||||
child,
|
||||
isBusyComponent ? onBusy( child.props ) : {}
|
||||
)
|
||||
: child
|
||||
),
|
||||
[ children, isBusyComponent, onBusy ]
|
||||
);
|
||||
|
||||
return (
|
||||
<BusyContext.Provider value={ isBusyComponent }>
|
||||
<div className={ wrapperClassName }>
|
||||
{ showSpinner && <SpinnerOverlay /> }
|
||||
{ memoizedChildren }
|
||||
</div>
|
||||
</BusyContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusyStateWrapper;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as openSignup } from './Icons/open-signup';
|
||||
export const NOTIFICATION_SUCCESS = '✔️';
|
||||
export const NOTIFICATION_ERROR = '❌';
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { SVG, Path } from '@wordpress/primitives';
|
||||
|
||||
const openSignup = (
|
||||
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24">
|
||||
<Path d="M12.4999 12.75V18.75C12.4999 18.9489 12.4209 19.1397 12.2803 19.2803C12.1396 19.421 11.9488 19.5 11.7499 19.5C11.551 19.5 11.3603 19.421 11.2196 19.2803C11.0789 19.1397 10.9999 18.9489 10.9999 18.75V14.5613L4.78055 20.7806C4.71087 20.8503 4.62815 20.9056 4.5371 20.9433C4.44606 20.981 4.34847 21.0004 4.24993 21.0004C4.15138 21.0004 4.0538 20.981 3.96276 20.9433C3.87171 20.9056 3.78899 20.8503 3.7193 20.7806C3.64962 20.7109 3.59435 20.6282 3.55663 20.5372C3.51892 20.4461 3.49951 20.3485 3.49951 20.25C3.49951 20.1515 3.51892 20.0539 3.55663 19.9628C3.59435 19.8718 3.64962 19.7891 3.7193 19.7194L9.93868 13.5H5.74993C5.55102 13.5 5.36025 13.421 5.2196 13.2803C5.07895 13.1397 4.99993 12.9489 4.99993 12.75C4.99993 12.5511 5.07895 12.3603 5.2196 12.2197C5.36025 12.079 5.55102 12 5.74993 12H11.7499C11.9488 12 12.1396 12.079 12.2803 12.2197C12.4209 12.3603 12.4999 12.5511 12.4999 12.75ZM19.9999 3H7.99993C7.6021 3 7.22057 3.15804 6.93927 3.43934C6.65796 3.72064 6.49993 4.10218 6.49993 4.5V9C6.49993 9.19891 6.57895 9.38968 6.7196 9.53033C6.86025 9.67098 7.05102 9.75 7.24993 9.75C7.44884 9.75 7.63961 9.67098 7.78026 9.53033C7.92091 9.38968 7.99993 9.19891 7.99993 9V4.5H19.9999V16.5H15.4999C15.301 16.5 15.1103 16.579 14.9696 16.7197C14.8289 16.8603 14.7499 17.0511 14.7499 17.25C14.7499 17.4489 14.8289 17.6397 14.9696 17.7803C15.1103 17.921 15.301 18 15.4999 18H19.9999C20.3978 18 20.7793 17.842 21.0606 17.5607C21.3419 17.2794 21.4999 16.8978 21.4999 16.5V4.5C21.4999 4.10218 21.3419 3.72064 21.0606 3.43934C20.7793 3.15804 20.3978 3 19.9999 3Z" />
|
||||
</SVG>
|
||||
);
|
||||
|
||||
export default openSignup;
|
||||
|
|
@ -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
|
||||
__(
|
||||
|
|
@ -69,16 +60,11 @@ const AcdcOptionalPaymentMethods = ( {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
imageBadge={ [
|
||||
'icon-button-sepa.svg',
|
||||
'icon-button-ideal.svg',
|
||||
'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
|
||||
__(
|
||||
|
|
@ -92,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
|
||||
__(
|
||||
|
|
@ -124,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
|
||||
__(
|
||||
|
|
@ -148,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
|
||||
__(
|
||||
|
|
@ -174,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
|
||||
__(
|
||||
|
|
@ -205,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
|
||||
__(
|
||||
|
|
@ -226,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
|
||||
__(
|
||||
|
|
@ -252,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
|
||||
__(
|
||||
|
|
|
|||
|
|
@ -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
|
||||
__(
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ const PaymentMethodIcons = ( props ) => {
|
|||
<PaymentMethodIcon type="discover" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="apple-pay" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="google-pay" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="sepa" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="ideal" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="bancontact" icons={ props.icons } />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
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, itemFixedAmount ) => {
|
||||
if ( priceList[ currency ] ) {
|
||||
const sum = priceList[ currency ] + itemFixedAmount;
|
||||
return formatPrice( sum, currency );
|
||||
}
|
||||
|
||||
const [ defaultCurrency, defaultPrice ] = Object.entries( priceList )[ 0 ];
|
||||
const sum = defaultPrice + itemFixedAmount;
|
||||
return formatPrice( sum, defaultCurrency );
|
||||
};
|
||||
|
||||
const PricingTitleBadge = ( { item } ) => {
|
||||
const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
|
||||
const infos = countryPriceInfo[ storeCountry ];
|
||||
const itemKey = item.split(' ')[0]; // Extract the first word, fastlane has more than one
|
||||
|
||||
if ( ! infos || ! infos[ itemKey ] ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const percentage = typeof infos[itemKey] === 'number' ? infos[itemKey].toFixed(2) : infos[itemKey]['percentage'].toFixed(2);
|
||||
const itemFixedAmount = infos[itemKey]['fixedFee'] ? infos[itemKey]['fixedFee'] : 0;
|
||||
const fixedAmount = getFixedAmount( storeCurrency, infos.fixedFee, itemFixedAmount );
|
||||
|
||||
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;
|
||||
|
|
@ -9,25 +9,19 @@ import {
|
|||
} from './SettingsBlockElements';
|
||||
|
||||
const SettingsAccordion = ( { title, description, children, ...props } ) => (
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__accordion"
|
||||
components={ [
|
||||
() => (
|
||||
<Accordion
|
||||
title={ title }
|
||||
description={ description }
|
||||
Header={ Header }
|
||||
TitleWrapper={ TitleWrapper }
|
||||
Title={ Title }
|
||||
Action={ Action }
|
||||
Description={ Description }
|
||||
>
|
||||
{ children }
|
||||
</Accordion>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">
|
||||
<Accordion
|
||||
title={ title }
|
||||
description={ description }
|
||||
Header={ Header }
|
||||
TitleWrapper={ TitleWrapper }
|
||||
Title={ Title }
|
||||
Action={ Action }
|
||||
Description={ Description }
|
||||
>
|
||||
{ children }
|
||||
</Accordion>
|
||||
</SettingsBlock>
|
||||
);
|
||||
|
||||
export default SettingsAccordion;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,27 @@
|
|||
import { Button } from '@wordpress/components';
|
||||
import SettingsBlock from './SettingsBlock';
|
||||
import { Header, Title, Action, Description } from './SettingsBlockElements';
|
||||
import { Action, Description, Header, Title } from './SettingsBlockElements';
|
||||
|
||||
const ButtonSettingsBlock = ( { title, description, ...props } ) => (
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__button"
|
||||
components={ [
|
||||
() => (
|
||||
<>
|
||||
<Header>
|
||||
<Title>{ title }</Title>
|
||||
<Description>{ description }</Description>
|
||||
</Header>
|
||||
<Action>
|
||||
<Button
|
||||
variant={ props.actionProps?.buttonType }
|
||||
onClick={
|
||||
props.actionProps?.callback
|
||||
? () => props.actionProps.callback()
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{ props.actionProps.value }
|
||||
</Button>
|
||||
</Action>
|
||||
</>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__button">
|
||||
<Header>
|
||||
<Title>{ title }</Title>
|
||||
<Description>{ description }</Description>
|
||||
</Header>
|
||||
<Action>
|
||||
<Button
|
||||
isBusy={ props.actionProps?.isBusy }
|
||||
variant={ props.actionProps?.buttonType }
|
||||
onClick={
|
||||
props.actionProps?.callback
|
||||
? () => props.actionProps.callback()
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{ props.actionProps.value }
|
||||
</Button>
|
||||
</Action>
|
||||
</SettingsBlock>
|
||||
);
|
||||
|
||||
export default ButtonSettingsBlock;
|
||||
|
|
|
|||
|
|
@ -11,56 +11,43 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<span className="ppcp-r-feature-item__notes">
|
||||
{ notes.map( ( note, index ) => (
|
||||
<span key={ index }>{ note }</span>
|
||||
) ) }
|
||||
</span>
|
||||
</>
|
||||
<span className="ppcp-r-feature-item__notes">
|
||||
{ notes.map( ( note, index ) => (
|
||||
<span key={ index }>{ note }</span>
|
||||
) ) }
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__feature"
|
||||
components={ [
|
||||
() => (
|
||||
<>
|
||||
<Header>
|
||||
<Title>
|
||||
{ title }
|
||||
{ props.actionProps?.featureStatus && (
|
||||
<TitleBadge
|
||||
{ ...props.actionProps?.badge }
|
||||
/>
|
||||
) }
|
||||
</Title>
|
||||
<Description className="ppcp-r-settings-block__feature__description">
|
||||
{ description }
|
||||
{ printNotes() }
|
||||
</Description>
|
||||
</Header>
|
||||
<Action>
|
||||
<div className="ppcp-r-feature-item__buttons">
|
||||
{ props.actionProps?.buttons.map(
|
||||
( button ) => (
|
||||
<Button
|
||||
href={ button.url }
|
||||
key={ button.text }
|
||||
variant={ button.type }
|
||||
>
|
||||
{ button.text }
|
||||
</Button>
|
||||
)
|
||||
) }
|
||||
</div>
|
||||
</Action>
|
||||
</>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
|
||||
<Header>
|
||||
<Title>
|
||||
{ title }
|
||||
{ props.actionProps?.enabled && (
|
||||
<TitleBadge { ...props.actionProps?.badge } />
|
||||
) }
|
||||
</Title>
|
||||
<Description className="ppcp-r-settings-block__feature__description">
|
||||
{ description }
|
||||
{ printNotes() }
|
||||
</Description>
|
||||
</Header>
|
||||
<Action>
|
||||
<div className="ppcp-r-feature-item__buttons">
|
||||
{ props.actionProps?.buttons.map( ( button ) => (
|
||||
<Button
|
||||
className={ button.class ? button.class : '' }
|
||||
href={ button.url }
|
||||
key={ button.text }
|
||||
variant={ button.type }
|
||||
>
|
||||
{ button.text }
|
||||
</Button>
|
||||
) ) }
|
||||
</div>
|
||||
</Action>
|
||||
</SettingsBlock>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -42,28 +42,20 @@ const InputSettingsBlock = ( {
|
|||
order = DEFAULT_ELEMENT_ORDER,
|
||||
...props
|
||||
} ) => (
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__input"
|
||||
components={ [
|
||||
() => (
|
||||
<>
|
||||
{ order.map( ( elementKey ) => {
|
||||
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
|
||||
return RenderElement ? (
|
||||
<RenderElement
|
||||
key={ elementKey }
|
||||
title={ title }
|
||||
description={ description }
|
||||
supplementaryLabel={ supplementaryLabel }
|
||||
actionProps={ props.actionProps }
|
||||
/>
|
||||
) : null;
|
||||
} ) }
|
||||
</>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
|
||||
{ order.map( ( elementKey ) => {
|
||||
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
|
||||
return RenderElement ? (
|
||||
<RenderElement
|
||||
key={ elementKey }
|
||||
title={ title }
|
||||
description={ description }
|
||||
supplementaryLabel={ supplementaryLabel }
|
||||
actionProps={ props.actionProps }
|
||||
/>
|
||||
) : null;
|
||||
} ) }
|
||||
</SettingsBlock>
|
||||
);
|
||||
|
||||
export default InputSettingsBlock;
|
||||
|
|
|
|||
|
|
@ -5,56 +5,43 @@ import PaymentMethodIcon from '../PaymentMethodIcon';
|
|||
import data from '../../../utils/data';
|
||||
|
||||
const PaymentMethodItemBlock = ( props ) => {
|
||||
const [ paymentMethodState, setPaymentMethodState ] = useState();
|
||||
const [ toggleIsChecked, setToggleIsChecked ] = useState( false );
|
||||
const [ modalIsVisible, setModalIsVisible ] = useState( false );
|
||||
const Modal = props?.modal;
|
||||
|
||||
const handleCheckboxState = ( checked ) => {
|
||||
setPaymentMethodState( checked ? props.id : null );
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsBlock
|
||||
className="ppcp-r-settings-block__payment-methods__item"
|
||||
components={ [
|
||||
() => (
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__inner">
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
|
||||
<PaymentMethodIcon
|
||||
icons={ [ props.icon ] }
|
||||
type={ props.icon }
|
||||
/>
|
||||
<span className="ppcp-r-settings-block__payment-methods__item__title">
|
||||
{ props.title }
|
||||
</span>
|
||||
<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__inner">
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
|
||||
<PaymentMethodIcon
|
||||
icons={ [ props.icon ] }
|
||||
type={ props.icon }
|
||||
/>
|
||||
<span className="ppcp-r-settings-block__payment-methods__item__title">
|
||||
{ props.title }
|
||||
</span>
|
||||
</div>
|
||||
<p className="ppcp-r-settings-block__payment-methods__item__description">
|
||||
{ props.description }
|
||||
</p>
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__footer">
|
||||
<ToggleControl
|
||||
__nextHasNoMarginBottom={ true }
|
||||
checked={ toggleIsChecked }
|
||||
onChange={ setToggleIsChecked }
|
||||
/>
|
||||
{ Modal && (
|
||||
<div
|
||||
className="ppcp-r-settings-block__payment-methods__item__settings"
|
||||
onClick={ () => setModalIsVisible( true ) }
|
||||
>
|
||||
{ data().getImage( 'icon-settings.svg' ) }
|
||||
</div>
|
||||
<p className="ppcp-r-settings-block__payment-methods__item__description">
|
||||
{ props.description }
|
||||
</p>
|
||||
<div className="ppcp-r-settings-block__payment-methods__item__footer">
|
||||
<ToggleControl
|
||||
__nextHasNoMarginBottom={ true }
|
||||
checked={ props.id === paymentMethodState }
|
||||
onChange={ handleCheckboxState }
|
||||
/>
|
||||
{ Modal && (
|
||||
<div
|
||||
className="ppcp-r-settings-block__payment-methods__item__settings"
|
||||
onClick={ () =>
|
||||
setModalIsVisible( true )
|
||||
}
|
||||
>
|
||||
{ data().getImage(
|
||||
'icon-settings.svg'
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</SettingsBlock>
|
||||
{ Modal && modalIsVisible && (
|
||||
<Modal setModalIsVisible={ setModalIsVisible } />
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
import { useState, useCallback } from '@wordpress/element';
|
||||
import SettingsBlock from './SettingsBlock';
|
||||
import PaymentMethodItemBlock from './PaymentMethodItemBlock';
|
||||
|
||||
const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
|
||||
const [ selectedMethod, setSelectedMethod ] = useState( null );
|
||||
|
||||
const handleSelect = useCallback( ( methodId, isSelected ) => {
|
||||
setSelectedMethod( isSelected ? methodId : null );
|
||||
}, [] );
|
||||
|
||||
if ( paymentMethods.length === 0 ) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -9,19 +16,18 @@ const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
|
|||
return (
|
||||
<SettingsBlock
|
||||
className={ `ppcp-r-settings-block__payment-methods ${ className }` }
|
||||
components={ [
|
||||
() => (
|
||||
<>
|
||||
{ paymentMethods.map( ( paymentMethod ) => (
|
||||
<PaymentMethodItemBlock
|
||||
key={ paymentMethod.id }
|
||||
{ ...paymentMethod }
|
||||
/>
|
||||
) ) }
|
||||
</>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
>
|
||||
{ paymentMethods.map( ( paymentMethod ) => (
|
||||
<PaymentMethodItemBlock
|
||||
key={ paymentMethod.id }
|
||||
{ ...paymentMethod }
|
||||
isSelected={ selectedMethod === paymentMethod.id }
|
||||
onSelect={ ( checked ) =>
|
||||
handleSelect( paymentMethod.id, checked )
|
||||
}
|
||||
/>
|
||||
) ) }
|
||||
</SettingsBlock>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,37 +11,32 @@ const RadioSettingsBlock = ( {
|
|||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__radio ppcp-r-settings-block--expert-rdb"
|
||||
components={ [
|
||||
() => (
|
||||
<>
|
||||
<Header>
|
||||
<Title>{ title }</Title>
|
||||
<Description>{ description }</Description>
|
||||
</Header>
|
||||
{ options.map( ( option ) => (
|
||||
<PayPalRdbWithContent
|
||||
key={ option.id }
|
||||
id={ option.id }
|
||||
name={ props.actionProps?.name }
|
||||
value={ option.value }
|
||||
currentValue={ props.actionProps?.currentValue }
|
||||
handleRdbState={ ( newValue ) =>
|
||||
props.actionProps?.callback(
|
||||
props.actionProps?.key,
|
||||
newValue
|
||||
)
|
||||
}
|
||||
label={ option.label }
|
||||
description={ option.description }
|
||||
toggleAdditionalContent={ true }
|
||||
>
|
||||
{ option.additionalContent }
|
||||
</PayPalRdbWithContent>
|
||||
) ) }
|
||||
</>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
>
|
||||
<Header>
|
||||
<Title>{ title }</Title>
|
||||
<Description>{ description }</Description>
|
||||
</Header>
|
||||
{ options.map( ( option ) => (
|
||||
<PayPalRdbWithContent
|
||||
key={ option.id }
|
||||
id={ option.id }
|
||||
name={ props.actionProps?.name }
|
||||
value={ option.value }
|
||||
currentValue={ props.actionProps?.currentValue }
|
||||
handleRdbState={ ( newValue ) =>
|
||||
props.actionProps?.callback(
|
||||
props.actionProps?.key,
|
||||
newValue
|
||||
)
|
||||
}
|
||||
label={ option.label }
|
||||
description={ option.description }
|
||||
toggleAdditionalContent={ true }
|
||||
>
|
||||
{ option.additionalContent }
|
||||
</PayPalRdbWithContent>
|
||||
) ) }
|
||||
</SettingsBlock>
|
||||
);
|
||||
|
||||
export default RadioSettingsBlock;
|
||||
|
|
|
|||
|
|
@ -35,27 +35,19 @@ const SelectSettingsBlock = ( {
|
|||
order = DEFAULT_ELEMENT_ORDER,
|
||||
...props
|
||||
} ) => (
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__select"
|
||||
components={ [
|
||||
() => (
|
||||
<>
|
||||
{ order.map( ( elementKey ) => {
|
||||
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
|
||||
return RenderElement ? (
|
||||
<RenderElement
|
||||
key={ elementKey }
|
||||
title={ title }
|
||||
description={ description }
|
||||
actionProps={ props.actionProps }
|
||||
/>
|
||||
) : null;
|
||||
} ) }
|
||||
</>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__select">
|
||||
{ order.map( ( elementKey ) => {
|
||||
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
|
||||
return RenderElement ? (
|
||||
<RenderElement
|
||||
key={ elementKey }
|
||||
title={ title }
|
||||
description={ description }
|
||||
actionProps={ props.actionProps }
|
||||
/>
|
||||
) : null;
|
||||
} ) }
|
||||
</SettingsBlock>
|
||||
);
|
||||
|
||||
export default SelectSettingsBlock;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
const SettingsBlock = ( { className, components = [] } ) => {
|
||||
const SettingsBlock = ( { className, children } ) => {
|
||||
const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
|
||||
Boolean
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={ blockClassName.join( ' ' ) }>
|
||||
{ components.map( ( Component, index ) => (
|
||||
<Component key={ index } />
|
||||
) ) }
|
||||
</div>
|
||||
);
|
||||
return <div className={ blockClassName.join( ' ' ) }>{ children }</div>;
|
||||
};
|
||||
|
||||
export default SettingsBlock;
|
||||
|
|
|
|||
|
|
@ -3,35 +3,25 @@ import SettingsBlock from './SettingsBlock';
|
|||
import { Header, Title, Action, Description } from './SettingsBlockElements';
|
||||
|
||||
const ToggleSettingsBlock = ( { title, description, ...props } ) => (
|
||||
<SettingsBlock
|
||||
{ ...props }
|
||||
className="ppcp-r-settings-block__toggle"
|
||||
components={ [
|
||||
() => (
|
||||
<Action>
|
||||
<ToggleControl
|
||||
className="ppcp-r-settings-block__toggle-control"
|
||||
__nextHasNoMarginBottom={ true }
|
||||
checked={ props.actionProps?.value }
|
||||
onChange={ ( newValue ) =>
|
||||
props.actionProps?.callback(
|
||||
props.actionProps?.key,
|
||||
newValue
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Action>
|
||||
),
|
||||
() => (
|
||||
<Header>
|
||||
{ title && <Title>{ title }</Title> }
|
||||
{ description && (
|
||||
<Description>{ description }</Description>
|
||||
) }
|
||||
</Header>
|
||||
),
|
||||
] }
|
||||
/>
|
||||
<SettingsBlock { ...props } className="ppcp-r-settings-block__toggle">
|
||||
<Action>
|
||||
<ToggleControl
|
||||
className="ppcp-r-settings-block__toggle-control"
|
||||
__nextHasNoMarginBottom={ true }
|
||||
checked={ props.actionProps?.value }
|
||||
onChange={ ( newValue ) =>
|
||||
props.actionProps?.callback(
|
||||
props.actionProps?.key,
|
||||
newValue
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Action>
|
||||
<Header>
|
||||
{ title && <Title>{ title }</Title> }
|
||||
{ description && <Description>{ description }</Description> }
|
||||
</Header>
|
||||
</SettingsBlock>
|
||||
);
|
||||
|
||||
export default ToggleSettingsBlock;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,17 @@
|
|||
import { ToggleControl } from '@wordpress/components';
|
||||
import { useRef } from '@wordpress/element';
|
||||
|
||||
import SpinnerOverlay from './SpinnerOverlay';
|
||||
|
||||
const SettingsToggleBlock = ( {
|
||||
isToggled,
|
||||
setToggled,
|
||||
isLoading = false,
|
||||
disabled = false,
|
||||
...props
|
||||
} ) => {
|
||||
const toggleRef = useRef( null );
|
||||
const blockClasses = [ 'ppcp-r-toggle-block' ];
|
||||
|
||||
if ( isLoading ) {
|
||||
blockClasses.push( 'ppcp--is-loading' );
|
||||
}
|
||||
|
||||
const handleLabelClick = () => {
|
||||
if ( ! toggleRef.current || isLoading ) {
|
||||
if ( ! toggleRef.current || disabled ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -52,13 +46,12 @@ const SettingsToggleBlock = ( {
|
|||
ref={ toggleRef }
|
||||
checked={ isToggled }
|
||||
onChange={ ( newState ) => setToggled( newState ) }
|
||||
disabled={ isLoading }
|
||||
disabled={ disabled }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{ props.children && isToggled && (
|
||||
<div className="ppcp-r-toggle-block__toggled-content">
|
||||
{ isLoading && <SpinnerOverlay /> }
|
||||
{ props.children }
|
||||
</div>
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
import { Spinner } from '@wordpress/components';
|
||||
|
||||
const SpinnerOverlay = () => {
|
||||
const SpinnerOverlay = ( { message = '' } ) => {
|
||||
return (
|
||||
<div className="ppcp-r-spinner-overlay">
|
||||
{ message && (
|
||||
<span className="ppcp-r-spinner-overlay__message">
|
||||
{ message }
|
||||
</span>
|
||||
) }
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useCallback, useEffect, useState } from '@wordpress/element';
|
||||
import { TabPanel } from '@wordpress/components';
|
||||
import { getQuery, updateQueryString } from '@woocommerce/navigation';
|
||||
|
||||
import { getQuery, updateQueryString } from '../../utils/navigation';
|
||||
|
||||
const TabNavigation = ( { tabs } ) => {
|
||||
const { panel } = getQuery();
|
||||
|
|
@ -30,7 +31,7 @@ const TabNavigation = ( { tabs } ) => {
|
|||
);
|
||||
|
||||
useEffect( () => {
|
||||
updateQueryString( { panel: activePanel }, '/', getQuery() );
|
||||
updateQueryString( { panel: activePanel } );
|
||||
}, [ activePanel ] );
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
@ -63,10 +53,13 @@ const AcdcFlow = ( {
|
|||
imageBadge={ [
|
||||
'icon-payment-method-paypal-small.svg',
|
||||
] }
|
||||
textBadge={
|
||||
<PricingTitleBadge item="plater" />
|
||||
}
|
||||
description={ sprintf(
|
||||
// translators: %s: Link to PayPal business fees guide
|
||||
__(
|
||||
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
|
||||
'Offer installment payment options and get paid upfront. <a target="_blank" href="%s">Learn more</a>',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://www.paypal.com/us/business/paypal-business-fees'
|
||||
|
|
@ -116,7 +109,6 @@ const AcdcFlow = ( {
|
|||
isFastlane={ isFastlane }
|
||||
isPayLater={ isPayLater }
|
||||
storeCountry={ storeCountry }
|
||||
storeCurrency={ storeCurrency }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -133,11 +125,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 +189,6 @@ const AcdcFlow = ( {
|
|||
isFastlane={ isFastlane }
|
||||
isPayLater={ isPayLater }
|
||||
storeCountry={ storeCountry }
|
||||
storeCurrency={ storeCurrency }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -217,11 +204,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'
|
||||
|
|
@ -256,7 +239,7 @@ const AcdcFlow = ( {
|
|||
description={ sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
|
||||
'Offer installment payment options and get paid upfront. <a target="_blank" href="%s">Learn more</a>',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
|
|
@ -280,7 +263,6 @@ const AcdcFlow = ( {
|
|||
isFastlane={ isFastlane }
|
||||
isPayLater={ isPayLater }
|
||||
storeCountry={ storeCountry }
|
||||
storeCurrency={ storeCurrency }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
@ -60,7 +56,7 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
|
|||
description={ sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
|
||||
'Offer installment payment options and get paid upfront. <a target="_blank" href="%s">Learn more</a>',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
|
|
@ -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'
|
||||
|
|
@ -158,7 +149,7 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
|
|||
description={ sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
|
||||
'Offer installment payment options and get paid upfront. <a target="_blank" href="%s">Learn more</a>',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
|
|
@ -181,7 +172,6 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
|
|||
isFastlane={ false }
|
||||
isPayLater={ isPayLater }
|
||||
storeCountry={ storeCountry }
|
||||
storeCurrency={ storeCurrency }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,24 +1,10 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import PricingDescription from '../PricingDescription';
|
||||
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
|
||||
__(
|
||||
'<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 '
|
||||
);
|
||||
|
||||
const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry } ) => {
|
||||
return (
|
||||
<div className="ppcp-r-welcome-docs">
|
||||
<h2 className="ppcp-r-welcome-docs__title">
|
||||
|
|
@ -32,19 +18,14 @@ const WelcomeDocs = ( {
|
|||
isFastlane={ isFastlane }
|
||||
isPayLater={ isPayLater }
|
||||
storeCountry={ storeCountry }
|
||||
storeCurrency={ storeCurrency }
|
||||
/>
|
||||
) : (
|
||||
<BcdcFlow
|
||||
isPayLater={ isPayLater }
|
||||
storeCountry={ storeCountry }
|
||||
storeCurrency={ storeCurrency }
|
||||
/>
|
||||
) }
|
||||
<p
|
||||
className="ppcp-r-optional-payment-methods__description"
|
||||
dangerouslySetInnerHTML={ { __html: pricesBasedDescription } }
|
||||
></p>
|
||||
<PricingDescription />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
