Add category selection to subscriber modal. #97292

allilevine · 2024-12-10T21:24:11Z

Related to https://github.com/Automattic/loop/issues/248

Proposed Changes

Add category section to Add subscribers modal, for manual and CSV import.

Screenshots for translation:

Why are these changes being made?

pe7F0s-2mg-p2

Testing Instructions

Calypso

Start with a site that doesn't have newsletter categories enabled.
Head to https://wordpress.com/subscribers/{SITE-URL}
Click "Add subscribers" button in top right corner
Click "Add subscribers manually"
Check that you don't see the categories toggle.
Test that you can still import subscribers.
Follow the same steps with a site that does have categories enabled (/settings/newsletter > Newsletter categories) and at least one category. You should see the categories toggle.
Check that clicking "categories" takes you to newsletter settings.
Check that you can click the info icon to see the popover, and click "Learn more" to open support.
Check that you can toggle off to clear your selection.
Check that you can add and remove existing categories.
Check that you can't add new categories by typing them in.
Submit your new subscribers and check that they're added to the correct categories.

Jetpack Cloud

Go to /wp-admin/admin.php?page=jetpack#/newsletter for an Atomic or Jetpack site.
Enable categories and select at least one.
Go to Jetpack Cloud Live, choose the same site, and open /subscribers.
Click "Add subscribers" button in top right corner
Click "Add subscribers manually"
Check that you see the categories toggle.
Check that clicking "categories" takes you to newsletter settings.
Check that you can click the info icon to see the popover, and click "Learn more" to open an article on categories.
Check that you can add and remove existing categories.
Submit your new subscribers and check that they're added to the correct categories.

CSV Imports

Start with a site with categories.
In the "Add subscribers" modal, click "Use a CSV file."
Upload a CSV file. Test that you can import without categories.
Choose categories.
Click "Add subscribers".
Check that the subscribers are imported into the correct category.

Substack import

In the "Add subscribers" modal, click "Import from Substack".
Skip to the subscribers import.
Attempt to upload a CSV of subscribers.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests 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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
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-aUh-p2)?

github-actions · 2024-12-10T21:24:24Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-128695&env=a8c-for-agencies

matticbot · 2024-12-10T21:33:44Z

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

App Entrypoints (~82 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                  +473 B  (+0.0%)      +63 B  (+0.0%)
entry-subscriptions         +253 B  (+0.0%)       +6 B  (+0.0%)
entry-stepper               +162 B  (+0.0%)       -9 B  (-0.0%)
entry-login                 +138 B  (+0.0%)      -11 B  (-0.0%)
entry-domains-landing       +138 B  (+0.0%)      -11 B  (-0.0%)
entry-browsehappy           +138 B  (+0.1%)      -11 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~12381 bytes added 📈 [gzipped])

name                           parsed_size            gzip_size
people                           +168905 B  (+24.8%)   +53747 B  (+27.1%)
subscribers                       +23651 B   (+3.1%)    +7973 B   (+3.4%)
newsletter-flow                     +503 B   (+1.5%)      +59 B   (+0.7%)
earn                                +285 B   (+0.0%)      -32 B   (-0.0%)
import                              +279 B   (+0.0%)      +46 B   (+0.0%)
write-flow                          +182 B   (+0.0%)       +3 B   (+0.0%)
build-flow                          +182 B   (+0.0%)       +3 B   (+0.0%)
switch-site                         +115 B   (+0.1%)       +7 B   (+0.0%)
security                            +115 B   (+0.0%)      +16 B   (+0.0%)
jetpack-connect                     +115 B   (+0.0%)      +19 B   (+0.0%)
jetpack-cloud                       +115 B   (+0.0%)      +15 B   (+0.0%)
import-hosted-site-flow             +115 B   (+0.0%)       +7 B   (+0.0%)
backup                              +115 B   (+0.0%)      +16 B   (+0.0%)
a8c-for-agencies-settings           +115 B   (+0.1%)      +15 B   (+0.0%)
a8c-for-agencies-plugins            +115 B   (+0.1%)      +15 B   (+0.0%)
a8c-for-agencies-landing            +115 B   (+0.1%)      +14 B   (+0.0%)
a8c-for-agencies-agency-tier        +115 B   (+0.1%)      +15 B   (+0.0%)
transferring-hosted-site-flow       +103 B   (+0.0%)      +16 B   (+0.0%)
stats                               +103 B   (+0.0%)      +10 B   (+0.0%)
performance-profiler                +103 B   (+0.0%)      +20 B   (+0.0%)
migrate                             +103 B   (+0.0%)      +12 B   (+0.0%)
a8c-for-agencies                    +103 B   (+0.1%)      +24 B   (+0.1%)
devdocs                              +88 B   (+0.0%)      +16 B   (+0.0%)
update-options-flow                  +12 B   (+0.0%)       +2 B   (+0.0%)
update-design-flow                   +12 B   (+0.0%)       +1 B   (+0.0%)
trial-wooexpress-flow                +12 B   (+0.0%)       +0 B
tailored-ecommerce-flow              +12 B   (+0.0%)       +0 B
start-writing-flow                   +12 B   (+0.0%)       +2 B   (+0.0%)
site-setup-wg                        +12 B   (+0.0%)       +1 B   (+0.0%)
site-setup-flow                      +12 B   (+0.0%)       +1 B   (+0.0%)
site-migration-flow                  +12 B   (+0.0%)       +0 B
settings-writing                     +12 B   (+0.0%)       -4 B   (-0.0%)
settings-security                    +12 B   (+0.0%)       -4 B   (-0.0%)
settings-reading                     +12 B   (+0.0%)       -3 B   (-0.0%)
settings-podcast                     +12 B   (+0.0%)       -4 B   (-0.0%)
settings-newsletter                  +12 B   (+0.0%)       -4 B   (-0.0%)
settings-discussion                  +12 B   (+0.0%)       -4 B   (-0.0%)
settings                             +12 B   (+0.0%)     -275 B   (-0.1%)
readymade-template-flow              +12 B   (+0.0%)       +1 B   (+0.0%)
privacy                              +12 B   (+0.0%)       -3 B   (-0.0%)
plans                                +12 B   (+0.0%)       -3 B   (-0.0%)
onboarding-flow                      +12 B   (+0.0%)       +0 B
migration-signup                     +12 B   (+0.0%)       +0 B
migration-flow                       +12 B   (+0.0%)       +0 B
marketing                            +12 B   (+0.0%)       -3 B   (-0.0%)
jetpack-social                       +12 B   (+0.0%)       -4 B   (-0.0%)
jetpack-cloud-pricing                +12 B   (+0.0%)       -3 B   (-0.0%)
jetpack-cloud-partner-portal         +12 B   (+0.0%)       -4 B   (-0.0%)
jetpack-cloud-overview               +12 B   (+0.0%)       -4 B   (-0.0%)
import-flow                          +12 B   (+0.0%)       +0 B
hosted-site-migration-flow           +12 B   (+0.0%)       +0 B
free-post-setup-flow                 +12 B   (+0.0%)       -1 B   (-0.0%)
entrepreneur-flow                    +12 B   (+0.0%)       +0 B
developer                            +12 B   (+0.0%)       -3 B   (-0.0%)
design-first-flow                    +12 B   (+0.0%)       +5 B   (+0.1%)
checkout                             +12 B   (+0.0%)       -3 B   (-0.0%)
assembler-first-flow                 +12 B   (+0.0%)       +1 B   (+0.0%)
ai-assembler-flow                    +12 B   (+0.0%)       +0 B
account                              +12 B   (+0.0%)       -4 B   (-0.0%)
a8c-for-agencies-purchases           +12 B   (+0.0%)       -3 B   (-0.0%)
a8c-for-agencies-marketplace         +12 B   (+0.0%)       -4 B   (-0.0%)

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

name                                                                              parsed_size           gzip_size
async-load-calypso-layout-command-palette                                              +115 B  (+0.1%)       +7 B  (+0.0%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...       +115 B  (+0.1%)      +15 B  (+0.0%)
async-load-signup-steps-theme-selection                                                +103 B  (+0.0%)      +18 B  (+0.0%)
async-load-masterbar-launchpad-navigator                                               +103 B  (+0.1%)      +15 B  (+0.1%)
async-load-calypso-blocks-jitm-templates-modal                                         +103 B  (+0.2%)      +37 B  (+0.2%)
async-load-automattic-whats-new                                                        +103 B  (+0.3%)      +17 B  (+0.1%)
async-load-design-wordpress-components-gallery                                          +93 B  (+0.0%)     +745 B  (+0.3%)
async-load-design-playground                                                            +12 B  (+0.0%)       -3 B  (-0.0%)
async-load-design                                                                       +12 B  (+0.0%)       -4 B  (-0.0%)
async-load-calypso-my-sites-checkout-modal                                              +12 B  (+0.0%)       -3 B  (-0.0%)
async-load-calypso-lib-store-sandbox-helper                                             +12 B  (+0.0%)       -3 B  (-0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         +12 B  (+0.0%)       -3 B  (-0.0%)

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.

packages/data-stores/src/newsletter-categories/index.ts

a8ci18n · 2024-12-12T21:26:58Z

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

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 @allilevine for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2024-12-16T11:29:54Z

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

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 @allilevine for including a screenshot in the description! This is really helpful for our translators.

client/my-sites/subscribers/components/add-subscribers-modal/style.scss

a8ci18n · 2024-12-23T17:29:52Z

Translation for this Pull Request has now been finished.

allilevine · 2024-12-26T19:00:07Z

packages/subscriber/src/components/add-form/index.tsx

@@ -492,6 +499,16 @@ export const AddSubscriberForm: FunctionComponent< Props > = ( props ) => {

 					{ renderEmptyFormValidationMsg() }

+					{ newsletterCategoriesData?.enabled &&


We're only showing this section if you have newsletter categories. But we might change this in future and gray out the toggle, so that users can learn about categories.

allilevine · 2024-12-26T19:00:38Z

packages/subscriber/src/components/add-form/categories-section.tsx

+					suggestions={ newsletterCategories.map( ( cat ) => cat.name ) }
+					onChange={ handleCategoryChange }
+					label=""
+					placeholder={ __( 'Search…' ) }


I'm using "Search..." to match the newsletter settings, but we can iterate with a new translation to match the design.

matticbot · 2024-12-26T20:30:56Z

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

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

notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/manually-import-categories on your sandbox.

allilevine self-assigned this Dec 10, 2024

allilevine force-pushed the add/manually-import-categories branch from 0735e5d to 816fdf3 Compare December 12, 2024 18:47

allilevine commented Dec 12, 2024

View reviewed changes

packages/data-stores/src/newsletter-categories/index.ts Outdated Show resolved Hide resolved

allilevine added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Dec 12, 2024

This comment was marked as resolved.

Sign in to view

allilevine force-pushed the add/manually-import-categories branch from 8917ff9 to d945b43 Compare December 16, 2024 16:36

allilevine commented Dec 16, 2024

View reviewed changes

client/my-sites/subscribers/components/add-subscribers-modal/style.scss Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

allilevine force-pushed the add/manually-import-categories branch from 69e38b3 to fa17ebc Compare December 17, 2024 16:35

This comment was marked as resolved.

Sign in to view

allilevine force-pushed the add/manually-import-categories branch 3 times, most recently from b185238 to dbc4c18 Compare December 23, 2024 13:14

allilevine force-pushed the add/manually-import-categories branch from 3e0ccba to e1d2acd Compare December 25, 2024 20:10

allilevine added 9 commits December 26, 2024 13:55

Add category selection to subscriber modal.

1eaf965

Change to match the new design.

bf3598d

Abstract categories to a separate component.

acc8c2f

Remove unnecessary changes.

8d16704

Keep categories when toggled off.

f20e575

Hide the categories section if categories are disabled.

d68a942

Add Tracks events.

5d0db32

Show categories field based on available categories data.

8e323b1

Change UI to be a category tree selector.

e9aa6a3

allilevine added 12 commits December 26, 2024 13:55

Add selectedCategories to import actions.

a739977

Translate search placeholder.

3744e3f

Reduce font size in popover.

cbcc036

Search children categories, show no results.

68e113a

Fix type error in upload-form.

d8ab68f

Remove style change to reduce scope.

a0f3650

Change back to using FormTokenField.

9ed6e7b

Remove tree styles.

fb8597a

Clear selected categories when toggled off.

00d3743

Adjust styles for Jetpack Cloud.

b18f581

Add placeholder text to FormTokenField.

be135b1

Change to already translated string.

ef869a0

allilevine force-pushed the add/manually-import-categories branch from e1d2acd to ef869a0 Compare December 26, 2024 18:55

allilevine commented Dec 26, 2024

View reviewed changes

Link to Jetpack settings and doc for non-WPCOM sites.

f0c8673

Make siteURL optional to pass type checks elsewhere.

a1da109

allilevine marked this pull request as ready for review December 26, 2024 21:21

allilevine requested a review from a team as a code owner December 26, 2024 21:21

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

allilevine requested a review from a team December 26, 2024 21:21

allilevine added 2 commits December 27, 2024 11:57

Add categories to CSV imports.

ac8c1d2

Fix importing with and without categories.

86fba1f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add category selection to subscriber modal. #97292

Add category selection to subscriber modal. #97292

allilevine commented Dec 10, 2024 •

edited

Loading

github-actions bot commented Dec 10, 2024 •

edited by matticbot

Loading

matticbot commented Dec 10, 2024 •

edited

Loading

a8ci18n commented Dec 12, 2024 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

a8ci18n commented Dec 16, 2024 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

a8ci18n commented Dec 23, 2024

allilevine Dec 26, 2024

allilevine Dec 26, 2024

matticbot commented Dec 26, 2024

		@@ -492,6 +499,16 @@ export const AddSubscriberForm: FunctionComponent< Props > = ( props ) => {

		{ renderEmptyFormValidationMsg() }

		{ newsletterCategoriesData?.enabled &&

Add category selection to subscriber modal. #97292

Are you sure you want to change the base?

Add category selection to subscriber modal. #97292

Conversation

allilevine commented Dec 10, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Calypso

Jetpack Cloud

CSV Imports

Substack import

Pre-merge Checklist

github-actions bot commented Dec 10, 2024 • edited by matticbot Loading

matticbot commented Dec 10, 2024 • edited Loading

a8ci18n commented Dec 12, 2024 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

a8ci18n commented Dec 16, 2024 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

a8ci18n commented Dec 23, 2024

allilevine Dec 26, 2024

Choose a reason for hiding this comment

allilevine Dec 26, 2024

Choose a reason for hiding this comment

matticbot commented Dec 26, 2024

allilevine commented Dec 10, 2024 •

edited

Loading

github-actions bot commented Dec 10, 2024 •

edited by matticbot

Loading

matticbot commented Dec 10, 2024 •

edited

Loading

a8ci18n commented Dec 12, 2024 •

edited

Loading

a8ci18n commented Dec 16, 2024 •

edited

Loading