diff --git a/changelog/fix-7785-non-exisiting-deposit b/changelog/fix-7785-non-exisiting-deposit
new file mode 100644
index 00000000000..0afc71243a4
--- /dev/null
+++ b/changelog/fix-7785-non-exisiting-deposit
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Load deposit overview only when deposit is present
diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx
index 1ab114e27e9..87e46859cfe 100644
--- a/client/deposits/details/index.tsx
+++ b/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 (
+
+ { __(
+ `The deposit you are looking for cannot be found.`,
+ 'woocommerce-payments'
+ ) }
+
+ );
+ }
+
const depositDateLabel = deposit.automatic
? __( 'Deposit date', 'woocommerce-payments' )
: __( 'Instant deposit date', 'woocommerce-payments' );
@@ -196,38 +208,40 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( {
) }
-
- { isInstantDeposit ? (
- // If instant deposit, show a message instead of the transactions list.
- // Matching the components used in @woocommerce/components TableCard for consistent UI.
-
-
-
- { __(
- 'Deposit transactions',
- 'woocommerce-payments'
- ) }
-
-
-
- { interpolateComponents( {
- /* Translators: {{learnMoreLink}} is a link element (). */
- mixedString: __(
- `We're unable to show transaction history on instant deposits. {{learnMoreLink}}Learn more{{/learnMoreLink}}`,
- 'woocommerce-payments'
- ),
- components: {
- learnMoreLink: (
-
+ { deposit && (
+
+ { isInstantDeposit ? (
+ // If instant deposit, show a message instead of the transactions list.
+ // Matching the components used in @woocommerce/components TableCard for consistent UI.
+
+
+
+ { __(
+ 'Deposit transactions',
+ 'woocommerce-payments'
+ ) }
+
+
+
+ { interpolateComponents( {
+ /* Translators: {{learnMoreLink}} is a link element (). */
+ mixedString: __(
+ `We're unable to show transaction history on instant deposits. {{learnMoreLink}}Learn more{{/learnMoreLink}}`,
+ 'woocommerce-payments'
),
- },
- } ) }
-
-
- ) : (
-
- ) }
-
+ components: {
+ learnMoreLink: (
+
+ ),
+ },
+ } ) }
+
+
+ ) : (
+
+ ) }
+
+ ) }
);
};
diff --git a/client/deposits/details/test/__snapshots__/index.tsx.snap b/client/deposits/details/test/__snapshots__/index.tsx.snap
index beba927f544..f3c47816895 100644
--- a/client/deposits/details/test/__snapshots__/index.tsx.snap
+++ b/client/deposits/details/test/__snapshots__/index.tsx.snap
@@ -197,3 +197,51 @@ exports[`Deposit overview renders instant deposit correctly 1`] = `
`;
+
+exports[`Deposit overview renders notice when deposit data is not found 1`] = `
+
+
+
+
+
+
+ The deposit you are looking for cannot be found.
+
+
+
+
+
+
+`;
diff --git a/client/deposits/details/test/index.tsx b/client/deposits/details/test/index.tsx
index ce8e480760f..f6fd4d98116 100644
--- a/client/deposits/details/test/index.tsx
+++ b/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(
+
+ );
+ expect( overview ).toMatchSnapshot();
+ } );
} );