From 6c4a26770d9cc11bd7a29f6a80090511859ca701 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 23 Aug 2024 19:22:59 +0100
Subject: [PATCH] Order confirmation: Update mobile order summary styling so
 items appear side by side (#50722)

* Update order confirmation wording

* Style order details inline

* Changelog

* Update test due to change of text
---
 .../js/blocks/order-confirmation/summary/style.scss      | 9 ++++++++-
 .../changelog/update-mobile-order-summary-styling-50635  | 4 ++++
 .../src/Blocks/BlockTypes/OrderConfirmation/Summary.php  | 4 ++--
 .../e2e-pw/tests/merchant/customer-payment-page.spec.js  | 2 +-
 4 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss
index f5f113d1cfb..63380eda4fa 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss
@@ -26,7 +26,14 @@
 		}
 
 		@media only screen and (max-width: 480px) {
-			flex-direction: column;
+			li {
+				width: 100%;
+
+				> .wc-block-order-confirmation-summary-list-item__key,
+				> .wc-block-order-confirmation-summary-list-item__value {
+					display: inline;
+				}
+			}
 		}
 	}
 	.woocommerce-verify-email {
diff --git a/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 b/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635
new file mode 100644
index 00000000000..e1a82f3272d
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635
@@ -0,0 +1,4 @@
+Significance: minor
+Type: tweak
+
+On mobile, style order confirmation page details side by side
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php
index e36c1d77f74..3560292ab02 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php
@@ -29,11 +29,11 @@ class Summary extends AbstractOrderConfirmationBlock {
 		}
 
 		$content  = '<ul class="wc-block-order-confirmation-summary-list">';
-		$content .= $this->render_summary_row( __( 'Order number:', 'woocommerce' ), $order->get_order_number() );
+		$content .= $this->render_summary_row( __( 'Order #:', 'woocommerce' ), $order->get_order_number() );
 		$content .= $this->render_summary_row( __( 'Date:', 'woocommerce' ), wc_format_datetime( $order->get_date_created() ) );
 		$content .= $this->render_summary_row( __( 'Total:', 'woocommerce' ), $order->get_formatted_order_total() );
 		$content .= $this->render_summary_row( __( 'Email:', 'woocommerce' ), $order->get_billing_email() );
-		$content .= $this->render_summary_row( __( 'Payment method:', 'woocommerce' ), $order->get_payment_method_title() );
+		$content .= $this->render_summary_row( __( 'Payment:', 'woocommerce' ), $order->get_payment_method_title() );
 		$content .= '</ul>';
 
 		return $content;
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js
index 7aceae0f0fd..db105a99a48 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/customer-payment-page.spec.js
@@ -114,7 +114,7 @@ test.describe(
 				page.getByText( 'Your order has been received' )
 			).toBeVisible();
 			await expect(
-				page.getByText( `Order number: ${ orderId }` )
+				page.getByText( `Order #: ${ orderId }` )
 			).toBeVisible();
 			await expect(
 				await page.getByText( `Total: $${ productPrice }` ).count()