Reporting: Add a parent wrapper component for Payment Activity

changelog/add-8389-create-payment-activity-wrapper

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add a parent wrapper component for Payment Activity widget. This will be visible on the Payments Overview page

client/components/payment-activity/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+import { Card, CardBody, CardHeader } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+
+const PaymentActivity: React.FC = () => {
+	return (
+		<Card className="wcpay-payments-activity__card">
+			<CardHeader
+				className="wcpay-payments-activity__card__header"
+				isBorderless={ true }
+			>
+				{ __( 'Your payment activity', 'woocommerce-payments' ) }
+				{ /* Filters go here */ }
+			</CardHeader>
+			<CardBody className="wcpay-payments-activity__card__body">
+				<>{ /* Sub components go here */ }</>
+			</CardBody>
+		</Card>
+	);
+};
+
+export default PaymentActivity;

client/components/payment-activity/style.scss

@@ -0,0 +1,15 @@
+.wcpay-payments-activity {
+	&__card {
+		padding: 24px 24px 16px 24px;
+
+		&__header {
+			padding: 0 !important;
+			margin-bottom: 32px;
+		}
+
+		&__body {
+			text-align: center;
+			color: $studio-gray-30;
+		}
+	}
+}

client/components/payment-activity/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaymentActivity component should render 1`] = `
+<div>
+  <div
+    class="components-surface components-card wcpay-payments-activity__card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+    data-wp-c16t="true"
+    data-wp-component="Card"
+  >
+    <div
+      class="css-mgwsf4-View-Content em57xhy0"
+    >
+      <div
+        class="components-flex components-card__header components-card-header wcpay-payments-activity__card__header css-sz55ca-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-borderless em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="CardHeader"
+      >
+        Your payment activity
+      </div>
+      <div
+        class="components-card__body components-card-body wcpay-payments-activity__card__body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="CardBody"
+      />
+    </div>
+    <div
+      aria-hidden="true"
+      class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+    <div
+      aria-hidden="true"
+      class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+  </div>
+</div>
+`;

client/components/payment-activity/test/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import PaymentActivity from '..';
+
+describe( 'PaymentActivity component', () => {
+	it( 'should render', () => {
+		const { container } = render( <PaymentActivity /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );

client/overview/index.js

@@ -11,25 +11,26 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies.
  */
-import Page from 'components/page';
-import { TestModeNotice } from 'components/test-mode-notice';
-import AccountStatus from 'components/account-status';
-import Welcome from 'components/welcome';
 import AccountBalances from 'components/account-balances';
-import DepositsOverview from 'components/deposits-overview';
+import AccountStatus from 'components/account-status';
 import ActiveLoanSummary from 'components/active-loan-summary';
+import ConnectionSuccessNotice from './connection-sucess-notice';
+import DepositsOverview from 'components/deposits-overview';
 import ErrorBoundary from 'components/error-boundary';
-import TaskList from './task-list';
-import { getTasks, taskSort } from './task-list/tasks';
+import FRTDiscoverabilityBanner from 'components/fraud-risk-tools-banner';
+import JetpackIdcNotice from 'components/jetpack-idc-notice';
+import Page from 'components/page';
+import PaymentActivity from 'components/payment-activity';
+import Welcome from 'components/welcome';
+import { TestModeNotice } from 'components/test-mode-notice';
 import InboxNotifications from './inbox-notifications';
-import ConnectionSuccessNotice from './connection-sucess-notice';
 import ProgressiveOnboardingEligibilityModal from './modal/progressive-onboarding-eligibility';
-import JetpackIdcNotice from 'components/jetpack-idc-notice';
-import FRTDiscoverabilityBanner from 'components/fraud-risk-tools-banner';
-import { useDisputes, useGetSettings, useSettings } from 'wcpay/data';
+import SetupLivePaymentsModal from './modal/setup-live-payments';
 import strings from './strings';
+import TaskList from './task-list';
+import { getTasks, taskSort } from './task-list/tasks';
+import { useDisputes, useGetSettings, useSettings } from 'data';
 import './style.scss';
-import SetupLivePaymentsModal from './modal/setup-live-payments';
 
 const OverviewPageError = () => {
 	const queryParams = getQuery();
@@ -55,10 +56,13 @@ const OverviewPageError = () => {
 const OverviewPage = () => {
 	const {
 		accountStatus,
+		accountStatus: { progressiveOnboarding },
+		accountLoans: { has_active_loan: hasActiveLoan },
+		enabledPaymentMethods,
+		featureFlags: { isPaymentOverviewWidgetEnabled },
 		overviewTasksVisibility,
 		showUpdateDetailsTask,
 		wpcomReconnectUrl,
-		enabledPaymentMethods,
 	} = wcpaySettings;
 
 	const isDevMode = wcpaySettings.devMode;
@@ -95,8 +99,8 @@ const OverviewPage = () => {
 		queryParams[ 'wcpay-server-link-error' ] === '1';
 	const showProgressiveOnboardingEligibilityModal =
 		showConnectionSuccess &&
-		accountStatus.progressiveOnboarding.isEnabled &&
-		! accountStatus.progressiveOnboarding.isComplete;
+		progressiveOnboarding.isEnabled &&
+		! progressiveOnboarding.isComplete;
 	const showTaskList =
 		! accountRejected && ! accountUnderReview && tasks.length > 0;
 
@@ -191,18 +195,27 @@ const OverviewPage = () => {
 								<AccountBalances />
 							</Card>
 						) }
-
+						{
+							/* Show Payment Activity widget only when feature flag is set. To be removed before go live */
+							isPaymentOverviewWidgetEnabled && (
+								<Card>
+									<ErrorBoundary>
+										<PaymentActivity />
+									</ErrorBoundary>
+								</Card>
+							)
+						}
 						<DepositsOverview />
 					</>
 				</ErrorBoundary>
 			) }
 			<ErrorBoundary>
 				<AccountStatus
-					accountStatus={ wcpaySettings.accountStatus }
+					accountStatus={ accountStatus }
 					accountFees={ activeAccountFees }
 				/>
 			</ErrorBoundary>
-			{ wcpaySettings.accountLoans.has_active_loan && (
+			{ hasActiveLoan && (
 				<ErrorBoundary>
 					<ActiveLoanSummary />
 				</ErrorBoundary>