mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Merge branch 'trunk' into PCP-3834-update-onboarding-wizard-screens-with-new-design
# Conflicts: # modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
This commit is contained in:
Narek Zakarian
commit
e4453030be
116 changed files with 30423 additions and 62928 deletions
|
|
@ -24,6 +24,7 @@ export const PayPalRdb = ( props ) => {
|
|||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
<input
|
||||
id={ props?.id ? props.id : null }
|
||||
className="ppcp-r__radio-value"
|
||||
type="radio"
|
||||
checked={ props.value === props.currentValue }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import { Button } from '@wordpress/components';
|
||||
import PaymentMethodIcon from './PaymentMethodIcon';
|
||||
import { PayPalCheckbox } from './Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const PaymentMethodItem = ( props ) => {
|
||||
const [ paymentMethodState, setPaymentMethodState ] = useState();
|
||||
const [ modalIsVisible, setModalIsVisible ] = useState( false );
|
||||
let Modal = null;
|
||||
if ( props?.modal ) {
|
||||
Modal = props.modal;
|
||||
}
|
||||
const handleCheckboxState = ( checked ) => {
|
||||
if ( checked ) {
|
||||
setPaymentMethodState( props.payment_method_id );
|
||||
} else {
|
||||
setPaymentMethodState( null );
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="ppcp-r-payment-method-item">
|
||||
<div className="ppcp-r-payment-method-item__checkbox-wrap">
|
||||
<PayPalCheckbox
|
||||
currentValue={ [ paymentMethodState ] }
|
||||
name="payment_method_status"
|
||||
value={ props.payment_method_id }
|
||||
handleCheckboxState={ handleCheckboxState }
|
||||
/>
|
||||
<div className="ppcp-r-payment-method-item__icon-wrap">
|
||||
<PaymentMethodIcon
|
||||
icons={ [ props.icon ] }
|
||||
type={ props.icon }
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-payment-method-item__content">
|
||||
<span className="ppcp-r-payment-method-item__title">
|
||||
{ props.title }
|
||||
</span>
|
||||
<p>{ props.description }</p>
|
||||
</div>
|
||||
</div>
|
||||
{ Modal && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={ () => {
|
||||
setModalIsVisible( true );
|
||||
} }
|
||||
>
|
||||
{ __( 'Modify', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
) }
|
||||
</div>
|
||||
{ Modal && modalIsVisible && (
|
||||
<Modal setModalIsVisible={ setModalIsVisible } />
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentMethodItem;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { Modal } from '@wordpress/components';
|
||||
import PaymentMethodIcon from './PaymentMethodIcon';
|
||||
|
||||
const PaymentMethodModal = ( props ) => {
|
||||
let className = 'ppcp-r-modal';
|
||||
let classNameContainer = 'ppcp-r-modal__container';
|
||||
|
||||
if ( props?.className ) {
|
||||
className += ' ' + props.className;
|
||||
}
|
||||
|
||||
if ( props?.container && props.container === 'small' ) {
|
||||
classNameContainer += ' ppcp-r-modal__container--small';
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className={ className }
|
||||
onRequestClose={ () => props.setModalIsVisible( false ) }
|
||||
>
|
||||
<div className={ classNameContainer }>
|
||||
<div className="ppcp-r-modal__header">
|
||||
<PaymentMethodIcon
|
||||
icons={ [ props.icon ] }
|
||||
type={ props.icon }
|
||||
/>
|
||||
<span className="ppcp-r-modal__title">{ props.title }</span>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__content">{ props.children }</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentMethodModal;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { PayPalRdb } from '../../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const THREED_SECURE_GROUP_NAME = 'threed-secure';
|
||||
const ModalAcdc = ( { setModalIsVisible } ) => {
|
||||
const [ threeDSecure, setThreeDSecure ] = useState( 'no-3d-secure' );
|
||||
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
setModalIsVisible={ setModalIsVisible }
|
||||
icon="payment-method-cards"
|
||||
title={ __(
|
||||
'Advanced Credit and Debit Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<strong className="ppcp-r-modal__content-title">
|
||||
{ __( '3D Secure', 'woocommerce-paypal-payments' ) }
|
||||
</strong>
|
||||
<p className="ppcp-r-modal__description">
|
||||
{ __(
|
||||
'Authenticate cardholders through their card issuers to reduce fraud and improve transaction security. Successful 3D Secure authentication can shift liability for fraudulent chargebacks to the card issuer.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--acdc">
|
||||
<div className="ppcp-r-modal__field-rdb">
|
||||
<PayPalRdb
|
||||
id="no-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="no-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
/>
|
||||
<label htmlFor="no-3d-secure">
|
||||
{ __( 'No 3D Secure', 'woocommerce-paypal-payments' ) }
|
||||
</label>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-rdb">
|
||||
<PayPalRdb
|
||||
id="only-required-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="only-required-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
/>
|
||||
<label htmlFor="only-required-3d-secure">
|
||||
{ __(
|
||||
'Only when required',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-rdb">
|
||||
<PayPalRdb
|
||||
id="always-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="always-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
/>
|
||||
<label htmlFor="always-3d-secure">
|
||||
{ __(
|
||||
'Always require 3D Secure',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-rows">
|
||||
<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
|
||||
<Button variant="primary">
|
||||
{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PaymentMethodModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalAcdc;
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, ToggleControl } from '@wordpress/components';
|
||||
import { PayPalRdb } from '../../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const ModalFastlane = ( { setModalIsVisible } ) => {
|
||||
const [ fastlaneSettings, setFastlaneSettings ] = useState( {
|
||||
cardholderName: false,
|
||||
displayWatermark: false,
|
||||
} );
|
||||
|
||||
const updateFormValue = ( key, value ) => {
|
||||
setFastlaneSettings( { ...fastlaneSettings, [ key ]: value } );
|
||||
};
|
||||
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
setModalIsVisible={ setModalIsVisible }
|
||||
icon="payment-method-fastlane"
|
||||
title={ __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ) }
|
||||
>
|
||||
<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--fastlane">
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<ToggleControl
|
||||
className="ppcp-r-modal__inverted-toggle-control"
|
||||
checked={ fastlaneSettings.cardholderName }
|
||||
onChange={ ( newValue ) =>
|
||||
updateFormValue( 'cardholderName', newValue )
|
||||
}
|
||||
label={ __(
|
||||
'Display cardholder name',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
id="ppcp-r-fastlane-settings-cardholder"
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<ToggleControl
|
||||
className="ppcp-r-modal__inverted-toggle-control"
|
||||
checked={ fastlaneSettings.displayWatermark }
|
||||
onChange={ ( newValue ) =>
|
||||
updateFormValue( 'displayWatermark', newValue )
|
||||
}
|
||||
label={ __(
|
||||
'Display Fastlane Watermark',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
id="ppcp-r-fastlane-settings-watermark"
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
|
||||
<Button variant="primary">
|
||||
{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PaymentMethodModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalFastlane;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { ToggleControl, Button } from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const ModalPayPal = ( { setModalIsVisible } ) => {
|
||||
const [ paypalSettings, setPaypalSettings ] = useState( {
|
||||
checkoutPageTitle: 'PayPal',
|
||||
checkoutPageDescription: 'Pay via PayPal',
|
||||
showLogo: false,
|
||||
} );
|
||||
|
||||
const updateFormValue = ( key, value ) => {
|
||||
setPaypalSettings( { ...paypalSettings, [ key ]: value } );
|
||||
};
|
||||
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
setModalIsVisible={ setModalIsVisible }
|
||||
icon="payment-method-paypal"
|
||||
container="small"
|
||||
title={ __( 'PayPal', 'woocommerce-paypal-payments' ) }
|
||||
>
|
||||
<div className="ppcp-r-modal__field-rows">
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<label htmlFor="ppcp-r-paypal-settings-checkout-title">
|
||||
{ __(
|
||||
'Checkout page title',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="ppcp-r-paypal-settings-checkout-title"
|
||||
value={ paypalSettings.checkoutPageTitle }
|
||||
onInput={ ( e ) =>
|
||||
updateFormValue(
|
||||
'checkoutPageTitle',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<label htmlFor="ppcp-r-paypal-settings-checkout-page-description">
|
||||
{ __(
|
||||
'Checkout page description',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="ppcp-r-paypal-settings-checkout-page-description"
|
||||
value={ paypalSettings.checkoutPageDescription }
|
||||
onInput={ ( e ) =>
|
||||
updateFormValue(
|
||||
'checkoutPageDescription',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<ToggleControl
|
||||
className="ppcp-r-modal__inverted-toggle-control"
|
||||
label={ __(
|
||||
'Show logo',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
id="ppcp-r-paypal-settings-show-logo"
|
||||
checked={ paypalSettings.showLogo }
|
||||
onChange={ ( newValue ) => {
|
||||
updateFormValue( 'showLogo', newValue );
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
|
||||
<Button variant="primary">
|
||||
{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PaymentMethodModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalPayPal;
|
||||
|
|
@ -1,5 +1,185 @@
|
|||
import SettingsCard from '../../ReusableComponents/SettingsCard';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PaymentMethodItem from '../../ReusableComponents/PaymentMethodItem';
|
||||
import ModalPayPal from './Modals/ModalPayPal';
|
||||
import ModalFastlane from './Modals/ModalFastlane';
|
||||
import ModalAcdc from './Modals/ModalAcdc';
|
||||
|
||||
const TabPaymentMethods = () => {
|
||||
return <div>PaymentMethods tab</div>;
|
||||
const renderPaymentMethods = ( data ) => {
|
||||
return data.map( ( paymentMethod ) => (
|
||||
<PaymentMethodItem key={ paymentMethod.id } { ...paymentMethod } />
|
||||
) );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-payment-methods">
|
||||
<SettingsCard
|
||||
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Select your preferred checkout option with PayPal for easy payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-standard.svg"
|
||||
>
|
||||
{ renderPaymentMethods( paymentMethodsPayPalCheckoutDefault ) }
|
||||
</SettingsCard>
|
||||
<SettingsCard
|
||||
title={ __(
|
||||
'Online Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Select your preferred card payment options for efficient payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-online-methods.svg"
|
||||
>
|
||||
{ renderPaymentMethods(
|
||||
paymentMethodsOnlineCardPaymentsDefault
|
||||
) }
|
||||
</SettingsCard>
|
||||
<SettingsCard
|
||||
title={ __(
|
||||
'Alternative Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'With alternative payment methods, customers across the globe can pay with their bank accounts and other local payment methods.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-alternative-methods.svg"
|
||||
>
|
||||
{ renderPaymentMethods( paymentMethodsAlternativeDefault ) }
|
||||
</SettingsCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const paymentMethodsPayPalCheckoutDefault = [
|
||||
{
|
||||
id: 'paypal',
|
||||
title: __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximize conversion.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-paypal',
|
||||
modal: ModalPayPal,
|
||||
},
|
||||
{
|
||||
id: 'venmo',
|
||||
title: __( 'Venmo', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Offer Venmo at checkout to millions of active users.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-venmo',
|
||||
},
|
||||
{
|
||||
id: 'paypal_credit',
|
||||
title: __( 'PayPal Credit', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Get paid in full at checkout while giving your customers the option to pay interest free if paid within 6 months on orders over $99.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-paypal',
|
||||
},
|
||||
{
|
||||
id: 'credit_and_debit_card_payments',
|
||||
title: __(
|
||||
'Credit and debit card payments',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
"Accept all major credit and debit cards - even if your customer doesn't have a PayPal account.",
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-cards',
|
||||
},
|
||||
];
|
||||
|
||||
const paymentMethodsOnlineCardPaymentsDefault = [
|
||||
{
|
||||
id: 'advanced_credit_and_debit_card_payments',
|
||||
title: __(
|
||||
'Advanced Credit and Debit Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
"Present custom credit and debit card fields to your payers so they can pay with credit and debit cards using your site's branding.",
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-cards',
|
||||
modal: ModalAcdc,
|
||||
},
|
||||
{
|
||||
id: 'fastlane',
|
||||
title: __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Tap into the scale and trust of PayPal’s customer network to recognize shoppers and make guest checkout more seamless than ever.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-fastlane',
|
||||
modal: ModalFastlane,
|
||||
},
|
||||
{
|
||||
id: 'apply_pay',
|
||||
title: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Allow customers to pay via their Apple Pay digital wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-apple-pay',
|
||||
},
|
||||
{
|
||||
id: 'google_pay',
|
||||
title: __( 'Google Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Allow customers to pay via their Google Pay digital wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-google-pay',
|
||||
},
|
||||
];
|
||||
|
||||
const paymentMethodsAlternativeDefault = [
|
||||
{
|
||||
id: 'bancontact',
|
||||
title: __( 'Bancontact', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Bancontact is the most widely used, accepted and trusted electronic payment method in Belgium. Bancontact makes it possible to pay directly through the online payment systems of all major Belgian banks.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-bancontact',
|
||||
},
|
||||
{
|
||||
id: 'ideal',
|
||||
title: __( 'iDEAL', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'iDEAL is a payment method in the Netherlands that allows buyers to select their issuing bank from a list of options.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-ideal',
|
||||
},
|
||||
{
|
||||
id: 'eps',
|
||||
title: __( 'eps', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-eps',
|
||||
},
|
||||
{
|
||||
id: 'blik',
|
||||
title: __( 'BLIK', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-blik',
|
||||
},
|
||||
];
|
||||
|
||||
export default TabPaymentMethods;
|
||||
|
|
|
|||
|
|
@ -49,31 +49,31 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
|||
};
|
||||
|
||||
const WelcomeFeatures = () => {
|
||||
return (
|
||||
<div className="ppcp-r-welcome-features">
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>{__('Deposits', 'woocommerce-paypal-payments')}</span>
|
||||
<p>{__('Instant', 'woocommerce-paypal-payments')}</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
return (
|
||||
<div className="ppcp-r-welcome-features">
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>{ __( 'Deposits', 'woocommerce-paypal-payments' ) }</span>
|
||||
<p>{ __( 'Instant', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{__('Payment Capture', 'woocommerce-paypal-payments')}
|
||||
{ __( 'Payment Capture', 'woocommerce-paypal-payments' ) }
|
||||
</span>
|
||||
<p>
|
||||
{__(
|
||||
'Authorize only or Capture',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<p>
|
||||
{ __(
|
||||
'Authorize only or Capture',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{__(
|
||||
'Recurring payments',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
{ __(
|
||||
'Recurring payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</span>
|
||||
<p>{__('Supported', 'woocommerce-paypal-payments')}</p>
|
||||
<p>{ __( 'Supported', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -228,114 +228,116 @@ const WelcomeDocs = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const WelcomeForm = ({setCompleted}) => {
|
||||
const {
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingStepWelcome();
|
||||
const WelcomeForm = ( { setCompleted } ) => {
|
||||
const {
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingStepWelcome();
|
||||
|
||||
const {connectManual} = useManualConnect();
|
||||
const { connectManual } = useManualConnect();
|
||||
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
const res = await connectManual(
|
||||
clientId,
|
||||
clientSecret,
|
||||
isSandboxMode
|
||||
);
|
||||
if (!res.success) {
|
||||
throw new Error('Request failed.');
|
||||
}
|
||||
const handleConnect = async () => {
|
||||
try {
|
||||
const res = await connectManual(
|
||||
clientId,
|
||||
clientSecret,
|
||||
isSandboxMode
|
||||
);
|
||||
if ( ! res.success ) {
|
||||
throw new Error( 'Request failed.' );
|
||||
}
|
||||
|
||||
setCompleted(true);
|
||||
} catch (exc) {
|
||||
console.error(exc);
|
||||
alert('Connection failed.');
|
||||
}
|
||||
};
|
||||
console.log(`Merchant ID: ${res.merchantId}, email: ${res.email}`);
|
||||
|
||||
const advancedUsersDescription = sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
);
|
||||
setCompleted( true );
|
||||
} catch ( exc ) {
|
||||
console.error( exc );
|
||||
alert( 'Connection failed.' );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsToggleBlock
|
||||
label={__(
|
||||
'Enable Sandbox Mode',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
description={__(
|
||||
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
isToggled={!!isSandboxMode}
|
||||
setToggled={setSandboxMode}
|
||||
>
|
||||
<Button variant="secondary">
|
||||
{__('Connect Account', 'woocommerce-paypal-payments')}
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<SettingsToggleBlock
|
||||
label={__(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
)}
|
||||
description={advancedUsersDescription}
|
||||
isToggled={!!isManualConnectionMode}
|
||||
setToggled={setManualConnectionMode}
|
||||
>
|
||||
<DataStoreControl
|
||||
control={TextControl}
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={clientId}
|
||||
onChange={setClientId}
|
||||
/>
|
||||
<DataStoreControl
|
||||
control={TextControl}
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={clientSecret}
|
||||
onChange={setClientSecret}
|
||||
type="password"
|
||||
/>
|
||||
<Button variant="secondary" onClick={handleConnect}>
|
||||
{__('Connect Account', 'woocommerce-paypal-payments')}
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</>
|
||||
);
|
||||
const advancedUsersDescription = sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a target="_blank" href="%s">click here</a>.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Enable Sandbox Mode',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
isToggled={ !! isSandboxMode }
|
||||
setToggled={ setSandboxMode }
|
||||
>
|
||||
<Button variant="secondary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ advancedUsersDescription }
|
||||
isToggled={ !! isManualConnectionMode }
|
||||
setToggled={ setManualConnectionMode }
|
||||
>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientId }
|
||||
onChange={ setClientId }
|
||||
/>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientSecret }
|
||||
onChange={ setClientSecret }
|
||||
type="password"
|
||||
/>
|
||||
<Button variant="secondary" onClick={ handleConnect }>
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepWelcome;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
