@automattic/newspack-blocks 1.0.0-hotfix-cap-count-user-posts-dedup.1

package/src/modal-checkout/modal.scss

@@ -0,0 +1,265 @@
+@use "newspack-colors" as np-colors;
+@use "../shared/sass/variables";
+
+// Checkout modal specific styles.
+.newspack-ui {
+	iframe[name="newspack_modal_checkout_iframe"] {
+		border: none;
+		height: calc(100% + var(--newspack-ui-spacer-9, 48px));
+		margin: calc(-1 * var(--newspack-ui-spacer-5, 24px));
+		max-width: unset;
+		width: calc(100% + var(--newspack-ui-spacer-9, 48px));
+	}
+}
+
+// Default modal styles when newspack ui is not present.
+.newspack-blocks {
+	&__modal-container {
+		position: fixed;
+		z-index: -1;
+		inset: 0;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		visibility: hidden;
+		pointer-events: none;
+
+		&__overlay {
+			position: absolute;
+			z-index: 1;
+			inset: 0;
+			opacity: 0;
+			background: rgba(np-colors.$neutral-1000, 0.5);
+			transition: opacity 0.1s linear;
+		}
+
+		&[data-state="open"] {
+			z-index: 99999;
+			visibility: visible;
+			pointer-events: auto;
+			.newspack-blocks__modal-container__overlay {
+				opacity: 1;
+			}
+			.newspack-blocks__modal {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+
+		& .newspack-blocks {
+			&__modal {
+				position: relative;
+				z-index: 2;
+				width: 100%;
+				transform: translateY(50px);
+				opacity: 0;
+				transition: transform 0.1s linear, opacity 0.1s linear;
+				border-radius: 6px;
+				background: np-colors.$neutral-000;
+				max-width: 600px;
+				max-height: 90%;
+				min-height: 300px;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				overflow: auto;
+
+				&__header {
+					padding: 24px;
+					box-sizing: border-box;
+					height: 64px;
+					border-bottom: 1px solid np-colors.$neutral-300;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					h2 {
+						font-size: 16px;
+					}
+				}
+
+				&__content {
+					position: relative;
+					flex-grow: 1;
+					> * {
+						width: 100%;
+						height: 100%;
+						border: 0;
+						border-radius: 6px;
+					}
+				}
+
+				&__close {
+					padding: 8px;
+					border: 0;
+					background: transparent;
+					color: np-colors.$neutral-900;
+					cursor: pointer;
+					&:focus,
+					&:hover {
+						color: np-colors.$neutral-600;
+					}
+					svg {
+						display: block;
+					}
+				}
+			}
+
+			&__spinner {
+				align-items: center;
+				background: np-colors.$neutral-000;
+				border-radius: 5px;
+				display: flex;
+				justify-content: center;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				width: calc(100% - 24px);
+				> span {
+					animation: spin 1s infinite linear;
+					border: 2px solid np-colors.$neutral-000;
+					border-top-color: np-colors.$neutral-600;
+					border-radius: 50%;
+					height: 25px;
+					width: 25px;
+					margin-top: -12.5px;
+					margin-left: -12.5px;
+				}
+			}
+		}
+	}
+
+	// Product variations styles
+	&__modal-variation {
+		.newspack-blocks {
+			&__selection {
+				> *:first-child {
+					margin-top: 0;
+				}
+
+				h3 {
+					margin: 0;
+
+					+ p {
+						margin-top: calc(var(--newspack-ui-spacer-base, 8px) / 2);
+					}
+				}
+			}
+
+			&__options {
+				list-style: none;
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--newspack-ui-spacer-2, 12px);
+				margin: var(--newspack-ui-spacer-5, 24px) 0 0;
+				padding: 0;
+
+				&__item {
+					border: 1px solid var(--newspack-ui-color-border, np-colors.$neutral-300);
+					border-radius: var(--newspack-ui-border-radius-m, 6px);
+					display: flex;
+					flex-direction: column;
+					flex: 1 1 100%;
+					text-align: center;
+
+					@media (min-width: variables.$mobile_width) {
+						flex: 1 1 30%;
+						max-width: calc(33.3333% - 10px);
+						&:first-child:nth-last-child(2),
+						&:first-child:nth-last-child(2) ~ li {
+							flex: 1 1 40%;
+							max-width: calc(50% - 10px);
+						}
+					}
+
+					.summary {
+						font-size: var(--newspack-ui-font-size-xs, 14px);
+						line-height: var(--newspack-ui-line-height-xs, 1.4286);
+						padding: var(--newspack-ui-spacer-5, 24px) var(--newspack-ui-spacer-2, 12px);
+						height: 100%;
+						position: relative;
+
+						.price {
+							del,
+							.suggested-prefix {
+								color: var(--newspack-ui-color-neutral-60, np-colors.$neutral-600);
+								left: 0;
+								position: absolute;
+								top: calc(var(--newspack-ui-spacer-base, 8px) * 0.75);
+								width: 100%;
+							}
+
+							// Scale up just the primary price for a product, not the other fees:
+							> .amount > bdi,
+							> ins > .amount > bdi,
+							> .suggested-text > .amount > bdi {
+								color: initial;
+								display: block;
+								font-weight: 600;
+								font-size: var(--newspack-ui-font-size-xl, clamp(1.375rem, 0.394rem + 2.008vw, 2rem));
+								line-height: var(--newspack-ui-line-height-xl, 1.375);
+							}
+						}
+					}
+
+					.variation {
+						border-top: 1px solid var(--newspack-ui-color-border, np-colors.$neutral-300);
+						font-size: var(--newspack-ui-font-size-xs, 14px);
+						font-weight: 600;
+						line-height: var(--newspack-ui-line-height-xs, 1.4286);
+						margin-top: auto;
+						padding: var(--newspack-ui-spacer-2, 12px);
+					}
+
+					form {
+						border-top: 1px solid var(--newspack-ui-color-border, np-colors.$neutral-300);
+						padding: var(--newspack-ui-spacer-2, 12px) var(--newspack-ui-spacer-2, 12px) 0;
+						button {
+							display: block;
+							margin-top: 0 !important;
+							width: 100%;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.non-modal-checkout-loading {
+	position: relative;
+
+	span {
+		visibility: hidden;
+	}
+
+	&::before {
+		animation: spin 900ms infinite linear;
+		border: 1.5px solid;
+		border-color: currentcolor currentcolor transparent transparent;
+		border-radius: 50%;
+		content: "";
+		display: block;
+		height: 18px;
+		inset: calc(50% - 9px) calc(50% - 9px) auto auto;
+		position: absolute;
+		width: 18px;
+	}
+}
+
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	50% {
+		transform: rotate(180deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.modal-processing {
+	opacity: 0.5;
+}

package/src/modal-checkout/templates/empty-html-add-recipient.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Add recipient details.
+ * Intentionally left blank so we can control when and where to display the gift fields.
+ * Original template: https://github.com/woocommerce/woocommerce-subscriptions-gifting/blob/trunk/templates/html-add-recipient.php
+ *
+ * @package Newspack_Blocks
+ * @version 2.1
+ */
+
+// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- WooCommerce hooks.
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}

package/src/modal-checkout/templates/empty-order-details.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Empty order details.
+ *
+ * @see https://docs.woocommerce.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 8.1.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+?>
+	<table class="shop_table woocommerce-checkout-review-order-table empty"></table>
+<?php

package/src/modal-checkout/templates/form-change-payment-method.php

@@ -0,0 +1,99 @@
+<?php
+/**
+ * Pay for order form displayed after a customer has clicked the "Change Payment method" button
+ * next to a subscription on their My Account page.
+ *
+ * To be rendered in the modal checkout.
+ *
+ * @package Newspack_Blocks
+ */
+
+namespace Newspack_Blocks;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+?>
+<form id="order_review" class="change-payment-method" method="post">
+
+	<div id="payment">
+		<?php
+		if ( $subscription->has_payment_gateway() ) {
+			$pay_order_button_text = _x( 'Change payment method', 'text on button on checkout page', 'woocommerce-subscriptions' );
+		} else {
+			$pay_order_button_text = _x( 'Add payment method', 'text on button on checkout page', 'woocommerce-subscriptions' );
+		}
+
+		$pay_order_button_text     = apply_filters( 'woocommerce_change_payment_button_text', $pay_order_button_text );
+		$customer_subscription_ids = \WCS_Customer_Store::instance()->get_users_subscription_ids( $subscription->get_customer_id() );
+		$payment_gateways_handler  = \WC_Subscriptions_Core_Plugin::instance()->get_gateways_handler_class();
+		$available_gateways        = \WC()->payment_gateways->get_available_payment_gateways();
+
+		if ( $available_gateways ) :
+			?>
+			<ul class="wc_payment_methods payment_methods methods">
+				<?php
+
+				if ( count( $available_gateways ) ) {
+					current( $available_gateways )->set_current();
+				}
+
+				foreach ( $available_gateways as $gateway ) {
+					require 'payment-method.php';
+				}
+
+				?>
+			</ul>
+		<?php else : ?>
+			<div class="woocommerce-error">
+				<p> <?php echo esc_html( apply_filters( 'woocommerce_no_available_payment_methods_message', __( 'Sorry, it seems no payment gateways support changing the recurring payment method. Please contact us if you require assistance or to make alternate arrangements.', 'woocommerce-subscriptions' ) ) ); ?></p>
+			</div>
+		<?php endif; ?>
+
+		<?php if ( $available_gateways ) : ?>
+			<?php if ( count( $customer_subscription_ids ) > 1 && $payment_gateways_handler::one_gateway_supports( 'subscription_payment_method_change_admin' ) ) : ?>
+			<span class="update-all-subscriptions-payment-method-wrap">
+				<?php
+				// translators: $1: opening <strong> tag, $2: closing </strong> tag.
+				$label = sprintf( esc_html__( 'Use this payment method for %1$sall%2$s of my current subscriptions', 'woocommerce-subscriptions' ), '<strong>', '</strong>' );
+
+				woocommerce_form_field(
+					'update_all_subscriptions_payment_method',
+					array(
+						'type'     => 'checkbox',
+						'class'    => array( 'form-row-wide' ),
+						'label'    => $label,
+						'required' => true, // Making the field required to help make it more prominent on the page.
+						'default'  => apply_filters( 'wcs_update_all_subscriptions_payment_method_checked', true ),
+					)
+				);
+				?>
+			</span>
+			<?php endif; ?>
+		<div class="form-row">
+			<?php wp_nonce_field( 'wcs_change_payment_method', '_wcsnonce', true, true ); ?>
+
+			<?php do_action( 'woocommerce_subscriptions_change_payment_before_submit' ); ?>
+
+			<?php
+			echo wp_kses(
+				apply_filters( 'woocommerce_change_payment_button_html', '<button type="submit" class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide button alt' . esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ) . '" id="place_order">' . esc_html( $pay_order_button_text ) . '</button>' ),
+				array(
+					'button' => array(
+						'type'  => array(),
+						'class' => array(),
+						'id'    => array(),
+					),
+				)
+			);
+			?>
+			<?php do_action( 'woocommerce_subscriptions_change_payment_after_submit' ); ?>
+			<button class="newspack-ui__button newspack-ui__button--ghost newspack-ui__button--wide" id="checkout_cancel" type="button"><?php echo esc_html( Modal_Checkout::get_modal_checkout_labels( 'checkout_cancel' ) ); ?></button>
+
+			<input type="hidden" name="woocommerce_change_payment" value="<?php echo esc_attr( $subscription->get_id() ); ?>" />
+		</div>
+		<?php endif; ?>
+
+	</div>
+
+</form>

package/src/modal-checkout/templates/form-checkout.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Checkout Form
+ *
+ * @see https://woo.com/document/template-structure/
+ * @package Newspack_Blocks
+ */
+
+namespace Newspack_Blocks;
+
+// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- WooCommerce hooks.
+// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template variables.
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+do_action( 'woocommerce_before_checkout_form', $checkout );
+
+// If checkout registration is disabled and not logged in, the user cannot checkout.
+if ( ! $checkout->is_registration_enabled() && $checkout->is_registration_required() && ! is_user_logged_in() ) {
+	echo esc_html( apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'newspack-blocks' ) ) );
+	return;
+}
+?>
+
+<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">
+	<?php wp_nonce_field( 'newspack_modal_checkout_nonce', 'newspack_checkout_nonce' ); ?>
+	<?php if ( $checkout->get_checkout_fields() ) : ?>
+		<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>
+		<div id="customer_details">
+			<?php do_action( 'woocommerce_checkout_billing' ); ?>
+			<?php do_action( 'woocommerce_checkout_shipping' ); ?>
+			<?php \Newspack_Blocks\Modal_Checkout::maybe_show_wcs_gifting_fields(); ?>
+			<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide" id="checkout_continue" type="submit"><?php esc_html_e( 'Continue', 'newspack-blocks' ); ?></button>
+		</div>
+		<div id="after_customer_details">
+			<?php
+			if ( wp_is_block_theme() && function_exists( 'woocommerce_checkout_payment' ) ) {
+				woocommerce_checkout_payment();
+			}
+			?>
+			<div class="order-review-wrapper hidden">
+				<?php do_action( 'woocommerce_checkout_before_order_review_heading' ); ?>
+				<button id="order_review_heading" aria-expanded="false" aria-controls="order_review_content" class="newspack-ui__button newspack-ui__button--ghost" type="button">
+					<?php esc_html_e( 'Transaction details', 'newspack-blocks' ); ?>
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<path d="M15.9899 10.8888L12.0018 14.3071L8.01368 10.8888L8.98986 9.74988L12.0018 12.3315L15.0137 9.74988L15.9899 10.8888Z"/>
+					</svg>
+				</button>
+				<div class="transaction-details-content">
+					<div class="transaction-details-content-inner" id="order_review_content">
+						<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>
+						<div id="order_review" class="woocommerce-checkout-review-order newspack-ui__box">
+							<?php
+							if ( wp_is_block_theme() && function_exists( 'woocommerce_order_review' ) ) {
+								woocommerce_order_review();
+							} else {
+								do_action( 'woocommerce_checkout_order_review' );
+							}
+							?>
+						</div>
+						<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>
+					</div>
+				</div>
+			</div>
+			<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>
+			<button class="newspack-ui__button newspack-ui__button--secondary newspack-ui__button--wide" id="checkout_edit_billing" type="button"><?php echo esc_html( Modal_Checkout::get_modal_checkout_labels( 'checkout_edit_billing' ) ); ?></button>
+		</div>
+		<button class="newspack-ui__button newspack-ui__button--ghost newspack-ui__button--wide" id="checkout_cancel" type="button"><?php echo esc_html( Modal_Checkout::get_modal_checkout_labels( 'checkout_cancel' ) ); ?></button>
+	<?php endif; ?>
+</form>
+
+<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>

package/src/modal-checkout/templates/form-coupon.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Checkout coupon form
+ *
+ * @see https://woo.com/document/template-structure/
+ * @package Newspack_Blocks
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+if ( ! wc_coupons_enabled() ) { // @codingStandardsIgnoreLine.
+	return;
+}
+
+?>
+<form class="modal_checkout_coupon woocommerce-form-coupon" method="post">
+	<h3><?php esc_html_e( 'Apply a coupon code', 'newspack-blocks' ); ?></h3>
+	<p>
+		<input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'newspack-blocks' ); ?>" id="coupon_code" value="" />
+		<button type="submit" class="<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?> newspack-ui__button newspack-ui__button--outline" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'newspack-blocks' ); ?>"><?php esc_html_e( 'Apply', 'newspack-blocks' ); ?></button>
+	</p>
+</form>

package/src/modal-checkout/templates/form-gift-subscription.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Checkout gift subscription form.
+ *
+ * @see https://woo.com/document/template-structure/
+ * @package Newspack_Blocks
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+?>
+<div class="woocommerce-additional-fields newspack-wcsg--wrapper">
+	<div class="woocommerce-additional-fields__field-wrapper">
+		<?php if ( ! $is_renewal ) : ?>
+		<p class="newspack-wcsg--gift-toggle form-row form-row-wide">
+			<label for="newspack_wcsg_is_gift">
+				<input type="checkbox" id="newspack_wcsg_is_gift" name="newspack_wcsg_is_gift" />
+				<?php echo \esc_html( \Newspack_Blocks\Modal_Checkout::subscriptions_gifting_label() ); ?>
+			</label>
+		</p>
+		<p id="wcsg_gift_recipients_email_field" class="newspack-wcsg--gift-email form-row form-row-wide">
+			<label for="wcsg_gift_recipients_email">
+				<?php esc_html_e( 'Recipient’s Email Address', 'newspack-blocks' ); ?>
+			</label>
+			<input type="email" class="input-text" name="wcsg_gift_recipients_email" placeholder="<?php echo esc_attr( __( 'recipient@example.com', 'newspack-blocks' ) ); ?>" value="<?php echo esc_attr( $email ); ?>"/>
+		</p>
+		<?php else : ?>
+			<label class="woocommerce_subscriptions_gifting_recipient_email">
+				<?php esc_html_e( 'Recipient: ', 'newspack-blocks' ); ?>
+			</label>
+			<?php echo esc_html( $email ); ?>
+		<?php endif; ?>
+	</div>
+</div>

package/src/modal-checkout/templates/payment-method.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Payment method fields
+ *
+ * @see https://woo.com/document/template-structure/
+ * @package Newspack_Blocks
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+$supports_payment_method_changes = false;
+if ( ! empty( $subscription ) ) {
+	$supports_payment_method_changes = WC_Subscriptions_Change_Payment_Gateway::can_update_all_subscription_payment_methods( $gateway, $subscription );
+}
+?>
+
+<li class="wc_payment_method payment_method_<?php echo esc_attr( $gateway->id ); ?>">
+	<span class="newspack-ui__input-card">
+		<input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio <?php echo $supports_payment_method_changes ? 'supports-payment-method-changes' : ''; ?>" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
+		<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>"><?php echo $gateway->get_title(); /* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped */ ?></label>
+		<?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?>
+			<div class="payment_box payment_method_<?php echo esc_attr( $gateway->id ); ?>" <?php if ( ! $gateway->chosen ) : /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>style="display:none;"<?php endif; /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>>
+				<?php $gateway->payment_fields(); ?>
+				<?php do_action( 'newspack_blocks_after_payment_fields', $gateway->id ); ?>
+			</div>
+		<?php endif; ?>
+	</span>
+</li>

package/src/modal-checkout/templates/thankyou.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * Login form.
+ *
+ * @see https://docs.woocommerce.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 8.1.0
+ *
+ * @var WC_Order $order
+ */
+
+namespace Newspack_Blocks;
+
+use Newspack_Blocks\Modal_Checkout\Checkout_Data;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * WooCommerce by default doesn't allow order details to be shown
+ * if the order is completed using a customer email address that doesn't match
+ * the currently logged in user.
+ *
+ * Details: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/includes/shortcodes/class-wc-shortcode-checkout.php#L302-L321
+ *
+ * For Newspack sites, we don't want to emphasize user account flows outside of
+ * RAS. This custom login template replaces the login form that appears on the
+ * order-received.php template with an order details summary so the experience
+ * matches whether or not the email address used is already associated with an
+ * existing customer account.
+ * phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
+ */
+// When this template replaces global/form-login.php, $order is not provided by WooCommerce.
+// Retrieve it from the URL query vars, the same way WooCommerce does in the order-received endpoint.
+if ( ! isset( $order ) || ! $order ) {
+	$order_id = absint( \get_query_var( 'order-received' ) );
+	$order    = $order_id ? \wc_get_order( $order_id ) : false; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+}
+
+$key      = isset( $_GET['key'] ) ? \wc_clean( \sanitize_text_field( \wp_unslash( $_GET['key'] ) ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+$is_valid = $order && is_a( $order, 'WC_Order' ) && hash_equals( $order->get_order_key(), $key ); // Validate order key to prevent CSRF.
+
+if ( ! $is_valid ) {
+	return;
+}
+
+$is_success             = ! $order->has_status( 'failed' );
+$after_success_behavior = isset( $_GET['after_success_behavior'] ) ? \sanitize_text_field( \wp_unslash( $_GET['after_success_behavior'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+$after_success_url      = isset( $_GET['after_success_url'] ) ? esc_url( \sanitize_url( \wp_unslash( $_GET['after_success_url'] ) ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+$after_success_label    = isset( $_GET['after_success_button_label'] ) ? \sanitize_text_field( \wp_unslash( $_GET['after_success_button_label'] ) ) : \Newspack_Blocks\Modal_Checkout::get_modal_checkout_labels( 'after_success' ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+$checkout_data          = Checkout_Data::get_checkout_data( $order );
+?>
+<div class="woocommerce-order">
+<?php if ( $is_success ) : ?>
+	<div class="newspack-ui__box newspack-ui__box--success newspack-ui__box--text-center">
+		<span class="newspack-ui__icon newspack-ui__icon--success">
+			<?php // TODO: Replace with newspack-ui icons when available. ?>
+			<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>
+			</svg>
+		</span>
+		<p id="modal-checkout-product-details" data-checkout='<?php echo wp_json_encode( $checkout_data ); ?>'>
+			<strong>
+				<?php
+					echo esc_html( Modal_Checkout::get_post_checkout_success_text() );
+				?>
+			</strong>
+		</p>
+	</div>
+	<form>
+		<?php if ( $after_success_behavior ) : ?>
+			<input type="hidden" name="after_success_behavior" value="<?php echo esc_attr( $after_success_behavior ); ?>">
+		<?php endif; ?>
+		<?php if ( $after_success_behavior ) : ?>
+			<input type="hidden" name="after_success_url" value="<?php echo esc_attr( $after_success_url ); ?>">
+		<?php endif; ?>
+		<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide" id="checkout-after-success" onclick="parent.newspackCloseModalCheckout();">
+			<?php echo esc_html( $after_success_label ); ?>
+		</button>
+	</form>
+<?php else : ?>
+	<div class="newspack-ui__box newspack-ui__box__error newspack-ui__box--text-center">
+		<p>
+			<?php esc_html_e( 'Unfortunately your order cannot be processed. Please attempt your purchase again.', 'newspack-blocks' ); ?>
+		</p>
+	</div>
+	<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="newspack-blocks-ui__button newspack-ui__button--primary newspack-ui__button--wide"><?php esc_html_e( 'Pay', 'newspack-blocks' ); ?></a>
+	<?php if ( is_user_logged_in() ) : ?>
+		<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="newspack-blocks-ui__button newspack-ui__button--ghost newspack-ui__button--wide"><?php esc_html_e( 'My account', 'newspack-blocks' ); ?></a>
+	<?php endif; ?>
+	<?php
+endif;
+do_action( 'newpack_blocks_modal_checkout_thankyou' );