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

♻️ Extract sub-components in overview tab

Browse source
This commit is contained in:
Philipp Stracker 2025-01-24 13:07:32 +01:00
parent f7845c72f6
commit a3d95f23c2
No known key found for this signature in database
1 changed files with 152 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

66
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
View file

@ -22,8 +22,34 @@ import {
} from '../../../ReusableComponents/Icons'; } from '../../../ReusableComponents/Icons';
const TabOverview = () => { const TabOverview = () => {
const [ isRefreshing, setIsRefreshing ] = useState( false ); return (
<div className="ppcp-r-tab-overview">
{ todosData.length > 0 && (
<SettingsCard
className="ppcp-r-tab-overview-todo"
title={ __(
'Things to do next',
'woocommerce-paypal-payments'
) }
description={ __(
'Complete these tasks to keep your store updated with the latest products and services.',
'woocommerce-paypal-payments'
) }
>
<TodoSettingsBlock todosData={ todosData } />
</SettingsCard>
) }
<OverviewFeatures />
<OverviewHelp />
</div>
);
};
export default TabOverview;
const OverviewFeatures = () => {
const [ isRefreshing, setIsRefreshing ] = useState( false );
const { merchant, features: merchantFeatures } = useMerchantInfo(); const { merchant, features: merchantFeatures } = useMerchantInfo();
const { refreshFeatureStatuses, setActiveModal } = const { refreshFeatureStatuses, setActiveModal } =
useDispatch( STORE_NAME ); useDispatch( STORE_NAME );
@ -49,6 +75,7 @@ const TabOverview = () => {
const refreshHandler = async () => { const refreshHandler = async () => {
setIsRefreshing( true ); setIsRefreshing( true );
try { try {
const result = await refreshFeatureStatuses(); const result = await refreshFeatureStatuses();
if ( result && ! result.success ) { if ( result && ! result.success ) {
@ -87,23 +114,6 @@ const TabOverview = () => {
}; };
return ( return (
<div className="ppcp-r-tab-overview">
{ todosData.length > 0 && (
<SettingsCard
className="ppcp-r-tab-overview-todo"
title={ __(
'Things to do next',
'woocommerce-paypal-payments'
) }
description={ __(
'Complete these tasks to keep your store updated with the latest products and services.',
'woocommerce-paypal-payments'
) }
>
<TodoSettingsBlock todosData={ todosData } />
</SettingsCard>
) }
<SettingsCard <SettingsCard
className="ppcp-r-tab-overview-features" className="ppcp-r-tab-overview-features"
title={ __( 'Features', 'woocommerce-paypal-payments' ) } title={ __( 'Features', 'woocommerce-paypal-payments' ) }
@ -128,14 +138,8 @@ const TabOverview = () => {
> >
<Icon icon={ reusableBlock } size={ 18 } /> <Icon icon={ reusableBlock } size={ 18 } />
{ isRefreshing { isRefreshing
? __( ? __( 'Refreshing…', 'woocommerce-paypal-payments' )
'Refreshing…', : __( 'Refresh', 'woocommerce-paypal-payments' ) }
'woocommerce-paypal-payments'
)
: __(
'Refresh',
'woocommerce-paypal-payments'
) }
</Button> </Button>
</> </>
} }
@ -151,8 +155,7 @@ const TabOverview = () => {
( button ) => ( button ) =>
! button.showWhen || // Learn more buttons ! button.showWhen || // Learn more buttons
( feature.enabled && ( feature.enabled &&
button.showWhen === button.showWhen === 'enabled' ) ||
'enabled' ) ||
( ! feature.enabled && ( ! feature.enabled &&
button.showWhen === 'disabled' ) button.showWhen === 'disabled' )
) )
@ -181,7 +184,11 @@ const TabOverview = () => {
); );
} ) } } ) }
/> />
);
};
const OverviewHelp = () => {
return (
<SettingsCard <SettingsCard
className="ppcp-r-tab-overview-help" className="ppcp-r-tab-overview-help"
title={ __( 'Help Center', 'woocommerce-paypal-payments' ) } title={ __( 'Help Center', 'woocommerce-paypal-payments' ) }
@ -235,8 +242,5 @@ const TabOverview = () => {
/>, />,
] } ] }
/> />
</div>
); );
}; };
export default TabOverview;