Help Center: Connect chat pages #63242

escapemanuele · 2022-05-03T14:09:48Z

Changes proposed in this Pull Request

It is now possible to navigate between help center pages.

Screen.Capture.on.2022-05-04.at.19-45-41.mp4

If user is eligible for chat, but chat is not available

Changes:

Moved ContactForm to HelpCenter package

Testing instructions

TBD

Related to #

github-actions · 2022-05-03T14:10:11Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-05-03T14:19:33Z

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

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

name                   parsed_size           gzip_size
entry-gutenboarding         -911 B  (-0.0%)     -142 B  (-0.0%)
entry-stepper               -900 B  (-0.0%)     -137 B  (-0.0%)
entry-main                  -544 B  (-0.0%)      -40 B  (-0.0%)
entry-domains-landing        -78 B  (-0.0%)      -30 B  (-0.0%)
entry-browsehappy            -78 B  (-0.1%)      -30 B  (-0.1%)
entry-login                  +11 B  (+0.0%)      -14 B  (-0.0%)

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

Sections (~19 bytes removed 📉 [gzipped])

name              parsed_size           gzip_size
reader                 -148 B  (-0.0%)     -412 B  (-0.3%)
site-purchases          +11 B  (+0.0%)     +104 B  (+0.0%)
purchases               +11 B  (+0.0%)     +104 B  (+0.0%)
gutenberg-editor        +11 B  (+0.0%)      +62 B  (+0.0%)
checkout                +11 B  (+0.0%)      +49 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 (~5931 bytes added 📈 [gzipped])

name                                                     parsed_size            gzip_size
async-load-calypso-layout-masterbar-checkout-tsx            +49432 B   (+8.9%)   +13397 B   (+8.3%)
async-load-calypso-layout-masterbar-checkout                +49432 B  (+11.5%)   +13412 B  (+10.7%)
async-load-calypso-my-sites-checkout-modal                  +13872 B   (+1.1%)    +3803 B   (+1.1%)
async-load-calypso-blocks-support-article-dialog-dialog       -159 B   (-0.1%)     -542 B   (-1.5%)
async-load-calypso-blocks-support-article-dialog               -71 B   (-1.7%)      -11 B   (-0.7%)
async-load-design-wordpress-components-gallery                 -13 B   (-0.0%)      -23 B   (-0.0%)
async-load-signup-steps-design-picker                          +11 B   (+0.0%)       +7 B   (+0.0%)
async-load-design-blocks                                       +11 B   (+0.0%)      +10 B   (+0.0%)
async-load-calypso-components-web-preview-component            +11 B   (+0.0%)      +10 B   (+0.0%)
async-load-block-editor                                        +11 B   (+0.0%)     +210 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.

matticbot · 2022-05-03T14:20:10Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/help-center-connect-pages on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

alshakero

It's all coming together baby 🚀 Beautiful work!

alshakero · 2022-05-05T11:45:24Z

client/blocks/inline-help/inline-help-contact-page.tsx

+	const { data: dataChat, isLoading: isLoadingChat } = useSupportAvailability( 'CHAT' );
+	const { data: dataEmail, isLoading: isLoadingEmail } = useSupportAvailability( 'EMAIL' );
+
+	useEffect( () => {


This is a bit unclear. Deserves a comment.

Suggested change

useEffect( () => {

// open the contact form automatically if the user has one option.

useEffect( () => {

alshakero · 2022-05-05T11:45:53Z

client/blocks/inline-help/inline-help-contact-page.tsx

 	const { __ } = useI18n();
+	const [ chatAvailable, setChatAvailable ] = useState( false );


I don't think this needs to be a state.

alshakero · 2022-05-05T11:46:18Z

client/blocks/inline-help/inline-help-contact-page.tsx

-					<div className={ classnames( 'inline-help__contact-box', 'chat' ) }>
+				<div
+					className={ classnames( 'inline-help__contact-boxes', {
+						'is-reversed': ! chatAvailable,


Suggested change

'is-reversed': ! chatAvailable,

'is-reversed': ! dataChat.isClosed ,

alshakero · 2022-05-05T11:46:33Z

client/blocks/inline-help/inline-help-contact-page.tsx

+				>
+					<div
+						className={ classnames( 'inline-help__contact-box', 'chat', {
+							'is-disabled': ! chatAvailable,


Suggested change

'is-disabled': ! chatAvailable,

'is-disabled': dataChat.isClosed ,

alshakero · 2022-05-05T11:49:35Z

client/layout/masterbar/checkout.tsx

+						contactForm ? (
+							<ContactForm
+								mode={ contactForm }
+								onBackClick={ () => {
+									setOpenInContactPage( true );
+									setContactForm( null );
+								} }
+							/>
+						) : (
+							<InlineHelpCenterContent
+								selectedArticle={ selectedArticle }
+								setSelectedArticle={ setSelectedArticle }
+								setHelpCenterFooter={ setFooterContent }
+								setContactFormOpen={ setContactForm }
+								openInContactPage={ openInContactPage }
+							/>
+						)


Eventually we'll have to make a react router (maybe hash router) at one point for sure.

Yes, I was thinking about that indeed. Not right now, but this may become way too complicated 👍

Add support queries store

klimeryk · 2022-05-05T16:32:45Z

client/blocks/inline-help/inline-help-center-content.jsx

 	const secondaryViewRef = useRef();

+	//prefetch the values
+	useSupportAvailability( 'CHAT' );


Please avoid magic strings, we should have constants for these 🙏

Hey @klimeryk, thanks for your suggestion! I was already focused on deployment, so I lost your message, but I'll address that as soon as possible.

Hey Igor! This is not a magic string thanks to TypeScript, this function only accepts CHAT or EMAIL.

TIL! But a constant has additional benefits that this approach seems to be missing (happy to be proven wrong, I'm a TypeScript newbie!):

Defined in one place - easy to change the underlying value without searching for a possibly generic string like EMAIL.

Easier to search for these "constants" - if it's a named constant defined somewhere, most IDEs will be able to figure out all the references to it. And even simple search would work better than for a string.

In some cases you need to reference those outside of just calling the function, like here: https://github.com/Automattic/wp-calypso/pull/63242/files#diff-ac4b8e65c1a3ef7336ecca35fe4c1be3628a73a08e045b237ad373f2366d8d9bR155. It becomes a magic string at that point and is completely decoupled from the definition of the function (OK, not completely, but you get the idea).

a8ci18n · 2022-05-06T06:16:41Z

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

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

a8ci18n · 2022-05-11T12:29:57Z

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

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

a8ci18n · 2022-06-02T14:29:38Z

Translation for this Pull Request has now been finished.

escapemanuele self-assigned this May 3, 2022

escapemanuele force-pushed the update/help-center-connect-pages branch from c6e90f6 to 921bdfb Compare May 4, 2022 09:07

escapemanuele added the [Feature] Help Center The new integrated Help Center in Calypso that provides support tools on all screens. label May 4, 2022

escapemanuele added this to In progress in Vertex Team Board via automation May 4, 2022

escapemanuele moved this from In progress to Needs review in Vertex Team Board May 4, 2022

escapemanuele requested a review from a team May 4, 2022 19:49

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

escapemanuele requested a review from a team May 5, 2022 11:00

alshakero approved these changes May 5, 2022

View reviewed changes

escapemanuele and others added 8 commits May 5, 2022 15:25

First commit

fb8ace2

Help-center: add support queries store (#63241)

4f0e0d8

Add support queries store

First working iteration

814b7c6

Missing css

d7e78ea

fixed css reverse order error

042a6a3

Prefetch the values

109fce4

Chat disabled icon

2b2e730

Moved contact form to package

54411ee

escapemanuele force-pushed the update/help-center-connect-pages branch from a6cbc59 to 54411ee Compare May 5, 2022 13:28

escapemanuele added 7 commits May 5, 2022 16:02

removed state

19f8523

Added siteId to checkout

cc56f13

added site-picker to help-center

d3b3c64

Added type to site-picker

9539b22

Fixed site-picker types

87bafa2

Missing yarn lock

d378b40

fix siteId type

e2a5a07

klimeryk reviewed May 5, 2022

View reviewed changes

set siteId to null

f1bf091

Fix contact form site Id

29f2499

escapemanuele merged commit f680f47 into trunk May 5, 2022

Vertex Team Board automation moved this from Needs review to Done May 5, 2022

escapemanuele deleted the update/help-center-connect-pages branch May 5, 2022 17:11

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 May 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Help Center: Connect chat pages #63242

Help Center: Connect chat pages #63242

escapemanuele commented May 3, 2022 •

edited

github-actions bot commented May 3, 2022 •

edited by matticbot

matticbot commented May 3, 2022 •

edited

matticbot commented May 3, 2022

alshakero left a comment

alshakero May 5, 2022

alshakero May 5, 2022

alshakero May 5, 2022

alshakero May 5, 2022

alshakero May 5, 2022

escapemanuele May 5, 2022

klimeryk May 5, 2022

escapemanuele May 5, 2022

alshakero May 6, 2022 •

edited

klimeryk May 10, 2022

a8ci18n commented May 6, 2022

a8ci18n commented May 11, 2022 •

edited

a8ci18n commented Jun 2, 2022

	useEffect( () => {
	// open the contact form automatically if the user has one option.
	useEffect( () => {

		const { __ } = useI18n();
		const [ chatAvailable, setChatAvailable ] = useState( false );

	'is-reversed': ! chatAvailable,
	'is-reversed': ! dataChat.isClosed ,

	'is-disabled': ! chatAvailable,
	'is-disabled': dataChat.isClosed ,

Help Center: Connect chat pages #63242

Help Center: Connect chat pages #63242

Conversation

escapemanuele commented May 3, 2022 • edited

Changes proposed in this Pull Request

Testing instructions

github-actions bot commented May 3, 2022 • edited by matticbot

matticbot commented May 3, 2022 • edited

matticbot commented May 3, 2022

alshakero 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

alshakero May 6, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a8ci18n commented May 6, 2022

a8ci18n commented May 11, 2022 • edited

a8ci18n commented Jun 2, 2022

escapemanuele commented May 3, 2022 •

edited

github-actions bot commented May 3, 2022 •

edited by matticbot

matticbot commented May 3, 2022 •

edited

alshakero May 6, 2022 •

edited

a8ci18n commented May 11, 2022 •

edited