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(); + } ); } );