fix(ras-acc): update limited subscription cart error and modal layout (…

…#1858)

This PR updates the limited subscription checkout error message and adds a back button to the modal when an error is present

includes/class-modal-checkout.php

@@ -670,6 +670,7 @@ public static function get_checkout_template( $template ) {
 			// Trigger checkout error event if there are cart errors.
 			if ( is_cart() && ! empty( $wc_errors ) ) :
 				?>
+				<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide" id="checkout_error_back" type="submit"><?php esc_html_e( 'Go back', 'newspack-blocks' ); ?></button>
 				<script>
 					jQuery( document.body ).trigger( 'checkout_error' );
 				</script>
@@ -1064,7 +1065,11 @@ public static function pass_url_param_on_redirect( $location ) {
 	 * @return string
 	 */
 	public static function get_subscription_limited_message() {
-		return __( 'You may only have one subscription of this product at a time.', 'newspack-blocks' );
+		return sprintf(
+			// translators: %s: Site name.
+			__( "You're already a subscriber! You can only have one active subscription at a time. Thank you for supporting %s.", 'newspack-blocks' ),
+			get_bloginfo( 'name' )
+		);
 	}
 
 	/**
@@ -1079,7 +1084,7 @@ public static function woocommerce_cart_product_cannot_be_purchased_message( $me
 		if ( method_exists( 'WCS_Limiter', 'is_purchasable' ) ) {
 			$product = \wc_get_product( $product_data->get_id() );
 			if ( ! \WCS_Limiter::is_purchasable( false, $product ) ) {
-				$message .= ' ' . self::get_subscription_limited_message();
+				$message = self::get_subscription_limited_message();
 			}
 		}
 

src/modal-checkout/checkout.scss

@@ -529,6 +529,11 @@
 		margin-top: 0;
 	}
 
+	// stylelint-disable-next-line selector-id-pattern
+	#checkout_error_back {
+		margin-bottom: 0;
+	}
+
 	form.checkout .woocommerce-NoticeGroup,
 	.woocommerce .woocommerce-notices-wrapper {
 		li div {
@@ -550,6 +555,7 @@
 
 	.woocommerce .woocommerce-notices-wrapper {
 		margin-bottom: var(--newspack-ui-spacer-5, 24px);
+		margin-top: 0;
 	}
 
 	.processing {

src/modal-checkout/index.js

@@ -677,6 +677,13 @@ domReady(
 					( _, error ) => $( error ).addClass(`${ CLASS_PREFIX }__notice ${ CLASS_PREFIX }__notice--error` )
 				);
 			}
+			const $checkout_error_back = $( '#checkout_error_back' );
+			if ( $checkout_error_back.length ) {
+				$checkout_error_back.on( 'click', ev => {
+					ev.preventDefault();
+					parent.newspackCloseModalCheckout()
+				} );
+			}
 			setReady();
 		} );