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 payments activity widget emoji survey #8309

Closed
wants to merge 17 commits into from

Conversation

dpaun1985
Copy link
Contributor

@dpaun1985 dpaun1985 commented Mar 4, 2024

Changes proposed in this Pull Request

Emoji-based survey component to capture the user sentiment for the new Payments Overview Widget.

image

Todo

Testing instructions

MJ5lCh.mp4

  • 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 requested a review from a team March 4, 2024 09:37
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 changes are looking good!

I've included some comments in areas where improvements could be made.

client/overview/index.js Outdated Show resolved Hide resolved
client/overview/survey/emoticons.js Outdated Show resolved Hide resolved
client/overview/survey/emoticons.js Outdated Show resolved Hide resolved
client/overview/survey/emoticons.js Outdated Show resolved Hide resolved
client/overview/survey/index.tsx Outdated Show resolved Hide resolved
client/overview/survey/index.tsx Outdated Show resolved Hide resolved
@botwoo
Copy link
Collaborator

botwoo commented Mar 5, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8309 or branch name add/8197-overview-survey 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: 7406ab0
  • Build time: 2024-03-28 02:57:21 UTC

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

Copy link
Contributor

github-actions bot commented Mar 5, 2024

Size Change: +1.76 kB (0%)

Total Size: 1.2 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 40.4 kB +276 B (+1%)
release/woocommerce-payments/dist/index.css 40.3 kB +279 B (+1%)
release/woocommerce-payments/dist/index.js 291 kB +1.2 kB (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.06 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.06 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/assets/css/success.rtl.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.92 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.91 kB
release/woocommerce-payments/dist/blocks-checkout.js 54.1 kB
release/woocommerce-payments/dist/cart.js 4.45 kB
release/woocommerce-payments/dist/checkout-rtl.css 405 B
release/woocommerce-payments/dist/checkout.css 406 B
release/woocommerce-payments/dist/checkout.js 37 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.4 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.5 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.js 38.5 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/payment-request.js 12.4 kB
release/woocommerce-payments/dist/product-details-rtl.css 155 B
release/woocommerce-payments/dist/product-details.css 155 B
release/woocommerce-payments/dist/product-details.js 16.6 kB
release/woocommerce-payments/dist/settings-rtl.css 11 kB
release/woocommerce-payments/dist/settings.css 10.8 kB
release/woocommerce-payments/dist/settings.js 199 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 710 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 18.5 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.58 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-express-button.js 21.1 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.44 kB
release/woocommerce-payments/dist/woopay.css 4.41 kB
release/woocommerce-payments/dist/woopay.js 71 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 812 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.37 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.37 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
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.6 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.4 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.52 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.05 kB

compressed-size-action

@anu-rock
Copy link
Contributor

anu-rock commented Mar 6, 2024

Nitpick - We should change the title of this PR to more accurately reflect the component's name. Payments Overview Widget is the parent component of which this PR's component is a part of.

@dpaun1985 dpaun1985 changed the title payments overview widget payments overview survey Mar 6, 2024
@dpaun1985 dpaun1985 marked this pull request as ready for review March 6, 2024 14:19
@dpaun1985 dpaun1985 requested review from a team and mordeth March 6, 2024 14:19
( rating === currentRating ? ' selected' : '' );

const getIcon = function () {
if ( rating === '1' ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Considering the significant markup duplication in that function, I propose passing the unicode emoji text as a prop and retain only one instance of <span role="img" aria-label="emoticon">.

Copy link
Contributor

Choose a reason for hiding this comment

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

In addition, another thing we could do to here is have an object (similar to what we do in strings.tsx files) where we map emoji IDs to the appropriate unicode text and use this function to just check the array to make sure rating is valid and render the span with the approriate unicode.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

changed in 2f32d7c thx!

client/overview/survey/test/index.test.js Show resolved Hide resolved
Copy link
Contributor

@oaratovskyi oaratovskyi left a comment

Choose a reason for hiding this comment

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

Thanks for your work on this PR! I have left a few nitpicks and one minor comment (about translation)
Also I asked a question in slack related to the survey results p1710168340907879/1709737434.351679-slack-C03KTTK2YMA
could you please take a final look? I'll be happy to approve after that! 🚢

@dpaun1985
Copy link
Contributor Author

handover comments pepjwh-Ok-p2#comment-926

@oaratovskyi oaratovskyi self-requested a review March 12, 2024 10:13
@Jinksi Jinksi self-assigned this Mar 28, 2024
@Jinksi Jinksi changed the title payments overview survey Add payments activity widget emoji survey Mar 28, 2024
@Jinksi Jinksi changed the base branch from develop to add/8389-create-payment-activity-wrapper March 28, 2024 01:51
@Jinksi Jinksi force-pushed the add/8197-overview-survey branch from 0f03609 to 1791f0d Compare March 28, 2024 02:06
@dpaun1985 dpaun1985 requested a review from a team as a code owner March 28, 2024 02:42
@Jinksi
Copy link
Member

Jinksi commented Mar 28, 2024

Ah FFS I made a mess of this rebase

Base automatically changed from add/8389-create-payment-activity-wrapper to develop March 28, 2024 02:49
@Jinksi Jinksi force-pushed the add/8197-overview-survey branch from 7406ab0 to 1791f0d Compare March 28, 2024 04:38
@Jinksi
Copy link
Member

Jinksi commented Mar 28, 2024

Moved to #8506 to clean up the mess I made of the commit history. Commits have been cherry-picked to branch add/8484-payment-activity-widget-survey.

@Jinksi Jinksi closed this Mar 28, 2024
@Jinksi Jinksi removed the request for review from a team March 28, 2024 05:49
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.

8 participants