From 03ce56a99e8485e099a239bbc107da9efbb24d4f Mon Sep 17 00:00:00 2001
From: Adrian Duffell <9312929+adrianduffell@users.noreply.github.com>
Date: Tue, 18 Apr 2023 05:07:25 +0800
Subject: [PATCH] Add Woo Payments Feature Slot Fill on Homepage (#37768)

* Add slot

* Add fill

* Add changelog
---
 .../client/homescreen/layout.js               |  3 +
 .../homescreen/wcpay-feature-slot/index.ts    |  2 +
 .../homescreen/wcpay-feature-slot/utils.tsx   | 57 +++++++++++++++++++
 .../wcpay-feature-slot/wcpay-feature-slot.tsx | 36 ++++++++++++
 .../woocommerce/changelog/add-wcpay-slotfill  |  4 ++
 5 files changed, 102 insertions(+)
 create mode 100644 plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/index.ts
 create mode 100644 plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/utils.tsx
 create mode 100644 plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx
 create mode 100644 plugins/woocommerce/changelog/add-wcpay-slotfill

diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js
index 025c79e9fab..7901abc089a 100644
--- a/plugins/woocommerce-admin/client/homescreen/layout.js
+++ b/plugins/woocommerce-admin/client/homescreen/layout.js
@@ -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 />
diff --git a/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/index.ts b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/index.ts
new file mode 100644
index 00000000000..d744be81a91
--- /dev/null
+++ b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/index.ts
@@ -0,0 +1,2 @@
+export * from './wcpay-feature-slot';
+export * from './utils';
diff --git a/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/utils.tsx b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/utils.tsx
new file mode 100644
index 00000000000..b44d0a82993
--- /dev/null
+++ b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/utils.tsx
@@ -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>
+);
diff --git a/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx
new file mode 100644
index 00000000000..776af04590d
--- /dev/null
+++ b/plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx
@@ -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>
+	);
+};
diff --git a/plugins/woocommerce/changelog/add-wcpay-slotfill b/plugins/woocommerce/changelog/add-wcpay-slotfill
new file mode 100644
index 00000000000..4f4653e4a13
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-wcpay-slotfill
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Woo Payments feature slotfill on homepage