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

Add support for kanji and kana statement descriptors #7051

Merged
merged 12 commits into from
Aug 31, 2023

Conversation

dpaun1985
Copy link
Contributor

@dpaun1985 dpaun1985 commented Aug 23, 2023

Fixes #6874

Changes proposed in this Pull Request

For JP Stripe accounts, add statement descriptors for kana and kanji.
Under the latin statement descriptor, if it's a JP stripe account, we need to show another 2 inputs for kana and kanji statement descriptors.
Max length for kanji - 17 chars
Max length for kana - 22 chars

Testing instructions

  • checkout server PR 3801-gh-Automattic/woocommerce-payments-server
  • use a JP Stripe account
  • go to Woo->Settings->Payments
  • check Transactions section, the inputs for kana and kanji statement descriptors should be present under the latin statement descriptor input
  • check for non JP Stripe account. the inputs should not be shown.

  • 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

@dpaun1985 dpaun1985 marked this pull request as ready for review August 23, 2023 09:46
@dpaun1985 dpaun1985 requested a review from a team August 23, 2023 09:46
@botwoo
Copy link
Collaborator

botwoo commented Aug 23, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7051 or branch name add/6874-add-kanji-kana 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: 1596f3e
  • Build time: 2023-08-31 14:54:21 UTC

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 23, 2023

Size Change: +675 B (0%)

Total Size: 1.4 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 276 kB +44 B (0%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.6 kB +65 B (0%)
release/woocommerce-payments/dist/multi-currency.js 54.2 kB +66 B (0%)
release/woocommerce-payments/dist/order.js 40 kB +74 B (0%)
release/woocommerce-payments/dist/payment-gateways.js 37.8 kB +63 B (0%)
release/woocommerce-payments/dist/settings-rtl.css 8.95 kB +46 B (+1%)
release/woocommerce-payments/dist/settings.css 8.96 kB +47 B (+1%)
release/woocommerce-payments/dist/settings.js 231 kB +270 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.03 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.js 73.5 kB
release/woocommerce-payments/dist/checkout-rtl.css 440 B
release/woocommerce-payments/dist/checkout.css 441 B
release/woocommerce-payments/dist/checkout.js 28.5 kB
release/woocommerce-payments/dist/index-rtl.css 35.6 kB
release/woocommerce-payments/dist/index.css 35.6 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 2.87 kB
release/woocommerce-payments/dist/multi-currency.css 2.87 kB
release/woocommerce-payments/dist/order-rtl.css 741 B
release/woocommerce-payments/dist/order.css 743 B
release/woocommerce-payments/dist/payment-gateways-rtl.css 686 B
release/woocommerce-payments/dist/payment-gateways.css 688 B
release/woocommerce-payments/dist/payment-request-rtl.css 146 B
release/woocommerce-payments/dist/payment-request.css 146 B
release/woocommerce-payments/dist/payment-request.js 11.6 kB
release/woocommerce-payments/dist/product-details.js 789 B
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/upe_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_checkout.css 441 B
release/woocommerce-payments/dist/upe_checkout.js 34 kB
release/woocommerce-payments/dist/upe_split_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_split_checkout.css 441 B
release/woocommerce-payments/dist/upe_split_checkout.js 34.6 kB
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js 36.4 kB
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 39.5 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.js 41 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 146 B
release/woocommerce-payments/dist/woopay-express-button.css 146 B
release/woocommerce-payments/dist/woopay-express-button.js 50.5 kB
release/woocommerce-payments/dist/woopay-rtl.css 3.85 kB
release/woocommerce-payments/dist/woopay.css 3.85 kB
release/woocommerce-payments/dist/woopay.js 71.6 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 633 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 720 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.56 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.55 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 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 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 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 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.06 kB

compressed-size-action

Copy link
Contributor

@anu-rock anu-rock left a comment

Choose a reason for hiding this comment

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

The code looks good. The happy path worked well in manual testing. One edge case failed.


Review checklist

Parameter Result
Approach ✅ All good
Implementation ✅ All good
Automated tests ✅ All good
Naming ✅ All good
Typing ✅ All good
Code comments ✅ All good
Changelog ✅ All good
Testing instructions 👍 Almost good (we can also add instructions to try saving the fields)
Manual testing ✅ Works as expected
Edge cases ❌ Failed (see below)

Scenarios tested

Scenario Result
Visibility of Kanji and Kana statement descriptor fields for a JP account ✅ Visible
Visibility of Kanji and Kana statement descriptor fields for a US account ✅ Not visible
Save settings on inputting valid values in the new fields ✅ Settings saved successfully (verified after page refresh)
Save settings on inputting invalid values in the new fields (Latin characters in Kana field) ❌ Settings saved successfully (found old values on page refresh). Ideally, an error should be thrown and saving should fail.

client/settings/transactions/index.js Outdated Show resolved Hide resolved
@dpaun1985
Copy link
Contributor Author

Since the texts "Edit the way your store name appears on your customers' bank statements." appears under each input, would be a good ideea to move it on top ?
Also, for Kanji and Kana inputs, we need only kanji/kana characters. We could add a notice under each input to mention this.
Screenshot 2023-08-29 at 15 38 58

@elizaan36, could you please share your opinion on this ?

Copy link
Member

@elazzabi elazzabi left a comment

Choose a reason for hiding this comment

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

Looks good to me and works as expected.

I also agree with Anurag's comment ^ above about having unique ids.

Copy link
Contributor

@mordeth mordeth left a comment

Choose a reason for hiding this comment

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

✅ Code looks good!
✅ Manually tested, and everything works well!

@elizaan36
Copy link

elizaan36 commented Aug 29, 2023

Moving that line to the top looks good but I think the section title should be "Customer statements". We can keep the "Customer support" section below for email and phone.

image

One small thing "You must only use Kanji letters" is repeated and 2nd one should say Kana. I updated the text to "Use only [language] letters."

Can we detect the store language setting rather than using the word "Latin"? I'm afraid "Latin" won't make much sense to merchants and could be confusing.

Copy link
Contributor

@anu-rock anu-rock left a comment

Choose a reason for hiding this comment

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

LGTM after latest changes 🎉

IMO, we should make one last small change. The names for all three fields now read the same, making them appear redundant. I think they should be:

Customer bank statement
Customer bank statement (kanji)
Customer bank statement (kana)

image

Pre-approving the changes ✅

(Noting that my edge case issue about the error in saving with incorrect characters will be tackled separately in #7090.)

@dpaun1985
Copy link
Contributor Author

dpaun1985 commented Aug 31, 2023

Moving that line to the top looks good but I think the section title should be "Customer statements". We can keep the "Customer support" section below for email and phone.

image One small thing "You must only use Kanji letters" is repeated and 2nd one should say Kana. I updated the text to "Use only [language] letters."

Can we detect the store language setting rather than using the word "Latin"? I'm afraid "Latin" won't make much sense to merchants and could be confusing.

@elizaan36 , as you mentioned %language should be shown only for Japan. In this case, the message will be "You must only use Japan letters", but based on Stripe docs, the field accept only latin letters.
So, since this is shown only for Japan merchants, we decided to show the text "Use only latin characters" for the default statement descriptor.
For the other merchants, the message will not be displayed since it's only 1 statement descriptor field.

@dpaun1985 dpaun1985 added this pull request to the merge queue Aug 31, 2023
Merged via the queue into develop with commit b5bfc76 Aug 31, 2023
@dpaun1985 dpaun1985 deleted the add/6874-add-kanji-kana branch August 31, 2023 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support kanji and kana statement descriptors for Japanese merchants
6 participants