Load deposit overview only when deposit is present

changelog/fix-7785-non-exisiting-deposit

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Load deposit overview only when deposit is present

client/deposits/details/index.tsx

@@ -33,6 +33,7 @@ import TransactionsList from 'transactions/list';
 import Page from 'components/page';
 import ErrorBoundary from 'components/error-boundary';
 import { TestModeNotice } from 'components/test-mode-notice';
+import InlineNotice from 'components/inline-notice';
 import { formatCurrency, formatExplicitCurrency } from 'utils/currency';
 import { displayStatus } from '../strings';
 import './style.scss';
@@ -81,12 +82,23 @@ const SummaryItem: React.FC< SummaryItemProps > = ( {
 );
 
 interface DepositOverviewProps {
-	deposit: CachedDeposit;
+	deposit: CachedDeposit | undefined;
 }
 
 export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 	deposit,
 } ) => {
+	if ( ! deposit ) {
+		return (
+			<InlineNotice icon status="error" isDismissible={ false }>
+				{ __(
+					`The deposit you are looking for cannot be found.`,
+					'woocommerce-payments'
+				) }
+			</InlineNotice>
+		);
+	}
+
 	const depositDateLabel = deposit.automatic
 		? __( 'Deposit date', 'woocommerce-payments' )
 		: __( 'Instant deposit date', 'woocommerce-payments' );
@@ -196,38 +208,40 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( {
 				) }
 			</ErrorBoundary>
 
-			<ErrorBoundary>
-				{ isInstantDeposit ? (
-					// If instant deposit, show a message instead of the transactions list.
-					// Matching the components used in @woocommerce/components TableCard for consistent UI.
-					<Card>
-						<CardHeader>
-							<Text size={ 16 } weight={ 600 } as="h2">
-								{ __(
-									'Deposit transactions',
-									'woocommerce-payments'
-								) }
-							</Text>
-						</CardHeader>
-						<CardBody className="wcpay-deposit-overview--instant__transactions-list-message">
-							{ interpolateComponents( {
-								/* Translators: {{learnMoreLink}} is a link element (<a/>). */
-								mixedString: __(
-									`We're unable to show transaction history on instant deposits. {{learnMoreLink}}Learn more{{/learnMoreLink}}`,
-									'woocommerce-payments'
-								),
-								components: {
-									learnMoreLink: (
-										<ExternalLink href="https://woo.com/document/woopayments/deposits/instant-deposits/#transactions" />
+			{ deposit && (
+				<ErrorBoundary>
+					{ isInstantDeposit ? (
+						// If instant deposit, show a message instead of the transactions list.
+						// Matching the components used in @woocommerce/components TableCard for consistent UI.
+						<Card>
+							<CardHeader>
+								<Text size={ 16 } weight={ 600 } as="h2">
+									{ __(
+										'Deposit transactions',
+										'woocommerce-payments'
+									) }
+								</Text>
+							</CardHeader>
+							<CardBody className="wcpay-deposit-overview--instant__transactions-list-message">
+								{ interpolateComponents( {
+									/* Translators: {{learnMoreLink}} is a link element (<a/>). */
+									mixedString: __(
+										`We're unable to show transaction history on instant deposits. {{learnMoreLink}}Learn more{{/learnMoreLink}}`,
+										'woocommerce-payments'
 									),
-								},
-							} ) }
-						</CardBody>
-					</Card>
-				) : (
-					<TransactionsList depositId={ depositId } />
-				) }
-			</ErrorBoundary>
+									components: {
+										learnMoreLink: (
+											<ExternalLink href="https://woo.com/document/woopayments/deposits/instant-deposits/#transactions" />
+										),
+									},
+								} ) }
+							</CardBody>
+						</Card>
+					) : (
+						<TransactionsList depositId={ depositId } />
+					) }
+				</ErrorBoundary>
+			) }
 		</Page>
 	);
 };

client/deposits/details/test/__snapshots__/index.tsx.snap

@@ -197,3 +197,51 @@ exports[`Deposit overview renders instant deposit correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Deposit overview renders notice when deposit data is not found 1`] = `
+<div>
+  <div
+    class="wcpay-inline-notice wcpay-inline-error-notice components-notice is-error"
+  >
+    <div
+      class="components-notice__content"
+    >
+      <div
+        class="components-flex css-bmzg3m-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="Flex"
+      >
+        <div
+          class="components-flex-item wcpay-inline-notice__icon wcpay-inline-error-notice__icon css-mw3lhz-View-Item-sx-Base em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          <svg
+            class="gridicon gridicons-notice-outline"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+              />
+            </g>
+          </svg>
+        </div>
+        <div
+          class="components-flex-item wcpay-inline-notice__content wcpay-inline-error-notice__content css-mw3lhz-View-Item-sx-Base em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          The deposit you are looking for cannot be found.
+        </div>
+      </div>
+      <div
+        class="components-notice__actions"
+      />
+    </div>
+  </div>
+</div>
+`;

client/deposits/details/test/index.tsx

@@ -22,6 +22,7 @@ const mockDeposit = {
 	automatic: true,
 	fee: 30,
 	fee_percentage: 1.5,
+	currency: 'USD',
 } as CachedDeposit;
 
 declare const global: {
@@ -69,4 +70,12 @@ describe( 'Deposit overview', () => {
 		);
 		expect( overview ).toMatchSnapshot();
 	} );
+
+	// test when deposit data could not be found, it renders a notice
+	test( 'renders notice when deposit data is not found', () => {
+		const { container: overview } = render(
+			<DepositOverview deposit={ undefined } />
+		);
+		expect( overview ).toMatchSnapshot();
+	} );
 } );