fix(block-theme): migrate newspack-theme checkout fixes

includes/plugins/woocommerce/class-woocommerce-checkout.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * WooCommerce Checkout features.
+ *
+ * @package Newspack
+ */
+
+namespace Newspack;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * WooCommerce Checkout features.
+ */
+class WooCommerce_Checkout {
+	/**
+	 * Initialize.
+	 *
+	 * @codeCoverageIgnore
+	 */
+	public static function init() {
+		add_action( 'woocommerce_review_order_before_payment', [ __CLASS__, 'newspack_payment_heading' ] );
+	}
+
+	/**
+	 * Add heading above payment info form.
+	 */
+	public static function newspack_payment_heading() {
+		?>
+		<h3><?php esc_html_e( 'Payment info', 'newspack-plugin' ); ?></h3>
+		<?php
+	}
+}
+
+WooCommerce_Checkout::init();

includes/plugins/woocommerce/class-woocommerce-connection.php

@@ -37,6 +37,7 @@ public static function init() {
 		include_once __DIR__ . '/class-woocommerce-emails.php';
 		include_once __DIR__ . '/class-woocommerce-order-utm.php';
 		include_once __DIR__ . '/class-woocommerce-products.php';
+		include_once __DIR__ . '/class-woocommerce-checkout.php';
 		include_once __DIR__ . '/class-woocommerce-product-validator.php';
 		include_once __DIR__ . '/class-woocommerce-duplicate-orders.php';
 		include_once __DIR__ . '/class-woocommerce-update-payment-notice.php';

src/newspack-ui/scss/elements/_tables.scss

@@ -6,6 +6,7 @@
 		line-height: var(--newspack-ui-line-height-xs);
 		margin: calc(var(--newspack-ui-spacer-base) / -2) 0; // Offset cell padding.
 		table-layout: fixed;
+		border-collapse: collapse;
 		th,
 		td {
 			background: transparent;

src/newspack-ui/scss/elements/woocommerce/_overrides.scss

@@ -116,6 +116,107 @@
 			}
 		}
 	}
+
+	.wc_payment_methods {
+		padding-left: 0;
+	}
+
+	.wc_payment_method {
+		list-style: none;
+
+		.payment_box {
+			padding: 1rem;
+			background: var(--newspack-theme-color-bg-pre, var(--newspack-ui-color-neutral-20));
+			font-size: var(--newspack-theme-font-size-sm, var(--newspack-ui-font-size-s));
+
+			ul,
+			ol {
+				&:last-of-type {
+					margin-bottom: 0;
+				}
+			}
+
+			fieldset {
+				padding: 0;
+				border: 0;
+			}
+
+			li {
+				list-style: none;
+			}
+
+			p {
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		> label:first-of-type {
+			display: block;
+			margin: 1rem 0;
+
+			img {
+				max-height: 24px;
+				max-width: 200px;
+				float: right;
+			}
+		}
+
+		label {
+			cursor: pointer;
+		}
+
+		input.input-radio[name="payment_method"] {
+			display: none;
+
+			+ label {
+				&::before {
+					content: "";
+					display: inline-block;
+					width: 16px;
+					height: 16px;
+					border: 2px solid white;
+					box-shadow: 0 0 0 2px black;
+					box-sizing: border-box;
+					background: white;
+					margin-left: 4px;
+					margin-right: 0.5rem;
+					border-radius: 100%;
+					transform: translateY(2px);
+				}
+			}
+
+			&:checked + label {
+				&::before {
+					background: black;
+				}
+			}
+		}
+	}
+
+	.woocommerce-terms-and-conditions-wrapper {
+		font-size: var(--newspack-theme-font-size-sm, var(--newspack-ui-font-size-s));
+		margin-bottom: 2rem;
+
+		input[type="checkbox"] {
+			margin-right: 0.5rem;
+		}
+	}
+
+	.select2-container .select2-selection--single {
+		height: 48px;
+	}
+	.select2-container .select2-selection--single .select2-selection__rendered {
+		line-height: 48px;
+	}
+	.select2-container--default .select2-selection--single .select2-selection__arrow {
+		height: 46px;
+	}
 }
 
 /** See #3292. */