Improve readability of order note (#11944)

woocommerce · Nov 29, 2023 · 5e867c0 · 5e867c0
1 parent 4445967
commit 5e867c0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/assets/js/blocks/order-confirmation/shipping-address/style.scss b/assets/js/blocks/order-confirmation/shipping-address/style.scss
@@ -14,6 +14,7 @@
 		margin-top: 0 !important;
 	}
 }
+.wc-block-order-confirmation-order-note,
 .wc-block-order-confirmation-shipping-address {
 	border: 1px solid $universal-border-light;
 	border-radius: $universal-border-radius;
@@ -31,3 +32,10 @@
 		}
 	}
 }
+.wc-block-order-confirmation-order-note {
+	margin-top: $gap * 3;
+
+	.wc-block-order-confirmation-order-note__label {
+		font-weight: bold;
+	}
+}
diff --git a/assets/js/blocks/order-confirmation/totals/style.scss b/assets/js/blocks/order-confirmation/totals/style.scss
@@ -8,16 +8,20 @@
 		border: 1px solid $universal-border-light;
 		border-spacing: 0;
 		border-radius: $universal-border-radius;
-		border-collapse: collapse;
 		th,
 		td {
-			border: 1px solid $universal-border-light;
+			border-top: 1px solid $universal-border-light;
 			border-right-width: 0;
 			border-left-width: 0;
 			padding: $gap;
 			margin: 0;
 			text-align: left;
 			font-weight: inherit;
+			border-radius: 0;
+
+		}
+		thead th {
+			border-top: 0;
 		}
 		thead,
 		tfoot th {

diff --git a/src/BlockTypes/OrderConfirmation/Totals.php b/src/BlockTypes/OrderConfirmation/Totals.php
@@ -46,9 +46,9 @@ protected function render_content( $order, $permission = false, $attributes = []
 				</tbody>
 				<tfoot>
 					' . $this->render_order_details_table_totals( $order ) . '
-					' . $this->render_order_details_table_customer_note( $order ) . '
-				</tfoot>
-			</table>
+					</tfoot>
+					</table>
+			' . $this->render_order_details_customer_note( $order ) . '
 			' . $this->get_hook_content( 'woocommerce_order_details_after_order_table', [ $order ] ) . '
 			' . $this->get_hook_content( 'woocommerce_after_order_details', [ $order ] ) . '
 		';
@@ -99,10 +99,10 @@ protected function enqueue_assets( array $attributes, $content, $block ) {
 	protected function render_order_details_table_items( $order ) {
 		$return      = '';
 		$order_items = array_filter(
-			// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
+		// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
 			$order->get_items( apply_filters( 'woocommerce_purchase_order_item_types', 'line_item' ) ),
 			function( $item ) {
-				// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
+                // phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
 				return apply_filters( 'woocommerce_order_item_visible', true, $item );
 			}
 		);
@@ -216,14 +216,16 @@ protected function render_order_details_table_totals( $order ) {
 	 * @param \WC_Order $order Order object.
 	 * @return string
 	 */
-	protected function render_order_details_table_customer_note( $order ) {
+	protected function render_order_details_customer_note( $order ) {
 		if ( ! $order->get_customer_note() ) {
 			return '';
 		}
 
-		return '<tr>
-			<th class="wc-block-order-confirmation-totals__label" scope="row">' . esc_html__( 'Note:', 'woo-gutenberg-products-block' ) . '</th>
-			<td class="wc-block-order-confirmation-totals__note">' . wp_kses_post( nl2br( wptexturize( $order->get_customer_note() ) ) ) . '</td>
-		</tr>';
+		return '<div class="wc-block-order-confirmation-order-note">' .
+					'<p class="wc-block-order-confirmation-order-note__label">' .
+						esc_html__( 'Note:', 'woo-gutenberg-products-block' ) .
+					'</p>' .
+					'<p>' . wp_kses_post( nl2br( wptexturize( $order->get_customer_note() ) ) ) . '</p>' .
+				'</div>';
 	}
 }