From d885b48e6066e7257f02af0f0242ace3a885ab5a Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Fri, 22 Nov 2024 14:40:26 +0700 Subject: [PATCH 1/9] Fix status chip on payment details mobile view. --- .../components/dispute-status-chip/index.tsx | 4 +- .../components/payment-status-chip/index.js | 4 +- client/payment-details/summary/index.tsx | 66 ++++++++++--------- client/payment-details/summary/style.scss | 16 +++++ 4 files changed, 56 insertions(+), 34 deletions(-) diff --git a/client/components/dispute-status-chip/index.tsx b/client/components/dispute-status-chip/index.tsx index 393089a8a78..dde601f3de7 100644 --- a/client/components/dispute-status-chip/index.tsx +++ b/client/components/dispute-status-chip/index.tsx @@ -23,11 +23,13 @@ interface Props { status: DisputeStatus | string; dueBy?: CachedDispute[ 'due_by' ] | EvidenceDetails[ 'due_by' ]; prefixDisputeType?: boolean; + className?: string; } const DisputeStatusChip: React.FC< Props > = ( { status, dueBy, prefixDisputeType, + className, } ) => { const mapping = displayStatus[ status ] || {}; let message = mapping.message || formatStringValue( status ); @@ -50,7 +52,7 @@ const DisputeStatusChip: React.FC< Props > = ( { type = 'alert'; } - return ; + return ; }; export default DisputeStatusChip; diff --git a/client/components/payment-status-chip/index.js b/client/components/payment-status-chip/index.js index b26da2ad4ed..fb57843849b 100755 --- a/client/components/payment-status-chip/index.js +++ b/client/components/payment-status-chip/index.js @@ -11,11 +11,11 @@ import displayStatus from './mappings'; import Chip from '../chip'; import { formatStringValue } from 'utils'; -const PaymentStatusChip = ( { status } ) => { +const PaymentStatusChip = ( { status, className } ) => { const mapping = displayStatus[ status ] || {}; const message = mapping.message || formatStringValue( status ); const type = mapping.type || 'light'; - return ; + return ; }; export default PaymentStatusChip; diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx index 261645c8a85..a7df70a75aa 100644 --- a/client/payment-details/summary/index.tsx +++ b/client/payment-details/summary/index.tsx @@ -257,37 +257,41 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
-

- - { formattedAmount } - - { charge.currency || 'USD' } - - { charge.dispute ? ( - - ) : ( - - ) } - -

+
+

+ + { formattedAmount } + + { charge.currency || 'USD' } + + +

+ { charge.dispute ? ( + + ) : ( + + ) } +
{ renderStorePrice ? (

diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss index ef67a756663..1384d5d4113 100755 --- a/client/payment-details/summary/style.scss +++ b/client/payment-details/summary/style.scss @@ -19,6 +19,22 @@ flex-grow: 1; } + .payment-details-summary__amount_wrapper { + display: flex; + align-items: center; + } + + @media screen and ( max-width: $break-small ) { + .payment-details-summary__amount_wrapper { + flex-direction: column; + align-items: flex-start; + + .payment-details-summary__status { + order: -1; + } + } + } + .payment-details-summary__amount { @include font-size( 32 ); font-weight: 300; From 2c81f7f7edcfb55ad55cc3d200ec9918519a8804 Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Mon, 25 Nov 2024 09:27:51 +0700 Subject: [PATCH 2/9] Changelog. --- changelog/fix-7230-payments-details-mobile-view | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-7230-payments-details-mobile-view diff --git a/changelog/fix-7230-payments-details-mobile-view b/changelog/fix-7230-payments-details-mobile-view new file mode 100644 index 00000000000..93e179a44ca --- /dev/null +++ b/changelog/fix-7230-payments-details-mobile-view @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix styling of transaction details page in mobile view. From bdd4629564aed93d6d681952a1166b430f83ebab Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Mon, 25 Nov 2024 12:10:51 +0700 Subject: [PATCH 3/9] Fix dispute notice link styling in mobile view. --- .../dispute-details/dispute-notice.tsx | 7 ++++++- client/payment-details/dispute-details/style.scss | 14 ++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/client/payment-details/dispute-details/dispute-notice.tsx b/client/payment-details/dispute-details/dispute-notice.tsx index 9d9edd8a9f7..d74fd201b0a 100644 --- a/client/payment-details/dispute-details/dispute-notice.tsx +++ b/client/payment-details/dispute-details/dispute-notice.tsx @@ -64,7 +64,12 @@ const DisputeNotice: React.FC< DisputeNoticeProps > = ( { { createInterpolateElement( sprintf( noticeText, shopperDisputeReason ), { - a: , + a: ( + + ), strong: , } ) } diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index 60773396b54..bc4a74ce79e 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -182,3 +182,17 @@ margin-bottom: 0; } } + +.dispute-notice { + .dispute-notice-link { + display: block; + } +} + +@media screen and ( max-width: $break-small ) { + .wcpay-inline-notice.components-notice + .components-notice__content + a.dispute-notice-link { + white-space: normal; + } +} From 8d50653fb1ae77e23e790e81fbaa78cca661e3d5 Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Mon, 25 Nov 2024 12:11:56 +0700 Subject: [PATCH 4/9] Update snapshot. --- .../test/__snapshots__/index.test.tsx.snap | 264 +++++++++++------- 1 file changed, 156 insertions(+), 108 deletions(-) diff --git a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap index 8286a7941bb..b1962c59762 100644 --- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap +++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap @@ -26,21 +26,25 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca

-

- $20.00 - - usd - + $20.00 + + usd + +

Payment authorized -

+
@@ -362,21 +366,25 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th
-

- $20.00 - - usd - + $20.00 + + usd + +

Needs review -

+
@@ -708,21 +716,25 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = `
-

- $20.00 - - usd - + $20.00 + + usd + +

Paid -

+
@@ -1029,21 +1041,25 @@ exports[`PaymentDetailsSummary correctly renders when payment intent is missing
-

- $20.00 - - usd - + $20.00 + + usd + +

Paid -

+
@@ -1336,21 +1352,25 @@ exports[`PaymentDetailsSummary order missing notice does not render notice if or
-

- $20.00 - - usd - + $20.00 + + usd + +

Paid -

+
@@ -1657,21 +1677,25 @@ exports[`PaymentDetailsSummary order missing notice renders notice if order miss
-

- $20.00 - - usd - + $20.00 + + usd + +

Paid -

+
@@ -2001,21 +2025,25 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = `
-

- $20.00 - - usd - + $20.00 + + usd + +

Paid -

+
@@ -2349,21 +2377,25 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1
-

- $20.00 - - usd - + $20.00 + + usd + +

Refunded -

+
@@ -2647,19 +2679,23 @@ exports[`PaymentDetailsSummary renders loading state 1`] = `
-

- - - USD - + + + USD + +

-

+
@@ -2887,21 +2923,25 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char
-

- $20.00 - - usd - + $20.00 + + usd + +

Partial refund -

+
@@ -3211,21 +3251,25 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`]
-

- $20.00 - - usd - + $20.00 + + usd + +

Paid -

+
@@ -3532,21 +3576,25 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha
-

- $20.00 - - usd - + $20.00 + + usd + +

Disputed: Won -

+
From 83ce53315fd84175db90eb4746c0d07bb3e155a8 Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Mon, 25 Nov 2024 12:25:19 +0700 Subject: [PATCH 5/9] Update snapshots. --- .../test/__snapshots__/index.test.tsx.snap | 22 ++++++---- .../test/__snapshots__/index.test.tsx.snap | 43 ++++++++++++------- 2 files changed, 41 insertions(+), 24 deletions(-) diff --git a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap index 9fa0098691b..8afdf176bb2 100644 --- a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap +++ b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap @@ -30,21 +30,25 @@ exports[`Order details page should match the snapshot - Charge without payment i
-

- $15.00 - - USD - + $15.00 + + USD + +

Pending -

+
diff --git a/client/payment-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap index 0798e4b5d52..8ce8ee2f726 100644 --- a/client/payment-details/test/__snapshots__/index.test.tsx.snap +++ b/client/payment-details/test/__snapshots__/index.test.tsx.snap @@ -30,16 +30,25 @@ exports[`Payment details page should match the snapshot - Charge query param 1`]
-

+

+ + Amount placeholder + +

- Amount placeholder + Paid -

+
@@ -493,21 +502,25 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
-

- $1,500.00 - - usd - + $1,500.00 + + usd + +

Paid -

+
From d7e3f98bd018848ac3b6a5d1cda794a9b1daa775 Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Tue, 3 Dec 2024 04:05:02 +0700 Subject: [PATCH 6/9] Make payment details amount nowrap. --- client/payment-details/summary/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss index 1384d5d4113..49ad1d72c8a 100755 --- a/client/payment-details/summary/style.scss +++ b/client/payment-details/summary/style.scss @@ -41,7 +41,7 @@ padding: 0; margin: 0; display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; align-items: center; .payment-details-summary__amount-currency { From 13db0c1a5a9f0c2336a9da3a796ed31e541c86d7 Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Tue, 3 Dec 2024 04:05:20 +0700 Subject: [PATCH 7/9] BEM naming. --- client/payment-details/dispute-details/dispute-notice.tsx | 2 +- client/payment-details/dispute-details/style.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/payment-details/dispute-details/dispute-notice.tsx b/client/payment-details/dispute-details/dispute-notice.tsx index d74fd201b0a..d2c8b00fbf2 100644 --- a/client/payment-details/dispute-details/dispute-notice.tsx +++ b/client/payment-details/dispute-details/dispute-notice.tsx @@ -66,7 +66,7 @@ const DisputeNotice: React.FC< DisputeNoticeProps > = ( { { a: ( ), diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index bc4a74ce79e..b68be2d0a20 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -184,7 +184,7 @@ } .dispute-notice { - .dispute-notice-link { + .dispute-notice__link { display: block; } } @@ -192,7 +192,7 @@ @media screen and ( max-width: $break-small ) { .wcpay-inline-notice.components-notice .components-notice__content - a.dispute-notice-link { + a.dispute-notice__link { white-space: normal; } } From ef892cffb37e99302654ead6c8381aca236b6e82 Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Tue, 3 Dec 2024 04:06:06 +0700 Subject: [PATCH 8/9] Use variable breakpoints instead of hardcoded number. --- client/payment-details/summary/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss index 49ad1d72c8a..ea410c2b8cd 100755 --- a/client/payment-details/summary/style.scss +++ b/client/payment-details/summary/style.scss @@ -11,7 +11,7 @@ .payment-details-summary { display: flex; flex: 1; - @include breakpoint( '<660px' ) { + @media screen and ( max-width: $break-medium ) { flex-direction: column; } @@ -109,7 +109,7 @@ justify-content: initial; flex-direction: column; flex-wrap: nowrap; - @include breakpoint( '>660px' ) { + @media screen and ( min-width: $break-medium ) { justify-content: flex-start; align-items: flex-end; } From 13c3890579684f981d09744758d9c314f758fdbd Mon Sep 17 00:00:00 2001 From: Shendy <73803630+shendy-a8c@users.noreply.github.com> Date: Tue, 3 Dec 2024 04:23:45 +0700 Subject: [PATCH 9/9] BEM naming. --- .../test/__snapshots__/index.test.tsx.snap | 2 +- client/payment-details/summary/index.tsx | 2 +- client/payment-details/summary/style.scss | 4 ++-- .../test/__snapshots__/index.test.tsx.snap | 24 +++++++++---------- .../test/__snapshots__/index.test.tsx.snap | 4 ++-- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap index 8afdf176bb2..7b4a7e3650f 100644 --- a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap +++ b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap @@ -31,7 +31,7 @@ exports[`Order details page should match the snapshot - Charge without payment i class="payment-details-summary__section" >

= ( {

-
+