Localize Support URL for HSTS Tooltip in Domain Picker

[tjcafferkey]

Background

When users are presented with domain suggestions for domains that require HSTS (.dev TLDs for example) they are presented with tooltip which reveals information about this including a link to a support URL for more information on the topic.

What needs to be done

The /support/https-ssl in the component below needs to be localized.

wp-calypso/packages/domain-picker/src/domain-picker/suggestion-item.tsx

Lines 101 to 107 in 4c56241

	learn_more_link: (
	<a
	target="_blank"
	rel="noreferrer"
	href="https://wordpress.com/support/https-ssl"
	/>
	), // TODO Wrap this in `localizeUrl` from lib/i18n-utils

[Aurorum]

From #40080 (comment):

The principle to keep in mind for WordPress.com hosted help articles — meaning written by Automattic on our support sites — is to keep the entire experience within the Calypso app context. Please use the mechanism that already exists to show the article in an overlay first. That overlay could then link to open the full help article in a new tab/window.

@lancewillett out of curiosity, would the same principle apply to links within a pop-up, such as the one in this issue? I believe that the link could be swapped for the Support Article Dialog along with being localised.

[lancewillett]

Handing the baton to @rickybanister to help answer your question, @Aurorum (I miss you all wonderful people, I'm working on Tumblr product experience these days!)

[rickybanister]

@Aurorum that's a good point and I think it would be an appropriate UX to avoid popping folks over to a new browser tab etc.

I'm not sure, however, whether we have access to the support article dialog component within this onboarding context. I'll have to leave that up to @tjcafferkey or @simison to answer.

[Aurorum]

@lancewillett ah, okay, best of luck with the Tumblr work! :)

@rickybanister thank you - that's a good point about access to the component too.

[tjcafferkey]

@rickybanister we currently don't have access to the support article dialog component within this context unfortunately.

I know we usually move common Calypso components from client/components to packages so we can use them, although the support dialog box currently lives in client/blocks and at the moment I'm not sure whether we can do the same with them.

[autumnfjeld]

Summarizing the complications that prevent the above suggestions from being implemented:

The packages noramlly used in Calypso to url localization such as https://wordpress.com/support/https-ssl and packages that handle the ideal help/support UX are not currently NOT “out of the box” useable here because they are Calypso components or utils (they are not standalone NPM packages) and thus not usable because we are in a Gutenboarding context (Gutenboarding is its own React app).

A quick implentation/workaround for this localization can be done by getting the locale and manually creating the localized support url. For example:

`https://wordpress.com/${ i18nLocale }/support/https-ssl`

Worthwhile to note this @automattic/langauge-picker issue for future use.