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
This commit is contained in:
Chi-Hsuan Huang 2024-04-05 09:26:30 +08:00 committed by GitHub
parent 4c3d6ffa6b
commit 3f601b3f45
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 59 additions and 10 deletions

View File

@ -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 ];
}, [] );
};

View File

@ -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';

View File

@ -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 its ready for viewing. You can customize your “Coming soon” landing page via the Editor.',
{ createInterpolateElement(
__(
'Your site is hidden from visitors behind a “Coming soon” landing page until its ready for viewing. You can customize your “Coming soon” landing page via the <a>Editor</a>.',
'woocommerce'
),
{
a: createElement( 'a', {
href: commingSoonPageLink,
} ),
}
) }
</p>
<div

View File

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

View File

@ -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',

View File

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

View File

@ -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',