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.

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

Update/8581 replace intl tel input 2 #9155

Draft
wants to merge 12 commits into
base: develop
Choose a base branch
from

Conversation

danielmx-dev
Copy link
Contributor

@danielmx-dev danielmx-dev commented Jul 23, 2024

Fixes #8581

Changes proposed in this Pull Request

  • Use the new PhoneNumberInput component from @woocommerce/components instead of intl-tel-input
  • Remove intl-tel-input from the package.json dependencies, remove all references.
  • Bundle PhoneNumberInput since @woocommerce/components (window.wc.components) is not available in checkout. See details in this comment: Replace intl-tel-input component with the WooCommerce PhoneNumberInput component #8581 (comment)
  • Chore: Update watchPathIgnorePatterns to prevent errors when running npm run test:watch

Testing instructions

Payment Settings
  • Onboard with a new Stripe account or use one that doesn't have a support phone number set

  • Go to WP Admin -> Payments -> Settings

  • Verify that the Support phone number field is empty and that no errors appear

  • Perform a chance in any other part of the settings (i.e. Toggle multi-currency or a payment method)

  • Click Save Changes

  • The changes should be saved successfully

  • Update the support number to an invalid number

  • The "Please enter a valid phone number error appears"
    image

  • The "Save changes" button is disabled

  • Use +1 0000000000 as the support phone number, no errors should appear and the Save Changes button is enabled.

  • Use a valid phone number, no error should appear and the Save Changes button is enabled.

  • Once all the previous tests are done, you can click "Save Changes", please note that once a number is saved, it cannot be removed, so you won't be able to repeat the previous steps unless you onboard with a new Stripe account.

  • Once the phone has been saved, clear the Support Phone Number field. The error "Support phone number cannot be empty once it has been set before, please specify." appears and the Save Changes button is disabled.
    image

Checkout Page
  • Enable WooPay
  • As a guest shopper add a product to the cart
  • Go to the checkout page (test both blocks and shortcode)
  • Select the Securely save my information for 1-click checkout checkbox
  • Make sure no error shows up below the input field and the place order button is not blocked
  • Fill in all required fields but the WooPay phone number
  • Click the place order button
  • Make sure the phone input error shows up and the place order button is not blocked
  • Type an invalid phone number
  • The error should persist in the page, if you click place order it shouldn't go through
  • Type a valid phone number
  • Make sure the error message is gone
  • Click the place order button
  • Make sure the success page shows up
Payment Settings (non-US)
  • Onboard or switch to a UK account
  • Go to WP Admin -> Payments -> Settings
  • Enter a valid UK phone number as the support number, click Save Changes
  • Reload the page
  • The Phone number should be set correctly and no validation errors should appear

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@danielmx-dev danielmx-dev self-assigned this Jul 23, 2024
@botwoo
Copy link
Collaborator

botwoo commented Jul 23, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9155 or branch name update/8581-replace-intl-tel-input-2 in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 12d5cce
  • Build time: 2024-07-31 18:30:02 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented Jul 23, 2024

Size Change: -72.2 kB (-5%) ✅

Total Size: 1.26 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.21 kB +3 B (0%)
release/woocommerce-payments/dist/blocks-checkout.css 2.21 kB +2 B (0%)
release/woocommerce-payments/dist/index-rtl.css 35.4 kB -3.66 kB (-9%)
release/woocommerce-payments/dist/index.css 35.4 kB -3.59 kB (-9%)
release/woocommerce-payments/dist/index.js 275 kB -21.5 kB (-7%)
release/woocommerce-payments/dist/settings-rtl.css 7.48 kB -3.73 kB (-33%) 🎉
release/woocommerce-payments/dist/settings.css 7.49 kB -3.6 kB (-32%) 🎉
release/woocommerce-payments/dist/settings.js 208 kB -15.1 kB (-7%)
release/woocommerce-payments/dist/woopay-rtl.css 1.35 kB -3.16 kB (-70%) 🏆
release/woocommerce-payments/dist/woopay.css 1.35 kB -3.13 kB (-70%) 🏆
release/woocommerce-payments/dist/woopay.js 56.2 kB -14.8 kB (-21%) 🎉
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/blocks-checkout.js 61.1 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 528 B
release/woocommerce-payments/dist/bnpl-announcement.css 529 B
release/woocommerce-payments/dist/bnpl-announcement.js 20.8 kB
release/woocommerce-payments/dist/cart-block.js 16.2 kB
release/woocommerce-payments/dist/cart.js 5.72 kB
release/woocommerce-payments/dist/checkout-rtl.css 600 B
release/woocommerce-payments/dist/checkout.css 600 B
release/woocommerce-payments/dist/checkout.js 31.7 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 235 B
release/woocommerce-payments/dist/express-checkout.css 235 B
release/woocommerce-payments/dist/express-checkout.js 14 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55.5 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 42.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 39.2 kB
release/woocommerce-payments/dist/payment-request-rtl.css 235 B
release/woocommerce-payments/dist/payment-request.css 235 B
release/woocommerce-payments/dist/payment-request.js 13.5 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
release/woocommerce-payments/dist/plugins-page.js 20.1 kB
release/woocommerce-payments/dist/product-details-rtl.css 397 B
release/woocommerce-payments/dist/product-details.css 398 B
release/woocommerce-payments/dist/product-details.js 11.3 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 235 B
release/woocommerce-payments/dist/tokenized-payment-request.css 235 B
release/woocommerce-payments/dist/tokenized-payment-request.js 14.3 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.14 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 235 B
release/woocommerce-payments/dist/woopay-express-button.css 235 B
release/woocommerce-payments/dist/woopay-express-button.js 23.9 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 392 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 584 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 520 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 159 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.6 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace intl-tel-input component with the WooCommerce PhoneNumberInput component
2 participants