Help Center: Connect to zendesk when user wants to contact support

[escapemanuele]

Related to pdDR7T-1Vr-p2#comment-2342

Proposed Changes

Create a connection to Zendesk when users click on "Contact our Support Team"

I made in a way to avoid adding "Feeling stuck" or feedback to the message switching you to zendesk

Why are these changes being made?

We still had to update that link

Testing Instructions

• Add the flag ?flags=help-center-experience
• Open Wapuu
• Ask something
• Click on "Contact our support team"
• You should be talking with a HE (fake if you're in staging)

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-122700&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

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats
• whats-new
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug hc-fix-contact-support on your sandbox.

[matticbot]

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

Async-loaded Components (~37 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
async-load-automattic-help-center       +158 B  (+0.0%)      +37 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.

[renancarvalho]

It took me a while to understand the idea behind this boolean.
I would suggest us to rename this variable. Maybe we should call it “hide-disclaimer” or something similar. WDYT?

[renancarvalho]

Plus, I think we could extract this into another place, this is getting too conditional and difficult to read/follow.

[renancarvalho]

One refactoring example:

const renderExtraContactOptions = () => {
		return shouldUseHelpCenterExperience ? <GetSupport /> : extraContactOptions;
	};

	const renderDisclaimers = () => (
		<>
			<WasThisHelpfulButtons message={ message } isDisliked={ isDisliked } />
			<DirectEscalationLink messageId={ message.message_id } />
			<div className="disclaimer">
				{ __(
					"Generated by WordPress.com's Support AI. AI-generated responses may contain inaccurate information.",
					__i18n_text_domain__
				) }
				<ExternalLink href="https://automattic.com/ai-guidelines">
					{ __( 'Learn more.', __i18n_text_domain__ ) }
				</ExternalLink>
			</div>
		</>
	);

	return (
		<>
			<Markdown
				urlTransform={ uriTransformer }
				components={ {
					a: CustomALink,
				} }
			>
				{ isRequestingHumanSupport ? displayMessage : message.content }
			</Markdown>
			{ ! isOnlyMessage && (
				<>
					{ showExtraContactOptions ? renderExtraContactOptions() : isBot && renderDisclaimers() }
				</>
			) }
		</>
	);