Fix styling on payment details page in mobile view. (#9790)

Automattic · Dec 2, 2024 · dc6f74c · dc6f74c
1 parent 55fa477
commit dc6f74c
Show file tree

Hide file tree

Showing 10 changed files with 280 additions and 170 deletions.
diff --git a/changelog/fix-7230-payments-details-mobile-view 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.
diff --git 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 <Chip message={ message } type={ type } />;
+	return <Chip className={ className } message={ message } type={ type } />;
 };
 
 export default DisputeStatusChip;
diff --git 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 <Chip message={ message } type={ type } />;
+	return <Chip className={ className } message={ message } type={ type } />;
 };
 
 export default PaymentStatusChip;
diff --git 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: <ExternalLink href={ learnMoreDocsUrl } />,
+					a: (
+						<ExternalLink
+							className="dispute-notice__link"
+							href={ learnMoreDocsUrl }
+						/>
+					),
 					strong: <strong />,
 				}
 			) }

diff --git 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;
+	}
+}
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
@@ -30,21 +30,25 @@ exports[`Order details page should match the snapshot - Charge without payment i
               <div
                 class="payment-details-summary__section"
               >
-                <p
-                  class="payment-details-summary__amount"
+                <div
+                  class="payment-details-summary__amount-wrapper"
                 >
-                  $15.00
-                  <span
-                    class="payment-details-summary__amount-currency"
+                  <p
+                    class="payment-details-summary__amount"
                   >
-                    USD
-                  </span>
+                    $15.00
+                    <span
+                      class="payment-details-summary__amount-currency"
+                    >
+                      USD
+                    </span>
+                  </p>
                   <span
-                    class="chip chip-light"
+                    class="chip chip-light payment-details-summary__status"
                   >
                     Pending
                   </span>
-                </p>
+                </div>
                 <div
                   class="payment-details-summary__breakdown"
                 >

diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
@@ -257,37 +257,41 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 				<Flex direction="row" align="start">
 					<div className="payment-details-summary">
 						<div className="payment-details-summary__section">
-							<p className="payment-details-summary__amount">
-								<Loadable
-									isLoading={ isLoading }
-									placeholder={ __(
-										'Amount placeholder',
-										'woocommerce-payments'
-									) }
-								>
-									{ formattedAmount }
-									<span className="payment-details-summary__amount-currency">
-										{ charge.currency || 'USD' }
-									</span>
-									{ charge.dispute ? (
-										<DisputeStatusChip
-											status={ charge.dispute.status }
-											dueBy={
-												charge.dispute.evidence_details
-													?.due_by
-											}
-											prefixDisputeType={ true }
-										/>
-									) : (
-										<PaymentStatusChip
-											status={ getChargeStatus(
-												charge,
-												paymentIntent
-											) }
-										/>
-									) }
-								</Loadable>
-							</p>
+							<div className="payment-details-summary__amount-wrapper">
+								<p className="payment-details-summary__amount">
+									<Loadable
+										isLoading={ isLoading }
+										placeholder={ __(
+											'Amount placeholder',
+											'woocommerce-payments'
+										) }
+									>
+										{ formattedAmount }
+										<span className="payment-details-summary__amount-currency">
+											{ charge.currency || 'USD' }
+										</span>
+									</Loadable>
+								</p>
+								{ charge.dispute ? (
+									<DisputeStatusChip
+										className="payment-details-summary__status"
+										status={ charge.dispute.status }
+										dueBy={
+											charge.dispute.evidence_details
+												?.due_by
+										}
+										prefixDisputeType={ true }
+									/>
+								) : (
+									<PaymentStatusChip
+										className="payment-details-summary__status"
+										status={ getChargeStatus(
+											charge,
+											paymentIntent
+										) }
+									/>
+								) }
+							</div>
 							<div className="payment-details-summary__breakdown">
 								{ renderStorePrice ? (
 									<p className="payment-details-summary__breakdown__settlement-currency">

diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss
@@ -11,21 +11,37 @@
 .payment-details-summary {
 	display: flex;
 	flex: 1;
-	@include breakpoint( '<660px' ) {
+	@media screen and ( max-width: $break-medium ) {
 		flex-direction: column;
 	}
 
 	.payment-details-summary__section {
 		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;
 		padding: 0;
 		margin: 0;
 		display: flex;
-		flex-wrap: wrap;
+		flex-wrap: nowrap;
 		align-items: center;
 
 		.payment-details-summary__amount-currency {
@@ -93,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;
 		}