#5531649 ABTest, Plans: Launch `jetpackNewPurchaseIntroPricing` test

Changes proposed in this Pull Request

Launches 1196108640073826-as-1199527862646257.

• Create a new test in active-tests.js called jetpackNewPurchaseIntroPricing with two variants, withIntroPricing and withoutIntroPricing.
• Create a new iteration code-named NPIP, which stands for “new purchase introductory pricing.”
• Add logic to activate the NPIP iteration when the test variant reported for the current user is withIntroPricing.
• Create a new set of product card and product grid components for the NPIP iteration, copying originally from the default (I5) iteration.
• Modify styling and layout for the Plans and Pricing pages in the NPIP iteration to match the mock-ups in zp0udhbEB9dvdS4rB3GJ0z-fi-923%3A0 (see diagram i.8).

Implementation notes

I’m aware that a lot of the component code is copied and pasted. I did this for two reasons:

1. To save time developing the test; and
2. To make the test code easier to remove in the future.

It’s not the cleanest way to do things — in fact it makes me a bit itchy — but it was a compromise I made in the name of delivering on time.

Testing instructions

TIP: Compare closely with 1196108640073826-as-1199527862646257 for original design references. It includes links to mock-ups and a video walkthrough in the description.

Setup

• Open Calypso Blue in your testing environment.
• In the development helper pane in the lower right of the screen, hover over ABTESTS and then find jetpackNewPurchaseIntroPricing. Testing instructions follow for the withIntroPricing variant. The withoutIntroPricing variant should render all pages as they currently exist in production.
• Alternatively, or for environments in which the development helper isn’t available, you can append cloud-pricing-page=npip as a query parameter in your browser to show the NPIP variant.

Intro pricing banner

• Verify that an introductory pricing banner is visible at the top of the page, mentioning our 14-day money back guarantee.

(Calypso Green ONLY) Featured product header color

• Verify that the “Recommended” header and border in Calypso Green now use studio-pink-50 as their color (i.e., #C9356E). (NOTE: In other environments, this header should match the active theme, as in production.)

“You own this” and “Part of your current plan” markers

• Verify for products or plans that are already owned or included in an existing site purchase, a marker showing “You own this” or “Part of your current plan” is displayed in place of the item’s price. The marker should be on a light-gray background and be accompanied by a check-mark icon.

Scratched-out prices

• Verify that all products with discounts show the original price “scratched out” with a pink horizontal line, followed by the discounted price.
• Verify that all discounted prices are shown as if a 40% off coupon were already applied (e.g., if the original price was $19.95 per month, the discounted price should be $11.97 per month).

Billing term copy

• Verify that billing terms are written as either “/month, paid yearly” or “/month, paid monthly,” depending on which term is currently selected.

“You save 40%” and “Get started for free” ribbons

• Verify that all non-free, non-owned products show a yellow trapezoidal ribbon under their price with the bolded label “* You Save 40%.”

Positioning of product descriptions

• Verify that product descriptions have been moved from under the product name to below the call-to-action button.

Feature list bullet points

• Verify that the feature bullet points next to all products are now standard “discs” instead of green check marks.

Mid-page asterisk clauses

• Verify that in the middle of the page, where “All plans include priority support” is displayed, two more asterisk clauses are displayed above it:
  • Special introductory pricing, all renewals are at full price.
  • Monthly plans are 7-day money back guarantee.