LYS: Add coming soon page editor links (#46100)

* Add 'woocommerce_coming_soon_page_id' option to API options

* Add useComingSoonEditorLink hook to handle the coming soon editor link

* Add useComingSoonEditorLink hook and update styles

* Add changelog

* Move use-launch-your-store.js to ./hooks and update import path

plugins/woocommerce-admin/client/launch-your-store/hooks/use-coming-soon-editor-link.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { getAdminLink } from '@woocommerce/settings';
+
+const COMMING_SOON_PAGE_ID_OPTION = 'woocommerce_coming_soon_page_id';
+
+export const useComingSoonEditorLink = () => {
+	return useSelect( ( select ) => {
+		const { getOption, hasFinishedResolution } =
+			select( OPTIONS_STORE_NAME );
+
+		const isLoading = ! hasFinishedResolution( 'getOption', [
+			COMMING_SOON_PAGE_ID_OPTION,
+		] );
+		const pageID = getOption( COMMING_SOON_PAGE_ID_OPTION );
+
+		const pageLink =
+			isLoading || ! pageID
+				? // Fallback to the pages list if the page ID is not set yet.
+				  getAdminLink( 'edit.php?post_type=page' )
+				: getAdminLink( `post.php?post=${ pageID }&action=edit` );
+
+		return [ pageLink, isLoading ];
+	}, [] );
+};

plugins/woocommerce-admin/client/launch-your-store/index.js

@@ -2,5 +2,5 @@
  * Internal dependencies
  */
 export { LaunchYourStoreStatus } from './status';
-export { useLaunchYourStore } from './use-launch-your-store';
+export { useLaunchYourStore } from './hooks/use-launch-your-store';
 export { registerSiteVisibilitySlotFill } from './settings/slotfill';

plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js

@@ -7,7 +7,11 @@ import {
 	RadioControl,
 	Button,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import {
+	useState,
+	createInterpolateElement,
+	createElement,
+} from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
@@ -18,6 +22,7 @@ import { recordEvent } from '@woocommerce/tracks';
  * Internal dependencies
  */
 import { SETTINGS_SLOT_FILL_CONSTANT } from '../../settings/settings-slots';
+import { useComingSoonEditorLink } from '../hooks/use-coming-soon-editor-link';
 import './style.scss';
 
 const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
@@ -43,6 +48,7 @@ const SiteVisibility = () => {
 	const copyLink = __( 'Copy link', 'woocommerce' );
 	const copied = __( 'Copied!', 'woocommerce' );
 	const [ copyLinkText, setCopyLinkText ] = useState( copyLink );
+	const [ commingSoonPageLink ] = useComingSoonEditorLink();
 
 	const getPrivateLink = () => {
 		if ( storePagesOnly === 'yes' ) {
@@ -105,9 +111,16 @@ const SiteVisibility = () => {
 					selected={ comingSoon }
 				/>
 				<p className="site-visibility-settings-slotfill-section-description">
-					{ __(
-						'Your site is hidden from visitors behind a “Coming soon” landing page until it’s ready for viewing. You can customize your “Coming soon” landing page via the Editor.',
-						'woocommerce'
+					{ createInterpolateElement(
+						__(
+							'Your site is hidden from visitors behind a “Coming soon” landing page until it’s ready for viewing. You can customize your “Coming soon” landing page via the <a>Editor</a>.',
+							'woocommerce'
+						),
+						{
+							a: createElement( 'a', {
+								href: commingSoonPageLink,
+							} ),
+						}
 					) }
 				</p>
 				<div

plugins/woocommerce-admin/client/launch-your-store/settings/style.scss

@@ -8,6 +8,10 @@
 		opacity: 0.3;
 	}
 
+	a {
+		text-decoration: none;
+	}
+
 	.site-visibility-settings-slotfill-private-link {
 		margin-left: 73px;
 		padding: 8px 16px;

plugins/woocommerce-admin/client/launch-your-store/status/index.js

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { Icon, moreVertical, edit, cog } from '@wordpress/icons';
 import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
-import { getNewPath } from '@woocommerce/navigation';
 import { getAdminLink } from '@woocommerce/settings';
 import classnames from 'classnames';
 
@@ -12,6 +11,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import './style.scss';
+import { useComingSoonEditorLink } from '../hooks/use-coming-soon-editor-link';
 
 export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
 	const isComingSoon = comingSoon && comingSoon === 'yes';
@@ -22,9 +22,8 @@ export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
 		: __( 'Site coming soon', 'woocommerce' );
 	const liveText = __( 'Live', 'woocommerce' );
 	const dropdownText = isComingSoon ? comingSoonText : liveText;
-	const launchYourStoreLink = new URL(
-		getAdminLink( getNewPath( {}, '/launch-your-store', {} ) )
-	);
+	const [ commingSoonPageLink ] = useComingSoonEditorLink();
+
 	return (
 		<div className="woocommerce-lys-status">
 			<div className="woocommerce-lys-status-pill-wrapper">
@@ -60,7 +59,7 @@ export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
 									) }
 								</MenuItem>
 								{ isComingSoon && (
-									<MenuItem href={ launchYourStoreLink.href }>
+									<MenuItem href={ commingSoonPageLink }>
 										<Icon icon={ edit } size={ 24 } />
 										{ __(
 											'Customize "Coming soon" page',

plugins/woocommerce/changelog/add-coming-soon-editor-link

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add coming soon page editor links

plugins/woocommerce/src/Admin/API/Options.php

@@ -225,6 +225,7 @@ class Options extends \WC_REST_Data_Controller {
 			'woocommerce_private_link',
 			'woocommerce_share_key',
 			'launch-status',
+			'woocommerce_coming_soon_page_id',
 			// WC Test helper options.
 			'wc-admin-test-helper-rest-api-filters',
 			'wc_admin_helper_feature_values',