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 payment activity widget emoji survey #8506

Merged
merged 77 commits into from
Apr 19, 2024

Conversation

Jinksi
Copy link
Member

@Jinksi Jinksi commented Mar 28, 2024

Fixes #8485

Note

Based on @dpaun1985's PR #8309 – commits have been cherry-picked to this branch.

Changes proposed in this Pull Request

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

The survey accepts 3 fields:

  • rating: 'very-unhappy', 'unhappy', 'neutral', 'happy', 'very-happy'
  • comments: user-defined text
  • wcpay-version: WooPayments plugin version as text (e.g. 7.4.0)

image

iOS screenshots

emoji-survey emoji-survey-comment emoji-survey-comment

Todo

Testing instructions

  • run wp option update _wcpay_feature_payment_overview_widget 1 in CLI (npm run cli if docker)
  • change your host file to point public-api.wordpress.com and dev-mc.a8c.com to your sandbox's IP address if you didn't already
  • log-in to your sandbox
  • apply the patch created in Create payments activity widget survey definition in WPCOM #8314 to your dev server (arc patch D140691)
  • in the client admin panel, go to Payments -> Overview
  • by clicking the first 3 emoji, a textarea for comments should appear
  • for the highest rates ( last 2 emojis ) the survey will be sent without comments
  • after submitting the results, go to https://dev-mc.a8c.com/marketing/survey/index.php?survey=wcpay-payments-overview and check the answers.
  • to re-submit, run wp option delete wcpay_survey_payment_overview_submitted to clear your local submission state
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

@botwoo
Copy link
Collaborator

botwoo commented Mar 28, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8506 or branch name add/8484-payment-activity-widget-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: e046bc3
  • Build time: 2024-04-19 02:28:47 UTC

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

Copy link
Contributor

github-actions bot commented Mar 28, 2024

Size Change: +1.56 kB (0%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 40.6 kB +186 B (0%)
release/woocommerce-payments/dist/index.css 40.6 kB +183 B (0%)
release/woocommerce-payments/dist/index.js 292 kB +1.19 kB (0%)
ℹ️ 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 158 B
release/woocommerce-payments/assets/css/success.rtl.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.02 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.02 kB
release/woocommerce-payments/dist/blocks-checkout.js 56.3 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 530 B
release/woocommerce-payments/dist/bnpl-announcement.css 531 B
release/woocommerce-payments/dist/bnpl-announcement.js 20 kB
release/woocommerce-payments/dist/cart-block.js 21.4 kB
release/woocommerce-payments/dist/cart.js 4.41 kB
release/woocommerce-payments/dist/checkout-rtl.css 599 B
release/woocommerce-payments/dist/checkout.css 599 B
release/woocommerce-payments/dist/checkout.js 37.5 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.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.6 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.8 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.6 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 kB
release/woocommerce-payments/dist/product-details-rtl.css 398 B
release/woocommerce-payments/dist/product-details.css 402 B
release/woocommerce-payments/dist/product-details.js 17.2 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 202 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 693 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.56 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 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 70.8 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.44 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

@nagpai
Copy link
Contributor

nagpai commented Apr 11, 2024

Manual testing

✅ - Survey appears in CardFooter as expected.

✅ - Text box prompting for reason appears for the lowest three ratings
✅ - Appreciate your feedback message appears correctly on submission
🟡 - I am able to see the comments in the MC tool, however I seem to be seeing a lot of warning messages like

Warning: Undefined array key "response" in /home/missioncontrol/public_html/marketing/survey/functions.php on line 604
[dev-mc.a8c.com/marketing/survey/index.php?survey=wcpay-payments-overview&question=comments]
[/home/missioncontrol/public_html/marketing/survey/index.php:107 get_question_details_table()]

Warning: Trying to access array offset on value of type null in /home/missioncontrol/public_html/marketing/survey/functions.php on line 674
[dev-mc.a8c.com/marketing/survey/index.php?survey=wcpay-payments-overview&question=comments]
[/home/missioncontrol/public_html/marketing/survey/functions.php:319 explode_response(), /home/missioncontrol/public_html/marketing/survey/index.php:105 get_separated_responses()]

I am not sure if this has got something to do with my local setup.

The summary report of the answers also shows some additional rows without labels.

image

@Jinksi
Copy link
Member Author

Jinksi commented Apr 11, 2024

Thanks @nagpai 🙌

I am not sure if this has got something to do with my local setup.

I also see these warnings, but also on other https://dev-mc.a8c.com/marketing/survey/ screens unrelated to this PR. I'll investigate to see if they are being introduced by this PR.

Update: Confirmed that these are harmless warnings and not introduced by this PR. Comparing another survey results page on dev-mc shows the same warnings, but mc works without warnings or problems. ✅

The summary report of the answers also shows some additional rows without labels.

Yes this is caused by test data that was added during development of this feature. We could clean up the sandbox DB to remove these erroneous survey responses.

@Jinksi Jinksi requested a review from a team April 11, 2024 23:10
@nagpai
Copy link
Contributor

nagpai commented Apr 12, 2024

Update: Confirmed that these are harmless warnings and not introduced by this PR. Comparing another survey results page on dev-mc shows the same warnings, but mc works without warnings or problems. ✅

Thanks so much for checking this! Glad to know it wasn't my setup. Indeed I did see the same warnings with other surveys too, when I checked. 👍

I will do a round of code review today.

@nagpai nagpai linked an issue Apr 12, 2024 that may be closed by this pull request
Copy link
Contributor

@nagpai nagpai left a comment

Choose a reason for hiding this comment

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

One non-blocking comment on CSS. Rest looks good to go. Thanks!

client/components/payments-activity/survey/style.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@naman03malhotra naman03malhotra left a comment

Choose a reason for hiding this comment

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

Great PR @Jinksi 🎉 , looks good to me. Left some comments none of which are blocker for the merge.

Ps: There are some conflicts after merging the data PR.


type ContextValue = ReturnType< typeof useContextValue >;

const WcPayOverviewSurveyContext = createContext< ContextValue | null >( null );
Copy link
Contributor

Choose a reason for hiding this comment

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

Love the implementation 🙌 though I am curious about the use of context for this feature, would love to know your thought process here.

Copy link
Member Author

Choose a reason for hiding this comment

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

This was all carried over from the previous PR #8309. My thought process is that the Context approach works well, so there is no need to change it 😆

client/components/payments-activity/survey/emoticon.tsx Outdated Show resolved Hide resolved
client/components/payments-activity/survey/emoticon.tsx Outdated Show resolved Hide resolved
client/components/payments-activity/survey/style.scss Outdated Show resolved Hide resolved
@Jinksi Jinksi changed the title Add payments activity widget emoji survey Add payment activity widget emoji survey Apr 18, 2024
@Jinksi
Copy link
Member Author

Jinksi commented Apr 18, 2024

Investigating failing GH checks...

@Jinksi Jinksi added this pull request to the merge queue Apr 19, 2024
Merged via the queue into develop with commit 2bb20b1 Apr 19, 2024
21 of 23 checks passed
@Jinksi Jinksi deleted the add/8484-payment-activity-widget-survey branch April 19, 2024 03:02
@shendy-a8c
Copy link
Contributor

We could clean up the sandbox DB to remove these erroneous survey responses.

@Jinksi I think we need to do that before launch. Created #8680.

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.

Epic: Emoji survey to gather feedback about payments activity widget