Add Woo Payments Feature Slot Fill on Homepage (#37768)
* Add slot * Add fill * Add changelog
This commit is contained in:
parent
4fca6d1f63
commit
03ce56a99e
|
@ -43,6 +43,7 @@ import '../dashboard/style.scss';
|
|||
import { getAdminSetting } from '~/utils/admin-settings';
|
||||
import { ProgressTitle } from '../task-lists';
|
||||
import { WooHomescreenHeaderBanner } from './header-banner-slot';
|
||||
import { WooHomescreenWCPayFeature } from './wcpay-feature-slot';
|
||||
|
||||
const Tasks = lazy( () =>
|
||||
import( /* webpackChunkName: "tasks" */ '../tasks' ).then( ( module ) => ( {
|
||||
|
@ -64,6 +65,7 @@ export const Layout = ( {
|
|||
} ) => {
|
||||
const userPrefs = useUserPreferences();
|
||||
const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
|
||||
const shouldShowWCPayFeature = taskListComplete || isTaskListHidden;
|
||||
const hasTwoColumnContent =
|
||||
shouldShowStoreLinks || window.wcAdminFeatures.analytics;
|
||||
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 /> }
|
||||
{ hasTaskList && renderTaskList() }
|
||||
<InboxPanel />
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
export * from './wcpay-feature-slot';
|
||||
export * from './utils';
|
|
@ -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>
|
||||
);
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add Woo Payments feature slotfill on homepage
|
Loading…
Reference in New Issue