From 1c89506c88a5a8d3059c9ee2a424fd1e147f45f2 Mon Sep 17 00:00:00 2001 From: Alefe Souza Date: Mon, 18 Nov 2024 13:49:58 -0300 Subject: [PATCH 1/5] Fix WooPay component spacing --- client/checkout/blocks/style.scss | 11 -------- client/checkout/woopay/index.js | 2 -- .../woopay/hooks/use-woopay-user.js | 16 ++++++++++- client/components/woopay/save-user/style.scss | 27 +++++++++++++++++-- 4 files changed, 40 insertions(+), 16 deletions(-) diff --git a/client/checkout/blocks/style.scss b/client/checkout/blocks/style.scss index a6aa37953b3..32fba8ef77a 100644 --- a/client/checkout/blocks/style.scss +++ b/client/checkout/blocks/style.scss @@ -117,17 +117,6 @@ button.wcpay-stripelink-modal-trigger:hover { } } -#remember-me { - margin: 36px 0 0 0; - - h2 { - font-size: 18px; - font-weight: 600; - line-height: 21.6px; - letter-spacing: -0.01em; - } -} - #payment-method { /* stylelint-disable-next-line selector-id-pattern */ #radio-control-wc-payment-method-options-woocommerce_payments_affirm__label diff --git a/client/checkout/woopay/index.js b/client/checkout/woopay/index.js index f6c8902a514..51217c7aa30 100644 --- a/client/checkout/woopay/index.js +++ b/client/checkout/woopay/index.js @@ -46,8 +46,6 @@ const renderSaveUserSection = () => { checkoutPageSaveUserContainer, paymentOptions.nextSibling ); - - paymentOptions.classList.add( 'is-woopay' ); } } diff --git a/client/components/woopay/hooks/use-woopay-user.js b/client/components/woopay/hooks/use-woopay-user.js index e2fc3d1c12b..827110bf0d7 100644 --- a/client/components/woopay/hooks/use-woopay-user.js +++ b/client/components/woopay/hooks/use-woopay-user.js @@ -10,7 +10,21 @@ const useWooPayUser = () => { useEffect( () => { const handleWooPayUserCheck = ( e ) => { - setIsRegisteredUser( e.detail.isRegisteredUser ); + const { isRegisteredUser: isRegisteredUserEvent } = e.detail; + + setIsRegisteredUser( isRegisteredUserEvent ); + + if ( isRegisteredUserEvent ) { + document + .querySelector( '#remember-me' ) + .parentElement.classList.remove( 'has-woopay-component' ); + + return; + } + + document + .querySelector( '#remember-me' ) + .parentElement.classList.add( 'has-woopay-component' ); }; const currentWindowRef = windowRef.current; diff --git a/client/components/woopay/save-user/style.scss b/client/components/woopay/save-user/style.scss index 8561cd4e62b..3a19919587a 100644 --- a/client/components/woopay/save-user/style.scss +++ b/client/components/woopay/save-user/style.scss @@ -28,11 +28,34 @@ } } +#remember-me { + padding-top: 0; + margin-bottom: 0; + + &::after { + height: 0; + } +} + +.wc-block-components-form.has-woopay-component { + #remember-me { + margin: 36px 0 0 0; + padding-top: 0; + + h2 { + font-size: 18px; + font-weight: 600; + line-height: 21.6px; + letter-spacing: -0.01em; + } + } +} + @media ( max-width: 600px ) { .is-mobile, .is-small { - .wc-block-components-form - .wc-block-components-checkout-step.is-woopay::after { + .wc-block-components-form.has-woopay-component + .wc-block-components-checkout-step::after { height: 0; } } From adc35c9365ee3faad0b3faf8d28e5e05c20b4a1c Mon Sep 17 00:00:00 2001 From: Alefe Souza Date: Mon, 18 Nov 2024 13:55:26 -0300 Subject: [PATCH 2/5] Add changelog entry --- changelog/fix-woopay-component-spacing | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-woopay-component-spacing diff --git a/changelog/fix-woopay-component-spacing b/changelog/fix-woopay-component-spacing new file mode 100644 index 00000000000..0939c834ad9 --- /dev/null +++ b/changelog/fix-woopay-component-spacing @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix WooPay component spacing. From b7906181980213d8456b583ad44d624bd42a71b6 Mon Sep 17 00:00:00 2001 From: Alefe Souza Date: Mon, 18 Nov 2024 17:08:11 -0300 Subject: [PATCH 3/5] Fix border below add note --- client/components/woopay/save-user/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/woopay/save-user/style.scss b/client/components/woopay/save-user/style.scss index 3a19919587a..a46a9ffb93f 100644 --- a/client/components/woopay/save-user/style.scss +++ b/client/components/woopay/save-user/style.scss @@ -55,7 +55,7 @@ .is-mobile, .is-small { .wc-block-components-form.has-woopay-component - .wc-block-components-checkout-step::after { + #payment-method.wc-block-components-checkout-step::after { height: 0; } } From 63f2c14cb24b4e9aa91223a7847413ab12b21ff4 Mon Sep 17 00:00:00 2001 From: Alefe Souza Date: Thu, 21 Nov 2024 13:43:42 -0300 Subject: [PATCH 4/5] Remove WooCommerce lower than 9.1 backwards support --- client/checkout/blocks/style.scss | 9 +++ .../woopay/hooks/use-woopay-user.js | 16 +---- .../save-user/checkout-page-save-user.js | 18 +----- .../components/woopay/save-user/container.js | 12 +--- client/components/woopay/save-user/style.scss | 63 ------------------- 5 files changed, 14 insertions(+), 104 deletions(-) diff --git a/client/checkout/blocks/style.scss b/client/checkout/blocks/style.scss index 32fba8ef77a..3e400b6bfff 100644 --- a/client/checkout/blocks/style.scss +++ b/client/checkout/blocks/style.scss @@ -117,6 +117,15 @@ button.wcpay-stripelink-modal-trigger:hover { } } +#remember-me { + h2 { + font-size: 18px; + font-weight: 600; + line-height: 21.6px; + letter-spacing: -0.01em; + } +} + #payment-method { /* stylelint-disable-next-line selector-id-pattern */ #radio-control-wc-payment-method-options-woocommerce_payments_affirm__label diff --git a/client/components/woopay/hooks/use-woopay-user.js b/client/components/woopay/hooks/use-woopay-user.js index 827110bf0d7..e2fc3d1c12b 100644 --- a/client/components/woopay/hooks/use-woopay-user.js +++ b/client/components/woopay/hooks/use-woopay-user.js @@ -10,21 +10,7 @@ const useWooPayUser = () => { useEffect( () => { const handleWooPayUserCheck = ( e ) => { - const { isRegisteredUser: isRegisteredUserEvent } = e.detail; - - setIsRegisteredUser( isRegisteredUserEvent ); - - if ( isRegisteredUserEvent ) { - document - .querySelector( '#remember-me' ) - .parentElement.classList.remove( 'has-woopay-component' ); - - return; - } - - document - .querySelector( '#remember-me' ) - .parentElement.classList.add( 'has-woopay-component' ); + setIsRegisteredUser( e.detail.isRegisteredUser ); }; const currentWindowRef = windowRef.current; diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js index f0563246552..22aace78dc6 100644 --- a/client/components/woopay/save-user/checkout-page-save-user.js +++ b/client/components/woopay/save-user/checkout-page-save-user.js @@ -26,7 +26,6 @@ import request from '../../../checkout/utils/request'; import useSelectedPaymentMethod from '../hooks/use-selected-payment-method'; import { recordUserEvent } from 'tracks'; import './style.scss'; -import { compare } from 'compare-versions'; const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => { const errorId = 'invalid-woopay-phone-number'; @@ -57,12 +56,6 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => { ); const viewportWidth = window.document.documentElement.clientWidth; const viewportHeight = window.document.documentElement.clientHeight; - const wooCommerceVersionString = window.wcSettings?.wcVersion; - const wcVersionGreaterThan91 = compare( - wooCommerceVersionString, - '9.1', - '>=' - ); useEffect( () => { if ( ! isBlocksCheckout ) { @@ -291,10 +284,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => { } return ( - +
{ name="save_user_in_woopay" id="save_user_in_woopay" value="true" - className={ `save-details-checkbox ${ - wcVersionGreaterThan91 - ? 'without-margin-right' - : '' - } ${ + className={ `save-details-checkbox without-margin-right ${ isBlocksCheckout ? 'wc-block-components-checkbox__input' : '' diff --git a/client/components/woopay/save-user/container.js b/client/components/woopay/save-user/container.js index 470103044ac..7a032fe795f 100644 --- a/client/components/woopay/save-user/container.js +++ b/client/components/woopay/save-user/container.js @@ -3,19 +3,11 @@ */ import { __ } from '@wordpress/i18n'; -const Container = ( { - children, - isBlocksCheckout, - wcVersionGreaterThan91, -} ) => { +const Container = ( { children, isBlocksCheckout } ) => { if ( ! isBlocksCheckout ) return children; return ( <> -
+

{ __( 'Save my info' ) }

{ children }
diff --git a/client/components/woopay/save-user/style.scss b/client/components/woopay/save-user/style.scss index a46a9ffb93f..b3883e004dc 100644 --- a/client/components/woopay/save-user/style.scss +++ b/client/components/woopay/save-user/style.scss @@ -7,60 +7,6 @@ } } -.is-mobile, -.is-small { - .woopay-save-new-user-container.wc-version-greater-than-91::after { - background: currentColor; - box-shadow: -50vw 0 0 0 currentColor, 50vw 0 0 0 currentColor; - content: ''; - height: 1px; - opacity: 0.11; - width: 100%; - margin-top: 22px; - } -} - -.is-medium, -.is-large { - .woopay-save-new-user-container.wc-version-greater-than-91 { - border-bottom: 1px solid hsla( 0, 0%, 7%, 0.11 ); - margin-bottom: 48px; - } -} - -#remember-me { - padding-top: 0; - margin-bottom: 0; - - &::after { - height: 0; - } -} - -.wc-block-components-form.has-woopay-component { - #remember-me { - margin: 36px 0 0 0; - padding-top: 0; - - h2 { - font-size: 18px; - font-weight: 600; - line-height: 21.6px; - letter-spacing: -0.01em; - } - } -} - -@media ( max-width: 600px ) { - .is-mobile, - .is-small { - .wc-block-components-form.has-woopay-component - #payment-method.wc-block-components-checkout-step::after { - height: 0; - } - } -} - .woopay-save-new-user-container { .save-details { .wc-block-components-text-input input:-webkit-autofill { @@ -68,15 +14,6 @@ } } - &.wc-version-greater-than-91 { - @media ( min-width: 601px ), - ( min-width: 566px ) and ( max-width: 568px ) { - .save-details { - margin-bottom: 48px; - } - } - } - .save-details-header { display: flex; align-items: flex-start; From b57a4f86b3f9c7ce75af85dd72c5a1da17bb826e Mon Sep 17 00:00:00 2001 From: Alefe Souza Date: Mon, 25 Nov 2024 11:54:31 -0300 Subject: [PATCH 5/5] Remove unnecessary style --- client/components/woopay/save-user/checkout-page-save-user.js | 2 +- client/components/woopay/save-user/style.scss | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js index 22aace78dc6..45295c5c170 100644 --- a/client/components/woopay/save-user/checkout-page-save-user.js +++ b/client/components/woopay/save-user/checkout-page-save-user.js @@ -302,7 +302,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => { name="save_user_in_woopay" id="save_user_in_woopay" value="true" - className={ `save-details-checkbox without-margin-right ${ + className={ `save-details-checkbox ${ isBlocksCheckout ? 'wc-block-components-checkbox__input' : '' diff --git a/client/components/woopay/save-user/style.scss b/client/components/woopay/save-user/style.scss index b3883e004dc..0e07ed4d611 100644 --- a/client/components/woopay/save-user/style.scss +++ b/client/components/woopay/save-user/style.scss @@ -47,10 +47,6 @@ text-indent: 0; } - input:not( .without-margin-right ) { - margin-right: $gap-small; - } - span { @include breakpoint( '>960px' ) { margin-right: 1.25rem;