woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

Merge pull request #2977 from woocommerce/PCP-4021-fix-the-top-navigation-bar-in-settings

Browse source 
Organize code, fix the top navigation bar (4021)
This commit is contained in:
Emili Castells 2025-01-14 13:02:33 +01:00 • committed by GitHub
commit addc5235b4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 642 additions and 680 deletions
Download patch file Download diff file Expand all files Collapse all files

8
modules/ppcp-settings/resources/js/App.js
View file

@ -1,8 +0,0 @@
import Settings from './Components/Screens/Settings';
export function App() {
return (
<div>
<Settings />
</div>
);
}

20
modules/ppcp-settings/resources/js/Components/Screens/Settings.js → modules/ppcp-settings/resources/js/Components/App.js
View file

@ -2,20 +2,18 @@ import { useEffect, useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { OnboardingHooks } from '../../data';
import SpinnerOverlay from '../ReusableComponents/SpinnerOverlay';
import { OnboardingHooks, CommonHooks } from '../data';
import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
import SendOnlyMessage from './Screens/SendOnlyMessage';
import OnboardingScreen from './Screens/Onboarding';
import SettingsScreen from './Screens/Settings';
import Onboarding from './Onboarding/Onboarding';
import SettingsScreen from './SettingsScreen';
import { useMerchantInfo } from '../../data/common/hooks';
import SendOnlyMessage from './SendOnlyMessage';
const Settings = () => {
const SettingsApp = () => {
const onboardingProgress = OnboardingHooks.useSteps();
const {
isReady: merchantIsReady,
merchant: { isSendOnlyCountry },
} = useMerchantInfo();
} = CommonHooks.useMerchantInfo();
// Disable the "Changes you made might not be saved" browser warning.
useEffect( () => {
@ -49,7 +47,7 @@ const Settings = () => {
}
if ( ! onboardingProgress.completed ) {
return <Onboarding />;
return <OnboardingScreen />;
}
return <SettingsScreen />;
@ -63,4 +61,4 @@ const Settings = () => {
return <div className={ wrapperClass }>{ Content }</div>;
};
export default Settings;
export default SettingsApp;

3
modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons.js
View file

@ -1,3 +0,0 @@
export { default as openSignup } from './Icons/open-signup';
export const NOTIFICATION_SUCCESS = '✔️';
export const NOTIFICATION_ERROR = '❌';

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/index.js Normal file
View file

@ -0,0 +1,5 @@
export { default as openSignup } from './open-signup';
export { default as logoPayPal } from './logo-paypal';
export const NOTIFICATION_SUCCESS = '✔️';
export const NOTIFICATION_ERROR = '❌';

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/logo-paypal.js Normal file
View file

@ -0,0 +1,12 @@
import { SVG, Path } from '@wordpress/primitives';
const logoPayPal = (
<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 38">
<Path
d="M109.583.683v27.359h-6.225V.683h6.225Zm-8.516 9.234v18.175h-5.534v-1.567c-.7.683-1.5 1.2-2.383 1.567a7.259 7.259 0 0 1-2.892.583c-1.3 0-2.508-.242-3.616-.725a9.216 9.216 0 0 1-2.892-2.067 10.021 10.021 0 0 1-1.958-3.05c-.459-1.183-.684-2.458-.684-3.816 0-1.359.225-2.617.684-3.775.483-1.184 1.133-2.217 1.958-3.092a8.708 8.708 0 0 1 2.892-2.033c1.108-.509 2.316-.767 3.616-.767 1.034 0 2 .192 2.892.583a7.312 7.312 0 0 1 2.383 1.567V9.933h5.534v-.016Zm-9.809 13.225c1.134 0 2.059-.384 2.784-1.167.75-.775 1.125-1.767 1.125-2.975 0-1.208-.375-2.208-1.125-2.975-.725-.775-1.659-1.167-2.784-1.167-1.125 0-2.075.384-2.825 1.167-.725.775-1.083 1.767-1.083 2.975 0 1.208.367 2.208 1.083 2.975.75.775 1.692 1.167 2.825 1.167ZM72.225.683c1.642 0 3.042.234 4.2.692 1.158.458 2.133 1.1 2.933 1.925a9.439 9.439 0 0 1 1.917 2.908c.458 1.092.683 2.267.683 3.525 0 1.259-.225 2.434-.683 3.525a9.293 9.293 0 0 1-1.917 2.909c-.791.825-1.775 1.466-2.933 1.925-1.158.458-2.558.691-4.2.691h-3v9.3h-6.333V.683h9.333Zm-.908 12.467c.85 0 1.491-.083 1.958-.258a3.853 3.853 0 0 0 1.192-.725c.65-.609.975-1.417.975-2.434 0-1.016-.325-1.825-.975-2.433a3.329 3.329 0 0 0-1.192-.692c-.458-.191-1.108-.291-1.958-.291h-2.1v6.833h2.1ZM39.558 9.917h6.875l4.667 8.716h.075l4.158-8.716H61.7l-13.642 27.4h-6.333l6.225-12.534-8.392-14.866Zm-1.225 0v18.175H32.8v-1.567c-.7.683-1.5 1.2-2.383 1.567a7.258 7.258 0 0 1-2.892.583c-1.3 0-2.508-.242-3.617-.725a9.218 9.218 0 0 1-2.891-2.067 10.18 10.18 0 0 1-1.959-3.05c-.458-1.183-.683-2.458-.683-3.816 0-1.359.225-2.617.683-3.775.484-1.184 1.134-2.217 1.959-3.092a8.626 8.626 0 0 1 2.891-2.033c1.109-.509 2.317-.767 3.617-.767 1.033 0 2 .192 2.892.583A7.312 7.312 0 0 1 32.8 11.5V9.933h5.533v-.016Zm-9.808 13.225c1.133 0 2.058-.384 2.792-1.167.75-.775 1.125-1.767 1.125-2.975 0-1.208-.375-2.208-1.125-2.975-.725-.775-1.659-1.167-2.792-1.167-1.133 0-2.075.384-2.825 1.167-.725.775-1.083 1.767-1.083 2.975 0 1.208.366 2.208 1.083 2.975.75.775 1.692 1.167 2.825 1.167ZM9.75.683c1.642 0 3.042.234 4.2.692 1.158.458 2.133 1.1 2.933 1.925A9.439 9.439 0 0 1 18.8 6.208c.458 1.092.683 2.267.683 3.525 0 1.259-.225 2.434-.683 3.525a9.293 9.293 0 0 1-1.917 2.909c-.791.825-1.775 1.466-2.933 1.925-1.158.458-2.558.691-4.2.691h-3v9.3H.417V.683H9.75Zm-.9 12.467c.85 0 1.492-.083 1.958-.258A3.855 3.855 0 0 0 12 12.167c.65-.609.975-1.417.975-2.434 0-1.016-.325-1.825-.975-2.433a3.33 3.33 0 0 0-1.192-.692c-.458-.191-1.108-.291-1.958-.291h-2.1v6.833h2.1Z"
fill="#000"
/>
</SVG>
);
export default logoPayPal;

3
modules/ppcp-settings/resources/js/Components/ReusableComponents/Icons/open-signup.js
View file

@ -1,6 +1,3 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';
const openSignup = (

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
View file

@ -1,9 +1,11 @@
const SettingsBlock = ( { className, children } ) => {
const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
Boolean
);
import classNames from 'classnames';
return <div className={ blockClassName.join( ' ' ) }>{ children }</div>;
const SettingsBlock = ( { className, children, separatorAndGap = true } ) => {
const blockClassName = classNames( 'ppcp-r-settings-block', className, {
'no-gap': ! separatorAndGap,
} );
return <div className={ blockClassName }>{ children }</div>;
};
export default SettingsBlock;

6
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
View file

@ -1,3 +1,5 @@
import classNames from 'classnames';
import { Content, ContentWrapper } from './SettingsBlocks';
const SettingsCard = ( {
@ -9,9 +11,7 @@ const SettingsCard = ( {
contentItems,
contentContainer = true,
} ) => {
const className = [ 'ppcp-r-settings-card', extraClassName ]
.filter( Boolean )
.join( ' ' );
const className = classNames( 'ppcp-r-settings-card', extraClassName );
const renderContent = () => {
// If contentItems array is provided, wrap each item in Content component

4
modules/ppcp-settings/resources/js/Components/ReusableComponents/TabNavigation.js
View file

@ -43,9 +43,7 @@ const TabNavigation = ( { tabs } ) => {
onSelect={ updateActivePanel }
tabs={ tabs }
>
{ ( tab ) => {
return tab.component || <>{ tab.title ?? tab.name }</>;
} }
{ ( { Component } ) => Component }
</TabPanel>
);
};

86
modules/ppcp-settings/resources/js/Components/ReusableComponents/TopNavigation.js Normal file
View file

@ -0,0 +1,86 @@
import { useCallback, useLayoutEffect } from '@wordpress/element';
import { Button, Icon } from '@wordpress/components';
import { chevronLeft } from '@wordpress/icons';
import classNames from 'classnames';
import useIsScrolled from '../../hooks/useIsScrolled';
import { useNavigation } from '../../hooks/useNavigation';
import BusyStateWrapper from './BusyStateWrapper';
const TopNavigation = ( {
title,
children,
isMainTitle = true,
exitOnTitleClick = false,
onTitleClick = null,
showProgressBar = false,
progressBarPercent = 0,
} ) => {
const { goToWooCommercePaymentsTab } = useNavigation();
const { isScrolled } = useIsScrolled();
const className = classNames( 'ppcp-r-navigation-container', {
'is-scrolled': isScrolled,
} );
const titleClassName = classNames( 'title', {
big: isMainTitle,
} );
const handleTitleClick = useCallback( () => {
if ( exitOnTitleClick ) {
goToWooCommercePaymentsTab();
} else if ( 'function' === typeof onTitleClick ) {
onTitleClick();
}
}, [ exitOnTitleClick, goToWooCommercePaymentsTab, onTitleClick ] );
// Removes the excess padding at the top of the navigation bar.
useLayoutEffect( () => {
window.dispatchEvent( new Event( 'resize' ) );
}, [] );
return (
<div className={ className }>
<div className="ppcp-r-navigation">
<BusyStateWrapper
className="ppcp-r-navigation--left"
busySpinner={ false }
enabled={ ! exitOnTitleClick }
>
<Button
variant="link"
onClick={ handleTitleClick }
className="is-title"
>
<Icon icon={ chevronLeft } />
<span className={ titleClassName }>{ title }</span>
</Button>
</BusyStateWrapper>
<BusyStateWrapper
className="ppcp-r-navigation--right"
busySpinner={ false }
>
{ children }
</BusyStateWrapper>
{ showProgressBar && (
<ProgressBar percent={ progressBarPercent } />
) }
</div>
</div>
);
};
const ProgressBar = ( { percent } ) => {
percent = Math.min( Math.max( percent, 0 ), 100 );
return (
<div
className="ppcp-r-navigation--progress-bar"
style={ { width: `${ percent }%` } }
/>
);
};
export default TopNavigation;

10
modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcFlow.js
View file

@ -1,9 +1,11 @@
import { __, sprintf } from '@wordpress/i18n';
import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import Separator from '../Separator';
import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
import PricingTitleBadge from '../PricingTitleBadge';
import BadgeBox, {
BADGE_BOX_TITLE_BIG,
} from '../../../ReusableComponents/BadgeBox';
import Separator from '../../../ReusableComponents/Separator';
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge';
import OptionalPaymentMethods from './OptionalPaymentMethods';
const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
if ( isFastlane && isPayLater && storeCountry === 'US' ) {

6
modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AcdcOptionalPaymentMethods.js
View file

@ -1,8 +1,8 @@
import { __, sprintf } from '@wordpress/i18n';
import BadgeBox from '../BadgeBox';
import Separator from '../Separator';
import PricingTitleBadge from '../PricingTitleBadge';
import BadgeBox from '../../../ReusableComponents/BadgeBox';
import Separator from '../../../ReusableComponents/Separator';
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge';
const AcdcOptionalPaymentMethods = ( {
isFastlane,

10
modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcFlow.js
View file

@ -1,9 +1,11 @@
import { __, sprintf } from '@wordpress/i18n';
import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import Separator from '../Separator';
import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
import PricingTitleBadge from '../PricingTitleBadge';
import BadgeBox, {
BADGE_BOX_TITLE_BIG,
} from '../../../ReusableComponents/BadgeBox';
import Separator from '../../../ReusableComponents/Separator';
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge';
import OptionalPaymentMethods from './OptionalPaymentMethods';
const BcdcFlow = ( { isPayLater, storeCountry } ) => {
if ( isPayLater && storeCountry === 'US' ) {

4
modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/BcdcOptionalPaymentMethods.js
View file

@ -1,7 +1,7 @@
import { __, sprintf } from '@wordpress/i18n';
import BadgeBox from '../BadgeBox';
import PricingTitleBadge from '../PricingTitleBadge';
import BadgeBox from '../../../ReusableComponents/BadgeBox';
import PricingTitleBadge from '../../../ReusableComponents/PricingTitleBadge';
const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
if ( isPayLater && storeCountry === 'us' ) {

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

@ -1,56 +1,27 @@
import { Button, Icon } from '@wordpress/components';
import { chevronLeft } from '@wordpress/icons';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { OnboardingHooks } from '../../../../data';
import useIsScrolled from '../../../../hooks/useIsScrolled';
import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
import { useNavigation } from '../../../../hooks/useNavigation';
import TopNavigation from '../../../ReusableComponents/TopNavigation';
const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
const OnboardingNavigation = ( { stepDetails, onNext, onPrev } ) => {
const { goToWooCommercePaymentsTab } = useNavigation();
const { title, isFirst, percentage, showNext, canProceed } = stepDetails;
const { isScrolled } = useIsScrolled();
const state = OnboardingHooks.useNavigationState();
const isDisabled = ! canProceed( state );
const className = classNames( 'ppcp-r-navigation-container', {
'is-scrolled': isScrolled,
} );
return (
<div className={ className }>
<div className="ppcp-r-navigation">
<BusyStateWrapper
className="ppcp-r-navigation--left"
busySpinner={ false }
enabled={ ! isFirst }
>
<Button
variant="link"
onClick={ isFirst ? onExit : onPrev }
className="is-title"
>
<Icon icon={ chevronLeft } />
<span className={ 'title ' + ( isFirst ? 'big' : '' ) }>
{ title }
</span>
</Button>
</BusyStateWrapper>
{ ! isFirst &&
NextButton( { showNext, isDisabled, onNext, onExit } ) }
<ProgressBar percent={ percentage } />
</div>
</div>
);
};
const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => {
return (
<BusyStateWrapper
className="ppcp-r-navigation--right"
busySpinner={ false }
<TopNavigation
title={ title }
isMainTitle={ isFirst }
exitOnTitleClick={ isFirst }
onTitleClick={ onPrev }
showProgressBar={ true }
progressBarPercent={ percentage * 0.9 }
>
<Button variant="link" onClick={ onExit }>
<Button variant="link" onClick={ goToWooCommercePaymentsTab }>
{ __( 'Save and exit', 'woocommerce-paypal-payments' ) }
</Button>
{ showNext && (
@ -62,19 +33,8 @@ const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => {
{ __( 'Continue', 'woocommerce-paypal-payments' ) }
</Button>
) }
</BusyStateWrapper>
</TopNavigation>
);
};
const ProgressBar = ( { percent } ) => {
percent = Math.min( Math.max( percent, 0 ), 100 );
return (
<div
className="ppcp-r-navigation--progress-bar"
style={ { width: `${ percent * 0.9 }%` } }
/>
);
};
export default Navigation;
export default OnboardingNavigation;

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/OnboardingHeader.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OnboardingHeader.js
View file

@ -1,11 +1,13 @@
import data from '../../utils/data';
import { Icon } from '@wordpress/components';
import { logoPayPal } from '../../../ReusableComponents/Icons';
const OnboardingHeader = ( props ) => {
return (
<section className="ppcp-r-onboarding-header">
<div className="ppcp-r-onboarding-header__logo">
<div className="ppcp-r-onboarding-header__logo-wrapper">
{ data().getImage( 'logo-paypal.svg' ) }
<Icon icon={ logoPayPal } width="auto" height={ 38 } />
</div>
</div>
<div className="ppcp-r-onboarding-header__content">
@ -14,8 +16,10 @@ const OnboardingHeader = ( props ) => {
</h1>
{ props.description && (
<p
className="ppcp-r-onboarding-header__description"
dangerouslySetInnerHTML={ { __html: props.description, } }
className="ppcp-r-onboarding-header__description"
dangerouslySetInnerHTML={ {
__html: props.description,
} }
></p>
) }
</div>

0
modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/OptionalPaymentMethods.js
View file

2
modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/WelcomeDocs.js
View file

@ -1,6 +1,6 @@
import { __ } from '@wordpress/i18n';
import PricingDescription from '../PricingDescription';
import PricingDescription from '../../../ReusableComponents/PricingDescription';
import AcdcFlow from './AcdcFlow';
import BcdcFlow from './BcdcFlow';

8
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepBusiness.js
View file

@ -1,9 +1,9 @@
import { __ } from '@wordpress/i18n';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../ReusableComponents/SelectBox';
import { OnboardingHooks, BUSINESS_TYPES } from '../../../data';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../../ReusableComponents/SelectBox';
import { OnboardingHooks, BUSINESS_TYPES } from '../../../../data';
import OnboardingHeader from '../Components/OnboardingHeader';
const BUSINESS_RADIO_GROUP_NAME = 'business';

4
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepCompleteSetup.js
View file

@ -1,7 +1,7 @@
import { __ } from '@wordpress/i18n';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import ConnectionButton from './Components/ConnectionButton';
import OnboardingHeader from '../Components/OnboardingHeader';
import ConnectionButton from '../Components/ConnectionButton';
const StepCompleteSetup = () => {
return (

12
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepPaymentMethods.js
View file

@ -1,11 +1,11 @@
import { __ } from '@wordpress/i18n';
import { CommonHooks, OnboardingHooks } from '../../../data';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../ReusableComponents/SelectBox';
import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods';
import PricingDescription from '../../ReusableComponents/PricingDescription';
import { CommonHooks, OnboardingHooks } from '../../../../data';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../../ReusableComponents/SelectBox';
import PricingDescription from '../../../ReusableComponents/PricingDescription';
import OnboardingHeader from '../Components/OnboardingHeader';
import OptionalPaymentMethods from '../Components/OptionalPaymentMethods';
const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';

8
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepProducts.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepProducts.js
View file

@ -1,9 +1,9 @@
import { __ } from '@wordpress/i18n';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import SelectBox from '../../ReusableComponents/SelectBox';
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
import { OnboardingHooks, PRODUCT_TYPES } from '../../../data';
import SelectBox from '../../../ReusableComponents/SelectBox';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import { OnboardingHooks, PRODUCT_TYPES } from '../../../../data';
import OnboardingHeader from '../Components/OnboardingHeader';
const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';

17
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js
View file

@ -1,15 +1,14 @@
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import Separator from '../../ReusableComponents/Separator';
import WelcomeDocs from '../../ReusableComponents/WelcomeDocs/WelcomeDocs';
import AccordionSection from '../../ReusableComponents/AccordionSection';
import AdvancedOptionsForm from './Components/AdvancedOptionsForm';
import { CommonHooks } from '../../../data';
import BusyStateWrapper from '../../ReusableComponents/BusyStateWrapper';
import PaymentMethodIcons from '../../../ReusableComponents/PaymentMethodIcons';
import Separator from '../../../ReusableComponents/Separator';
import AccordionSection from '../../../ReusableComponents/AccordionSection';
import { CommonHooks } from '../../../../data';
import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
import OnboardingHeader from '../Components/OnboardingHeader';
import WelcomeDocs from '../Components/WelcomeDocs';
import AdvancedOptionsForm from '../Components/AdvancedOptionsForm';
const StepWelcome = ( { setStep, currentStep } ) => {
const { storeCountry } = CommonHooks.useWooSettings();

0
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/index.js
View file

14
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js → modules/ppcp-settings/resources/js/Components/Screens/Onboarding/index.js
View file

@ -1,27 +1,23 @@
import Container from '../../ReusableComponents/Container';
import { OnboardingHooks } from '../../../data';
import { getSteps, getCurrentStep } from './availableSteps';
import Navigation from './Components/Navigation';
import { getSteps, getCurrentStep } from './Steps';
import OnboardingNavigation from './Components/Navigation';
const Onboarding = () => {
const OnboardingScreen = () => {
const { step, setStep, flags } = OnboardingHooks.useSteps();
const Steps = getSteps( flags );
const currentStep = getCurrentStep( step, Steps );
const handleNext = () => setStep( currentStep.nextStep );
const handlePrev = () => setStep( currentStep.prevStep );
const handleExit = () => {
window.location.href = window.ppcpSettings.wcPaymentsTabUrl;
};
return (
<>
<Navigation
<OnboardingNavigation
stepDetails={ currentStep }
onNext={ handleNext }
onPrev={ handlePrev }
onExit={ handleExit }
/>
<Container page="onboarding">
@ -37,4 +33,4 @@ const Onboarding = () => {
);
};
export default Onboarding;
export default OnboardingScreen;

9
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js
View file

@ -1,6 +1,9 @@
import { __ } from '@wordpress/i18n';
import { CommonHooks } from '../../../../../../data';
import { Title } from '../../../../../ReusableComponents/SettingsBlocks';
import {
SettingsBlock,
Title,
} from '../../../../../ReusableComponents/SettingsBlocks';
const HooksTableBlock = () => {
const { webhooks } = CommonHooks.useWebhooks();
@ -11,10 +14,10 @@ const HooksTableBlock = () => {
}
return (
<>
<SettingsBlock separatorAndGap={ false }>
<WebhookUrl url={ url } />
<WebhookEvents events={ events } />
</>
</SettingsBlock>
);
};

1
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js
View file

@ -56,6 +56,7 @@ const ResubscribeBlock = () => {
'Click to remove the current webhook subscription and subscribe again, for example, if the website domain or URL structure changed.',
'woocommerce-paypal-payments'
) }
separatorAndGap={ false }
actionProps={ {
buttonType: 'secondary',
isBusy: resubscribing,

31
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js
View file

@ -107,23 +107,20 @@ const SimulationBlock = () => {
};
return (
<>
<ButtonSettingsBlock
title={ __(
'Simulate webhooks',
'woocommerce-paypal-payments'
) }
actionProps={ {
buttonType: 'secondary',
isBusy: simulating,
callback: () => startSimulation( 30 ),
value: __(
'Simulate webhooks',
'woocommerce-paypal-payments'
),
} }
/>
</>
<ButtonSettingsBlock
title={ __( 'Test webhooks', 'woocommerce-paypal-payments' ) }
description={ __(
'Send a test-webhook from PayPal to confirm that webhooks are being received and processed correctly.',
'woocommerce-paypal-payments'
) }
separatorAndGap={ false }
actionProps={ {
buttonType: 'secondary',
isBusy: simulating,
callback: () => startSimulation( 30 ),
value: __( 'Simulate webhooks', 'woocommerce-paypal-payments' ),
} }
/>
);
};
export default SimulationBlock;

4
modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js
View file

@ -2,7 +2,7 @@ import { __, sprintf } from '@wordpress/i18n';
import Container from '../ReusableComponents/Container';
import SettingsCard from '../ReusableComponents/SettingsCard';
import SettingsNavigation from './SettingsNavigation';
import SettingsNavigation from './Settings/Components/Navigation';
const SendOnlyMessage = () => {
const settingsPageUrl = '/wp-admin/admin.php?page=wc-settings';
@ -38,7 +38,7 @@ const SendOnlyMessage = () => {
__html: sprintf(
/* translators: 1: URL to the WooCommerce store location settings */
__(
'To activate PayPal, please update your <a href="%1$s">WooCommerce store location</a> to a supported region and connect a PayPal account eligible for receiving payments.',
'To activate PayPal, please <a href="%1$s">update your WooCommerce store location</a> to a supported region and connect a PayPal account eligible for receiving payments.',
'woocommerce-paypal-payments'
),
settingsPageUrl

18
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Navigation.js Normal file
View file

@ -0,0 +1,18 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import TopNavigation from '../../../ReusableComponents/TopNavigation';
const SettingsNavigation = () => {
const title = __( 'PayPal Payments', 'woocommerce-paypal-payments' );
return (
<TopNavigation title={ title } exitOnTitleClick={ true }>
<Button variant="primary" disabled={ false }>
{ __( 'Save', 'woocommerce-paypal-payments' ) }
</Button>
</TopNavigation>
);
};
export default SettingsNavigation;

49
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js Normal file
View file

@ -0,0 +1,49 @@
import { __ } from '@wordpress/i18n';
import TabOverview from '../../Overview/TabOverview';
import TabPaymentMethods from '../../Overview/TabPaymentMethods';
import TabSettings from '../../Overview/TabSettings';
import TabStyling from '../../Overview/TabStyling';
import TabPayLaterMessaging from '../../Overview/TabPayLaterMessaging';
/**
* List of all default settings tabs.
*
* The tabs are displayed in the order in which they appear in this array
*
* @type {[{name, title, Component}]}
*/
const DEFAULT_TABS = [
{
name: 'overview',
title: __( 'Overview', 'woocommerce-paypal-payments' ),
Component: <TabOverview />,
},
{
name: 'payment-methods',
title: __( 'Payment Methods', 'woocommerce-paypal-payments' ),
Component: <TabPaymentMethods />,
},
{
name: 'settings',
title: __( 'Settings', 'woocommerce-paypal-payments' ),
Component: <TabSettings />,
},
{
name: 'styling',
title: __( 'Styling', 'woocommerce-paypal-payments' ),
Component: <TabStyling />,
},
{
name: 'pay-later-messaging',
title: __( 'Pay Later Messaging', 'woocommerce-paypal-payments' ),
Component: <TabPayLaterMessaging />,
showIf: () => !! window.ppcpSettings?.isPayLaterConfiguratorAvailable,
},
];
export const getSettingsTabs = () => {
return DEFAULT_TABS.filter( ( tab ) => {
return ! tab.showIf || tab.showIf();
} );
};

8
modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js
View file

@ -1,7 +1,7 @@
import { getSettingsTabs } from './tabs';
import SettingsNavigation from './SettingsNavigation';
import Container from '../ReusableComponents/Container';
import TabNavigation from '../ReusableComponents/TabNavigation';
import Container from '../../ReusableComponents/Container';
import TabNavigation from '../../ReusableComponents/TabNavigation';
import { getSettingsTabs } from './Tabs';
import SettingsNavigation from './Components/Navigation';
const SettingsScreen = () => {
const tabs = getSettingsTabs();

37
modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js
View file

@ -1,37 +0,0 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import data from '../../utils/data';
const SettingsNavigation = ( {} ) => {
return (
<div className="ppcp-r-navigation-container">
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>
<a
className="ppcp-r-navigation--left__link"
href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label={ __(
'PayPal Payments',
'woocommerce-paypal-payments'
) }
>
{ __(
'PayPal Payments',
'woocommerce-paypal-payments'
) }
</a>
</div>
{
<div className="ppcp-r-navigation--right">
<Button variant="primary" disabled={ false }>
{ __( 'Save', 'woocommerce-paypal-payments' ) }
</Button>
</div>
}
</div>
</div>
);
};
export default SettingsNavigation;

44
modules/ppcp-settings/resources/js/Components/Screens/tabs.js
View file

@ -1,44 +0,0 @@
import { __ } from '@wordpress/i18n';
import TabOverview from './Overview/TabOverview';
import TabPaymentMethods from './Overview/TabPaymentMethods';
import TabSettings from './Overview/TabSettings';
import TabStyling from './Overview/TabStyling';
import TabPayLaterMessaging from './Overview/TabPayLaterMessaging';
export const getSettingsTabs = () => {
const tabs = [];
tabs.push( {
name: 'overview',
title: __( 'Overview', 'woocommerce-paypal-payments' ),
component: <TabOverview />,
} );
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 />,
} );
if ( window.ppcpSettings.isPayLaterConfiguratorAvailable ) {
tabs.push( {
name: 'pay-later-messaging',
title: __( 'Pay Later Messaging', 'woocommerce-paypal-payments' ),
component: <TabPayLaterMessaging />,
} );
}
return tabs;
};

10
modules/ppcp-settings/resources/js/hooks/useNavigation.js Normal file
View file

@ -0,0 +1,10 @@
/**
* Navigate to the WooCommerce "Payments" settings tab, i.e. exit the settings app.
*/
const goToWooCommercePaymentsTab = () => {
window.location.href = window.ppcpSettings.wcPaymentsTabUrl;
};
export const useNavigation = () => {
return { goToWooCommercePaymentsTab };
};

2
modules/ppcp-settings/resources/js/index.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import App from './Components/App';
createRoot( document.getElementById( 'ppcp-settings-container' ) ).render(
<App />