Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(modal-checkout): update thank you page with new newspack ui #1649

Merged
merged 13 commits into from
Feb 1, 2024
Merged

feat(modal-checkout): update thank you page with new newspack ui #1649

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7dc6c77
feat(modal-checkout): add ui to thankyou
chickenn00dle Jan 23, 2024
fc01e3c
feat(modal-checkout): remove redundant styles
chickenn00dle Jan 23, 2024
7adecee
feat(modal-checkout): update thankyou form classes
chickenn00dle Jan 24, 2024
84c1db5
feat(modal-checkout): fix visibility toggling
chickenn00dle Jan 24, 2024
c24716c
feat(modal-checkout): modal fixes
chickenn00dle Jan 24, 2024
a0e99ac
feat(modal-checkout): fix iframe height bug
chickenn00dle Jan 25, 2024
9cf857c
feat(modal-checkout): apply default styles
chickenn00dle Jan 25, 2024
11da777
feat(modal-checkout): various ui fixes
chickenn00dle Jan 26, 2024
2b81581
feat(modal-checkout): fix variable modal checkout
chickenn00dle Jan 26, 2024
82638d4
feat(modal-checkout): remove redundant class
chickenn00dle Jan 26, 2024
e188f8f
feat(modal-checkout): pass class prefix directly
chickenn00dle Jan 30, 2024
1544407
chore(modal-checkout): fix stray merge bugs
chickenn00dle Jan 30, 2024
6fa1470
chore(modal-checkout): fix docblock typo
chickenn00dle Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 57 additions & 28 deletions includes/class-modal-checkout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ public static function init() {
add_action( 'woocommerce_checkout_before_customer_details', [ __CLASS__, 'render_before_customer_details' ] );
add_filter( 'woocommerce_enable_order_notes_field', [ __CLASS__, 'enable_order_notes_field' ] );
add_action( 'woocommerce_checkout_process', [ __CLASS__, 'wcsg_apply_gift_subscription' ] );
add_filter( 'woocommerce_order_received_verify_known_shoppers', '__return_false' );
// TODO: Remove once we apply auth flow to checkout modal.
add_filter( 'newspack_reader_activation_should_render_auth', '__return_false' );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noting that I've added this with the latest merge of master into epic/ras-acc since we have another task to integrate the auth flow into checkout.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like our Sign Up / Sign In button styles are included in the auth.css file this enqueues -- not sure if just deleting the other files would be better, or maybe something else?

Here's when you're not logged in (getting both the desktop button [with some theme styles] and the unstyled mobile button, which is normally hidden on desktop:
image

And when you're logged in, you just get the unstyled mobile button:
image

(I totally could be missing the plan for these specific styles; I'm playing a little catch-up while reviewing this PR 😅 if yes, please disregard!)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like our Sign Up / Sign In button styles are included in the auth.css file this enqueues -- not sure if just deleting the other files would be better, or maybe something else?

Ah! Good catch. I should note that I am only temporarily bypassing the auth flow for this and the other modal checkout ui update PR. But will be incorporating auth into modal checkout with 0/1206274567818686/1205668937699524. Not sure if it's okay to allow these buttons to appear broken in epic/ras-acc for a short time only?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah gotcha!

Not sure if it's okay to allow these buttons to appear broken in epic/ras-acc for a short time only?

I think that's probably fine -- it looks like some other stuff will be in flux as well!


/** Custom handling for registered users. */
add_filter( 'woocommerce_checkout_customer_id', [ __CLASS__, 'associate_existing_user' ] );
Expand Down Expand Up @@ -287,21 +290,23 @@ public static function render_modal_markup() {
*
* @param string $title The title.
*/
$title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
$title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
$class_prefix = self::get_class_prefix();
?>
<div class="newspack-blocks-checkout-modal newspack-blocks-modal">
<div class="newspack-blocks-modal__container">
<header class="newspack-blocks-modal__header">
<div class="<?php echo esc_attr( "$class_prefix {$class_prefix}__modal-container" ); ?>">
<div class="<?php echo esc_attr( "{$class_prefix}__modal-container__overlay" ); ?>"></div>
<div class="<?php echo esc_attr( "{$class_prefix}__modal" ); ?>">
<header class="<?php echo esc_attr( "{$class_prefix}__modal__header" ); ?>">
<h2><?php echo esc_html( $title ); ?></h2>
<a href="#" class="newspack-blocks-modal__close">
<button class="<?php echo esc_attr( "{$class_prefix}__modal__close" ); ?>">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-blocks' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</svg>
</a>
</button>
</header>
<section class="newspack-blocks-modal__content">
<div class="newspack-blocks-modal__spinner">
<section class="<?php echo esc_attr( "{$class_prefix}__modal__content" ); ?>">
<div class="<?php echo esc_attr( "{$class_prefix}__spinner" ); ?>">
<span></span>
</div>
</section>
Expand Down Expand Up @@ -339,37 +344,42 @@ public static function render_variation_selection() {
*
* @param string $title The title.
*/
$title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
$products = array_keys( self::$products );
$title = apply_filters( 'newspack_blocks_modal_checkout_title', __( 'Complete your transaction', 'newspack-blocks' ) );
$products = array_keys( self::$products );
$class_prefix = self::get_class_prefix();
foreach ( $products as $product_id ) {
$product = wc_get_product( $product_id );
if ( ! $product->is_type( 'variable' ) ) {
continue;
}
?>
<div class="newspack-blocks-variation-modal newspack-blocks-modal" data-product-id="<?php echo esc_attr( $product_id ); ?>">
<div class="newspack-blocks-modal__container">
<header class="newspack-blocks-modal__header">
<div
class="<?php echo esc_attr( "$class_prefix {$class_prefix}__modal-container {$class_prefix}__modal-variation" ); ?>"
data-product-id="<?php echo esc_attr( $product_id ); ?>"
>
<div class="<?php echo esc_attr( "{$class_prefix}__modal-container__overlay" ); ?>"></div>
<div class="<?php echo esc_attr( "{$class_prefix}__modal" ); ?>">
<header class="<?php echo esc_attr( "{$class_prefix}__modal__header" ); ?>">
<h2><?php echo esc_html( $title ); ?></h2>
<a href="#" class="newspack-blocks-modal__close">
<button class="<?php echo esc_attr( "{$class_prefix}__modal__close" ); ?>">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-blocks' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
</svg>
</a>
</button>
</header>
<section class="newspack-blocks-modal__content">
<div class="newspack-blocks-variation-modal__selection" data-product-id="<?php echo esc_attr( $product_id ); ?>">
<section class="<?php echo esc_attr( "{$class_prefix}__modal__content" ); ?>">
<div class="<?php echo esc_attr( "{$class_prefix}__selection" ); ?>" data-product-id="<?php echo esc_attr( $product_id ); ?>">
<h3><?php echo esc_html( $product->get_name() ); ?></h3>
<p><?php esc_html_e( 'Select an option to continue:', 'newspack-blocks' ); ?></p>
<ul class="newspack-blocks-variation-modal__options">
<ul class="<?php echo esc_attr( "{$class_prefix}__options" ); ?>">
<?php
$variations = $product->get_available_variations( 'objects' );
foreach ( $variations as $variation ) :
$name = wc_get_formatted_variation( $variation, true );
$price = $variation->get_price_html();
?>
<li class="newspack-blocks-variation-modal__options__item">
<li class="<?php echo esc_attr( "{$class_prefix}__options__item" ); ?>">
<div class="summary">
<span class="price"><?php echo $price; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span>
</div>
Expand Down Expand Up @@ -456,6 +466,13 @@ public static function enqueue_modal( $product_id = null ) {
\NEWSPACK_BLOCKS__VERSION,
true
);
wp_localize_script(
'newspack-blocks-modal',
'newspackBlocksModal',
[
'newspack_class_prefix' => self::get_class_prefix(),
]
);
wp_enqueue_style(
'newspack-blocks-modal',
plugins_url( 'dist/modal.css', \NEWSPACK_BLOCKS__PLUGIN_FILE ),
Expand All @@ -481,6 +498,7 @@ public static function get_checkout_template( $template ) {
if ( ! self::is_modal_checkout() ) {
return $template;
}
$class_prefix = self::get_class_prefix();
ob_start();
?>
<!doctype html>
Expand All @@ -491,10 +509,10 @@ public static function get_checkout_template( $template ) {
<link rel="profile" href="https://gmpg.org/xfn/11" />
<?php wp_head(); ?>
</head>
<body id="newspack_modal_checkout">
<body class="<?php echo esc_attr( "$class_prefix {$class_prefix}__modal__content" ); ?>" id="newspack_modal_checkout">
<?php
echo do_shortcode( '[woocommerce_checkout]' );
wp_footer();
echo do_shortcode( '[woocommerce_checkout]' );
wp_footer();
?>
</body>
</html>
Expand Down Expand Up @@ -574,13 +592,17 @@ public static function wc_get_template( $located, $template_name ) {

$custom_templates = [
'checkout/form-checkout.php' => 'src/modal-checkout/templates/form-checkout.php',
'checkout/thankyou.php' => 'src/modal-checkout/templates/thankyou.php',
'checkout/form-coupon.php' => 'src/modal-checkout/templates/form-coupon.php',
'checkout/form-gift-subscription.php' => 'src/modal-checkout/templates/form-gift-subscription.php',
];

// If Newspack UI is present, use our templates.
if ( self::get_class_prefix() === 'newspack-ui' ) {
$custom_templates['checkout/thankyou.php'] = 'src/modal-checkout/templates/thankyou.php';
// Replace the login form with the order summary if using the modal checkout. This is
// for the case where the reader used an existing email address.
'global/form-login.php' => 'src/modal-checkout/templates/thankyou.php',
];
$custom_templates['global/form-login.php'] = 'src/modal-checkout/templates/thankyou.php';
}

// Only show the woocommerce-subscriptions-gifting fields when we want to.
if ( 'html-add-recipient.php' === $template_name ) {
Expand Down Expand Up @@ -827,17 +849,17 @@ private static function render_after_success_button() {
$button_label = ! empty( $_REQUEST['after_success_button_label'] ) ? urldecode( wp_unslash( $_REQUEST['after_success_button_label'] ) ) : __( 'Continue browsing', 'newspack-blocks' ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
$url = ! empty( $_REQUEST['after_success_url'] ) ? urldecode( wp_unslash( $_REQUEST['after_success_url'] ) ) : ''; // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
?>
<a
<button
<?php if ( empty( $url ) ) : ?>
onclick="parent.newspackCloseModalCheckout(this);"
<?php else : ?>
href="<?php echo esc_url( $url ); ?>"
target="_top"
<?php endif; ?>
class="button newspack-modal-newsletters__button"
class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide"
>
<?php echo esc_html( $button_label ); ?>
</a>
</button>
<?php
// phpcs:enable
}
Expand Down Expand Up @@ -1209,5 +1231,12 @@ public static function jetpack_active_modules( $modules ) {
}
return $modules;
}

/**
* Get the relevant class prefix (newspack-blocks or newspack-ui)depending on whether Newpack plugin is active.
*/
private static function get_class_prefix() {
return class_exists( '\Newspack\Newspack_UI' ) ? 'newspack-ui' : 'newspack-blocks';
}
}
Modal_Checkout::init();
2 changes: 1 addition & 1 deletion src/blocks/checkout-button/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
},
"afterSuccessButtonLabel": {
"type": "string",
"default": "Continue browsing"
"default": "Continue"
},
"afterSuccessURL": {
"type": "string"
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/donate/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
},
"afterSuccessButtonLabel": {
"type": "string",
"default": "Continue browsing"
"default": "Continue"
},
"afterSuccessURL": {
"type": "string"
Expand Down
Loading