fix(my-account): new payment method style tweaks

includes/class-newspack-ui.php

@@ -239,6 +239,7 @@ public static function generate_modal( $args ) {
 										'aria-required' => true,
 										'value'         => true,
 										'disabled'      => true,
+										'checked'       => true,
 									],
 									'select'   => [
 										'name'             => true,

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

@@ -63,7 +63,7 @@ public static function init() {
 		\add_action( 'woocommerce_payment_complete', [ __CLASS__, 'order_paid' ], 101 );
 		\add_action( 'woocommerce_after_checkout_validation', [ __CLASS__, 'rate_limit_checkout' ], 10, 2 );
 		\add_filter( 'woocommerce_add_payment_method_form_is_valid', [ __CLASS__, 'rate_limit_payment_methods' ] );
-		\add_action( 'wc_stripe_save_to_subs_checked', '__return_true' );
+		\add_filter( 'wc_stripe_save_to_subs_checked', '__return_true' );
 
 		\add_filter( 'page_template', [ __CLASS__, 'page_template' ] );
 		\add_filter( 'get_post_metadata', [ __CLASS__, 'get_post_metadata' ], 10, 3 );

includes/plugins/woocommerce/my-account/class-my-account-ui-v1.php

@@ -617,6 +617,7 @@ public static function delete_payment_method_modals( $has_methods ) {
 						'size'        => 'small',
 						'form'        => 'GET',
 						'form_action' => $form_action_base,
+						'form_id'     => 'delete_payment_method_' . $modal_suffix,
 						'actions'     => [
 							'delete' => [
 								'label' => __( 'Delete payment method', 'newspack-plugin' ),
@@ -793,6 +794,7 @@ public static function delete_address_modals() {
 							'size'        => 'small',
 							'form'        => 'POST',
 							'form_action' => $delete_address_url,
+							'form_id'     => 'delete_address_' . $address_type,
 							'actions'     => [
 								'delete' => [
 									'label' => __( 'Delete address', 'newspack-plugin' ),

src/my-account/v1/_forms.scss

@@ -49,4 +49,12 @@
 			color: var(--newspack-ui-color-success-50);
 		}
 	}
+
+	/* Hide the "Save as new payment method" checkbox on the Add Payment Method form. */
+	/* stylelint-disable selector-id-pattern */
+	#newspack-my-account__add-payment-method {
+		.woocommerce-SavedPaymentMethods-saveNew {
+			display: none;
+		}
+	}
 }

src/my-account/v1/style.scss

@@ -52,3 +52,8 @@
 		}
 	}
 }
+
+/* stylelint-disable-next-line */
+#wc-stripe-update-subs-payment-method-card_field {
+	display: none;
+}

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

@@ -14,7 +14,6 @@
 		}
 		> input[type="checkbox"],
 		> input[type="radio"] {
-			display: inline-block;
 			margin-bottom: 2px;
 			margin-right: 2px;
 			vertical-align: middle;

src/newspack-ui/scss/elements/forms/_accordion.scss

@@ -11,16 +11,15 @@
 				@extend .newspack-ui__box--border;
 				padding: var(--newspack-ui-spacer-3) var(--newspack-ui-spacer-3) var(--newspack-ui-spacer-3) calc(var(--newspack-ui-spacer-3) + var(--newspack-ui-spacer-7));
 				position: relative;
-				& > input[type="radio"] {
+				> input[type="radio"] {
 					position: absolute;
 					left: var(--newspack-ui-spacer-3);
 					top: var(--newspack-ui-spacer-3);
 				}
 				> label {
-					display: inline;
-					img {
-						float: right;
-					}
+					display: flex;
+					gap: var(--newspack-ui-spacer-base);
+					justify-content: space-between;
 				}
 				> div {
 					transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
@@ -36,6 +35,21 @@
 						opacity: 1;
 					}
 				}
+				&:only-child {
+					background: none;
+					border: none;
+					padding: 0;
+					> input[type="radio"] {
+						display: none;
+						+ label {
+							display: none;
+						}
+					}
+					> div {
+						max-height: 1000px;
+						opacity: 1;
+					}
+				}
 			}
 		}
 	}

src/newspack-ui/scss/elements/forms/_checkbox-radio.scss

@@ -50,6 +50,12 @@
 		}
 	}
 
+	label.checkbox {
+		font-size: var(--newspack-ui-font-size-s) !important;
+		font-weight: normal !important;
+		line-height: var(--newspack-ui-line-height-s) !important;
+	}
+
 	input[type="checkbox"] {
 		border-radius: var(--newspack-ui-border-radius-2xs);
 

src/newspack-ui/scss/elements/woocommerce/_my-account.scss

@@ -132,12 +132,23 @@
 		p {
 			@extend .newspack-ui__font--xs;
 			color: var(--newspack-ui-color-neutral-60);
-			margin: 0;
+			margin: 0 0 var(--newspack-ui-spacer-2);
+			&:last-child,
+			label.checkbox {
+				margin-bottom: 0;
+			}
 		}
 		fieldset {
 			border: none;
+			margin-left: 0;
 			margin-top: var(--newspack-ui-spacer-2);
 			padding: 0 !important;
+			&[style*="display: none"],
+			&[style*="display:none"] {
+				+ p {
+					margin-top: var(--newspack-ui-spacer-2);
+				}
+			}
 		}
 	}
 	#payment-methods .newspack-ui__row > .payment-method {
@@ -162,9 +173,13 @@
 	}
 	label:has(input[type="checkbox"]):not(.newspack-ui__input-card),
 	label:has(input[type="radio"]):not(.newspack-ui__input-card) {
-		display: inline !important;
+		display: inline-flex !important;
+		gap: 0;
+		> :first-child {
+			margin-right: var(--newspack-ui-spacer-base);
+		}
 		input {
-			margin-bottom: calc(var(--newspack-ui-spacer-base / 2));
+			margin-bottom: calc(var(--newspack-ui-spacer-base) / 2);
 			vertical-align: middle;
 		}
 	}

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

@@ -20,6 +20,12 @@
 			display: block;
 		}
 	}
+
+	.form-row.woocommerce-SavedPaymentMethods-saveNew {
+		label {
+			font-weight: normal;
+		}
+	}
 }
 
 /** See #3292. */