Add Launch Your Store settings section

plugins/woocommerce-admin/client/index.js

@@ -21,6 +21,7 @@ import { deriveWpAdminBackgroundColours } from './utils/derive-wp-admin-backgrou
 import { possiblyRenderSettingsSlots } from './settings/settings-slots';
 import { registerTaxSettingsConflictErrorFill } from './settings/conflict-error-slotfill';
 import { registerPaymentsSettingsBannerFill } from './payments/payments-settings-banner-slotfill';
+import { registerSiteVisibilitySlotFill } from './launch-your-store/settings-slotfill';
 
 const appRoot = document.getElementById( 'root' );
 const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
@@ -88,6 +89,12 @@ if ( appRoot ) {
 
 	registerTaxSettingsConflictErrorFill();
 	registerPaymentsSettingsBannerFill();
+	if (
+		window.wcAdminFeatures &&
+		window.wcAdminFeatures[ 'launch-your-store' ] === true
+	) {
+		registerSiteVisibilitySlotFill();
+	}
 }
 
 // Render the CustomerEffortScoreTracksContainer only if

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

@@ -0,0 +1,220 @@
+/**
+ * External dependencies
+ */
+import {
+	createSlotFill,
+	ToggleControl,
+	RadioControl,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import { registerPlugin } from '@wordpress/plugins';
+import { __ } from '@wordpress/i18n';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { withSelect } from '@wordpress/data';
+import classNames from 'classnames';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { SETTINGS_SLOT_FILL_CONSTANT } from '../settings/settings-slots';
+import './style.scss';
+
+const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
+
+const SiteVisibility = ( {
+	woocommerce_coming_soon,
+	woocommerce_store_pages_only,
+	woocommerce_private_link,
+	isLoading,
+	placeholder = false,
+} ) => {
+	const [ comingSoon, setComingSoon ] = useState( woocommerce_coming_soon );
+	const [ storePagesOnly, setStorePagesOnly ] = useState(
+		woocommerce_store_pages_only
+	);
+	const [ privateLink, setPrivateLink ] = useState(
+		woocommerce_private_link
+	);
+
+	useEffect( () => {
+		setComingSoon( woocommerce_coming_soon );
+		setStorePagesOnly( woocommerce_store_pages_only );
+		setPrivateLink( woocommerce_private_link );
+	}, [
+		woocommerce_coming_soon,
+		woocommerce_store_pages_only,
+		woocommerce_private_link,
+	] );
+
+	if ( isLoading ) {
+		return (
+			<SiteVisibility
+				woocommerce_lys_setting_coming_soon={ 'yes' }
+				isLoading={ false }
+				placeholder={ true }
+			/>
+		);
+	}
+
+	return (
+		<div
+			className={ classNames( 'site-visibility-settings-slotfill', {
+				placeholder,
+			} ) }
+		>
+			<input
+				type="hidden"
+				value={ comingSoon }
+				name="woocommerce_coming_soon"
+			/>
+			<input
+				type="hidden"
+				value={ storePagesOnly }
+				name="woocommerce_store_pages_only"
+			/>
+			<input
+				type="hidden"
+				value={ privateLink }
+				name="woocommerce_private_link"
+			/>
+			<h2>{ __( 'Site Visibility', 'woocommerce' ) }</h2>
+			<p className="site-visibility-settings-slotfill-description">
+				{ __(
+					"Set your site to coming soon or live you're ready to launch",
+					'woocommerce'
+				) }
+			</p>
+			<div className="site-visibility-settings-slotfill-section">
+				<RadioControl
+					onChange={ () => {
+						setComingSoon( 'yes' );
+					} }
+					options={ [
+						{
+							label: 'Coming soon',
+							value: 'yes',
+						},
+					] }
+					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'
+					) }
+				</p>
+				<div
+					className={ classNames(
+						'site-visibility-settings-slotfill-section-content',
+						{
+							'is-hidden': comingSoon !== 'yes',
+						}
+					) }
+				>
+					<ToggleControl
+						label={
+							<>
+								{ __(
+									'Restrict to store pages only',
+									'woocommerce'
+								) }
+								<p>
+									{ __(
+										'Hide store pages only behind a “Coming soon” page. The rest of your site will remain public.',
+										'woocommerce'
+									) }
+								</p>
+							</>
+						}
+						checked={ storePagesOnly === 'yes' }
+						onChange={ () => {
+							setStorePagesOnly(
+								storePagesOnly === 'yes' ? 'no' : 'yes'
+							);
+						} }
+					/>
+					<ToggleControl
+						label={
+							<>
+								{ __(
+									'Share your site with a private link',
+									'woocommerce'
+								) }
+								<p>
+									{ __(
+										'“Coming soon” sites are only visible to Admins and Shop managers. Enable “Share site” to let other users view your site.',
+										'woocommerce'
+									) }
+								</p>
+							</>
+						}
+						checked={ privateLink === 'yes' }
+						onChange={ () => {
+							setPrivateLink(
+								privateLink === 'yes' ? 'no' : 'yes'
+							);
+						} }
+					/>
+				</div>
+			</div>
+			<div className="site-visibility-settings-slotfill-section">
+				<RadioControl
+					onChange={ () => {
+						setComingSoon( 'no' );
+					} }
+					options={ [
+						{
+							label: 'Live',
+							value: 'no',
+						},
+					] }
+					selected={ comingSoon }
+				/>
+				<p className="site-visibility-settings-slotfill-section-description">
+					{ __( 'Your site is visible to everyone.', 'woocommerce' ) }
+				</p>
+			</div>
+		</div>
+	);
+};
+
+const SiteVisibilityComponent = compose(
+	withSelect( ( select ) => {
+		const { getOption, hasFinishedResolution } =
+			select( OPTIONS_STORE_NAME );
+
+		return {
+			woocommerce_coming_soon: getOption( 'woocommerce_coming_soon' ),
+			woocommerce_store_pages_only: getOption(
+				'woocommerce_store_pages_only'
+			),
+			woocommerce_private_link: getOption( 'woocommerce_private_link' ),
+			isLoading:
+				! hasFinishedResolution( 'getOption', [
+					'woocommerce_coming_soon',
+				] ) ||
+				! hasFinishedResolution( 'getOption', [
+					'woocommerce_store_pages_only',
+				] ) ||
+				! hasFinishedResolution( 'getOption', [
+					'woocommerce_private_link',
+				] ),
+		};
+	} )
+)( SiteVisibility );
+
+const SiteVisibilitySlotFill = () => {
+	return (
+		<Fill>
+			<SiteVisibilityComponent />
+		</Fill>
+	);
+};
+
+export const registerSiteVisibilitySlotFill = () => {
+	registerPlugin( 'woocommerce-admin-site-visibility-settings-slotfill', {
+		scope: 'woocommerce-settings',
+		render: SiteVisibilitySlotFill,
+	} );
+};

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

@@ -0,0 +1,79 @@
+.site-visibility-settings-slotfill {
+	line-height: 16px;
+	font-weight: 400;
+	color: #1e1e1e;
+	margin: 32px 0 32px 0;
+
+	&.placeholder {
+		opacity: 0.3;
+	}
+
+	.components-form-toggle {
+		.components-form-toggle__input:focus + .components-form-toggle__track {
+			box-shadow: none;
+		}
+		.components-form-toggle__track {
+			width: 32px;
+			height: 20px;
+			background-color: #949494;
+			border: none;
+			border-radius: 10px;
+		}
+		.components-form-toggle__thumb {
+			background-color: #fff;
+			border: 5px solid #fff;
+			top: 4px;
+		}
+		&.is-checked .components-form-toggle__thumb {
+			transform: translateX(14px);
+		}
+		&.is-checked .components-form-toggle__track {
+			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+		}
+	}
+
+	.site-visibility-settings-slotfill-section-description {
+		margin: 4px 0 18px 28px;
+	}
+
+	p {
+		color: #757575;
+	}
+
+	.site-visibility-settings-slotfill-description {
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		margin-bottom: 24px;
+	}
+
+	.components-radio-control__input[type='radio']:focus {
+		outline: none;
+		box-shadow: none;
+	}
+
+	.site-visibility-settings-slotfill-section {
+		max-width: 620px;
+		&:last-child {
+			margin-top: 16px;
+		}
+
+		.site-visibility-settings-slotfill-section-content {
+			&.is-hidden {
+				display: none;
+			}
+			margin: 16px 0 0 30px;
+			.components-toggle-control {
+				.components-h-stack {
+					align-items: baseline;
+				}
+			}
+
+			.components-base-control__field {
+				p {
+					margin-top: 6px;
+				}
+			}
+		}
+	}
+}

plugins/woocommerce-admin/client/settings/settings-slots.js

@@ -18,6 +18,10 @@ export const possiblyRenderSettingsSlots = () => {
 		},
 		{ id: 'wc_tax_settings_slotfill', scope: 'woocommerce-tax-settings' },
 		{ id: 'wc_settings_slotfill', scope: 'woocommerce-settings' },
+		{
+			id: 'wc_settings_general_site_visibility_slotfill',
+			scope: 'woocommerce-settings',
+		},
 	];
 
 	slots.forEach( ( slot ) => {

plugins/woocommerce/changelog/45402-add-45107-lys-settings-screen-page

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Launch Your Store settings section

plugins/woocommerce/includes/admin/class-wc-admin-settings.php

@@ -764,6 +764,15 @@ class="<?php echo esc_attr( $value['class'] ); ?>"
 						<?php
 						break;
 
+					case 'slotfill_placeholder':
+						?>
+						<div
+							id="<?php echo esc_attr( $value['id'] ); ?>"
+							class="<?php echo esc_attr( $value['class'] ); ?>"
+						>
+						</div>
+						<?php
+						break;
 					// Default: run an action.
 					default:
 						do_action( 'woocommerce_admin_field_' . $value['type'], $value );

plugins/woocommerce/includes/admin/settings/class-wc-settings-general.php

@@ -217,6 +217,11 @@ protected function get_settings_for_default_section() {
 					'id'   => 'general_options',
 				),
 
+				array(
+					'id'   => 'wc_settings_general_site_visibility_slotfill',
+					'type' => 'slotfill_placeholder',
+				),
+
 				array(
 					'title' => __( 'Currency options', 'woocommerce' ),
 					'type'  => 'title',