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/details/index.tsx

@@ -40,6 +40,7 @@ import {
 } from 'multi-currency/interface/functions';
 import { depositStatusLabels } from '../strings';
 import './style.scss';
+import { PayoutsRenameNotice } from '../rename-notice';
 
 /**
  * Renders the deposit status indicator UI, re-purposing the OrderStatus component from @woocommerce/components.
@@ -246,6 +247,7 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( {
 
 	return (
 		<Page>
+			<PayoutsRenameNotice />
 			<TestModeNotice currentPage="deposits" isDetailsView={ true } />
 			<ErrorBoundary>
 				{ isLoading ? (

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,88 @@
+/**
+ * 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 './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 known as Payouts!',
+								'woocommerce-payments'
+							),
+							descriptions: {
+								desktop: createInterpolateElement(
+									__(
+										"Same reliable system for quick access to your earnings — now with a clearer name. To enhance your experience, 'Deposits' will now be called 'Payouts'. <link>Learn More.</link>",
+										'woocommerce-payments'
+									),
+									{
+										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,49 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+/**
+ * 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;

client/overview/index.js

@@ -32,6 +32,7 @@ import { useDisputes, useGetSettings, useSettings } from 'data';
 import SandboxModeSwitchToLiveNotice from 'wcpay/components/sandbox-mode-switch-to-live-notice';
 import './style.scss';
 import BannerNotice from 'wcpay/components/banner-notice';
+import { PayoutsRenameNotice } from 'wcpay/deposits/rename-notice';
 
 const OverviewPageError = () => {
 	const queryParams = getQuery();
@@ -194,6 +195,7 @@ const OverviewPage = () => {
 			{ showConnectionSuccess && <ConnectionSuccessNotice /> }
 			{ ! accountRejected && ! accountUnderReview && (
 				<ErrorBoundary>
+					<PayoutsRenameNotice />
 					<Welcome />
 
 					{ showTaskList && (

client/overview/test/index.js

@@ -352,4 +352,24 @@ describe( 'Overview page', () => {
 
 		expect( query() ).not.toBeInTheDocument();
 	} );
+
+	it( 'shows payout rename notice if not yet dismissed', () => {
+		global.wcpaySettings.isPayoutsRenameNoticeDismissed = false;
+
+		render( <OverviewPage /> );
+
+		expect(
+			screen.queryByText( 'Deposits are now known as Payouts!' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'does not display payout rename notice if already dismissed', () => {
+		global.wcpaySettings.isPayoutsRenameNoticeDismissed = true;
+
+		render( <OverviewPage /> );
+
+		expect(
+			screen.queryByText( 'Deposits are now known as Payouts!' )
+		).not.toBeInTheDocument();
+	} );
 } );