Launch Your Store: Add status dropdown functionality (#45606)

* Add basic wp dropdown component

* use getAdminLink

* Add styling based on state

* Add changefile(s) from automation for the following project(s): woocommerce

* update store page only text

* Add better 'for now' comment

* translate links

* remove private repo link from comment

* lint

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/header/index.js

@@ -100,7 +100,7 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 		}
 	}, [ isEmbedded, sections, siteTitle ] );
 
-	const { isLoading, launchStatus, launchYourStoreEnabled } =
+	const { isLoading, launchYourStoreEnabled, comingSoon, storePagesOnly } =
 		useLaunchYourStore();
 	const showLaunchYourStoreStatus = launchYourStoreEnabled && ! isLoading;
 
@@ -137,7 +137,10 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 				</Text>
 
 				{ showLaunchYourStoreStatus && (
-					<LaunchYourStoreStatus status={ launchStatus } />
+					<LaunchYourStoreStatus
+						comingSoon={ comingSoon }
+						storePagesOnly={ storePagesOnly }
+					/>
 				) }
 
 				<WooHeaderItem.Slot fillProps={ { isEmbedded, query } } />

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

@@ -1,21 +1,76 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Icon, moreVertical } from '@wordpress/icons';
+import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
+import { getAdminLink } from '@woocommerce/settings';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-export const LaunchYourStoreStatus = () => {
+export const LaunchYourStoreStatus = ( { comingSoon, storePagesOnly } ) => {
+	const isComingSoon = comingSoon && comingSoon === 'yes';
+	const isStorePagesOnly =
+		isComingSoon && storePagesOnly && storePagesOnly === 'yes';
+	const comingSoonText = isStorePagesOnly
+		? __( 'Coming soon - Store pages only', 'woocommerce' )
+		: __( 'Coming soon', 'woocommerce' );
+	const liveText = __( 'Live', 'woocommerce' );
+	const dropdownText = isComingSoon ? comingSoonText : liveText;
 	return (
 		<div className="woocommerce-lys-status">
 			<div className="woocommerce-lys-status-pill-wrapper">
-				<div className="woocommerce-lys-status-pill">
+				<Dropdown
-					<span>Coming soon</span>
+					className="woocommerce-lys-status-dropdown"
-					<Icon icon={ moreVertical } size={ 18 } />
+					focusOnMount={ true }
-				</div>
+					popoverProps={ { placement: 'bottom-start' } }
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button onClick={ onToggle } aria-expanded={ isOpen }>
+							<div
+								className={ classnames(
+									'woocommerce-lys-status-pill',
+									{ 'is-live': ! isComingSoon }
+								) }
+							>
+								<span>{ dropdownText }</span>
+								<Icon icon={ moreVertical } size={ 18 } />
+							</div>
+						</Button>
+					) }
+					renderContent={ () => (
+						<>
+							<MenuGroup>
+								<MenuItem
+									href={ getAdminLink(
+										'admin.php?page=wc-settings'
+									) }
+								>
+									{ __(
+										'Manage site visibility',
+										'woocommerce'
+									) }
+								</MenuItem>
+								{ isComingSoon && (
+									<MenuItem
+										href={ getAdminLink(
+											// For now, waiting on the actual link.
+											'admin.php?page=wc-settings'
+										) }
+									>
+										{ __(
+											'Customize "Coming soon" page',
+											'woocommerce'
+										) }
+									</MenuItem>
+								) }
+							</MenuGroup>
+						</>
+					) }
+				/>
 			</div>
 		</div>
 	);

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

@@ -18,4 +18,24 @@
 	line-height: 20px;
 	border-radius: 4px;
 	height: 24px;
+
+	&.is-live {
+		background-color: #e6f2e8;
+		color: #005c12;
+
+		&::before {
+			content: '';
+			width: 6px;
+			height: 6px;
+			border-radius: 3px;
+			background-color: #005c12;
+			margin-right: 4px;
+		}
+	}
+}
+
+.woocommerce-lys-status-dropdown .components-button {
+	padding: 0;
+	height: auto;
+	border-radius: 4px;
 }

plugins/woocommerce/changelog/45606-add-lys-status-dropdown

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+Comment: Updates unreleased component from launch your store
+