#6729332 Core implementation of Professional Email upsell content

Changes proposed in this Pull Request

• This PR builds on PR #56671 to flesh out the Professional Email upsell from a content and basic interaction perspective. For now, it includes the following features:
  • Content from i2 design – pcDL0W-I2-p2#comment-963
  • Mobile, tablet, and desktop layouts — the tablet sizes are a hybrid with the buttons horizontal; please take a look at those sizes
  • Logic to skip adding email
  • Validation of mailbox fields
  • Logic to add the mailbox to the cart (that doesn’t mean it’s fully working however — more below)
• The following items are not addressed in this PR:
  • We are not wiring in the domain — we’re using a hard-coded example.com, which will fail validation when adding the product to the cart
  • We don’t have back end support for having some of the mailbox fields be optional – that will be addressed separately

Feedback requested
I have not maintained 100% fidelity to the Figma design, with the biggest area of variance being padding and margins, where I’ve tried to aim for em-based values that are pretty close to the designs. I have also incorporated a lot of feedback from @saygunnyc provided via Slack (in this thread: p1633001245007300-slack-C01TJT42PMM) and in this P2 thread: pcDL0W-I2-p2#comment-1012

The other area that needs feedback is the tablet layout, where I’ve shifted to a columnar layout, but have kept the buttons horizontal. The biggest thing this does is reduce the prominence of the “Why Professional Email?” text — LMK if you think this text needs to be more prominent or separated.

Testing instructions

• As in PR #56671, the first thing we need to do is find an existing receipt ID for one of your sites. Follow these steps to find a site slug and receipt ID:
  • For a site with purchases on it, navigate to Upgrades -> Purchases and then click on the “Billing History” tab
  • For one of the items in the list, click on the “View receipt” link
  • Look at the URL and note the last two /-separated pieces — these are the site slug and receipt ID (in that order)
• Run this branch locally or via the live branch (via the link in this comment)
• Manually type the following path into the browser location box: /checkout/offer-professional-email/:receiptId/:siteSlug with :receiptId and :siteSlug replaced by the two values above (which we use in the reverse order for this URL)
• Verify that you see the new content using a domain name of example.com
• Try viewing the content at different screen sizes, especially mobile, tablet, and desktop widths – verify that things look OK, are easy to navigate, and match the designs
• Try adding data to the two input fields, including empty/invalid data — when you enter invalid data, you should see warnings
• Try refreshing the page and immediately clicking the “Add Professional Email” button — you should see validation errors
• Try entering a valid mailbox name and password, and then click “Add Professional Email”
• Verify that you see an error stating that you don’t own the domain — you can take a look at the network traffic to verify that we’re sending valid product data with the extra, quantity, and new_quantity data fields specified

Screenshots

Desktop

Tablet

Mobile

Related to #56671