mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge remote-tracking branch 'origin/trunk' into PCP-3816-Create-payment-placeholder-page-in-new-settings-module
# Conflicts: # modules/ppcp-settings/resources/css/style.scss
This commit is contained in:
inpsyde-maticluznar
commit
6b9b024d64
55 changed files with 2943 additions and 1137 deletions
0
modules/ppcp-settings/node_modules/.gitkeep
generated
vendored
Normal file
0
modules/ppcp-settings/node_modules/.gitkeep
generated
vendored
Normal file
|
|
@ -7,10 +7,12 @@
|
|||
"build": "wp-scripts build --webpack-src-dir=resources/js --output-path=assets"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@woocommerce/navigation": "8.1.0",
|
||||
"@wordpress/data": "^10.10.0",
|
||||
"@wordpress/data-controls": "^4.10.0",
|
||||
"@wordpress/scripts": "^30.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wordpress/data": "^10.10.0",
|
||||
"@wordpress/data-controls": "^4.10.0"
|
||||
"@woocommerce/settings": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,3 +15,15 @@ $shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
|
|||
$shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
$color-gradient-dark: #001435;
|
||||
$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);
|
||||
|
||||
$max-width-onboarding: 1024px;
|
||||
$max-width-onboarding-content: 662px;
|
||||
$max-width-settings: 938px;
|
||||
|
||||
#ppcp-settings-container {
|
||||
--max-width-settings: #{$max-width-settings};
|
||||
--max-width-onboarding: #{$max-width-onboarding};
|
||||
--max-width-onboarding-content: #{$max-width-onboarding-content};
|
||||
|
||||
--max-container-width: var(--max-width-settings);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,10 @@
|
|||
&__checkbox-presentation {
|
||||
@include fake-input-field(2px);
|
||||
}
|
||||
&__additional-content{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
gap: 16px;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
.ppcp-r {
|
||||
&-container {
|
||||
max-width: var(--max-container-width, none);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&-inner-container {
|
||||
width: 652px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 16px 72px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
|
||||
&--settings {
|
||||
max-width: 938px;
|
||||
}
|
||||
box-shadow: $shadow-card;
|
||||
}
|
||||
|
||||
&-card {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
.ppcp-r-tabs {
|
||||
--wp-components-color-accent: #{$color-blueberry};
|
||||
--wp-admin-border-width-focus: 3px;
|
||||
|
||||
max-width: var(--max-container-width);
|
||||
margin: 0 auto;
|
||||
transition: max-width 0.2s;
|
||||
|
||||
.components-tab-panel__tabs {
|
||||
box-shadow: 0 -1px 0 0 $color-gray-400 inset;
|
||||
margin-bottom: 48px;
|
||||
gap: 12px;
|
||||
|
||||
.components-button {
|
||||
padding: 16px 20px;
|
||||
|
||||
&.is-active {
|
||||
background-color: #fff4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import './onboarding/step-welcome';
|
||||
@import './onboarding/step-business';
|
||||
@import './onboarding/step-products';
|
||||
|
||||
.ppcp-r-tabs.onboarding,
|
||||
.ppcp-r-container--onboarding {
|
||||
--max-container-width: var(--max-width-onboarding);
|
||||
|
||||
.ppcp-r-inner-container {
|
||||
max-width: var(--max-width-onboarding-content);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,4 @@
|
|||
.ppcp-r-page-business {
|
||||
.ppcp-r-inner-container {
|
||||
width: 622px;
|
||||
padding-bottom: 84px;
|
||||
@media screen and (max-width: 480px) {
|
||||
padding-bottom: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-payment-method-icons {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,14 +19,6 @@
|
|||
}
|
||||
|
||||
.ppcp-r-page-products {
|
||||
.ppcp-r-inner-container {
|
||||
width: 622px;
|
||||
padding-bottom: 48px;
|
||||
@media screen and (max-width: 480px) {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-payment-method-icons {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
.ppcp-r-page-welcome {
|
||||
.ppcp-r-inner-container {
|
||||
padding-bottom: 72px;
|
||||
@media screen and (max-width: 480px) {
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-welcome-features {
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,14 +11,11 @@
|
|||
@import './components/reusable-components/payment-method-icons';
|
||||
@import './components/reusable-components/settings-wrapper';
|
||||
@import './components/reusable-components/select-box';
|
||||
@import './components/reusable-components/tab-navigation';
|
||||
@import './components/reusable-components/navigation';
|
||||
@import './components/reusable-components/tabs';
|
||||
@import './components/reusable-components/fields';
|
||||
@import './components/reusable-components/title-badge';
|
||||
@import './components/reusable-components/payment-method-item';
|
||||
@import './components/screens/onboarding/step-welcome';
|
||||
@import './components/screens/onboarding/step-business';
|
||||
@import './components/screens/onboarding/step-products';
|
||||
@import './components/screens/onboarding';
|
||||
@import './components/screens/dashboard/tab-dashboard';
|
||||
@import './components/screens/dashboard/tab-payment-methods';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
export const PAGE_ONBOARDING = 'onboarding';
|
||||
export const PAGE_SETTINGS = 'settings';
|
||||
|
||||
const Container = ( { isCard = true, page, children } ) => {
|
||||
let className = 'ppcp-r-container';
|
||||
|
||||
|
|
|
|||
|
|
@ -3,27 +3,35 @@ import { __ } from '@wordpress/i18n';
|
|||
|
||||
const Navigation = ( {
|
||||
setStep,
|
||||
setCompleted,
|
||||
currentStep,
|
||||
stepperOrder,
|
||||
canProceeedCallback = () => true,
|
||||
} ) => {
|
||||
const setNextStep = ( nextStep ) => {
|
||||
let newStep = currentStep + nextStep;
|
||||
if ( newStep > stepperOrder.length - 1 ) {
|
||||
newStep = currentStep;
|
||||
const navigateBy = ( stepDirection ) => {
|
||||
let newStep = currentStep + stepDirection;
|
||||
|
||||
if ( isNaN( newStep ) || newStep < 0 ) {
|
||||
console.warn( 'Invalid next step:', newStep );
|
||||
newStep = 0;
|
||||
}
|
||||
|
||||
if ( newStep >= stepperOrder.length ) {
|
||||
setCompleted( true );
|
||||
} else {
|
||||
setStep( newStep );
|
||||
}
|
||||
setStep( newStep );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-navigation">
|
||||
<Button variant="tertiary" onClick={ () => setNextStep( -1 ) }>
|
||||
<Button variant="tertiary" onClick={ () => navigateBy( -1 ) }>
|
||||
{ __( 'Back', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={ ! canProceeedCallback() }
|
||||
onClick={ () => setNextStep( 1 ) }
|
||||
onClick={ () => navigateBy( 1 ) }
|
||||
>
|
||||
{ __( 'Next', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,47 @@
|
|||
import { useCallback, useEffect, useState } from '@wordpress/element';
|
||||
import { TabPanel } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import TabDashboard from '../Screens/Dashboard/TabDashboard';
|
||||
import TabPaymentMethods from '../Screens/Dashboard/TabPaymentMethods';
|
||||
import TabSettings from '../Screens/Dashboard/TabSettings';
|
||||
import TabStyling from '../Screens/Dashboard/TabStyling';
|
||||
import { getQuery, updateQueryString } from '@woocommerce/navigation';
|
||||
|
||||
const TAB_DASHBOARD = 'TabDashboard';
|
||||
const TAB_PAYMENT_METHODS = 'TabPaymentMethods';
|
||||
const TAB_SETTINGS = 'TabSettings';
|
||||
const TAB_STYLING = 'TabStyling';
|
||||
const TabNavigation = ( { tabs } ) => {
|
||||
const { panel } = getQuery();
|
||||
|
||||
const TabNavigation = () => {
|
||||
const tabComponents = {
|
||||
[ TAB_DASHBOARD ]: TabDashboard,
|
||||
[ TAB_PAYMENT_METHODS ]: TabPaymentMethods,
|
||||
[ TAB_SETTINGS ]: TabSettings,
|
||||
[ TAB_STYLING ]: TabStyling,
|
||||
const isValidTab = ( tabsList, checkTab ) => {
|
||||
return tabsList.some( ( tab ) => tab.name === checkTab );
|
||||
};
|
||||
|
||||
const getValidInitialPanel = () => {
|
||||
if ( ! panel || ! isValidTab( tabs, panel ) ) {
|
||||
return tabs[ 0 ].name;
|
||||
}
|
||||
return panel;
|
||||
};
|
||||
|
||||
const [ activePanel, setActivePanel ] = useState( getValidInitialPanel );
|
||||
|
||||
const updateActivePanel = useCallback(
|
||||
( tabName ) => {
|
||||
if ( isValidTab( tabs, tabName ) ) {
|
||||
setActivePanel( tabName );
|
||||
} else {
|
||||
console.warn( `Invalid tab name: ${ tabName }` );
|
||||
}
|
||||
},
|
||||
[ tabs ]
|
||||
);
|
||||
|
||||
useEffect( () => {
|
||||
updateQueryString( { panel: activePanel }, '/', getQuery() );
|
||||
}, [ activePanel ] );
|
||||
|
||||
return (
|
||||
<TabPanel
|
||||
className="my-tab-panel"
|
||||
activeClass="active-tab"
|
||||
tabs={ [
|
||||
{
|
||||
name: TAB_DASHBOARD,
|
||||
title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
|
||||
className: 'ppcp-r-tab-dashboard',
|
||||
},
|
||||
{
|
||||
name: TAB_PAYMENT_METHODS,
|
||||
title: __(
|
||||
'Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
className: 'ppcp-r-tab-payment-methods',
|
||||
},
|
||||
{
|
||||
name: TAB_SETTINGS,
|
||||
title: __( 'Settings', 'woocommerce-paypal-payments' ),
|
||||
className: 'ppcp-r-tab-settings',
|
||||
},
|
||||
{
|
||||
name: TAB_STYLING,
|
||||
title: __( 'Styling', 'woocommerce-paypal-payments' ),
|
||||
className: 'ppcp-r-tab-styling',
|
||||
},
|
||||
] }
|
||||
className={ `ppcp-r-tabs ${ activePanel }` }
|
||||
initialTabName={ activePanel }
|
||||
onSelect={ updateActivePanel }
|
||||
tabs={ tabs }
|
||||
>
|
||||
{ ( tab ) => {
|
||||
const Component = tabComponents[ tab.name ];
|
||||
return <Component />;
|
||||
return tab.component || <>{ tab.title ?? tab.name }</>;
|
||||
} }
|
||||
</TabPanel>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
import TabNavigation from '../../ReusableComponents/TabNavigation';
|
||||
import Container from '../../ReusableComponents/Container';
|
||||
import { PAGE_SETTINGS } from '../../ReusableComponents/Container';
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<Container isCard={ false } page={ PAGE_SETTINGS }>
|
||||
<TabNavigation />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
|
@ -1,44 +1,36 @@
|
|||
import Container, {
|
||||
PAGE_ONBOARDING,
|
||||
} from '../../ReusableComponents/Container.js';
|
||||
import StepWelcome from './StepWelcome.js';
|
||||
import StepBusiness from './StepBusiness.js';
|
||||
import StepProducts from './StepProducts.js';
|
||||
import { useState } from '@wordpress/element';
|
||||
import Container from '../../ReusableComponents/Container';
|
||||
import { useOnboardingStep } from '../../../data';
|
||||
import { getSteps } from './availableSteps';
|
||||
|
||||
const getCurrentStep = ( requestedStep, steps ) => {
|
||||
const isValidStep = ( step ) =>
|
||||
typeof step === 'number' &&
|
||||
Number.isInteger( step ) &&
|
||||
step >= 0 &&
|
||||
step < steps.length;
|
||||
|
||||
const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0;
|
||||
return steps[ safeCurrentStep ];
|
||||
};
|
||||
|
||||
const Onboarding = () => {
|
||||
const [ step, setStep ] = useState( 0 );
|
||||
const { step, setStep, setCompleted, flags } = useOnboardingStep();
|
||||
const steps = getSteps( flags );
|
||||
|
||||
const CurrentStepComponent = getCurrentStep( step, steps );
|
||||
|
||||
return (
|
||||
<Container page={ PAGE_ONBOARDING }>
|
||||
<Container page="onboarding">
|
||||
<div className="ppcp-r-card">
|
||||
<Stepper currentStep={ step } setStep={ setStep } />
|
||||
<CurrentStepComponent
|
||||
setStep={ setStep }
|
||||
currentStep={ step }
|
||||
setCompleted={ setCompleted }
|
||||
stepperOrder={ steps }
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const Stepper = ( { currentStep, setStep } ) => {
|
||||
const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ];
|
||||
|
||||
const renderSteps = () => {
|
||||
return stepperOrder.map( ( Step, index ) => {
|
||||
return (
|
||||
<div
|
||||
key={ index }
|
||||
style={ index !== currentStep ? { display: 'none' } : {} }
|
||||
>
|
||||
<Step
|
||||
setStep={ setStep }
|
||||
currentStep={ currentStep }
|
||||
stepperOrder={ stepperOrder }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} );
|
||||
};
|
||||
|
||||
return <>{ renderSteps() }</>;
|
||||
};
|
||||
|
||||
export default Onboarding;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,35 @@
|
|||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js';
|
||||
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js';
|
||||
import SelectBox from '../../ReusableComponents/SelectBox.js';
|
||||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
|
||||
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
|
||||
import SelectBox from '../../ReusableComponents/SelectBox';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { useOnboardingStepBusiness } from '../../../data';
|
||||
import Navigation from '../../ReusableComponents/Navigation';
|
||||
import { BUSINESS_TYPES } from '../../../data/constants';
|
||||
|
||||
const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
|
||||
const [ businessCategory, setBusinessCategory ] = useState( null );
|
||||
const BUSINESS_RADIO_GROUP_NAME = 'business';
|
||||
const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller';
|
||||
const BUSINESS_CHECKBOX_VALUE = 'business';
|
||||
const BUSINESS_RADIO_GROUP_NAME = 'business';
|
||||
|
||||
const StepBusiness = ( {
|
||||
setStep,
|
||||
currentStep,
|
||||
stepperOrder,
|
||||
setCompleted,
|
||||
} ) => {
|
||||
const { isCasualSeller, setIsCasualSeller } = useOnboardingStepBusiness();
|
||||
|
||||
const handleSellerTypeChange = ( value ) => {
|
||||
setIsCasualSeller( BUSINESS_TYPES.CASUAL_SELLER === value );
|
||||
};
|
||||
|
||||
const getCurrentValue = () => {
|
||||
if ( isCasualSeller === null ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return isCasualSeller
|
||||
? BUSINESS_TYPES.CASUAL_SELLER
|
||||
: BUSINESS_TYPES.BUSINESS;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-page-business">
|
||||
|
|
@ -33,13 +52,10 @@ const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
|
|||
) }
|
||||
icon="icon-business-casual-seller.svg"
|
||||
name={ BUSINESS_RADIO_GROUP_NAME }
|
||||
value={ CASUAL_SELLER_CHECKBOX_VALUE }
|
||||
changeCallback={ setBusinessCategory }
|
||||
currentValue={ businessCategory }
|
||||
checked={
|
||||
businessCategory ===
|
||||
{ CASUAL_SELLER_CHECKBOX_VALUE }
|
||||
}
|
||||
value={ BUSINESS_TYPES.CASUAL_SELLER }
|
||||
changeCallback={ handleSellerTypeChange }
|
||||
currentValue={ getCurrentValue() }
|
||||
checked={ isCasualSeller === true }
|
||||
type="radio"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
|
|
@ -64,12 +80,10 @@ const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
|
|||
) }
|
||||
icon="icon-business-business.svg"
|
||||
name={ BUSINESS_RADIO_GROUP_NAME }
|
||||
value={ BUSINESS_CHECKBOX_VALUE }
|
||||
currentValue={ businessCategory }
|
||||
changeCallback={ setBusinessCategory }
|
||||
checked={
|
||||
businessCategory === { BUSINESS_CHECKBOX_VALUE }
|
||||
}
|
||||
value={ BUSINESS_TYPES.BUSINESS }
|
||||
changeCallback={ handleSellerTypeChange }
|
||||
currentValue={ getCurrentValue() }
|
||||
checked={ isCasualSeller === false }
|
||||
type="radio"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
|
|
@ -91,7 +105,8 @@ const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
|
|||
setStep={ setStep }
|
||||
currentStep={ currentStep }
|
||||
stepperOrder={ stepperOrder }
|
||||
canProceeedCallback={ () => businessCategory !== null }
|
||||
setCompleted={ setCompleted }
|
||||
canProceeedCallback={ () => isCasualSeller !== null }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,18 @@ import Navigation from '../../ReusableComponents/Navigation';
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import SelectBox from '../../ReusableComponents/SelectBox';
|
||||
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { useOnboardingStepProducts } from '../../../data';
|
||||
import { PRODUCT_TYPES } from '../../../data/constants';
|
||||
|
||||
const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
|
||||
const [ products, setProducts ] = useState( [] );
|
||||
const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
|
||||
const VIRTUAL_CHECKBOX_VALUE = 'virtual';
|
||||
const PHYSICAL_CHECKBOX_VALUE = 'physical';
|
||||
const SUBSCRIPTIONS_CHECKBOX_VALUE = 'subscriptions';
|
||||
const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
|
||||
|
||||
const StepProducts = ( {
|
||||
setStep,
|
||||
currentStep,
|
||||
stepperOrder,
|
||||
setCompleted,
|
||||
} ) => {
|
||||
const { products, toggleProduct } = useOnboardingStepProducts();
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-page-products">
|
||||
|
|
@ -30,8 +34,8 @@ const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
|
|||
) }
|
||||
icon="icon-product-virtual.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ VIRTUAL_CHECKBOX_VALUE }
|
||||
changeCallback={ setProducts }
|
||||
value={ PRODUCT_TYPES.VIRTUAL }
|
||||
changeCallback={ toggleProduct }
|
||||
currentValue={ products }
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -73,8 +77,8 @@ const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
|
|||
) }
|
||||
icon="icon-product-physical.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ PHYSICAL_CHECKBOX_VALUE }
|
||||
changeCallback={ setProducts }
|
||||
value={ PRODUCT_TYPES.PHYSICAL }
|
||||
changeCallback={ toggleProduct }
|
||||
currentValue={ products }
|
||||
type="checkbox"
|
||||
>
|
||||
|
|
@ -101,14 +105,17 @@ const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
|
|||
) }
|
||||
icon="icon-product-subscription.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ SUBSCRIPTIONS_CHECKBOX_VALUE }
|
||||
changeCallback={ setProducts }
|
||||
value={ PRODUCT_TYPES.SUBSCRIPTIONS }
|
||||
changeCallback={ toggleProduct }
|
||||
currentValue={ products }
|
||||
type="checkbox"
|
||||
>
|
||||
<a href="#">
|
||||
<a
|
||||
target="__blank"
|
||||
href="https://woocommerce.com/document/woocommerce-paypal-payments/#subscriptions-faq"
|
||||
>
|
||||
{ __(
|
||||
'WooCommerce Subscriptions - TODO missing link',
|
||||
'WooCommerce Subscriptions',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</a>
|
||||
|
|
@ -118,6 +125,7 @@ const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
|
|||
setStep={ setStep }
|
||||
currentStep={ currentStep }
|
||||
stepperOrder={ stepperOrder }
|
||||
setCompleted={ setCompleted }
|
||||
canProceeedCallback={ () => products.length > 0 }
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js';
|
||||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Button, TextControl } from '@wordpress/components';
|
||||
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
|
||||
import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
|
||||
import Separator from '../../ReusableComponents/Separator';
|
||||
import { useOnboardingDetails } from '../../../data';
|
||||
import { useOnboardingStepWelcome, useManualConnect } from '../../../data';
|
||||
|
||||
import DataStoreControl from '../../ReusableComponents/DataStoreControl';
|
||||
|
||||
const StepWelcome = ( { setStep, currentStep } ) => {
|
||||
const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
||||
return (
|
||||
<div className="ppcp-r-page-welcome">
|
||||
<OnboardingHeader
|
||||
|
|
@ -37,7 +38,7 @@ const StepWelcome = ( { setStep, currentStep } ) => {
|
|||
className="ppcp-r-page-welcome-or-separator"
|
||||
text={ __( 'or', 'woocommerce-paypal-payments' ) }
|
||||
/>
|
||||
<WelcomeForm />
|
||||
<WelcomeForm setCompleted={ setCompleted } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -74,7 +75,7 @@ const WelcomeFeatures = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const WelcomeForm = () => {
|
||||
const WelcomeForm = ( { setCompleted } ) => {
|
||||
const {
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
|
|
@ -84,15 +85,35 @@ const WelcomeForm = () => {
|
|||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingDetails();
|
||||
} = useOnboardingStepWelcome();
|
||||
|
||||
const { connectManual } = useManualConnect();
|
||||
|
||||
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.' );
|
||||
}
|
||||
};
|
||||
|
||||
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 href="%s">click here</a>.',
|
||||
'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 (
|
||||
|
|
@ -116,7 +137,7 @@ const WelcomeForm = () => {
|
|||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Manually Connect - TODO missing link',
|
||||
'Manually Connect',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ advancedUsersDescription }
|
||||
|
|
@ -125,24 +146,38 @@ const WelcomeForm = () => {
|
|||
>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={ __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientId }
|
||||
onChange={ setClientId }
|
||||
/>
|
||||
<DataStoreControl
|
||||
control={ TextControl }
|
||||
label={ __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
label={
|
||||
isSandboxMode
|
||||
? __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
: __(
|
||||
'Live Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
)
|
||||
}
|
||||
value={ clientSecret }
|
||||
onChange={ setClientSecret }
|
||||
type="password"
|
||||
/>
|
||||
<Button variant="secondary">
|
||||
<Button variant="secondary" onClick={ handleConnect }>
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import StepWelcome from './StepWelcome';
|
||||
import StepBusiness from './StepBusiness';
|
||||
import StepProducts from './StepProducts';
|
||||
|
||||
export const getSteps = ( flags ) => {
|
||||
const allSteps = [ StepWelcome, StepBusiness, StepProducts ];
|
||||
|
||||
if ( ! flags.canUseCasualSelling ) {
|
||||
return allSteps.filter( ( step ) => step !== StepBusiness );
|
||||
}
|
||||
|
||||
return allSteps;
|
||||
};
|
||||
|
|
@ -1,10 +1,23 @@
|
|||
import TabNavigation from '../ReusableComponents/TabNavigation';
|
||||
import { getSettingsTabs } from './tabs';
|
||||
import { useOnboardingStep } from '../../data';
|
||||
import Onboarding from './Onboarding/Onboarding';
|
||||
import { useState } from '@wordpress/element';
|
||||
import Dashboard from './Dashboard/Dashboard';
|
||||
|
||||
const Settings = () => {
|
||||
const [ onboarded, setOnboarded ] = useState( true );
|
||||
return <>{ onboarded ? <Dashboard /> : <Onboarding /> }</>;
|
||||
const onboardingProgress = useOnboardingStep();
|
||||
|
||||
if ( ! onboardingProgress.isReady ) {
|
||||
// TODO: Use better loading state indicator.
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if ( ! onboardingProgress.completed ) {
|
||||
return <Onboarding />;
|
||||
}
|
||||
|
||||
const tabs = getSettingsTabs( onboardingProgress );
|
||||
|
||||
return <TabNavigation tabs={ tabs }></TabNavigation>;
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import TabDashboard from './Dashboard/TabDashboard';
|
||||
import TabPaymentMethods from './Dashboard/TabPaymentMethods';
|
||||
import TabSettings from './Dashboard/TabSettings';
|
||||
import TabStyling from './Dashboard/TabStyling';
|
||||
|
||||
export const getSettingsTabs = () => {
|
||||
const tabs = [];
|
||||
|
||||
tabs.push( {
|
||||
name: 'dashboard',
|
||||
title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
|
||||
component: <TabDashboard />,
|
||||
} );
|
||||
|
||||
tabs.push( {
|
||||
name: 'payment-methods',
|
||||
title: __( 'Payment Methods', 'woocommerce-paypal-payments' ),
|
||||
component: <TabPaymentMethods />,
|
||||
} );
|
||||
|
||||
tabs.push( {
|
||||
name: 'settings',
|
||||
title: __( 'Settings', 'woocommerce-paypal-payments' ),
|
||||
component: <TabSettings />,
|
||||
} );
|
||||
|
||||
tabs.push( {
|
||||
name: 'styling',
|
||||
title: __( 'Styling', 'woocommerce-paypal-payments' ),
|
||||
component: <TabStyling />,
|
||||
} );
|
||||
|
||||
return tabs;
|
||||
};
|
||||
|
|
@ -1,2 +1,13 @@
|
|||
export const NAMESPACE = '/wc/v3/wc_paypal';
|
||||
export const STORE_NAME = 'wc/paypal';
|
||||
|
||||
export const BUSINESS_TYPES = {
|
||||
CASUAL_SELLER: 'casual_seller',
|
||||
BUSINESS: 'business',
|
||||
};
|
||||
|
||||
export const PRODUCT_TYPES = {
|
||||
VIRTUAL: 'virtual',
|
||||
PHYSICAL: 'physical',
|
||||
SUBSCRIPTIONS: 'subscriptions',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
export default {
|
||||
RESET_ONBOARDING: 'RESET_ONBOARDING',
|
||||
|
||||
// Transient data.
|
||||
SET_IS_SAVING_ONBOARDING_DETAILS: 'SET_IS_SAVING_ONBOARDING_DETAILS',
|
||||
SET_ONBOARDING_IS_READY: 'SET_ONBOARDING_IS_READY',
|
||||
SET_IS_SAVING_ONBOARDING: 'SET_IS_SAVING_ONBOARDING',
|
||||
|
||||
// Persistent data.
|
||||
SET_ONBOARDING_COMPLETED: 'SET_ONBOARDING_COMPLETED',
|
||||
SET_ONBOARDING_DETAILS: 'SET_ONBOARDING_DETAILS',
|
||||
SET_ONBOARDING_STEP: 'SET_ONBOARDING_STEP',
|
||||
SET_SANDBOX_MODE: 'SET_SANDBOX_MODE',
|
||||
SET_MANUAL_CONNECTION_MODE: 'SET_MANUAL_CONNECTION_MODE',
|
||||
SET_CLIENT_ID: 'SET_CLIENT_ID',
|
||||
SET_CLIENT_SECRET: 'SET_CLIENT_SECRET',
|
||||
SET_IS_CASUAL_SELLER: 'SET_IS_CASUAL_SELLER',
|
||||
SET_PRODUCTS: 'SET_PRODUCTS',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,6 +3,28 @@ import { apiFetch } from '@wordpress/data-controls';
|
|||
import ACTION_TYPES from './action-types';
|
||||
import { NAMESPACE, STORE_NAME } from '../constants';
|
||||
|
||||
/**
|
||||
* Special. Resets all values in the onboarding store to initial defaults.
|
||||
*
|
||||
* @return {{type: string}} The action.
|
||||
*/
|
||||
export const resetOnboarding = () => {
|
||||
return { type: ACTION_TYPES.RESET_ONBOARDING };
|
||||
};
|
||||
|
||||
/**
|
||||
* Non-persistent. Marks the onboarding details as "ready", i.e., fully initialized.
|
||||
*
|
||||
* @param {boolean} isReady
|
||||
* @return {{type: string, isReady}} The action.
|
||||
*/
|
||||
export const setIsReady = ( isReady ) => {
|
||||
return {
|
||||
type: ACTION_TYPES.SET_ONBOARDING_IS_READY,
|
||||
isReady,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Non-persistent. Changes the "saving" flag.
|
||||
*
|
||||
|
|
@ -11,7 +33,7 @@ import { NAMESPACE, STORE_NAME } from '../constants';
|
|||
*/
|
||||
export const setIsSaving = ( isSaving ) => {
|
||||
return {
|
||||
type: ACTION_TYPES.SET_IS_SAVING_ONBOARDING_DETAILS,
|
||||
type: ACTION_TYPES.SET_IS_SAVING_ONBOARDING,
|
||||
isSaving,
|
||||
};
|
||||
};
|
||||
|
|
@ -19,7 +41,7 @@ export const setIsSaving = ( isSaving ) => {
|
|||
/**
|
||||
* Persistent. Set the full onboarding details, usually during app initialization.
|
||||
*
|
||||
* @param {Object} payload
|
||||
* @param {{data: {}, flags?: {}}} payload
|
||||
* @return {{type: string, payload}} The action.
|
||||
*/
|
||||
export const setOnboardingDetails = ( payload ) => {
|
||||
|
|
@ -29,6 +51,19 @@ export const setOnboardingDetails = ( payload ) => {
|
|||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Persistent.Set the "onboarding completed" flag which shows or hides the wizard.
|
||||
*
|
||||
* @param {boolean} completed
|
||||
* @return {{type: string, payload}} The action.
|
||||
*/
|
||||
export const setCompleted = ( completed ) => {
|
||||
return {
|
||||
type: ACTION_TYPES.SET_ONBOARDING_COMPLETED,
|
||||
completed,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Persistent. Sets the onboarding wizard to a new step.
|
||||
*
|
||||
|
|
@ -94,6 +129,32 @@ export const setClientSecret = ( clientSecret ) => {
|
|||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Persistent. Sets the "isCasualSeller" value.
|
||||
*
|
||||
* @param {boolean} isCasualSeller
|
||||
* @return {{type: string, isCasualSeller}} The action.
|
||||
*/
|
||||
export const setIsCasualSeller = ( isCasualSeller ) => {
|
||||
return {
|
||||
type: ACTION_TYPES.SET_IS_CASUAL_SELLER,
|
||||
isCasualSeller,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Persistent. Sets the "products" array.
|
||||
*
|
||||
* @param {string[]} products
|
||||
* @return {{type: string, products}} The action.
|
||||
*/
|
||||
export const setProducts = ( products ) => {
|
||||
return {
|
||||
type: ACTION_TYPES.SET_PRODUCTS,
|
||||
products,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Saves the persistent details to the WP database.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { STORE_NAME } from '../constants';
|
||||
import apiFetch from '@wordpress/api-fetch';
|
||||
import { NAMESPACE, PRODUCT_TYPES, STORE_NAME } from '../constants';
|
||||
import { getFlags } from './selectors';
|
||||
|
||||
export const useOnboardingDetails = () => {
|
||||
const useOnboardingDetails = () => {
|
||||
const {
|
||||
persist,
|
||||
setOnboardingStep,
|
||||
setCompleted,
|
||||
setSandboxMode,
|
||||
setManualConnectionMode,
|
||||
persist,
|
||||
setClientId,
|
||||
setClientSecret,
|
||||
setIsCasualSeller,
|
||||
setProducts,
|
||||
} = useDispatch( STORE_NAME );
|
||||
|
||||
// Transient accessors.
|
||||
|
|
@ -16,7 +21,24 @@ export const useOnboardingDetails = () => {
|
|||
return select( STORE_NAME ).getTransientData().isSaving;
|
||||
}, [] );
|
||||
|
||||
const isReady = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getTransientData().isReady;
|
||||
} );
|
||||
|
||||
// Read-only flags.
|
||||
const flags = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getFlags();
|
||||
} );
|
||||
|
||||
// Persistent accessors.
|
||||
const step = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getPersistentData().step || 0;
|
||||
} );
|
||||
|
||||
const completed = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getPersistentData().completed;
|
||||
} );
|
||||
|
||||
const clientId = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getPersistentData().clientId;
|
||||
}, [] );
|
||||
|
|
@ -25,10 +47,6 @@ export const useOnboardingDetails = () => {
|
|||
return select( STORE_NAME ).getPersistentData().clientSecret;
|
||||
}, [] );
|
||||
|
||||
const onboardingStep = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getPersistentData().step || 0;
|
||||
}, [] );
|
||||
|
||||
const isSandboxMode = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getPersistentData().useSandbox;
|
||||
}, [] );
|
||||
|
|
@ -37,26 +55,112 @@ export const useOnboardingDetails = () => {
|
|||
return select( STORE_NAME ).getPersistentData().useManualConnection;
|
||||
}, [] );
|
||||
|
||||
const isCasualSeller = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getPersistentData().isCasualSeller;
|
||||
}, [] );
|
||||
|
||||
const products = useSelect( ( select ) => {
|
||||
return select( STORE_NAME ).getPersistentData().products || [];
|
||||
}, [] );
|
||||
|
||||
const toggleProduct = ( list ) => {
|
||||
const validProducts = list.filter( ( item ) =>
|
||||
Object.values( PRODUCT_TYPES ).includes( item )
|
||||
);
|
||||
return setDetailAndPersist( setProducts, validProducts );
|
||||
};
|
||||
|
||||
const setDetailAndPersist = async ( setter, value ) => {
|
||||
setter( value );
|
||||
await persist();
|
||||
};
|
||||
|
||||
return {
|
||||
onboardingStep,
|
||||
isSaving,
|
||||
isReady,
|
||||
step,
|
||||
setStep: ( value ) => setDetailAndPersist( setOnboardingStep, value ),
|
||||
completed,
|
||||
setCompleted: ( state ) => setDetailAndPersist( setCompleted, state ),
|
||||
isSandboxMode,
|
||||
setSandboxMode: ( state ) =>
|
||||
setDetailAndPersist( setSandboxMode, state ),
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode: ( state ) =>
|
||||
setDetailAndPersist( setManualConnectionMode, state ),
|
||||
clientId,
|
||||
setClientId: ( value ) => setDetailAndPersist( setClientId, value ),
|
||||
clientSecret,
|
||||
setClientSecret: ( value ) =>
|
||||
setDetailAndPersist( setClientSecret, value ),
|
||||
setOnboardingStep: ( step ) =>
|
||||
setDetailAndPersist( setOnboardingStep, step ),
|
||||
setSandboxMode: ( state ) =>
|
||||
setDetailAndPersist( setSandboxMode, state ),
|
||||
setManualConnectionMode: ( state ) =>
|
||||
setDetailAndPersist( setManualConnectionMode, state ),
|
||||
isCasualSeller,
|
||||
setIsCasualSeller: ( value ) =>
|
||||
setDetailAndPersist( setIsCasualSeller, value ),
|
||||
products,
|
||||
toggleProduct,
|
||||
flags,
|
||||
};
|
||||
};
|
||||
|
||||
export const useOnboardingStepWelcome = () => {
|
||||
const {
|
||||
isSaving,
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
} = useOnboardingDetails();
|
||||
|
||||
return {
|
||||
isSaving,
|
||||
isSandboxMode,
|
||||
setSandboxMode,
|
||||
isManualConnectionMode,
|
||||
setManualConnectionMode,
|
||||
clientId,
|
||||
setClientId,
|
||||
clientSecret,
|
||||
setClientSecret,
|
||||
};
|
||||
};
|
||||
|
||||
export const useOnboardingStepBusiness = () => {
|
||||
const { isCasualSeller, setIsCasualSeller } = useOnboardingDetails();
|
||||
|
||||
return { isCasualSeller, setIsCasualSeller };
|
||||
};
|
||||
|
||||
export const useOnboardingStepProducts = () => {
|
||||
const { products, toggleProduct } = useOnboardingDetails();
|
||||
|
||||
return { products, toggleProduct };
|
||||
};
|
||||
|
||||
export const useOnboardingStep = () => {
|
||||
const { isReady, step, setStep, completed, setCompleted, flags } =
|
||||
useOnboardingDetails();
|
||||
|
||||
return { isReady, step, setStep, completed, setCompleted, flags };
|
||||
};
|
||||
|
||||
export const useManualConnect = () => {
|
||||
const connectManual = async ( clientId, clientSecret, isSandboxMode ) => {
|
||||
return await apiFetch( {
|
||||
path: `${ NAMESPACE }/connect_manual`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
clientId,
|
||||
clientSecret,
|
||||
useSandbox: isSandboxMode,
|
||||
},
|
||||
} );
|
||||
};
|
||||
|
||||
return {
|
||||
connectManual,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,13 +1,26 @@
|
|||
import ACTION_TYPES from './action-types';
|
||||
|
||||
const defaultState = {
|
||||
isReady: false,
|
||||
isSaving: false,
|
||||
|
||||
// Data persisted to the server.
|
||||
data: {
|
||||
completed: false,
|
||||
step: 0,
|
||||
useSandbox: false,
|
||||
useManualConnection: false,
|
||||
clientId: '',
|
||||
clientSecret: '',
|
||||
isCasualSeller: null, // null value will uncheck both options in the UI.
|
||||
products: [],
|
||||
},
|
||||
|
||||
// Read only values, provided by the server.
|
||||
flags: {
|
||||
canUseCasualSelling: false,
|
||||
canUseVaulting: false,
|
||||
canUseCardPayments: false,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -35,20 +48,36 @@ export const onboardingReducer = (
|
|||
};
|
||||
|
||||
switch ( type ) {
|
||||
// Reset store to initial state.
|
||||
case ACTION_TYPES.RESET_ONBOARDING:
|
||||
return setPersistent( defaultState.data );
|
||||
|
||||
// Transient data.
|
||||
case ACTION_TYPES.SET_IS_SAVING_ONBOARDING_DETAILS:
|
||||
case ACTION_TYPES.SET_ONBOARDING_IS_READY:
|
||||
return setTransient( { isReady: action.isReady } );
|
||||
|
||||
case ACTION_TYPES.SET_IS_SAVING_ONBOARDING:
|
||||
return setTransient( { isSaving: action.isSaving } );
|
||||
|
||||
// Persistent data.
|
||||
case ACTION_TYPES.SET_ONBOARDING_DETAILS:
|
||||
const newState = setPersistent( action.payload.data );
|
||||
|
||||
if ( action.payload.flags ) {
|
||||
newState.flags = { ...newState.flags, ...action.payload.flags };
|
||||
}
|
||||
|
||||
return newState;
|
||||
|
||||
case ACTION_TYPES.SET_ONBOARDING_COMPLETED:
|
||||
return setPersistent( { completed: action.completed } );
|
||||
|
||||
case ACTION_TYPES.SET_CLIENT_ID:
|
||||
return setPersistent( { clientId: action.clientId } );
|
||||
|
||||
case ACTION_TYPES.SET_CLIENT_SECRET:
|
||||
return setPersistent( { clientSecret: action.clientSecret } );
|
||||
|
||||
case ACTION_TYPES.SET_ONBOARDING_DETAILS:
|
||||
return setPersistent( action.payload );
|
||||
|
||||
case ACTION_TYPES.SET_ONBOARDING_STEP:
|
||||
return setPersistent( { step: action.step } );
|
||||
|
||||
|
|
@ -60,6 +89,12 @@ export const onboardingReducer = (
|
|||
useManualConnection: action.useManualConnection,
|
||||
} );
|
||||
|
||||
case ACTION_TYPES.SET_IS_CASUAL_SELLER:
|
||||
return setPersistent( { isCasualSeller: action.isCasualSeller } );
|
||||
|
||||
case ACTION_TYPES.SET_PRODUCTS:
|
||||
return setPersistent( { products: action.products } );
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { dispatch } from '@wordpress/data';
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { apiFetch } from '@wordpress/data-controls';
|
||||
import { NAMESPACE } from '../constants';
|
||||
import { setOnboardingDetails } from './actions';
|
||||
import { setIsReady, setOnboardingDetails } from './actions';
|
||||
|
||||
/**
|
||||
* Retrieve settings from the site's REST API.
|
||||
|
|
@ -13,6 +13,7 @@ export function* getPersistentData() {
|
|||
try {
|
||||
const result = yield apiFetch( { path } );
|
||||
yield setOnboardingDetails( result );
|
||||
yield setIsReady( true );
|
||||
} catch ( e ) {
|
||||
yield dispatch( 'core/notices' ).createErrorNotice(
|
||||
__(
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ export const getPersistentData = ( state ) => {
|
|||
};
|
||||
|
||||
export const getTransientData = ( state ) => {
|
||||
const { data, ...transientState } = getOnboardingState( state );
|
||||
const { data, flags, ...transientState } = getOnboardingState( state );
|
||||
return transientState || EMPTY_OBJ;
|
||||
};
|
||||
|
||||
export const getFlags = ( state ) => {
|
||||
return getOnboardingState( state ).flags || EMPTY_OBJ;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -27,4 +27,32 @@ export const initStore = () => {
|
|||
} );
|
||||
|
||||
register( store );
|
||||
|
||||
/* eslint-disable no-console */
|
||||
// Provide a debug tool to inspect the Redux store via the JS console.
|
||||
if ( window.ppcpSettings?.debug && console?.groupCollapsed ) {
|
||||
window.ppcpSettings.dumpStore = () => {
|
||||
const storeSelector = `wp.data.select('${ STORE_NAME }')`;
|
||||
console.group( `[STORE] ${ storeSelector }` );
|
||||
|
||||
const storeState = wp.data.select( STORE_NAME );
|
||||
Object.keys( selectors ).forEach( ( selector ) => {
|
||||
console.groupCollapsed( `[SELECTOR] .${ selector }()` );
|
||||
console.table( storeState[ selector ]() );
|
||||
console.groupEnd();
|
||||
} );
|
||||
|
||||
console.groupEnd();
|
||||
};
|
||||
window.ppcpSettings.resetStore = () => {
|
||||
wp.data.dispatch( STORE_NAME ).resetOnboarding();
|
||||
wp.data.dispatch( STORE_NAME ).persist();
|
||||
};
|
||||
window.ppcpSettings.startOnboarding = () => {
|
||||
wp.data.dispatch( STORE_NAME ).setCompleted( false );
|
||||
wp.data.dispatch( STORE_NAME ).setOnboardingStep( 0 );
|
||||
wp.data.dispatch( STORE_NAME ).persist();
|
||||
};
|
||||
}
|
||||
/* eslint-enable no-console */
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@ declare( strict_types = 1 );
|
|||
|
||||
namespace WooCommerce\PayPalCommerce\Settings;
|
||||
|
||||
use WooCommerce\PayPalCommerce\Settings\Endpoint\ConnectManualRestEndpoint;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
|
||||
use WooCommerce\PayPalCommerce\Settings\Endpoint\OnboardingRestEndpoint;
|
||||
use WooCommerce\PayPalCommerce\Settings\Data\OnboardingProfile;
|
||||
|
||||
return array(
|
||||
'settings.url' => static function ( ContainerInterface $container ) : string {
|
||||
'settings.url' => static function ( ContainerInterface $container ) : string {
|
||||
/**
|
||||
* The path cannot be false.
|
||||
*
|
||||
|
|
@ -25,10 +26,46 @@ return array(
|
|||
dirname( realpath( __FILE__ ), 3 ) . '/woocommerce-paypal-payments.php'
|
||||
);
|
||||
},
|
||||
'settings.data.onboarding' => static function ( ContainerInterface $container ) : OnboardingProfile {
|
||||
return new OnboardingProfile();
|
||||
'settings.data.onboarding' => static function ( ContainerInterface $container ) : OnboardingProfile {
|
||||
$can_use_casual_selling = $container->get( 'settings.casual-selling.eligible' );
|
||||
$can_use_vaulting = $container->has( 'save-payment-methods.eligible' ) && $container->get( 'save-payment-methods.eligible' );
|
||||
$can_use_card_payments = $container->has( 'card-fields.eligible' ) && $container->get( 'card-fields.eligible' );
|
||||
|
||||
// Card payments are disabled for this plugin when WooPayments is active.
|
||||
// TODO: Move this condition to the card-fields.eligible service?
|
||||
if ( class_exists( '\WC_Payments' ) ) {
|
||||
$can_use_card_payments = false;
|
||||
}
|
||||
|
||||
return new OnboardingProfile(
|
||||
$can_use_casual_selling,
|
||||
$can_use_vaulting,
|
||||
$can_use_card_payments
|
||||
);
|
||||
},
|
||||
'settings.rest.onboarding' => static function ( ContainerInterface $container ) : OnboardingRestEndpoint {
|
||||
'settings.rest.onboarding' => static function ( ContainerInterface $container ) : OnboardingRestEndpoint {
|
||||
return new OnboardingRestEndpoint( $container->get( 'settings.data.onboarding' ) );
|
||||
},
|
||||
'settings.rest.connect_manual' => static function ( ContainerInterface $container ) : ConnectManualRestEndpoint {
|
||||
return new ConnectManualRestEndpoint();
|
||||
},
|
||||
'settings.casual-selling.supported-countries' => static function ( ContainerInterface $container ) : array {
|
||||
// TODO: This is a dummy list, while we wait for the official eligibility list.
|
||||
|
||||
return array(
|
||||
'US',
|
||||
'CA',
|
||||
'DE',
|
||||
'ES',
|
||||
'AT',
|
||||
'CH',
|
||||
'NL',
|
||||
);
|
||||
},
|
||||
'settings.casual-selling.eligible' => static function ( ContainerInterface $container ) : bool {
|
||||
$country = $container->get( 'api.shop.country' );
|
||||
$eligible_countries = $container->get( 'settings.casual-selling.supported-countries' );
|
||||
|
||||
return in_array( $country, $eligible_countries, true );
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -57,8 +57,9 @@ abstract class AbstractDataModel {
|
|||
* Loads the model data from WordPress options.
|
||||
*/
|
||||
public function load() : void {
|
||||
$saved_data = get_option( static::OPTION_KEY, array() );
|
||||
$this->data = array_merge( $this->data, $saved_data );
|
||||
$saved_data = get_option( static::OPTION_KEY, array() );
|
||||
$filtered_data = array_intersect_key( $saved_data, $this->data );
|
||||
$this->data = array_merge( $this->data, $filtered_data );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -88,12 +89,38 @@ abstract class AbstractDataModel {
|
|||
continue;
|
||||
}
|
||||
|
||||
$setter = "set_$key";
|
||||
if ( method_exists( $this, $setter ) ) {
|
||||
$setter = $this->get_setter_name( $key );
|
||||
|
||||
if ( $setter && method_exists( $this, $setter ) ) {
|
||||
$this->$setter( $value );
|
||||
} else {
|
||||
$this->data[ $key ] = $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a setter method name for a given key, stripping the prefix from
|
||||
* boolean fields (is_, use_, has_).
|
||||
*
|
||||
* @param int|string $field_key The key for which to generate a setter name.
|
||||
*
|
||||
* @return string The generated setter method name.
|
||||
*/
|
||||
private function get_setter_name( $field_key ) : string {
|
||||
if ( ! is_string( $field_key ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$prefixes_to_strip = array( 'is_', 'use_', 'has_' );
|
||||
$stripped_key = $field_key;
|
||||
|
||||
foreach ( $prefixes_to_strip as $prefix ) {
|
||||
if ( str_starts_with( $field_key, $prefix ) ) {
|
||||
$stripped_key = substr( $field_key, strlen( $prefix ) );
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return $stripped_key ? "set_$stripped_key" : '';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,16 @@ declare( strict_types = 1 );
|
|||
|
||||
namespace WooCommerce\PayPalCommerce\Settings\Data;
|
||||
|
||||
use RuntimeException;
|
||||
|
||||
/**
|
||||
* Class OnboardingProfile
|
||||
*
|
||||
* This class serves as a container for managing the onboarding profile details
|
||||
* within the WooCommerce PayPal Commerce plugin. It provides methods to retrieve
|
||||
* and save the onboarding profile data using WordPress options.
|
||||
* within the WooCommerce PayPal Commerce plugin.
|
||||
*
|
||||
* This profile impacts the onboarding wizard and help to apply default
|
||||
* settings. The details here should not be used outside the onboarding process.
|
||||
*/
|
||||
class OnboardingProfile extends AbstractDataModel {
|
||||
|
||||
|
|
@ -25,6 +29,34 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
*/
|
||||
protected const OPTION_KEY = 'woocommerce-ppcp-data-onboarding';
|
||||
|
||||
/**
|
||||
* List of customization flags, provided by the server (read-only).
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected array $flags = array();
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
* @param bool $can_use_casual_selling Whether casual selling is enabled in the store's country.
|
||||
* @param bool $can_use_vaulting Whether vaulting is enabled in the store's country.
|
||||
* @param bool $can_use_card_payments Whether credit card payments are possible.
|
||||
*
|
||||
* @throws RuntimeException If the OPTION_KEY is not defined in the child class.
|
||||
*/
|
||||
public function __construct(
|
||||
bool $can_use_casual_selling = false,
|
||||
bool $can_use_vaulting = false,
|
||||
bool $can_use_card_payments = false
|
||||
) {
|
||||
parent::__construct();
|
||||
|
||||
$this->flags['can_use_casual_selling'] = $can_use_casual_selling;
|
||||
$this->flags['can_use_vaulting'] = $can_use_vaulting;
|
||||
$this->flags['can_use_card_payments'] = $can_use_card_payments;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get default values for the model.
|
||||
*
|
||||
|
|
@ -32,16 +64,37 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
*/
|
||||
protected function get_defaults() : array {
|
||||
return array(
|
||||
'completed' => false,
|
||||
'step' => 0,
|
||||
'use_sandbox' => false,
|
||||
'use_manual_connection' => false,
|
||||
'client_id' => '',
|
||||
'client_secret' => '',
|
||||
'is_casual_seller' => null,
|
||||
'products' => array(),
|
||||
);
|
||||
}
|
||||
|
||||
// -----
|
||||
|
||||
/**
|
||||
* Gets the 'completed' flag.
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function get_completed() : bool {
|
||||
return (bool) $this->data['completed'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the 'completed' flag.
|
||||
*
|
||||
* @param bool $step Whether the onboarding process has been completed.
|
||||
*/
|
||||
public function set_completed( bool $step ) : void {
|
||||
$this->data['completed'] = $step;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the 'step' setting.
|
||||
*
|
||||
|
|
@ -54,7 +107,7 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
/**
|
||||
* Sets the 'step' setting.
|
||||
*
|
||||
* @param int $step Whether to use sandbox mode.
|
||||
* @param int $step The current onboarding step.
|
||||
*/
|
||||
public function set_step( int $step ) : void {
|
||||
$this->data['step'] = $step;
|
||||
|
|
@ -65,7 +118,7 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function get_use_sandbox() : bool {
|
||||
public function get_sandbox() : bool {
|
||||
return (bool) $this->data['use_sandbox'];
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +127,7 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
*
|
||||
* @param bool $use_sandbox Whether to use sandbox mode.
|
||||
*/
|
||||
public function set_use_sandbox( bool $use_sandbox ) : void {
|
||||
public function set_sandbox( bool $use_sandbox ) : void {
|
||||
$this->data['use_sandbox'] = $use_sandbox;
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +136,7 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function get_use_manual_connection() : bool {
|
||||
public function get_manual_connection() : bool {
|
||||
return (bool) $this->data['use_manual_connection'];
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +145,7 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
*
|
||||
* @param bool $use_manual_connection Whether to use manual connection.
|
||||
*/
|
||||
public function set_use_manual_connection( bool $use_manual_connection ) : void {
|
||||
public function set_manual_connection( bool $use_manual_connection ) : void {
|
||||
$this->data['use_manual_connection'] = $use_manual_connection;
|
||||
}
|
||||
|
||||
|
|
@ -131,4 +184,49 @@ class OnboardingProfile extends AbstractDataModel {
|
|||
public function set_client_secret( string $client_secret ) : void {
|
||||
$this->data['client_secret'] = sanitize_text_field( $client_secret );
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the casual seller flag.
|
||||
*
|
||||
* @return bool|null
|
||||
*/
|
||||
public function get_casual_seller() : ?bool {
|
||||
return $this->data['is_casual_seller'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the casual-seller flag.
|
||||
*
|
||||
* @param bool|null $casual_seller Whether the merchant uses a personal account for selling.
|
||||
*/
|
||||
public function set_casual_seller( ?bool $casual_seller ) : void {
|
||||
$this->data['is_casual_seller'] = $casual_seller;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the active product types for this store.
|
||||
*
|
||||
* @return string[]
|
||||
*/
|
||||
public function get_products() : array {
|
||||
return $this->data['products'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the list of active product types.
|
||||
*
|
||||
* @param string[] $products Any of ['virtual'|'physical'|'subscriptions'].
|
||||
*/
|
||||
public function set_products( array $products ) : void {
|
||||
$this->data['products'] = $products;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the list of read-only customization flags
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function get_flags() : array {
|
||||
return $this->flags;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<?php
|
||||
/**
|
||||
* REST controller for connection via manual credentials input.
|
||||
*
|
||||
* @package WooCommerce\PayPalCommerce\Settings\Endpoint
|
||||
*/
|
||||
|
||||
declare( strict_types = 1 );
|
||||
|
||||
namespace WooCommerce\PayPalCommerce\Settings\Endpoint;
|
||||
|
||||
use WP_REST_Server;
|
||||
use WP_REST_Response;
|
||||
use WP_REST_Request;
|
||||
|
||||
/**
|
||||
* REST controller for connection via manual credentials input.
|
||||
*/
|
||||
class ConnectManualRestEndpoint extends RestEndpoint {
|
||||
/**
|
||||
* The base path for this REST controller.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $rest_base = 'connect_manual';
|
||||
|
||||
/**
|
||||
* Field mapping for request.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private array $field_map = array(
|
||||
'client_id' => array(
|
||||
'js_name' => 'clientId',
|
||||
'sanitize' => 'sanitize_text_field',
|
||||
),
|
||||
'client_secret' => array(
|
||||
'js_name' => 'clientSecret',
|
||||
'sanitize' => 'sanitize_text_field',
|
||||
),
|
||||
'use_sandbox' => array(
|
||||
'js_name' => 'useSandbox',
|
||||
'sanitize' => 'to_boolean',
|
||||
),
|
||||
);
|
||||
|
||||
/**
|
||||
* Configure REST API routes.
|
||||
*/
|
||||
public function register_routes() {
|
||||
register_rest_route(
|
||||
$this->namespace,
|
||||
'/' . $this->rest_base,
|
||||
array(
|
||||
array(
|
||||
'methods' => WP_REST_Server::EDITABLE,
|
||||
'callback' => array( $this, 'connect_manual' ),
|
||||
'permission_callback' => array( $this, 'check_permission' ),
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves merchantId and email.
|
||||
*
|
||||
* @param WP_REST_Request $request Full data about the request.
|
||||
*/
|
||||
public function connect_manual( WP_REST_Request $request ) : WP_REST_Response {
|
||||
$data = $this->sanitize_for_wordpress(
|
||||
$request->get_params(),
|
||||
$this->field_map
|
||||
);
|
||||
|
||||
if ( ! isset( $data['client_id'] ) || empty( $data['client_id'] )
|
||||
|| ! isset( $data['client_secret'] ) || empty( $data['client_secret'] ) ) {
|
||||
return rest_ensure_response(
|
||||
array(
|
||||
'success' => false,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$result = array(
|
||||
'merchantId' => 'bt_us@woocommerce.com',
|
||||
'email' => 'AT45V2DGMKLRY',
|
||||
'success' => true,
|
||||
);
|
||||
|
||||
return rest_ensure_response( $result );
|
||||
}
|
||||
}
|
||||
|
|
@ -41,6 +41,10 @@ class OnboardingRestEndpoint extends RestEndpoint {
|
|||
* @var array
|
||||
*/
|
||||
private array $field_map = array(
|
||||
'completed' => array(
|
||||
'js_name' => 'completed',
|
||||
'sanitize' => 'to_boolean',
|
||||
),
|
||||
'step' => array(
|
||||
'js_name' => 'step',
|
||||
'sanitize' => 'to_number',
|
||||
|
|
@ -61,6 +65,30 @@ class OnboardingRestEndpoint extends RestEndpoint {
|
|||
'js_name' => 'clientSecret',
|
||||
'sanitize' => 'sanitize_text_field',
|
||||
),
|
||||
'is_casual_seller' => array(
|
||||
'js_name' => 'isCasualSeller',
|
||||
'sanitize' => 'to_boolean',
|
||||
),
|
||||
'products' => array(
|
||||
'js_name' => 'products',
|
||||
),
|
||||
);
|
||||
|
||||
/**
|
||||
* Map the internal flags to JS names.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private array $flag_map = array(
|
||||
'can_use_casual_selling' => array(
|
||||
'js_name' => 'canUseCasualSelling',
|
||||
),
|
||||
'can_use_vaulting' => array(
|
||||
'js_name' => 'canUseVaulting',
|
||||
),
|
||||
'can_use_card_payments' => array(
|
||||
'js_name' => 'canUseCardPayments',
|
||||
),
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
@ -70,6 +98,8 @@ class OnboardingRestEndpoint extends RestEndpoint {
|
|||
*/
|
||||
public function __construct( OnboardingProfile $profile ) {
|
||||
$this->profile = $profile;
|
||||
|
||||
$this->field_map['products']['sanitize'] = fn( $list ) => array_map( 'sanitize_text_field', $list );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -112,7 +142,17 @@ class OnboardingRestEndpoint extends RestEndpoint {
|
|||
$this->field_map
|
||||
);
|
||||
|
||||
return rest_ensure_response( $js_data );
|
||||
$js_flags = $this->sanitize_for_javascript(
|
||||
$this->profile->get_flags(),
|
||||
$this->flag_map
|
||||
);
|
||||
|
||||
return rest_ensure_response(
|
||||
array(
|
||||
'data' => $js_data,
|
||||
'flags' => $js_flags,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -53,7 +53,11 @@ class RestEndpoint extends WC_REST_Controller {
|
|||
$source_key = $details['js_name'] ?? '';
|
||||
$sanitation_cb = $details['sanitize'] ?? null;
|
||||
|
||||
if ( ! $source_key || ! isset( $params[ $source_key ] ) ) {
|
||||
if (
|
||||
! $source_key
|
||||
|| ! isset( $params[ $source_key ] )
|
||||
|| 'read_only' === $sanitation_cb
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +65,7 @@ class RestEndpoint extends WC_REST_Controller {
|
|||
|
||||
if ( null === $sanitation_cb ) {
|
||||
$sanitized[ $key ] = $value;
|
||||
} elseif ( method_exists( $this, $sanitation_cb ) ) {
|
||||
} elseif ( is_string( $sanitation_cb ) && method_exists( $this, $sanitation_cb ) ) {
|
||||
$sanitized[ $key ] = $this->{$sanitation_cb}( $value );
|
||||
} elseif ( is_callable( $sanitation_cb ) ) {
|
||||
$sanitized[ $key ] = $sanitation_cb( $value );
|
||||
|
|
@ -121,5 +125,4 @@ class RestEndpoint extends WC_REST_Controller {
|
|||
protected function to_number( $value ) {
|
||||
return $value !== null ? ( is_numeric( $value ) ? $value + 0 : null ) : null;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ declare( strict_types = 1 );
|
|||
|
||||
namespace WooCommerce\PayPalCommerce\Settings;
|
||||
|
||||
use WooCommerce\PayPalCommerce\Settings\Endpoint\ConnectManualRestEndpoint;
|
||||
use WooCommerce\PayPalCommerce\Settings\Endpoint\OnboardingRestEndpoint;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
|
||||
use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ServiceModule;
|
||||
|
|
@ -86,6 +88,7 @@ class SettingsModule implements ServiceModule, ExecutableModule {
|
|||
'assets' => array(
|
||||
'imagesUrl' => $module_url . '/images/',
|
||||
),
|
||||
'debug' => defined( 'WP_DEBUG' ) && WP_DEBUG,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -93,11 +96,12 @@ class SettingsModule implements ServiceModule, ExecutableModule {
|
|||
|
||||
add_action(
|
||||
'woocommerce_paypal_payments_gateway_admin_options_wrapper',
|
||||
static function () : void {
|
||||
function () : void {
|
||||
global $hide_save_button;
|
||||
$hide_save_button = true;
|
||||
|
||||
echo '<div id="ppcp-settings-container"></div>';
|
||||
$this->render_header();
|
||||
$this->render_content();
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -105,10 +109,35 @@ class SettingsModule implements ServiceModule, ExecutableModule {
|
|||
'rest_api_init',
|
||||
static function () use ( $container ) : void {
|
||||
$onboarding_endpoint = $container->get( 'settings.rest.onboarding' );
|
||||
assert( $onboarding_endpoint instanceof OnboardingRestEndpoint );
|
||||
$onboarding_endpoint->register_routes();
|
||||
|
||||
$connect_manual_endpoint = $container->get( 'settings.rest.connect_manual' );
|
||||
assert( $connect_manual_endpoint instanceof ConnectManualRestEndpoint );
|
||||
$connect_manual_endpoint->register_routes();
|
||||
}
|
||||
);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Outputs the settings page header (title and back-link).
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
protected function render_header() : void {
|
||||
echo '<h2>' . esc_html__( 'PayPal', 'woocommerce-paypal-payments' );
|
||||
wc_back_link( __( 'Return to payments', 'woocommerce-paypal-payments' ), admin_url( 'admin.php?page=wc-settings&tab=checkout' ) );
|
||||
echo '</h2>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the container for the React app.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
protected function render_content() : void {
|
||||
echo '<div id="ppcp-settings-container"></div>';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue
