Add/user licensing banner #59892

oikeme · 2022-01-10T02:25:09Z

Changes proposed in this Pull Request

Add a banner to the checkout flow and pricing page that informs a user when they have unused licenses that can be activated.

Testing instructions

Ensure that the banner adjusts and is displayed correctly for the mobile experience with both the Jetpack Connect flow and the plans page flow.

Download the PR
Start both Calypso and Jetpack Cloud yarn start and yarn start-jetpack-cloud-p in order
Ensure that you have a purchase for a plan that has a license that has not yet been activated or associated with a site.

Plans Page Flow

Create a new JN site and connect the site.
Once the site is connected go to the plans page. Once on the plans page update the url from https://cloud.jetpack.com to http://jetpack.cloud.localhost:3001
Ensure that the banner is present and adjust correctly for mobile.

Jetpack Connect Flow

Attempt to connect a disconnected site. Once on the page to authorize the connection update the url from wordpress.com to http://calypso.localhost:3000/
Authorize the connection and ensure that you are taken to the pricing page and that the banner indicating an available license can be activated is present. Ensure that the banner adjust correctly for mobile

Related to #

Add a banner in the checkout process to indicate when there are licenses that are available and have not yet been activated

Add the key icon with the correct color and update the icon name

github-actions · 2022-01-10T02:25:24Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-24434
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-24434&env=jetpack

matticbot · 2022-01-10T02:32:52Z

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

Sections (~155 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
plans                       +760 B  (+0.1%)     +155 B  (+0.1%)
jetpack-connect             +760 B  (+0.1%)     +155 B  (+0.1%)
jetpack-cloud-pricing       +760 B  (+0.2%)     +155 B  (+0.1%)

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

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.

client/my-sites/plans/jetpack-plans/selector.tsx

client/components/jetpack/licensing-activation-banner/index.tsx

rcanepa · 2022-01-10T13:07:25Z

I made the PR point to my add/user-licensing-modal branch instead of trunk. That way, it is easier to understand your changes in isolation.

Comments

The key icon doesn't look aligned to the copy and we are missing a . at the end of the sentence, as shown in the following capture.

I think that the alignment issue can be fixed by relying on display: flex;.

On Jetpack Connect, the banner is too close to the Jetpack logo.

The banner appears regardless of having available licenses

We need to include the same checks that control the dialog/modal appearance.

Update the key icon viewbox to align it with the banner text. Also remove unnecessary nested div and fix the copy on the banner.

Remove unused css and update banner padding

Update the activate a license banner css for mobile and Jetpack connect and fix conditions under which the banner displays.

client/components/jetpack/licensing-activation-banner/index.tsx

vitozev · 2022-01-11T08:29:37Z

client/components/jetpack/licensing-activation-banner/style.scss

+.licensing-activation-banner {
+	padding-top: 16px;
+    padding-bottom: 16px;
+    color: var( --studio-white );


The text color in design is #DCDCDE, although it looks like we don't have such a variable available. @ederrengifo, should we update the color to match the design?

We need to be careful with any decision because the banner is displayed in two different enviroments: cloud.jetpack.com/pricing and wordpress.com/jetpack/connect/plans.

I will recommend using the closer variable to that value. In our Figma library that color is called grey 5 by the way. If that's a problem because of the two different environments, then I would recommend using white by default.

vitozev

All the functional tests are working as expected! I just left a few minor style-related comments.

client/components/jetpack/licensing-activation-banner/style.scss

Remove the extra space at the end of the license banner text

Update css for license activation banner for mobile and to properly wrap banner text.

Fix spacing from merge

rcanepa

LGTM.

Awesome job, Oli!

Update text color

a8ci18n · 2022-01-11T21:16:42Z

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

Hi @oikeme, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

Activate it now
You have an available product license key.

Thank you in advance!

a8ci18n · 2022-01-24T05:28:58Z

Translation for this Pull Request has now been finished.

rcanepa and others added 17 commits December 29, 2021 15:53

Create new dialog component to prompt the user

3bccecc

Disable post-connection redirection

d77d2c8

Add the modal content

c94678a

Pass down the redirect target

34ae1fa

Refactor logic that extract the license

2213f9b

Move query components up to the parent component

8ec58bd

Compute the site admin URL in the component

4943f4d

Show the modal under the right conditions

0a2a877

Improve the appearance of paragraphs in cloud

4d1fc5f

Make it mobile friendly

7a6257c

Add an X close button

fbf1169

Track view and click events

3890798

Wrap fn to close in useCallback

bcaaf42

Update test to make it match current behavior

0ae7255

Update test snapshot

5b50d26

Add banner for license activation

9c7467a

Add a banner in the checkout process to indicate when there are licenses that are available and have not yet been activated

Add lock icon

a3a400d

Add the key icon with the correct color and update the icon name

oikeme requested a review from rcanepa January 10, 2022 10: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 Jan 10, 2022

oikeme self-assigned this Jan 10, 2022

oikeme added the [Status] In Progress label Jan 10, 2022

rcanepa reviewed Jan 10, 2022

View reviewed changes

client/my-sites/plans/jetpack-plans/selector.tsx Outdated Show resolved Hide resolved

rcanepa changed the base branch from trunk to add/user-licensing-modal January 10, 2022 13:00

rcanepa reviewed Jan 10, 2022

View reviewed changes

client/components/jetpack/licensing-activation-banner/index.tsx Outdated Show resolved Hide resolved

rcanepa reviewed Jan 10, 2022

View reviewed changes

client/components/jetpack/licensing-activation-banner/index.tsx Outdated Show resolved Hide resolved

oikeme added 2 commits January 10, 2022 08:03

Update the activate now banner

cef34a9

Update the key icon viewbox to align it with the banner text. Also remove unnecessary nested div and fix the copy on the banner.

Update banner css

926113b

Remove unused css and update banner padding

Update banner css and display conditions

047c6b2

Update the activate a license banner css for mobile and Jetpack connect and fix conditions under which the banner displays.

oikeme marked this pull request as ready for review January 10, 2022 20:12

oikeme requested a review from a team January 10, 2022 20:12

rcanepa added Jetpack and removed [Status] In Progress labels Jan 10, 2022

rcanepa requested a review from ederrengifo January 10, 2022 23:28

vitozev reviewed Jan 11, 2022

View reviewed changes

client/components/jetpack/licensing-activation-banner/index.tsx Outdated Show resolved Hide resolved

vitozev reviewed Jan 11, 2022

View reviewed changes

client/components/jetpack/licensing-activation-banner/style.scss Outdated Show resolved Hide resolved

oikeme added 2 commits January 11, 2022 11:02

Update license banner text

921ddf0

Remove the extra space at the end of the license banner text

Update style.scss

a21ff84

Update css for license activation banner for mobile and to properly wrap banner text.

Base automatically changed from add/user-licensing-modal to trunk January 11, 2022 19:19

oikeme added 2 commits January 11, 2022 12:41

Merge branch 'trunk' into add/user-licensing-banner

72cf0b3

Update style.scss

a88b947

Fix spacing from merge

rcanepa approved these changes Jan 11, 2022

View reviewed changes

Update style.scss

d01373a

Update text color

oikeme merged commit 6a243bc into trunk Jan 11, 2022

oikeme deleted the add/user-licensing-banner branch January 11, 2022 20:27

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 Jan 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add/user licensing banner #59892

Add/user licensing banner #59892

oikeme commented Jan 10, 2022 •

edited

Loading

github-actions bot commented Jan 10, 2022 •

edited by matticbot

Loading

matticbot commented Jan 10, 2022 •

edited

Loading

rcanepa commented Jan 10, 2022 •

edited

Loading

vitozev Jan 11, 2022

rcanepa Jan 11, 2022

ederrengifo Jan 11, 2022

vitozev left a comment

rcanepa left a comment

a8ci18n commented Jan 11, 2022

a8ci18n commented Jan 24, 2022

Add/user licensing banner #59892

Add/user licensing banner #59892

Conversation

oikeme commented Jan 10, 2022 • edited Loading

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented Jan 10, 2022 • edited by matticbot Loading

matticbot commented Jan 10, 2022 • edited Loading

rcanepa commented Jan 10, 2022 • edited Loading

vitozev Jan 11, 2022

Choose a reason for hiding this comment

rcanepa Jan 11, 2022

Choose a reason for hiding this comment

ederrengifo Jan 11, 2022

Choose a reason for hiding this comment

vitozev left a comment

Choose a reason for hiding this comment

rcanepa left a comment

Choose a reason for hiding this comment

a8ci18n commented Jan 11, 2022

a8ci18n commented Jan 24, 2022

oikeme commented Jan 10, 2022 •

edited

Loading

github-actions bot commented Jan 10, 2022 •

edited by matticbot

Loading

matticbot commented Jan 10, 2022 •

edited

Loading

rcanepa commented Jan 10, 2022 •

edited

Loading