From 24c144c3c926e4dd43af8b32f903c8b581de3aed Mon Sep 17 00:00:00 2001 From: Jessy Date: Tue, 3 Dec 2024 16:40:56 +0530 Subject: [PATCH 1/5] Added type_is_in filter so that it can be used by client. This filter is already available on server. --- .../payment-activity-data.tsx | 24 +++++++++---------- client/data/transactions/hooks.ts | 6 +++++ client/data/transactions/resolvers.js | 1 + client/transactions/declarations.d.ts | 1 + client/transactions/filters/config.ts | 1 + .../request/class-list-transactions.php | 1 + 6 files changed, 22 insertions(+), 12 deletions(-) diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx index 255770e587f..7731ecfb5b1 100644 --- a/client/components/payment-activity/payment-activity-data.tsx +++ b/client/components/payment-activity/payment-activity-data.tsx @@ -17,7 +17,7 @@ import { getAdminUrl } from 'wcpay/utils'; import type { PaymentActivityData } from 'wcpay/data/payment-activity/types'; import './style.scss'; -const searchTermsForViewReportLink = { +const typeFiltersForViewReportLink = { totalPaymentVolume: [ 'charge', 'payment', @@ -43,11 +43,11 @@ const searchTermsForViewReportLink = { dispute: [ 'dispute', 'dispute_reversal' ], }; -const getSearchParams = ( searchTerms: string[] ) => { - return searchTerms.reduce( +const getTypeFilters = ( types: string[] ) => { + return types.reduce( ( acc, term, index ) => ( { ...acc, - [ `search[${ index }]` ]: term, + [ `type_is_in[${ index }]` ]: term, } ), {} ); @@ -122,8 +122,8 @@ const PaymentActivityDataComponent: React.FC< Props > = ( { 'date_between[1]': moment( paymentActivityData?.date_end ) .add( siteTimeZone ) .format( 'YYYY-MM-DD' ), - ...getSearchParams( - searchTermsForViewReportLink.totalPaymentVolume + ...getTypeFilters( + typeFiltersForViewReportLink.totalPaymentVolume ), } ) } tracksSource="total_payment_volume" @@ -169,8 +169,8 @@ const PaymentActivityDataComponent: React.FC< Props > = ( { ) .add( siteTimeZone ) .format( 'YYYY-MM-DD' ), - ...getSearchParams( - searchTermsForViewReportLink.charge + ...getTypeFilters( + typeFiltersForViewReportLink.charge ), } ) } tracksSource="charges" @@ -196,8 +196,8 @@ const PaymentActivityDataComponent: React.FC< Props > = ( { ) .add( siteTimeZone ) .format( 'YYYY-MM-DD' ), - ...getSearchParams( - searchTermsForViewReportLink.refunds + ...getTypeFilters( + typeFiltersForViewReportLink.refunds ), } ) } tracksSource="refunds" @@ -250,8 +250,8 @@ const PaymentActivityDataComponent: React.FC< Props > = ( { ) .add( siteTimeZone ) .format( 'YYYY-MM-DD' ), - ...getSearchParams( - searchTermsForViewReportLink.dispute + ...getTypeFilters( + typeFiltersForViewReportLink.dispute ), } ) } tracksSource="disputes" diff --git a/client/data/transactions/hooks.ts b/client/data/transactions/hooks.ts index d0a983e75f9..b55dd9e09b2 100644 --- a/client/data/transactions/hooks.ts +++ b/client/data/transactions/hooks.ts @@ -146,6 +146,7 @@ export const useTransactions = ( date_between: dateBetween, type_is: typeIs, type_is_not: typeIsNot, + type_is_in: typeIsIn, source_device_is: sourceDeviceIs, source_device_is_not: sourceDeviceIsNot, channel_is: channelIs, @@ -189,6 +190,7 @@ export const useTransactions = ( ), typeIs, typeIsNot, + typeIsIn, sourceDeviceIs, sourceDeviceIsNot, storeCurrencyIs, @@ -222,6 +224,7 @@ export const useTransactions = ( JSON.stringify( dateBetween ), typeIs, typeIsNot, + JSON.stringify( typeIsIn ), sourceDeviceIs, sourceDeviceIsNot, storeCurrencyIs, @@ -247,6 +250,7 @@ export const useTransactionsSummary = ( date_between: dateBetween, type_is: typeIs, type_is_not: typeIsNot, + type_is_in: typeIsIn, source_device_is: sourceDeviceIs, source_device_is_not: sourceDeviceIsNot, store_currency_is: storeCurrencyIs, @@ -276,6 +280,7 @@ export const useTransactionsSummary = ( dateBetween, typeIs, typeIsNot, + typeIsIn, sourceDeviceIs, sourceDeviceIsNot, storeCurrencyIs, @@ -304,6 +309,7 @@ export const useTransactionsSummary = ( JSON.stringify( dateBetween ), typeIs, typeIsNot, + JSON.stringify( typeIsIn ), sourceDeviceIs, sourceDeviceIsNot, storeCurrencyIs, diff --git a/client/data/transactions/resolvers.js b/client/data/transactions/resolvers.js index d2d6cab6cfb..77e517bdf6d 100644 --- a/client/data/transactions/resolvers.js +++ b/client/data/transactions/resolvers.js @@ -40,6 +40,7 @@ export const formatQueryFilters = ( query ) => ( { ], type_is: query.typeIs, type_is_not: query.typeIsNot, + type_is_in: query.typeIsIn, source_device_is: query.sourceDeviceIs, source_device_is_not: query.sourceDeviceIsNot, channel_is: query.channelIs, diff --git a/client/transactions/declarations.d.ts b/client/transactions/declarations.d.ts index 08ff94e4892..1ee8fe71627 100644 --- a/client/transactions/declarations.d.ts +++ b/client/transactions/declarations.d.ts @@ -128,6 +128,7 @@ declare module '@woocommerce/navigation' { date_between?: string[]; type_is?: unknown; type_is_not?: unknown; + type_is_in?: unknown; source_device_is?: unknown; source_device_is_not?: unknown; channel_is?: string; diff --git a/client/transactions/filters/config.ts b/client/transactions/filters/config.ts index b6e3c34f534..b5552654494 100644 --- a/client/transactions/filters/config.ts +++ b/client/transactions/filters/config.ts @@ -99,6 +99,7 @@ export const getFilters = ( 'filter', 'type_is', 'type_is_not', + 'type_is_in', 'date_before', 'date_after', 'date_between', diff --git a/includes/core/server/request/class-list-transactions.php b/includes/core/server/request/class-list-transactions.php index 4a2b998622e..3f369df29ba 100644 --- a/includes/core/server/request/class-list-transactions.php +++ b/includes/core/server/request/class-list-transactions.php @@ -82,6 +82,7 @@ function ( $transaction_date ) use ( $user_timezone ) { 'date_between' => $date_between_filter, 'type_is' => $request->get_param( 'type_is' ), 'type_is_not' => $request->get_param( 'type_is_not' ), + 'type_is_in' => (array) $request->get_param( 'type_is_in' ), 'source_device_is' => $request->get_param( 'source_device_is' ), 'source_device_is_not' => $request->get_param( 'source_device_is_not' ), 'channel_is' => $request->get_param( 'channel_is' ), From 2049d17061c1f626c0c6b18c4678dbf56110f256 Mon Sep 17 00:00:00 2001 From: Jessy Date: Tue, 3 Dec 2024 17:52:51 +0530 Subject: [PATCH 2/5] add changelog --- changelog/fix-use-type-is-in-filter | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-use-type-is-in-filter diff --git a/changelog/fix-use-type-is-in-filter b/changelog/fix-use-type-is-in-filter new file mode 100644 index 00000000000..79bf4fcabae --- /dev/null +++ b/changelog/fix-use-type-is-in-filter @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +A Support type_is_in filter for Transactions page URL From 868dabaa43490b4b006d46f1795eaac2b57bccd2 Mon Sep 17 00:00:00 2001 From: Jessy Date: Tue, 3 Dec 2024 18:09:45 +0530 Subject: [PATCH 3/5] Updated the snapshots for tests --- .../test/__snapshots__/index.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap b/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap index fd5ac782458..c4d9d6d7087 100644 --- a/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap +++ b/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap @@ -123,7 +123,7 @@ exports[`PaymentActivity component should render 1`] = `

View report @@ -183,7 +183,7 @@ exports[`PaymentActivity component should render 1`] = `

View report @@ -212,7 +212,7 @@ exports[`PaymentActivity component should render 1`] = `

View report @@ -269,7 +269,7 @@ exports[`PaymentActivity component should render 1`] = `

View report From f4567c15be0903a1050bf56249e51d8e5bac41b9 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 5 Dec 2024 12:48:47 +1000 Subject: [PATCH 4/5] Remove temporary css overrides that were in place for payment activity card reporting filters These reports used the search bar as filters, which required css overrides added in #8996. These are no longer required as of #9871, which uses `type_is_in` rather than search terms. --- client/transactions/list/style.scss | 52 ----------------------------- 1 file changed, 52 deletions(-) diff --git a/client/transactions/list/style.scss b/client/transactions/list/style.scss index 45d8494de81..c552ef65af4 100644 --- a/client/transactions/list/style.scss +++ b/client/transactions/list/style.scss @@ -153,56 +153,4 @@ $gap-small: 12px; height: auto; } } - - .components-card__header { - // These styles improve the overflow behaviour of the Search component within the TableCard, when many tags are selected. Used for transaction list views. See PR #8996 - .woocommerce-search.woocommerce-select-control - .woocommerce-select-control__listbox { - position: relative; - top: 5px; - } - .woocommerce-table__actions { - justify-content: space-between; - - & > div { - width: 85%; - margin-right: 0; - } - - button.woocommerce-table__download-button { - @include breakpoint( '<1040px' ) { - .woocommerce-table__download-button__label { - display: none; - } - } - } - - .woocommerce-select-control.is-focused - .woocommerce-select-control__control { - flex-wrap: wrap; - - .woocommerce-select-control__tags { - white-space: wrap; - } - } - .woocommerce-select-control__tags { - overflow-x: auto; - white-space: nowrap; - scrollbar-width: none; - margin-right: 25px; - } - - .woocommerce-select-control.is-focused - .components-base-control - .components-base-control__field { - flex-basis: 45%; - } - - @include breakpoint( '<960px' ) { - .woocommerce-search { - margin: 0; - } - } - } - } } From fe314ad2e7d8a0c7852854ad46d578a5e2353006 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:56:17 +1000 Subject: [PATCH 5/5] Add changelog entry --- ...6-remove-temporary-payment-activity-transaction-search-css | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-9736-remove-temporary-payment-activity-transaction-search-css diff --git a/changelog/fix-9736-remove-temporary-payment-activity-transaction-search-css b/changelog/fix-9736-remove-temporary-payment-activity-transaction-search-css new file mode 100644 index 00000000000..3841ea6164e --- /dev/null +++ b/changelog/fix-9736-remove-temporary-payment-activity-transaction-search-css @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix inconsistent alignment of the download button across transactions, payouts, and disputes reporting views for a more cohesive user interface.