From 4640cae18706102bafaf2553df9eae93eddc20b9 Mon Sep 17 00:00:00 2001 From: Rasmy Nguyen Date: Thu, 28 Nov 2024 13:40:00 -0500 Subject: [PATCH] feat(ras-acc): add reader account creation and login improvements (#1716) This PR adds features and styles for the new reader activation and account creation flow. Co-authored-by: Laurel Co-authored-by: Derrick Koo --- .../class-newspack-newsletters-renderer.php | 13 ++- src/blocks/subscribe/index.php | 2 +- src/blocks/subscribe/view.js | 86 +++++++------------ tests/test-renderer.php | 2 +- 4 files changed, 43 insertions(+), 60 deletions(-) diff --git a/includes/class-newspack-newsletters-renderer.php b/includes/class-newspack-newsletters-renderer.php index becf88371..fe60b6d6d 100644 --- a/includes/class-newspack-newsletters-renderer.php +++ b/includes/class-newspack-newsletters-renderer.php @@ -852,17 +852,18 @@ function ( $block ) { $social_wrapper_attrs = array( 'icon-size' => '24px', 'mode' => 'horizontal', - 'padding' => '0', 'border-radius' => '999px', - 'icon-padding' => '7px', + 'icon-padding' => isset( $attrs['className'] ) && 'is-style-filled-primary-text' === $attrs['className'] ? '0px' : '7px', + 'padding' => '0', ); if ( isset( $attrs['align'] ) ) { $social_wrapper_attrs['align'] = $attrs['align']; } else { $social_wrapper_attrs['align'] = 'left'; } + $markup = ''; - foreach ( $inner_blocks as $link_block ) { + foreach ( $inner_blocks as $index => $link_block ) { if ( isset( $link_block['attrs']['url'] ) ) { $url = $link_block['attrs']['url']; // Handle older version of the block, where innner blocks we named `core/social-link-`. @@ -875,8 +876,14 @@ function ( $block ) { 'src' => plugins_url( 'assets/' . $social_icon['icon'], __DIR__ ), 'background-color' => $social_icon['color'], 'css-class' => 'social-element', + 'padding' => '8px', ); + if ( $index === 0 || $index === count( $inner_blocks ) - 1 ) { + $img_attrs['padding-left'] = $index === 0 ? '0' : '8px'; + $img_attrs['padding-right'] = $index === 0 ? '8px' : '0'; + } + $markup .= ''; } } diff --git a/src/blocks/subscribe/index.php b/src/blocks/subscribe/index.php index 2a3573d9f..f57d3cdf8 100644 --- a/src/blocks/subscribe/index.php +++ b/src/blocks/subscribe/index.php @@ -179,7 +179,7 @@ class="wp-block-newspack-newsletters-subscribe newspack-newsletters-subscribe > -
+ { const form = container.querySelector( 'form' ); if ( ! form ) { @@ -57,6 +58,7 @@ domReady( function () { messageNode.className = `message status-${ status }`; if ( status === 200 ) { container.replaceChild( responseContainer, form ); + form.dispatchEvent( successEvent ); } }; form.addEventListener( 'submit', ev => { @@ -70,62 +72,36 @@ domReady( function () { return form.endFlow( newspack_newsletters_subscribe_block.invalid_email, 400 ); } - const newspack_grecaptcha = window.newspack_grecaptcha || null; - const getCaptchaV3Token = newspack_grecaptcha - ? newspack_grecaptcha?.getCaptchaV3Token - : () => new Promise( res => res( '' ) ); // Empty promise. - - getCaptchaV3Token() // Get a token for reCAPTCHA v3, if needed. - .then( captchaToken => { - // If there's no token, we don't need to do anything. - if ( ! captchaToken ) { - return; - } - let tokenField = form[ 'g-recaptcha-response' ]; - if ( ! tokenField ) { - tokenField = document.createElement( 'input' ); - tokenField.setAttribute( 'type', 'hidden' ); - tokenField.setAttribute( 'name', 'g-recaptcha-response' ); - tokenField.setAttribute( 'autocomplete', 'off' ); - form.appendChild( tokenField ); - } - tokenField.value = captchaToken; - } ) - .catch( e => { - form.endFlow( e, 400 ); - } ) - .finally( () => { - const body = new FormData( form ); - if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) { - return form.endFlow( newspack_newsletters_subscribe_block.invalid_email, 400 ); - } - if ( nonce ) { - body.set( 'newspack_newsletters_subscribe', nonce ); - } - emailInput.setAttribute( 'disabled', 'true' ); - submit.setAttribute( 'disabled', 'true' ); + const body = new FormData( form ); + if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) { + return form.endFlow( newspack_newsletters_subscribe_block.invalid_email, 400 ); + } + if ( nonce ) { + body.set( 'newspack_newsletters_subscribe', nonce ); + } + emailInput.setAttribute( 'disabled', 'true' ); + submit.setAttribute( 'disabled', 'true' ); - fetch( form.getAttribute( 'action' ) || window.location.pathname, { - method: 'POST', - headers: { - Accept: 'application/json', - }, - body, - } ).then( res => { - res - .json() - .then( - ( { - message, - newspack_newsletters_subscribed: wasSubscribed, - newspack_newsletters_subscribe, - } ) => { - nonce = newspack_newsletters_subscribe; - form.endFlow( message, res.status, wasSubscribed ); - } - ); - } ); - } ); + fetch( form.getAttribute( 'action' ) || window.location.pathname, { + method: 'POST', + headers: { + Accept: 'application/json', + }, + body, + } ).then( res => { + res + .json() + .then( + ( { + message, + newspack_newsletters_subscribed: wasSubscribed, + newspack_newsletters_subscribe, + } ) => { + nonce = newspack_newsletters_subscribe; + form.endFlow( message, res.status, wasSubscribed ); + } + ); + } ); } ); } ); } ); diff --git a/tests/test-renderer.php b/tests/test-renderer.php index 1c2897d67..79803968d 100755 --- a/tests/test-renderer.php +++ b/tests/test-renderer.php @@ -345,7 +345,7 @@ public function test_render_social_icons() { 'innerHTML' => '
', ] ), - '', + '', 'Renders social icons' ); }