Add Woo Payments Feature Slot Fill on Homepage (#37768)

* Add slot

* Add fill

* Add changelog
This commit is contained in:
Adrian Duffell 2023-04-18 05:07:25 +08:00 committed by GitHub
parent 4fca6d1f63
commit 03ce56a99e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 102 additions and 0 deletions

View File

@ -43,6 +43,7 @@ import '../dashboard/style.scss';
import { getAdminSetting } from '~/utils/admin-settings'; import { getAdminSetting } from '~/utils/admin-settings';
import { ProgressTitle } from '../task-lists'; import { ProgressTitle } from '../task-lists';
import { WooHomescreenHeaderBanner } from './header-banner-slot'; import { WooHomescreenHeaderBanner } from './header-banner-slot';
import { WooHomescreenWCPayFeature } from './wcpay-feature-slot';
const Tasks = lazy( () => const Tasks = lazy( () =>
import( /* webpackChunkName: "tasks" */ '../tasks' ).then( ( module ) => ( { import( /* webpackChunkName: "tasks" */ '../tasks' ).then( ( module ) => ( {
@ -64,6 +65,7 @@ export const Layout = ( {
} ) => { } ) => {
const userPrefs = useUserPreferences(); const userPrefs = useUserPreferences();
const shouldShowStoreLinks = taskListComplete || isTaskListHidden; const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
const shouldShowWCPayFeature = taskListComplete || isTaskListHidden;
const hasTwoColumnContent = const hasTwoColumnContent =
shouldShowStoreLinks || window.wcAdminFeatures.analytics; shouldShowStoreLinks || window.wcAdminFeatures.analytics;
const isDashboardShown = ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen const isDashboardShown = ! query.task; // ?&task=<x> query param is used to show tasks instead of the homescreen
@ -104,6 +106,7 @@ export const Layout = ( {
) } ) }
/> />
) } ) }
{ shouldShowWCPayFeature && <WooHomescreenWCPayFeature /> }
{ <ActivityPanel /> } { <ActivityPanel /> }
{ hasTaskList && renderTaskList() } { hasTaskList && renderTaskList() }
<InboxPanel /> <InboxPanel />

View File

@ -0,0 +1,2 @@
export * from './wcpay-feature-slot';
export * from './utils';

View File

@ -0,0 +1,57 @@
/**
* External dependencies
*/
import { Slot, Fill } from '@wordpress/components';
import {
createOrderedChildren,
sortFillsByOrder,
} from '@woocommerce/components';
export const EXPERIMENTAL_WC_HOMESCREEN_WC_PAY_FEATURE_SLOT_NAME =
'experimental_woocommerce_wcpay_feature';
/**
* Create a Fill for WC Pay to add featured content to the homescreen.
*
* @slotFill WooHomescreenWCPayFeatureItem
* @scope woocommerce-admin
* @example
* const MyFill = () => (
* <Fill name="experimental_woocommerce_wcpay_feature">My fill</fill>
* );
*
* registerPlugin( 'my-extension', {
* render: MyFill,
* scope: 'woocommerce-admin',
* } );
* @param {Object} param0
* @param {Array} param0.children - Node children.
* @param {Array} param0.order - Node order.
*/
export const WooHomescreenWCPayFeatureItem = ( {
children,
order = 1,
}: {
children: React.ReactNode;
order?: number;
} ) => {
return (
<Fill name={ EXPERIMENTAL_WC_HOMESCREEN_WC_PAY_FEATURE_SLOT_NAME }>
{ ( fillProps: Fill.Props ) => {
return createOrderedChildren( children, order, fillProps );
} }
</Fill>
);
};
WooHomescreenWCPayFeatureItem.Slot = ( {
fillProps,
}: {
fillProps?: Slot.Props;
} ) => (
<Slot
name={ EXPERIMENTAL_WC_HOMESCREEN_WC_PAY_FEATURE_SLOT_NAME }
fillProps={ fillProps }
>
{ sortFillsByOrder }
</Slot>
);

View File

@ -0,0 +1,36 @@
/**
* External dependencies
*/
import { useSlot } from '@woocommerce/experimental';
import classnames from 'classnames';
/**
* Internal dependencies
*/
import {
EXPERIMENTAL_WC_HOMESCREEN_WC_PAY_FEATURE_SLOT_NAME,
WooHomescreenWCPayFeatureItem,
} from './utils';
export const WooHomescreenWCPayFeature = ( {
className,
}: {
className: string;
} ) => {
const slot = useSlot( EXPERIMENTAL_WC_HOMESCREEN_WC_PAY_FEATURE_SLOT_NAME );
const hasFills = Boolean( slot?.fills?.length );
if ( ! hasFills ) {
return null;
}
return (
<div
className={ classnames(
'woocommerce-homescreen__header',
className
) }
>
<WooHomescreenWCPayFeatureItem.Slot />
</div>
);
};

View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add Woo Payments feature slotfill on homepage