Recommendations: Add Jetpack Product Suggestions step #20814

kallehauge · 2021-08-25T12:38:07Z

Changes proposed in this Pull Request:

[API] Add support for new /jetpack/v4/recommendations/product-suggestions endpoint.
[Plugin] Change the illustrationPath attribute of <PromptLayout> to be optional, so we can use the same layout component for full width content.
[Plugin] Add a new <MoneyBackGuarantee> component.
[Plugin] Add a new Query Data component to fetch Product Suggestions (<QueryRecommendationsProductSuggestions>).
[Plugin] Add a new Product Suggestions step in the Jetpack Assistant (done by adding it to the Recommendations routing system and two new components: <ProductSuggestions> and <ProductSuggestion>).
[Plugin] Add a new hidden "landing page" like step to the Jetpack Assistant (<ProductPurchased>) that will only be displayed if a user is directly forwarded to it (used as return URL from the checkout)

Jetpack product discussion

PT: pbNhbs-Yp-p2
Design: p6TEKc-5bW-p2
Task: 1161179020265237-as-1200537408139848
API: D66016-code

Does this pull request change what data or activity we track or use?

This Pull Request adds the following Analytics Tracking Events:

jetpack_recommendations_product_suggestion_click: When a user selects one of the suggested products.
jetpack_recommendations_product_suggestion_learn_more_click: When a user clicks one of the "Learn More" links located at the suggested products.
jetpack_recommendations_product_suggestion_purchased: When a user has gone through checkout and been returned to the Jetpack Assistant.
jetpack_recommendations_product_suggestions_decide_later_click: When a user skips the Purchase Product step.

Testing instructions:

Initial setup and how to find the Product Suggestion step

Get a local version of the repository running.
Create a successful Jetpack connection (you can do this by connection the website with a Jetpack Free plan).
Go to /wp-admin/admin.php?page=jetpack#/recommendations.
On the second step of the Recommendations wizard you should see the Product Suggestions step.

Things to test

Click on the Product Learn More links. These should open in a new tab.
When you press the Decide later link you should be taken to either the WooCommerce step or Monitor step depending on your website.
When you click the Continue with [Product Name] button you should be redirected to checkout where the product is pre-selected.
When you are finished in the checkout you should be redirected to the new landing page which should display 3 bullets if you purchased Jetpack Backup Daily or 5 bullets if you selected Jetpack Security Daily.
When you've purchased a product on the product suggestions step, you should no longer see any upsell/upgrade suggestions on the final summary screen with all the features.

Screenshots

Product Suggestion step: Desktop

Product Suggestion step: Tablet

Product Suggestion step: Phone

Product Purchased step: Desktop

Product Purchased step: Tablet

Product Purchased step: Phone

Product Purchased step: Jetpack Backup Daily example

We do this so we can use the same template with progress and header (question) for content that wants to use 100% width.

This step is not part of the regular "Next step" flow and is meant to be used as a landing page after a customer has purchased a product through the "Product Suggestion" step.

This commit aims to add all missing step data and product suggestion data required for the product purchased step to function.

…uniform

github-actions · 2021-08-25T12:40:07Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ All commits were linted before commit.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

Jetpack plugin:

Next scheduled release: September 7, 2021.
Scheduled code freeze: August 30, 2021.

Backup plugin:

Next scheduled release: September 7, 2021.
Scheduled code freeze: August 30, 2021.

We do this to reflect the recent component name change in the event.

matticbot · 2021-08-27T17:26:19Z

Caution: This PR has changes that must be merged to WordPress.com
Hello kallehauge! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D66036-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

It was possible that the product-suggestions-selection value was not set before the user was redirected to the checkout which would cause the purchased step/landing page to not display any information.

kallehauge · 2021-08-30T01:12:31Z

I'll let Design weigh in on this, but maybe it would make sense to center things on mobile?

CC: @Automattic/jetpack-design (just to make sure Jeremy's comment isn't lost 😄 🔔 )

kallehauge · 2021-08-30T01:29:55Z

Thank you very much for the review @jeherve and your help with the dependencies files! 🙇

In some cases (not sure what caused it), I would get a blank screen when the suggestions loaded, and a js error:
react-dom.min.js?ver=16.13.1:125 TypeError: o.map is not a function
    at admin.js?ver=10.1-alpha:formatted:42613

I have not been able to product the error by just using the Assistant but I'm assuming you experienced one of two scenarios:

You received an errors response from the Product Suggestions API endpoint which - from the previous code - was still a successful response and not an array which .map relies on.
The reducer gave us the default state instead of an array and the logic had a fatal error so we never got to the point where we actually received the suggestions array instead - it just stopped.

Both basically means the same from a "what can we do to avoid it" perspective: The error and response handling might not have been the best. So I've added an isArray condition as part of a better loading experience of which should eliminate us trying to iterate over suggestions before we're really, really ready.

Reference:

I saw no benefits mentioned when upgrading to a Backup daily plan. Oddly enough, purchasedProductSlug was set to false:

The only reason purchasedProductSlug would be false is if we have to resort to the default value of getDataByKey and it does look like we hit an oldie here, where we try to store data while also redirecting the user to a new page and not just update the state and replace a component on the same page.

(I'm still relatively new to React and worked from an assumptions about combining onClick and useCallback would help us with this scenario but that is what happens when you work from assumptions and not validation 😅 ).

I have done the following:

Reworked onClick to use preventDefault and window.location.href ✋
Made some separation of concerns. We still trigger an analytics event and relevant step data in the onClick function but instead depend on remote data to determine what was purchased 💸

We do this instead of relying on the onClick data since it will always be tricky and have a chance of failing when we redirect to another site.

Luchadores · 2021-08-30T13:50:30Z

Looks good to me 🙌 And liked promised, here is the screenshot for the mobile change regarding the pricing position.

Thank you! 🚀

We change the layout to use grid instead of flex so we could place the price inbetween the description and actions on small devices but move it to the right of the other content on smaller phones.

kallehauge · 2021-08-30T15:33:01Z

Looks good to me 🙌 And liked promised, here is the screenshot for the mobile change regarding the pricing position.

Awesome work @Luchadores! I have implemented the suggestion and updated the screenshot in the PR description.

p1630330099088000-slack-C0D96691V

…product-suggestion-step

sdixon194

This works well for me! Let's do it 👍

addressed

github-actions · 2021-08-30T18:04:51Z

Great news! One last step: head over to your WordPress.com diff, D66036-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

* master: (34 commits) Fix issue templates (#20880) Social Icon Widget: Fix Icons Not Saving (#20862) Dashboard: Add a specific message for a site that is too new to have a rewind status (#20863) Add additional properties to WC Analytics events (#20812) Connection: add spinner for the "Connect" button (#20872) Update storybook monorepo to v6.3.7 (#20877) Lightweight PHPCS (#20876) Recommendations: Add Jetpack Product Suggestions step (#20814) Update babel monorepo (#20875) Update wordpress monorepo (#20873) cli: Check subprocess exit statuses in docker commands (#20861) Facebook Widget: Fix URL error when adding widget (#20864) Stats: make nudges collapsible (#20765) Remove temporary Newspack block override css (#20868) Allow ZIP uploads via Calypso (#20860) Sync Package Release v1.26.0 (#20870) Connection: remove in-place in secondary flows (#20739) BUILD_DIR -> BUILD_BASE in initial checks (#20857) E2E tests: Fix missing action for atomic workflow (#20866) Boost: Fix skip proxy origins to load css during critical CSS generation (#20793) ...

anomiex · 2021-08-31T17:21:23Z

r231018-wpcom

kallehauge added 12 commits August 25, 2021 00:36

Add Money Back Guarantee component

1430431

Recommendation Prompt Layout: Make illustration optional

9ede148

We do this so we can use the same template with progress and header (question) for content that wants to use 100% width.

Recommendations: Add new Product Suggestion components

3b57689

Recommendations: Introduce new Product Suggestion step

5bf6400

Add changelogger entry

4c73aac

Recommendations: Add Product Purchased step illustration

498a336

Recommendations: Add Product Purchased step component

3eb892e

Recommendations: Add a Product Purchased hidden step

87e9697

This step is not part of the regular "Next step" flow and is meant to be used as a landing page after a customer has purchased a product through the "Product Suggestion" step.

Recommendations: Tie together Product Suggestion and Purchased logic

cb57e79

This commit aims to add all missing step data and product suggestion data required for the product purchased step to function.

Recommendations: Use constants for Jetpack Plans

e5eaf48

Recommendations: Encode Pruduct Suggestion return URL

daa27f1

Recommendations: Update Product Suggestion tracking names to be more …

637b4a6

…uniform

kallehauge requested a review from IanRamosC August 25, 2021 12:38

github-actions bot added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ Admin Page React-powered dashboard under the Jetpack menu labels Aug 25, 2021

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Aug 25, 2021

kallehauge added 10 commits August 26, 2021 21:29

Recommendation: unify Upsell and Product Suggestion eligible

0fab3e9

Recommendations: Add checkout logic to Product Suggestion

3d6c77b

Merge branch 'master' into add/recommendation-product-suggestion-step

b79dcc3

Jetpack API: Add Recommendations Product Suggestions endpoint

ca5171a

Recommendations: Add Product Suggestions to Redux

fba9b33

Recommendations: Refactor Product Suggestions to use remote data

e35142b

Recommendations: Use remote data on product purchased step

04e7f79

Recommendations: Rename "product-suggestion" to plural

4db3721

Recommendations: Rename <ProductSuggestionItem> to <ProductSuggestion>

8814150

API: Added Recommendations Product Suggestion changelog

bc89dfb

github-actions bot added the [JS Package] API label Aug 27, 2021

kallehauge added 2 commits August 27, 2021 02:50

Recommendations: Update Product Suggestions event name

c3a51f8

We do this to reflect the recent component name change in the event.

Recommendations: Prevent loading error on product purchased step

666799c

kallehauge mentioned this pull request Aug 27, 2021

Recommendations: Use redirect manager for product suggestions #20859

Closed

kallehauge removed the request for review from IanRamosC August 29, 2021 15:50

kallehauge added 3 commits August 29, 2021 17:52

Merge branch 'master' into add/recommendation-product-suggestion-step

5de5296

Recommendations: Trigger checkout redirect after saving data

abb10c1

It was possible that the product-suggestions-selection value was not set before the user was redirected to the checkout which would cause the purchased step/landing page to not display any information.

Recommendations: Harden the render conditions for product suggestions

1d66bd3

kallehauge requested a review from jeherve August 30, 2021 01:30

kallehauge added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Aug 30, 2021

Recommendations: Use remote data to determine purchased product

42cdf73

We do this instead of relying on the onClick data since it will always be tricky and have a chance of failing when we redirect to another site.

sdixon194 added this to the jetpack/10.1 milestone Aug 30, 2021

Recommendations: Change layout of <ProductSuggestion>

bb26ccf

We change the layout to use grid instead of flex so we could place the price inbetween the description and actions on small devices but move it to the right of the other content on smaller phones.

Merge remote-tracking branch 'origin/master' into add/recommendation-…

0f1d9f1

…product-suggestion-step

sdixon194 approved these changes Aug 30, 2021

View reviewed changes

sdixon194 enabled auto-merge (squash) August 30, 2021 17:51

sdixon194 merged commit a9e0e05 into master Aug 30, 2021

sdixon194 deleted the add/recommendation-product-suggestion-step branch August 30, 2021 18:03

github-actions bot removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. [Status] Design Input Requested [Status] Needs Design Review Design has been added. Needs a review! labels Aug 30, 2021

kallehauge mentioned this pull request Sep 23, 2021

Jetpack Recommendations: Fix existing Product Suggestions tracks #21171

Merged

coder-karen removed the [Status] Needs Privacy Updates Our support docs will need to be updated to take this change into account label Dec 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Recommendations: Add Jetpack Product Suggestions step #20814

Recommendations: Add Jetpack Product Suggestions step #20814

kallehauge commented Aug 25, 2021 •

edited

Loading

github-actions bot commented Aug 25, 2021 •

edited

Loading

matticbot commented Aug 27, 2021

kallehauge commented Aug 30, 2021

kallehauge commented Aug 30, 2021 •

edited

Loading

Luchadores commented Aug 30, 2021 •

edited

Loading

kallehauge commented Aug 30, 2021 •

edited

Loading

sdixon194 left a comment

github-actions bot commented Aug 30, 2021

anomiex commented Aug 31, 2021

Recommendations: Add Jetpack Product Suggestions step #20814

Recommendations: Add Jetpack Product Suggestions step #20814

Conversation

kallehauge commented Aug 25, 2021 • edited Loading

Changes proposed in this Pull Request:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Screenshots

github-actions bot commented Aug 25, 2021 • edited Loading

matticbot commented Aug 27, 2021

kallehauge commented Aug 30, 2021

kallehauge commented Aug 30, 2021 • edited Loading

Luchadores commented Aug 30, 2021 • edited Loading

kallehauge commented Aug 30, 2021 • edited Loading

sdixon194 left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 30, 2021

anomiex commented Aug 31, 2021

kallehauge commented Aug 25, 2021 •

edited

Loading

github-actions bot commented Aug 25, 2021 •

edited

Loading

kallehauge commented Aug 30, 2021 •

edited

Loading

Luchadores commented Aug 30, 2021 •

edited

Loading

kallehauge commented Aug 30, 2021 •

edited

Loading