Add Cart Variant Dropdown Selector for A/B Test #61174

cbauerman · 2022-02-16T18:56:31Z

Changes proposed in this Pull Request

Restructure <ItemVariantPicker /> component to render either radio buttons or dropdown.
Add A/B Test calypso_jetpack_cart_with_dropdown_variant_selector_2 to Calypso to control which variant picker type is used.
Miscellaneous supporting changes.

Testing instructions

Boot branch as Calypso Blue
Add a product for a Jetpack Site to the cart
Verify the cart matches production in design
Use the Abacus link from pbxNRc-1rJ-p2 to add yourself to the treatment of the test
Refresh the cart and verify it now matches the design ( iIYWCXVJSm06ZfzbeEWUT0-fi-1834%3A23596 ) for the test:
Test the functionality of the dropdown selector
- Clicking and keyboard controls should work
- Space should open the sector, enter should select an option

github-actions · 2022-02-16T18:56:50Z

	https://calypso.live?image=registry.a8c.com/calypso/app:build-29538

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-29538&env=jetpack

matticbot · 2022-02-16T19:03:44Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~1269 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +3859 B  (+0.3%)    +1269 B  (+0.3%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~1269 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal           +3859 B  (+0.4%)    +1269 B  (+0.5%)
async-load-calypso-blocks-editor-checkout-modal      +3859 B  (+0.4%)    +1269 B  (+0.5%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

elliottprogrammer

Tested and works very good as described. Looks good comparing to design. Code looks good & I don't spot any issues, except for 2 small nit-picks I describe in the comments below.
LGTM! 👍

...tes/checkout/composite-checkout/components/item-variation-picker/item-variation-dropdown.tsx

cbauerman · 2022-03-17T20:54:17Z

client/my-sites/checkout/composite-checkout/components/item-variation-picker/index.tsx

-	<ItemVariationRadioButtons { ...props } />
-);
+export const ItemVariationPicker: FunctionComponent< ItemVariationPickerProps > = ( props ) => {
+	if ( props.isLoading ) {


this is a temporary construct, once the A/B Test is complete it can be safely removed.

cbauerman · 2022-03-17T20:55:39Z

client/my-sites/checkout/composite-checkout/components/wp-order-review-line-items.tsx

+											? 'dropdown'
+											: 'buttons'
+									}
+									isLoading={ isJetpackCheckout && isLoadingExperimentAssignment }


I tried separating the loading logic between here and the composite-checkout placeholder, but it still briefly flashed the radio buttons. isLoading is a temporary fix and can be removed once the test is complete.

cbauerman · 2022-03-17T20:56:17Z

client/my-sites/checkout/composite-checkout/components/item-variation-picker/placeholder.tsx

@@ -0,0 +1,43 @@
+import { keyframes } from '@emotion/react';


This whole component is part of a temporary fix and can be removed once the A/B test is complete.

sirbrillig

I didn't test it but the code looks good and I have no concerns from a payments perspective.

a8ci18n · 2022-03-17T23:16:35Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7185299

Thank you @cbauerman for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2022-03-24T23:33:20Z

Translation for this Pull Request has now been finished.

cbauerman added the [Status] In Progress label Feb 16, 2022

cbauerman self-assigned this Feb 16, 2022

cbauerman force-pushed the add/cart-dropdown-variant-selector branch 2 times, most recently from cc63200 to 841da18 Compare February 24, 2022 17:54

cbauerman force-pushed the add/cart-dropdown-variant-selector branch 2 times, most recently from ad90ccd to e7f3737 Compare March 8, 2022 17:59

cbauerman mentioned this pull request Mar 10, 2022

Add Wrapper around Cart Variant Picker #61816

Merged

cbauerman force-pushed the add/cart-dropdown-variant-selector branch from 174579b to 816e310 Compare March 14, 2022 19:39

cbauerman mentioned this pull request Mar 14, 2022

Refactor Variant Item Rendering #61929

Merged

cbauerman force-pushed the add/cart-dropdown-variant-selector branch from 816e310 to af13fd9 Compare March 14, 2022 22:08

cbauerman changed the base branch from trunk to update/variant-picker-price March 15, 2022 18:45

cbauerman changed the base branch from update/variant-picker-price to trunk March 15, 2022 18:47

cbauerman force-pushed the add/cart-dropdown-variant-selector branch 2 times, most recently from 34e6114 to 36b7da5 Compare March 15, 2022 18:49

cbauerman changed the base branch from trunk to update/variant-picker-price March 15, 2022 18:49

cbauerman added [Feature] Shopping Cart Anything related to the shopping cart in Calypso, like adding items to the cart, the mini-cart, etc. ABTest [Size] M Medium sized issue labels Mar 15, 2022

Base automatically changed from update/variant-picker-price to trunk March 15, 2022 21:48

cbauerman force-pushed the add/cart-dropdown-variant-selector branch from 9beeeff to 89a868d Compare March 17, 2022 03:50

cbauerman marked this pull request as ready for review March 17, 2022 04:12

cbauerman requested a review from a team as a code owner March 17, 2022 04:12

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 17, 2022

cbauerman requested review from a team March 17, 2022 04:12

cbauerman removed the [Status] In Progress label Mar 17, 2022

elliottprogrammer approved these changes Mar 17, 2022

View reviewed changes

...tes/checkout/composite-checkout/components/item-variation-picker/item-variation-dropdown.tsx Outdated Show resolved Hide resolved

...tes/checkout/composite-checkout/components/item-variation-picker/item-variation-dropdown.tsx Outdated Show resolved Hide resolved

Add feature flag for variant drop-down

f7dce37

cbauerman added 16 commits March 17, 2022 12:55

misc a11y and styling

be9c7d8

adjust dropdown options styling

f589c6d

improve closed/open indicator styling

e895af7

change term labels

f009de0

implement dropdown overlap

8db7ef0

Add CurrentOption button component

8afa170

add handlers for up & down arrow navigation

35ab03c

rework keyboard support

bbc9b8f

revert trivial, unused changes

f4f2782

refine dropdown component

b6e5701

Style refinements

05209c6

add experiment handling

2c439fe

revert term changes

2999b3c

revert changes from base branch

2771c21

add some themes selectors

16de23d

fix border color

fe884cd

cbauerman force-pushed the add/cart-dropdown-variant-selector branch from 8c7e627 to fe884cd Compare March 17, 2022 19:55

cbauerman added 2 commits March 17, 2022 12:59

Add cursor to dropdown options

7a3817a

add comment and fix chevron direction

705da6b

cbauerman commented Mar 17, 2022

View reviewed changes

sirbrillig reviewed Mar 17, 2022

View reviewed changes

cbauerman merged commit b3b0aca into trunk Mar 17, 2022

cbauerman deleted the add/cart-dropdown-variant-selector branch March 17, 2022 22:40

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 17, 2022

travisw mentioned this pull request Apr 19, 2022

Jetpack: roll out the treatment variation of the cart dropdown test #62893

Merged

jjchrisdiehl mentioned this pull request Dec 9, 2023

Checkout variant picker items can appear to merge with other line items at mobile width #84984

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Cart Variant Dropdown Selector for A/B Test #61174

Add Cart Variant Dropdown Selector for A/B Test #61174

cbauerman commented Feb 16, 2022 •

edited

Loading

github-actions bot commented Feb 16, 2022 •

edited by matticbot

Loading

matticbot commented Feb 16, 2022 •

edited

Loading

elliottprogrammer left a comment

cbauerman Mar 17, 2022

cbauerman Mar 17, 2022

cbauerman Mar 17, 2022

sirbrillig left a comment

a8ci18n commented Mar 17, 2022

a8ci18n commented Mar 24, 2022

Add Cart Variant Dropdown Selector for A/B Test #61174

Add Cart Variant Dropdown Selector for A/B Test #61174

Conversation

cbauerman commented Feb 16, 2022 • edited Loading

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Feb 16, 2022 • edited by matticbot Loading

matticbot commented Feb 16, 2022 • edited Loading

elliottprogrammer left a comment

Choose a reason for hiding this comment

cbauerman Mar 17, 2022

Choose a reason for hiding this comment

cbauerman Mar 17, 2022

Choose a reason for hiding this comment

cbauerman Mar 17, 2022

Choose a reason for hiding this comment

sirbrillig left a comment

Choose a reason for hiding this comment

a8ci18n commented Mar 17, 2022

a8ci18n commented Mar 24, 2022

cbauerman commented Feb 16, 2022 •

edited

Loading

github-actions bot commented Feb 16, 2022 •

edited by matticbot

Loading

matticbot commented Feb 16, 2022 •

edited

Loading