Checkout: Add the “Number of licenses” dropdown in Akismet checkout #84393

elliottprogrammer · 2023-11-21T22:33:28Z

In this PR we add the "Number of licenses" dropdown in Akismet checkout, along with the logic & functionality to adjust the Akismet Pro 500 product's licensed-quantity value. (see image and project links below)

Related to:

PT: Akismet Checkout – Multiple licenses: pbNhbs-8My-p2
Akismet Checkout: Multiple Licenses – Implementation Plan: pbNhbs-8P6-p2

Still TODO in a follow-up PR(s):

Add "Unlimited sites (Akismet Business)" as an option in the dropdown, that when “Unlimited sites (Akismet Business)” is selected in the dropdown, replace the Pro product in the cart with Akismet Business. If 1 - 4 licenses is selected, replace the Business product with Akismet Pro.
Adjust the line-item cost/price display per per project/design specs. (Or possibly adjust the line-item to display the math, for example: "3 licenses x $119.40 per license = $358.20”
Reflect the number of licenses selected within the "Included with your purchase" summary in the right side column.
Possibly refactor the dropdown into dropdown-like buttons (like the billing-term variation picker) as opposed to an HTML Select element (because the default styles and behavior of an HTML Select element is possibly undesired (especially in mobile view) in checkout).

Testing Instructions

First apply patch D128326-code to your sandbox and sandbox public-api.wordpress.com.
Checkout this PR branch and yarn-start
Go to https://akismet.com/pricing and select/click the "Get Pro" button.
On the checkout page, in the URL, replace https://wordpress.com with http://calypso.localhost:3000 and press enter.
You should see the "Number of licenses" dropdown, like in the image above.
Select various options in the dropdown, verify it adjusts the number of licenses and adjusts the price accordingly.
Change billing-term variation and verify everything still works as intended.
Also try selecting the number of sites using the keyboard. (Enter or space opens the dropdown. up and down arrows to change the quantity, Enter to select.)
Try to break things or find issues.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

github-actions · 2023-11-21T22:33:42Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-11-21T22:34:24Z

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

Sections (~785 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout      +3996 B  (+0.2%)     +785 B  (+0.2%)

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 (~785 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal           +3996 B  (+0.3%)     +785 B  (+0.2%)
async-load-calypso-blocks-editor-checkout-modal      +3996 B  (+0.4%)     +785 B  (+0.3%)

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.

sirbrillig

Tested following the instructions and it works as described! I don't have any specific concerns, but I did notice some untranslated strings which I noted inline.

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

with the logic & functionality to adjust the licensed-quantity value of the Akismet Pro 500 product.

sirbrillig

Looks fine to me although I don't know the details of your project so I leave final review to your team.

CodeyGuyDylan

Left some comments, mostly nitpicks. I think my biggest thought is about trying to determine the akismet specific values later on rather than at the top layer of the checkout

CodeyGuyDylan · 2023-11-22T18:15:34Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

+import { FunctionComponent, useEffect, useCallback, useState } from 'react';
+import FormLabel from 'calypso/components/forms/form-label';
+import FormSelect, { FormSelectProps } from 'calypso/components/forms/form-select';


Nitpick, you can import the FormSelectProps and FunctionComponent types separately as a type like as is done below with AkismetProQuantityDropDownProps

CodeyGuyDylan · 2023-11-22T18:16:14Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

+import type { AkismetProQuantityDropDownProps } from './types';
+
+const AkismetSitesSelectHeading = styled.div`
+	font-size: 1.1em;


I think we should probably use rem here right? I guess I am not sure but that's generally what I see being used

Yeah I'm not sure... I was thinking that too, but looking at the rest of the checkout package, it seems to be using em's . For example, all throughout this file: https://github.com/Automattic/wp-calypso/blob/trunk/packages/wpcom-checkout/src/checkout-line-items.tsx#L89

rem is probably more ideal to ensure a consistent styling across the interface, but I think em was just used enough that it took root in the package. This could be something we consider going forward with the checkout redesign.

CodeyGuyDylan · 2023-11-22T18:22:04Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

+} ) => {
+	const translate = useTranslate();
+
+	const [ quantityState, setQuantityState ] = useState( responseCart.products[ 0 ].quantity ?? 1 );


It looks like this default state sets the quantity to 1 if the parameter is any higher than for (i.e. :-q-9) I think we might want to just default it to the highest quantity possible, in this case 4, if this is the case. It's probably not a big deal since the user would have to manually change the URL but I think that default makes more sense in that specific scenario

No, I believe I have this as intended. I want the initial state of the dropdown to be the quantity value of Akismet Pro product that is currently in the cart (for example if the user has 3 sites selected (quantity: 3) and the user reloads/refreshes the checkout page), or if the current quantity is 0 or undefined (non truthy) for whatever reason, then it should default to 1 site (quantity 1).

CodeyGuyDylan · 2023-11-22T18:37:09Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

+				<option key="quantity-1" value="1">
+					{ translate( '1 Site' ) }
+				</option>
+				<option key="quantity-2" value="2">
+					{ translate( '2 Sites' ) }
+				</option>
+				<option key="quantity-3" value="3">
+					{ translate( '3 Sites' ) }
+				</option>
+				<option key="quantity-4" value="4">
+					{ translate( '4 Sites' ) }
+				</option>


This is opinionated, but i'd put this into some sort of mapping function since they're all exactly the same except for the number. So like for i from 1 to 4 return <option>.... etc

Yeah good point, thanks for the feedback. I'll go ahead and do that. 👍
I didn't do that initially because in a followup PR I'll be adding "Unlimited sites (Akismet Business)" as a 5th option in the dropdown, but I can still map through the first 4 and then append the "Unlimited sites (Akismet Business)" option to the end (in a followup PR).

CodeyGuyDylan · 2023-11-22T18:39:19Z

client/my-sites/checkout/src/components/checkout-main.tsx

+				recordTracksEvent( 'calypso_checkout_akismet_pro_quantity_change', {
+					product_slug: productSlug,
+					new_quantity: newQuantity,
+				} )


Would it be possible to track previous quantity here as well? I am not sure but it seems like it might be useful info

Yeah good point! Might be useful info. Will do. 👍

CodeyGuyDylan · 2023-11-22T18:50:08Z

client/my-sites/checkout/src/components/checkout-main.tsx

+					isAkPro500Cart={ isAkismetProMultipleLicensesCart }
+					onChangeAkProQuantity={ changeAkismetPro500CartQuantity }


I think we should try and avoid passing these values in so early and then passing them 2-3 more components. Would it be possible to determine these values from the component that uses them? (i.e. wp-order-review-line-items)

Yes, I'll move them to wp-order-review-line-items.tsx.

jjchrisdiehl · 2023-11-28T01:49:19Z

Is there a reason the new dropdown for the number of licenses differs so much from the existing dropdowns found in checkout?

Original dropdown

New dropdown

You could perhaps lift the styles off of the existing ItemVariationDropDown component to get a closer approximation.

…edback.

elliottprogrammer · 2023-11-28T04:18:56Z

Is there a reason the new dropdown for the number of licenses differs so much from the existing dropdowns found in checkout?

@jjchrisdiehl, Thanks for reviewing and for your feedback! 🙂
Yes I later thought about this and made a comment about it up in the PR description below the heading, "Still TODO in a follow-up PR(s):", Item 4:

"4. Possibly refactor the dropdown into dropdown-like buttons (like the billing-term variation picker) as opposed to an HTML Select element (because the default styles and behavior of an HTML Select element is possibly undesired (especially in mobile view) in checkout)."

Yeah, the billing-term variation picker is actually made with a combination of HTML buttons and react state that make it look and behave like an HTML Select dropdown element, except that opposed to an actual Select element, it does not take on the default styles and unique browser behavior than an HTML Select dropdown element has (especially when using a mobile device).
I'm guessing we most likely want two dropdowns to look and behave the exact same (just like the current billing-term variation picker), so therefore I'll need to refactor the HTML Select element I used initially, into a set of dropdown "buttons" instead. I'll go ahead and do that here in this PR. 👍

Just like the billing-term variant picker.

jjchrisdiehl · 2023-11-29T01:36:10Z

Re: translating strings

Some of the strings, like 1 Site... 2 Sites...etc ought to be spelled out One Site... Two Sites...etc according to our style guide PCYsg-5n-p2 (see Numbers).

jjchrisdiehl · 2023-11-29T01:39:38Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

+`;
+
+const AkismetSitesSelectHeading = styled.div`
+	font-size: ${ hasCheckoutVersion( '2' ) ? '14px' : 'inherit' };


The ${ hasCheckoutVersion( '2' ) } code is actually only temporarily added for our recent Checkout Redesign project, since this doesn't include Akismet or Jetpack checkout it may be good to remove these ternaries. @sirbrillig I'm not sure this would harm the end user experience at all, it may just be something we have to remember to clean up later if this PR is merged with the function in place.

I've removed the hasCheckoutVersion ternaries (and import). 👍
Thanks so much for reviewing and for your feedback @jjchrisdiehl! 🙌

jjchrisdiehl · 2023-11-29T01:39:41Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

@@ -0,0 +1,253 @@
+import { Gridicon } from '@automattic/components';
+import { hasCheckoutVersion } from '@automattic/wpcom-checkout';


The import can be removed too

jjchrisdiehl · 2023-11-29T01:39:44Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	padding: ${ hasCheckoutVersion( '2' ) ? '4px 16px' : '14px 16px' };


jjchrisdiehl · 2023-11-29T01:39:46Z

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx

+const Dropdown = styled.div`
+	position: relative;
+	width: 100%;
+	margin: ${ hasCheckoutVersion( '2' ) ? '6px 0' : '16px 0' };


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

elliottprogrammer · 2023-11-29T16:13:53Z

Re: translating strings

Some of the strings, like 1 Site... 2 Sites...etc ought to be spelled out One Site... Two Sites...etc according to our style guide PCYsg-5n-p2 (see Numbers).

Ahh yes, I see! Thank you @jjchrisdiehl! TIL!
Hmm, I was following the mockup created by the Design team: p1HpG7-pGR-p2
I'll leave a comment on the design post to make them aware of this, and see what they want to do. 👍

robertsreberski

Tests good to me, seems like all feedback was addressed 👍

matticbot · 2023-12-08T02:31:17Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/ak-pro-multiple-licenses-approach-b on your sandbox.

a8ci18n · 2023-12-08T04:18:55Z

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

a8ci18n · 2023-12-11T08:32:31Z

Translation for this Pull Request has now been finished.

…84393)

elliottprogrammer self-assigned this Nov 21, 2023

elliottprogrammer requested a review from a team as a code owner November 21, 2023 22:33

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

elliottprogrammer requested a review from a team November 21, 2023 22:47

sirbrillig reviewed Nov 21, 2023

View reviewed changes

client/my-sites/checkout/src/components/akismet-pro-quantity-dropdown/index.tsx Outdated Show resolved Hide resolved

elliottprogrammer added 2 commits November 22, 2023 06:27

Add the “Number of licenses” dropdown in Akismet checkout...

355cf44

with the logic & functionality to adjust the licensed-quantity value of the Akismet Pro 500 product.

Add missing "translate()"s per feedback. Thank you.

15f4e2b

elliottprogrammer force-pushed the add/ak-pro-multiple-licenses-approach-b branch from 9c9178e to 15f4e2b Compare November 22, 2023 11:28

sirbrillig approved these changes Nov 22, 2023

View reviewed changes

CodeyGuyDylan requested changes Nov 22, 2023

View reviewed changes

Use 'import type' for types, per feedback.

8f723fc

elliottprogrammer added 3 commits November 27, 2023 21:08

Use .map for the dropdown options, per feedback.

66f3cd5

Dropdown change event tracking: Add prevQuantity property, per feedback.

03c71ce

Move dropdown functions into 'wp-order-review-line-items.tsx', per fe…

ebb18e0

…edback.

elliottprogrammer added the [Status] In Progress label Nov 28, 2023

Refactor HTML Select dropdown into button dropdown list...

96ac894

Just like the billing-term variant picker.

elliottprogrammer removed the [Status] In Progress label Nov 28, 2023

elliottprogrammer requested review from CodeyGuyDylan and jjchrisdiehl November 28, 2023 23:27

jjchrisdiehl reviewed Nov 29, 2023

View reviewed changes

client/my-sites/checkout/src/components/wp-order-review-line-items.tsx Show resolved Hide resolved

Remove 'hasCheckoutVersion' ternaries, per feddback.

13b92c9

robertsreberski approved these changes Nov 30, 2023

View reviewed changes

elliottprogrammer added 2 commits December 6, 2023 21:43

Merge branch 'trunk' into add/ak-pro-multiple-licenses-approach-b

198223b

Put Akismet quantity dropdown behind feature-flag. (#84945)

e1551fe

elliottprogrammer merged commit 62c82af into trunk Dec 8, 2023
12 checks passed

elliottprogrammer deleted the add/ak-pro-multiple-licenses-approach-b branch December 8, 2023 02:56

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 Dec 8, 2023

cpapazoglou pushed a commit that referenced this pull request Dec 11, 2023

Checkout: Add the “Number of licenses” dropdown in Akismet checkout (#…

4ac6392

…84393)

sirbrillig mentioned this pull request Mar 19, 2024

Checkout: Fix Akismet license dropdown in v2 checkout #88692

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: Add the “Number of licenses” dropdown in Akismet checkout #84393

Checkout: Add the “Number of licenses” dropdown in Akismet checkout #84393

elliottprogrammer commented Nov 21, 2023 •

edited

Loading

github-actions bot commented Nov 21, 2023 •

edited by matticbot

Loading

matticbot commented Nov 21, 2023 •

edited

Loading

sirbrillig left a comment

sirbrillig left a comment

CodeyGuyDylan left a comment

CodeyGuyDylan Nov 22, 2023

CodeyGuyDylan Nov 22, 2023

elliottprogrammer Nov 28, 2023

jjchrisdiehl Nov 28, 2023

CodeyGuyDylan Nov 22, 2023

elliottprogrammer Nov 28, 2023

CodeyGuyDylan Nov 22, 2023

elliottprogrammer Nov 28, 2023

CodeyGuyDylan Nov 22, 2023

elliottprogrammer Nov 28, 2023

CodeyGuyDylan Nov 22, 2023

elliottprogrammer Nov 28, 2023

jjchrisdiehl commented Nov 28, 2023

elliottprogrammer commented Nov 28, 2023 •

edited

Loading

jjchrisdiehl commented Nov 29, 2023

jjchrisdiehl Nov 29, 2023

elliottprogrammer Nov 29, 2023

jjchrisdiehl Nov 29, 2023

jjchrisdiehl Nov 29, 2023

jjchrisdiehl Nov 29, 2023

elliottprogrammer commented Nov 29, 2023

robertsreberski left a comment

matticbot commented Dec 8, 2023

a8ci18n commented Dec 8, 2023

a8ci18n commented Dec 11, 2023

		isAkPro500Cart={ isAkismetProMultipleLicensesCart }
		onChangeAkProQuantity={ changeAkismetPro500CartQuantity }

		@@ -0,0 +1,253 @@
		import { Gridicon } from '@automattic/components';
		import { hasCheckoutVersion } from '@automattic/wpcom-checkout';

Checkout: Add the “Number of licenses” dropdown in Akismet checkout #84393

Checkout: Add the “Number of licenses” dropdown in Akismet checkout #84393

Conversation

elliottprogrammer commented Nov 21, 2023 • edited Loading

Testing Instructions

Pre-merge Checklist

github-actions bot commented Nov 21, 2023 • edited by matticbot Loading

matticbot commented Nov 21, 2023 • edited Loading

sirbrillig left a comment

Choose a reason for hiding this comment

sirbrillig left a comment

Choose a reason for hiding this comment

CodeyGuyDylan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jjchrisdiehl commented Nov 28, 2023

elliottprogrammer commented Nov 28, 2023 • edited Loading

jjchrisdiehl commented Nov 29, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elliottprogrammer commented Nov 29, 2023

robertsreberski left a comment

Choose a reason for hiding this comment

matticbot commented Dec 8, 2023

a8ci18n commented Dec 8, 2023

a8ci18n commented Dec 11, 2023

elliottprogrammer commented Nov 21, 2023 •

edited

Loading

github-actions bot commented Nov 21, 2023 •

edited by matticbot

Loading

matticbot commented Nov 21, 2023 •

edited

Loading

elliottprogrammer commented Nov 28, 2023 •

edited

Loading