From 2c33787241cc1ca607da51392182cc21e00548a5 Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Mon, 4 Mar 2024 18:23:03 +0530 Subject: [PATCH 1/3] Fix: Deposit details screen for a non-existing deposit renders a buggy UI --- client/deposits/details/index.tsx | 82 +++++++++++++++++++------------ 1 file changed, 50 insertions(+), 32 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 1ab114e27e9..db3c77d47e0 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'; @@ -178,6 +179,21 @@ interface DepositDetailsProps { }; } +function loadDepositOverviewIfDepositPresent( deposit: CachedDeposit ) { + if ( deposit ) { + return ; + } + + return ( + + { __( + `The deposit you are looking for cannot be found.`, + 'woocommerce-payments' + ) } + + ); +} + export const DepositDetails: React.FC< DepositDetailsProps > = ( { query: { id: depositId }, } ) => { @@ -192,42 +208,44 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( { { isLoading ? ( ) : ( - + loadDepositOverviewIfDepositPresent( 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: ( - + { 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: ( + + ), + }, + } ) } + + + ) : ( + + ) } + + ) } ); }; From c989d099122ad253783663a56891abac9b33523c Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Tue, 5 Mar 2024 13:02:21 +0530 Subject: [PATCH 2/3] Added test with snapshot and added changelog --- changelog/fix-7785-non-exisiting-deposit | 4 ++ client/deposits/details/index.tsx | 30 +++++------- .../details/test/__snapshots__/index.tsx.snap | 48 +++++++++++++++++++ client/deposits/details/test/index.tsx | 13 ++++- 4 files changed, 76 insertions(+), 19 deletions(-) create mode 100644 changelog/fix-7785-non-exisiting-deposit 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 db3c77d47e0..87e46859cfe 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -82,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' ); @@ -179,21 +190,6 @@ interface DepositDetailsProps { }; } -function loadDepositOverviewIfDepositPresent( deposit: CachedDeposit ) { - if ( deposit ) { - return ; - } - - return ( - - { __( - `The deposit you are looking for cannot be found.`, - 'woocommerce-payments' - ) } - - ); -} - export const DepositDetails: React.FC< DepositDetailsProps > = ( { query: { id: depositId }, } ) => { @@ -208,7 +204,7 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( { { isLoading ? ( ) : ( - loadDepositOverviewIfDepositPresent( deposit ) + ) } 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..e19e3c542f8 100644 --- a/client/deposits/details/test/index.tsx +++ b/client/deposits/details/test/index.tsx @@ -12,7 +12,7 @@ import React from 'react'; import type { CachedDeposit } from 'types/deposits'; import { DepositOverview } from '../'; -const mockDeposit = { +const mockDeposit: CachedDeposit | undefined = { id: 'po_mock', date: '2020-01-02 17:46:02', type: 'deposit', @@ -22,7 +22,8 @@ const mockDeposit = { automatic: true, fee: 30, fee_percentage: 1.5, -} as CachedDeposit; + currency: 'USD', +}; declare const global: { wcpaySettings: { @@ -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(); + } ); } ); From 4ea15a48c57aa06ab1ba7031aecfbc1d98ee6f97 Mon Sep 17 00:00:00 2001 From: Naman Malhotra Date: Tue, 5 Mar 2024 13:14:21 +0530 Subject: [PATCH 3/3] small refactor --- client/deposits/details/test/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/deposits/details/test/index.tsx b/client/deposits/details/test/index.tsx index e19e3c542f8..f6fd4d98116 100644 --- a/client/deposits/details/test/index.tsx +++ b/client/deposits/details/test/index.tsx @@ -12,7 +12,7 @@ import React from 'react'; import type { CachedDeposit } from 'types/deposits'; import { DepositOverview } from '../'; -const mockDeposit: CachedDeposit | undefined = { +const mockDeposit = { id: 'po_mock', date: '2020-01-02 17:46:02', type: 'deposit', @@ -23,7 +23,7 @@ const mockDeposit: CachedDeposit | undefined = { fee: 30, fee_percentage: 1.5, currency: 'USD', -}; +} as CachedDeposit; declare const global: { wcpaySettings: {