woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Implement business view

Browse source
This commit is contained in:
inpsyde-maticluznar 2024-10-24 06:35:48 +02:00
parent 222bd0848e
commit 1ced06b24e
No known key found for this signature in database
GPG key ID: D005973F231309F6
13 changed files with 176 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

21
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
View file

@ -1,14 +1,33 @@
import Container from '../../ReusableComponents/Container.js';
import StepWelcome from './StepWelcome.js';
import StepBusiness from './StepBusiness';
import { useState } from '@wordpress/element';
const Onboarding = () => {
const [ step, setStep ] = useState( 0 );
return (
<Container>
<div className="ppcp-r-card">
<StepWelcome />
<Stepper currentStep={ step } setStep={ setStep } />
</div>
</Container>
);
};
const Stepper = ( { currentStep, setStep } ) => {
const stepperOrder = {
0: StepWelcome,
1: StepBusiness,
};
const Component = stepperOrder[ currentStep ];
return (
<>
<Component setStep={ setStep } currentStep={ currentStep } />
</>
);
};
export default Onboarding;

27
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js
View file

@ -3,10 +3,17 @@ import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js';
import SelectBox from '../../ReusableComponents/SelectBox.js';
import { __ } from '@wordpress/i18n';
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import { useState } from '@wordpress/element';
import Navigation from '../../ReusableComponents/Navigation';
const StepBusiness = ( { setStep, currentStep } ) => {
const [ businessCategory, setBusinessCategory ] = useState( null );
const BUSINESS_RADIO_GROUP_NAME = 'business';
const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller';
const BUSINESS_CHECKBOX_VALUE = 'business';
const StepBusiness = () => {
return (
<div className="ppcp-r-page-welcome">
<div className="ppcp-r-page-business">
<OnboardingHeader
title={ __(
'Tell Us About Your Business',
@ -25,6 +32,14 @@ const StepBusiness = () => {
'woocommerce-paypal-payments'
) }
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 }
}
>
<PaymentMethodIcons
icons={ [
@ -47,6 +62,13 @@ const StepBusiness = () => {
'woocommerce-paypal-payments'
) }
icon="icon-business-business.svg"
name={ BUSINESS_RADIO_GROUP_NAME }
value={ BUSINESS_CHECKBOX_VALUE }
currentValue={ businessCategory }
changeCallback={ setBusinessCategory }
checked={
businessCategory === { BUSINESS_CHECKBOX_VALUE }
}
>
<PaymentMethodIcons
icons={ [
@ -63,6 +85,7 @@ const StepBusiness = () => {
/>
</SelectBox>
</SelectBoxWrapper>
<Navigation setStep={ setStep } currentStep={ currentStep } />
</div>
</div>
);

3
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
View file

@ -5,7 +5,7 @@ import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
import Separator from '../../ReusableComponents/Separator';
const StepWelcome = () => {
const StepWelcome = ( { setStep, currentStep } ) => {
return (
<div className="ppcp-r-page-welcome">
<OnboardingHeader
@ -24,6 +24,7 @@ const StepWelcome = () => {
<Button
className="ppcp-r-button-activate-paypal"
variant="primary"
onClick={ () => setStep( currentStep + 1 ) }
>
{ __(
'Activate PayPal Payments',