Add dismissable Notice to message the rename of Deposits to Payout

changelog/add-9673-payouts-rename-notice

@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Added notice to indicate the rename of Deposits to Payouts. User facing changelog will be added as part of feature branch
+
+

client/deposits/index.tsx

@@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { TestModeNotice } from 'components/test-mode-notice';
 import BannerNotice from 'components/banner-notice';
 import DepositSchedule from 'components/deposits-overview/deposit-schedule';
+import { PayoutsRenameNotice } from './rename-notice';
 import { useAllDepositsOverviews } from 'data';
 import { useSettings } from 'wcpay/data';
 import DepositsList from './list';
@@ -149,6 +150,7 @@ const DepositsPage: React.FC = () => {
 	return (
 		<Page>
 			<TestModeNotice currentPage="deposits" />
+			<PayoutsRenameNotice />
 			<NextDepositNotice />
 			<DepositFailureNotice />
 			<DepositsList />

client/deposits/rename-notice/index.tsx

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import React, { useState, useEffect } from 'react';
+import { TourKit } from '@woocommerce/components';
+import { useDispatch } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useDeposits } from 'wcpay/data';
+import './style.scss';
+
+export const PayoutsRenameNotice = () => {
+	const isPayoutsRenameNoticeDismissed =
+		wcpaySettings.isPayoutsRenameNoticeDismissed;
+	const { updateOptions } = useDispatch( 'wc/admin/options' );
+	const [ showTour, setShowTour ] = useState( false );
+
+	const onClose = () => {
+		updateOptions( {
+			wcpay_payouts_rename_notice_dismissed: true,
+		} );
+		setShowTour( false );
+		wcpaySettings.isPayoutsRenameNoticeDismissed = true;
+	};
+
+	useEffect( () => {
+		if ( ! isPayoutsRenameNoticeDismissed ) {
+			setShowTour( true );
+		}
+	}, [ isPayoutsRenameNoticeDismissed ] );
+
+	if ( ! showTour ) return null;
+
+	return (
+		<TourKit
+			config={ {
+				placement: 'bottom',
+				options: {
+					effects: {
+						overlay: false,
+						autoScroll: {
+							behavior: 'smooth',
+						},
+					},
+					classNames:
+						'wc-admin-payments-overview-payouts-rename-tour',
+				},
+				steps: [
+					{
+						referenceElements: {
+							desktop:
+								'#toplevel_page_wc-admin-path--payments-overview ul.wp-submenu li a[href*="payouts"]',
+						},
+						meta: {
+							name: 'deposits-now-payouts',
+							heading: __(
+								'Deposits are now Payouts!',
+								'woocommerce-payments'
+							),
+							descriptions: {
+								desktop: createInterpolateElement(
+									__(
+										"Heads up! We've given Deposits a new industry approved alias: Payouts! Don't worry, it's still the same reliable function, just with a little more style. <link>Learn More.</link>",
+										'woocommerce'
+									),
+									{
+										link: (
+											// eslint-disable-next-line jsx-a11y/anchor-has-content
+											<a
+												href="https://woocommerce.com/document/woopayments/payouts/deposits-and-payouts/"
+												target="_blank"
+												rel="noreferrer"
+											/>
+										),
+									}
+								),
+							},
+						},
+					},
+				],
+				closeHandler: onClose,
+			} }
+		></TourKit>
+	);
+};

client/deposits/rename-notice/style.scss

@@ -0,0 +1,77 @@
+.wc-admin-payments-overview-payouts-rename-tour {
+	color: #1e1e1e;
+
+	.woocommerce-tour-kit-step {
+		border-radius: 8px;
+		border: 1px solid #dcdcdc;
+
+		/* Shadow / Popover */
+		box-shadow: 0 2px 6px 0 rgba( 0, 0, 0, 0.05 );
+		width: 257px;
+		padding-bottom: 0;
+	}
+
+	.components-card__footer {
+		display: none;
+	}
+
+	.tour-kit-frame__container {
+		box-shadow: none;
+		background: none;
+	}
+
+	.components-elevation {
+		display: none;
+	}
+
+	.woocommerce-tour-kit-step__body {
+		background-image: url( './header-image.svg' );
+		background-repeat: no-repeat;
+		background-position-x: center;
+		background-position-y: 5px;
+		padding-bottom: 24px;
+	}
+	.woocommerce-tour-kit-step-navigation {
+		display: none;
+	}
+	h2 {
+		padding-top: 100px;
+		font-size: 14px;
+		line-height: 24px;
+	}
+	p.woocommerce-tour-kit-step__description {
+		font-size: 13px;
+		line-height: 18px;
+		margin-top: 8px;
+	}
+	.tour-kit-frame__arrow::before {
+		box-shadow: none !important;
+	}
+
+	.tour-kit-frame__container[data-popper-placement^='bottom'] {
+		& > .tour-kit-frame__arrow {
+			background: #fff;
+			&::before {
+				border-top: 1px solid var( --gutenberg-gray-300, #ddd );
+				border-left: 1px solid var( --gutenberg-gray-300, #ddd );
+			}
+		}
+	}
+
+	.tour-kit-frame__container[data-popper-placement^='right'] {
+		& > .tour-kit-frame__arrow {
+			background: #fff;
+			&::before {
+				border-bottom: 1px solid var( --gutenberg-gray-300, #ddd );
+				border-left: 1px solid var( --gutenberg-gray-300, #ddd );
+			}
+		}
+	}
+
+	a {
+		display: block;
+		text-decoration: none;
+		margin-top: 12px;
+		padding-block: 11px;
+	}
+}

client/deposits/rename-notice/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PayoutsRenameNotice should render notice if isPayoutsRenameNoticeDismissed is false 1`] = `
+<div>
+  <div>
+    Tour Component
+  </div>
+</div>
+`;

client/deposits/rename-notice/test/index.tsx

@@ -0,0 +1,52 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import apiFetch from '@wordpress/api-fetch';
+import { log, error } from 'console';
+
+/**
+ * Internal dependencies
+ */
+import { PayoutsRenameNotice } from '..';
+
+jest.mock( '@wordpress/api-fetch', () => jest.fn() );
+
+jest.mock( '@wordpress/data', () => ( {
+	useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ),
+} ) );
+
+jest.mock( '@woocommerce/components', () => ( {
+	TourKit: () => <div>Tour Component</div>,
+} ) );
+
+declare const global: {
+	wcpaySettings: {
+		isPayoutsRenameNoticeDismissed: boolean;
+	};
+};
+
+describe( 'PayoutsRenameNotice', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'should render null if isPayoutsRenameNoticeDismissed is true', () => {
+		global.wcpaySettings = {
+			isPayoutsRenameNoticeDismissed: true,
+		};
+		const { container } = render( <PayoutsRenameNotice /> );
+		expect( container.firstChild ).toBeNull();
+	} );
+
+	test( 'should render notice if isPayoutsRenameNoticeDismissed is false', () => {
+		global.wcpaySettings = {
+			isPayoutsRenameNoticeDismissed: false,
+		};
+		const { container } = render( <PayoutsRenameNotice /> );
+		expect( container ).toMatchSnapshot();
+	} );
+} );

client/globals.d.ts

@@ -89,6 +89,7 @@ declare global {
 		fraudProtection: {
 			isWelcomeTourDismissed?: boolean;
 		};
+		isPayoutsRenameNoticeDismissed: boolean;
 		progressiveOnboarding?: {
 			isEnabled: boolean;
 			isComplete: boolean;