A4A: Add WooCommerce extension product descriptions.

[rcoll]

Proposed Changes

• Adds product descriptions to the marketplace for all of the new A4A WC extensions.

Testing Instructions

• View the product marketplace while using billing scheme 877, and ensure all product descriptions are present, accurate, and appropriate.

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 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]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

• editing-toolkit
• happy-blocks
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a-woocommerce-extension-descriptions on your sandbox.

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper      +2651 B  (+0.1%)     +910 B  (+0.2%)
entry-main         +2651 B  (+0.1%)     +909 B  (+0.2%)

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

Sections (~5544 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
a8c-for-agencies-marketplace          +20404 B  (+3.2%)    +5544 B  (+2.8%)
scan                                  +20301 B  (+2.3%)    +5505 B  (+2.2%)
jetpack-search                        +20301 B  (+3.3%)    +5505 B  (+3.0%)
jetpack-cloud-partner-portal          +20301 B  (+2.3%)    +5505 B  (+2.1%)
jetpack-cloud-manage-pricing          +20301 B  (+5.8%)    +5505 B  (+5.4%)
jetpack-cloud-agency-sites-v2         +20301 B  (+1.3%)    +5505 B  (+1.2%)
backup                                +20301 B  (+1.7%)    +5505 B  (+1.7%)
a8c-for-agencies-sites                +20301 B  (+1.3%)    +5505 B  (+1.3%)
site-purchases                        +13946 B  (+0.9%)    +3339 B  (+0.8%)
settings-jetpack                      +13946 B  (+2.4%)    +3339 B  (+1.9%)
purchases                             +13946 B  (+0.7%)    +3339 B  (+0.6%)
purchase-product                      +13946 B  (+9.1%)    +3339 B  (+7.6%)
plans                                 +13946 B  (+1.1%)    +3339 B  (+0.9%)
jetpack-connect                       +13946 B  (+1.2%)    +3339 B  (+1.0%)
jetpack-cloud-settings                +13946 B  (+2.2%)    +3339 B  (+1.8%)
jetpack-cloud-pricing                 +13946 B  (+1.7%)    +3339 B  (+1.4%)
jetpack-cloud-plugin-management       +13946 B  (+0.9%)    +3339 B  (+0.7%)
jetpack-cloud-features-comparison     +13946 B  (+1.9%)    +3339 B  (+1.5%)
email                                 +13946 B  (+1.8%)    +3339 B  (+1.5%)
domains                               +13946 B  (+0.7%)    +3339 B  (+0.6%)
checkout                              +13946 B  (+0.8%)    +3339 B  (+0.6%)
a8c-for-agencies-purchases             +6355 B  (+1.4%)    +2166 B  (+1.6%)

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

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal          +13946 B  (+1.2%)    +3339 B  (+1.0%)
async-load-calypso-blocks-editor-checkout-modal     +13946 B  (+1.3%)    +3339 B  (+1.1%)

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.

[jeffgolenski]

Per the slack discussion, could we:

• Limit the displayed text on these cards to 130 chars max, and truncate it with a …?

Keeping in mind that the more links open a model with the full more robust product descriptions.

We don’t need to cram everything into these cards, especially with such inconsistency in description length.

With a char limit, these will be so much more uniform and easy to browse

[heydemoura]

This is a nit pick. But I think you can simplify this by just:

Suggested change

	const truncateDescription = ( description: any ) => {
	if ( description.length <= 130 ) {
	return description;
	}
	const lastSpace = description.slice( 0, 128 ).lastIndexOf( ' ' );
	return description.slice( 0, lastSpace > 0 ? lastSpace : 129 ) + '…';
	};
	const truncateDescription = ( description: any ) => {
	const lastSpace = description.slice( 0, 128 ).lastIndexOf( ' ' );
	return description.slice( 0, lastSpace <= 129 ? lastSpace : 128 ) + '…';
	};

[heydemoura]

LGTM

[jeffgolenski]

Rock on @rcoll - thanks for this. Just a couple more small adjustments if you don't mind before we ship.

Now

Changes:

• Truncate text to 84 chars - I'd like to max this descriptions at 3 lines. we'll see how it feels
• Align all learn more links to the bottom of the card. the space between the description and the learn more link should be the only variable on the card (see below how they all float around based on the length of the characters

Future PR / project

@madebynoam @keoshi @rcanepa @simonktnga8c - a problem I'm seeing at scale is some wasted space and misalignment within these cards. Some of these Woo exts have very long titles. Our current card pattern doesn't scale to meet them, and we're wasting a lot of real estate.

Currently:

• Space under the add to cart buttons is unused, which drags out the height of each card.
• The titles sometimes drop to 2 lines, which throws off the vertical alignment on one line title cards
• The external link icon sometimes drops to the next line.

Proposal:

View in figma

• We shrink the title of the cards. They don't need to be so massive with so many cards possibly on screen at once. Also helps with translations into "longer" languages.
• We restructure the flexbox of each card, so the content flows better and allows for proper alignment.
• We change "More about {long product name} to "View details." We retain a11y by writing the full product name within the aria labels `aria-label="See all details about {product name}".
• Add to card (and (Added to cart) buttons move to bottom.

I think we can squeeze this update in within the marketplace scale project (pfunGA-1kR-p2). If not, this should happen soon after, regardless.

[a8ci18n]

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

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.

Hi @rcoll, 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:

• Easily setup new order and stock email notifications for multiple recipients of your choosing.
• Add subscription plans to your existing products and start capturing residual revenue with All Products for WooCommerce Subscriptions.
• Notify customers when your out-of-stock products become available. Recover lost sales, build customer loyalty, and gain deeper insights into your inventory.
• Edit product and variation stock levels in bulk via this handy interface.
• Optimize your checkout process by adding, removing or editing fields to suit your needs.
• The definitive product builder plugin for WooCommerce. Create and offer personalized product kits and custom product configurators.
• Use conditional logic to restrict the shipping methods, payment gateways and shipping countries or states available to customers at checkout.
• Collect VAT numbers at checkout and remove the VAT charge for eligible EU businesses.
• Pack items into boxes with pre-defined costs per destination.
• Offer digital prepaid gift cards and e-gift certificates that customers can redeem at your WooCommerce store.
• Offer customers a way to purchase subscriptions for others. A gift that keeps on giving for your customers and your store's revenue.
• Define separate shipping costs per product which are combined at checkout to provide a total shipping cost.
• Import, merge, and export products and variations to and from WooCommerce using a CSV file.
• Offer smarter upsells, cross-sells, and frequently bought together recommendations. Use analytics to measure their impact and optimize your strategies.
• Turn your store into a multi-vendor marketplace. Allow multiple vendors to sell via your site and in return take a commission on sales.
• Manage the RMA process, add warranties to products, and let customers request and manage returns/exchanges from their account.
• Offer additional downloads to your subscribers, via downloadable products listed in your store.
• Allow your customers to ship individual items in a single order to multiple addresses.
• All the tools you need to customize your WooCommerce store design. Storefront is our free, intuitive theme for WooCommerce - make it yours without touching code with the Storefront Extensions bundle.
• The Table Rate shipping module extends WooCommerce's default shipping options giving you highly customisable shipping options.
• Unlimited images for your product variations.
• Sell tickets for your next event, concert, function, fundraiser or conference directly on your own site.
• Categorize coupons within coupon campaigns, making it easier to track the performance of a collection of coupons.
• Enable custom payment schedules with WooCommerce Deposits. Accept payments as deposits, layaway plans, or any desired payment structure.
• WooCommerce Distance Rate shipping allows you to charge shipping rates based on the distance or total travel time to your customers as well as charge based on weight, total value or number of items in cart.
• Create special pages where customers can choose products, checkout & pay all on the one page.
• Generates a unique barcode for each order on your site perfect for e-tickets, packing slips, reservations and a variety of other uses.
• Reward your customers for purchases and other actions with points which can be redeemed for discounts.
• Allow customers to order products before they are available.
• Seamlessly accept purchase orders as a payment method on your WooCommerce store.
• Print USPS and DHL labels right from your WooCommerce dashboard and instantly save on shipping. WooCommerce Shipping is free to use and saves you time and money.
• Book accommodation using WooCommerce and the WooCommerce Bookings extension.
• Automatically calculate how much sales tax should be collected for WooCommerce orders — by city, country, or state — at checkout.
• The only payment solution fully integrated to Woo. Accept credit/debit cards and local payment options with no setup or monthly fees.
• AutomateWoo - Birthdays add-on
• AutomateWoo - Refer a Friend add-on
• WooCommerce WooPayments
• Edit product and variation stock levels in bulk via this handy interface
• Pack items into boxes with pre-defined costs per destination
• Sell tickets for your next event, concert, function, fundraiser or conference directly on your own site
• Print USPS and DHL labels right from the WooCommerce desktop and save up to 90% instantly. WooCommerce Shipping is free and saves you time and money.

Thank you in advance!