Proposed Changes
This PR replaces the billing term variant picker in checkout for WordPress.com with a set of radio buttons instead of a dropdown menu. Checkout for Jetpack sites will remain unchanged and continue to use the dropdown menu. The radio buttons implement the variant picker design laid out in #65968 (comment). This follows a series of adjustments made to the variant picker to improve its usefulness (see pbOQVh-24K-p2).
This new UI is only made available for people in the Explat AB test experiment group calypso_checkout_variant_picker_radio_2212
. A p2 post for this experiment is here: pbxNRc-2ce-p2
Screenshots
Before this change:
After this change, a monthly plan in the cart:
After this change, an annual plan in the cart:
After this change, an annual plan and a first-year discount in the cart:
Testing Instructions
There are unit tests which cover the new UI, but you can test it manually by assigning yourself to the treatment
experiment group in Abacus: 20943-explat-experiment
Add various products to your cart and visit checkout to see how they look. Specifically, WordPress.com plans will trigger the radio button variant picker. Jetpack plans will trigger the dropdown variant picker, but that should be unchanged.
Click to select different plans in the radio button variant picker and verify that they change as expected.
Unfortunately, no screenshots were provided by the developer.