#4077250 Jetpack Anti-Spam: Add Thank You note

Changes proposed in this Pull Request

• Add a Thank You note to display after a Jetpack Anti-Spam purchase.
• Since every Thank You note has different CTAs, the <ThankYou /> component controls, according to its props, what CTAs are displayed on each Thank You note. This approach is error prone, hard to maintain, and hard to extend. To fix this, I moved the definition of CTAs back to each Thank You note. Now, the <ThankYou /> component main concern is to render a ThankYou note along with its CTA, without having to understand how they work.
• I took the opportunity to transform most of the files to TypeScript.

Feel free to comment on the approach I took. I’m open to revert it and going through the easy path of adding one more condition/prop to the ThankYou component.

Testing instructions

Notes

Since this refactor touches Thank You notes components of other Jetpack products, it’s recommended to test them as well, so I have added instructions to do it.

Prerequisites:

• Self-hosted Jetpack site.
• Log events in the console by running localStorage.setItem( "debug", "calypso:analytics" );.

Instructions:

• Run this PR (you may have to run from yarn build from scratch).
• Visit http://calypso.localhost:3000/plans/my-plan/[site]?thank-you=&product=jetpack_anti_spam
• Verify you were presented with a Thank You note that looks like this:
  
• Click on [Go back to your site].
• Verify an event, associated with Jetpack Anti-Spam, was tracked:

calypso:analytics Record event "calypso_jetpack_product_thankyou" called with props {product_name: "anti-spam", site: "jetpack"}

• Visit http://calypso.localhost:3000/plans/my-plan/[site]?thank-you=&product=jetpack_anti_scan
• Verify you were presented with a Thank You note that looks like this:
  
• Click on [Add server credentials] (it’s possible that you won’t see the server credentials section if you don’t have Jetpack Scan in the site) or [See checklist].
• Verify an event, associated with Jetpack Scan, was tracked:

calypso:analytics Record event "calypso_jetpack_product_thankyou" called with props {product_name: "scan", site: "jetpack", value: "server-credentials"}

• Visit http://calypso.localhost:3000/plans/my-plan/[site]?thank-you=&product=jetpack_search
• Verify you were presented with a Thank You note that looks like this:
  
• Click on [Try Search and customize it now].
• Verify an event, associated with Jetpack Search, was tracked:

calypso:analytics Record event "calypso_jetpack_product_thankyou" called with props {product_name: "search", site: "jetpack", value: "customizer"}

Fixes 1181531115069428-as-1183391336755770

Demo

See images in the testing instructions section.