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

♻️ 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

300
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,156 +114,133 @@ const TabOverview = () => {
}; };
return ( return (
<div className="ppcp-r-tab-overview"> <SettingsCard
{ todosData.length > 0 && ( className="ppcp-r-tab-overview-features"
<SettingsCard title={ __( 'Features', 'woocommerce-paypal-payments' ) }
className="ppcp-r-tab-overview-todo" description={
title={ __( <>
'Things to do next', <p>
'woocommerce-paypal-payments' { __(
) } 'Enable additional features and capabilities on your WooCommerce store.',
description={ __( 'woocommerce-paypal-payments'
'Complete these tasks to keep your store updated with the latest products and services.', ) }
'woocommerce-paypal-payments' </p>
) } <p>
> { __(
<TodoSettingsBlock todosData={ todosData } /> 'Click Refresh to update your current features after making changes.',
</SettingsCard> 'woocommerce-paypal-payments'
) } ) }
</p>
<SettingsCard <Button
className="ppcp-r-tab-overview-features" variant="tertiary"
title={ __( 'Features', 'woocommerce-paypal-payments' ) } onClick={ refreshHandler }
description={ disabled={ isRefreshing }
<> >
<p> <Icon icon={ reusableBlock } size={ 18 } />
{ __( { isRefreshing
'Enable additional features and capabilities on your WooCommerce store.', ? __( 'Refreshing…', 'woocommerce-paypal-payments' )
'woocommerce-paypal-payments' : __( 'Refresh', 'woocommerce-paypal-payments' ) }
) } </Button>
</p> </>
<p> }
{ __( contentItems={ features.map( ( feature ) => {
'Click Refresh to update your current features after making changes.', return (
'woocommerce-paypal-payments'
) }
</p>
<Button
variant="tertiary"
onClick={ refreshHandler }
disabled={ isRefreshing }
>
<Icon icon={ reusableBlock } size={ 18 } />
{ isRefreshing
? __(
'Refreshing…',
'woocommerce-paypal-payments'
)
: __(
'Refresh',
'woocommerce-paypal-payments'
) }
</Button>
</>
}
contentItems={ features.map( ( feature ) => {
return (
<FeatureSettingsBlock
key={ feature.id }
title={ feature.title }
description={ feature.description }
actionProps={ {
buttons: feature.buttons
.filter(
( button ) =>
! button.showWhen || // Learn more buttons
( feature.enabled &&
button.showWhen ===
'enabled' ) ||
( ! feature.enabled &&
button.showWhen === 'disabled' )
)
.map( ( button ) => ( {
...button,
url: button.urls
? merchant?.isSandbox
? button.urls.sandbox
: button.urls.live
: button.url,
} ) ),
isBusy: isRefreshing,
enabled: feature.enabled,
notes: feature.notes,
badge: feature.enabled
? {
text: __(
'Active',
'woocommerce-paypal-payments'
),
type: TITLE_BADGE_POSITIVE,
}
: undefined,
} }
/>
);
} ) }
/>
<SettingsCard
className="ppcp-r-tab-overview-help"
title={ __( 'Help Center', 'woocommerce-paypal-payments' ) }
description={ __(
'Access detailed guides and responsive support to streamline setup and enhance your experience.',
'woocommerce-paypal-payments'
) }
contentItems={ [
<FeatureSettingsBlock <FeatureSettingsBlock
key="documentation" key={ feature.id }
title={ __( title={ feature.title }
'Documentation', description={ feature.description }
'woocommerce-paypal-payments'
) }
description={ __(
'Find detailed guides and resources to help you set up, manage, and optimize your PayPal integration.',
'woocommerce-paypal-payments'
) }
actionProps={ { actionProps={ {
buttons: [ buttons: feature.buttons
{ .filter(
type: 'tertiary', ( button ) =>
text: __( ! button.showWhen || // Learn more buttons
'View full documentation', ( feature.enabled &&
'woocommerce-paypal-payments' button.showWhen === 'enabled' ) ||
), ( ! feature.enabled &&
url: 'https://woocommerce.com/document/woocommerce-paypal-payments/ ', button.showWhen === 'disabled' )
}, )
], .map( ( button ) => ( {
...button,
url: button.urls
? merchant?.isSandbox
? button.urls.sandbox
: button.urls.live
: button.url,
} ) ),
isBusy: isRefreshing,
enabled: feature.enabled,
notes: feature.notes,
badge: feature.enabled
? {
text: __(
'Active',
'woocommerce-paypal-payments'
),
type: TITLE_BADGE_POSITIVE,
}
: undefined,
} } } }
/>, />
<FeatureSettingsBlock );
key="support" } ) }
title={ __( 'Support', 'woocommerce-paypal-payments' ) } />
description={ __(
'Need help? Access troubleshooting tips or contact our support team for personalized assistance.',
'woocommerce-paypal-payments'
) }
actionProps={ {
buttons: [
{
type: 'tertiary',
text: __(
'View support options',
'woocommerce-paypal-payments'
),
url: 'https://woocommerce.com/document/woocommerce-paypal-payments/#get-help ',
},
],
} }
/>,
] }
/>
</div>
); );
}; };
export default TabOverview; const OverviewHelp = () => {
return (
<SettingsCard
className="ppcp-r-tab-overview-help"
title={ __( 'Help Center', 'woocommerce-paypal-payments' ) }
description={ __(
'Access detailed guides and responsive support to streamline setup and enhance your experience.',
'woocommerce-paypal-payments'
) }
contentItems={ [
<FeatureSettingsBlock
key="documentation"
title={ __(
'Documentation',
'woocommerce-paypal-payments'
) }
description={ __(
'Find detailed guides and resources to help you set up, manage, and optimize your PayPal integration.',
'woocommerce-paypal-payments'
) }
actionProps={ {
buttons: [
{
type: 'tertiary',
text: __(
'View full documentation',
'woocommerce-paypal-payments'
),
url: 'https://woocommerce.com/document/woocommerce-paypal-payments/ ',
},
],
} }
/>,
<FeatureSettingsBlock
key="support"
title={ __( 'Support', 'woocommerce-paypal-payments' ) }
description={ __(
'Need help? Access troubleshooting tips or contact our support team for personalized assistance.',
'woocommerce-paypal-payments'
) }
actionProps={ {
buttons: [
{
type: 'tertiary',
text: __(
'View support options',
'woocommerce-paypal-payments'
),
url: 'https://woocommerce.com/document/woocommerce-paypal-payments/#get-help ',
},
],
} }
/>,
] }
/>
);
};