add: lys launch store action (#46235)

* add: launch store action

plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx

@@ -4,7 +4,11 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { createInterpolateElement, useState } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useEffect,
+	useState,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Link } from '@woocommerce/components';
 // @ts-ignore No types for this exist yet.
@@ -18,6 +22,8 @@ import {
 	// @ts-ignore No types for this exist yet.
 	__experimentalHeading as Heading,
 	ToggleControl,
+	Notice,
+	Spinner,
 } from '@wordpress/components';
 
 /**
@@ -36,6 +42,7 @@ export const LaunchYourStoreHubSidebar: React.FC< SidebarComponentProps > = (
 			tasklist,
 			removeTestOrders: removeTestOrdersContext,
 			testOrderCount,
+			launchStoreError,
 		},
 	} = props;
 
@@ -78,6 +85,23 @@ export const LaunchYourStoreHubSidebar: React.FC< SidebarComponentProps > = (
 		removeTestOrdersContext ?? true
 	);
 
+	const [ errorNoticeDismissed, setErrorNoticeDismissed ] = useState( false );
+	const [ hasSubmitted, setHasSubmitted ] = useState( false );
+
+	const launchStoreAction = () => {
+		setHasSubmitted( true );
+		props.sendEventToSidebar( {
+			type: 'LAUNCH_STORE',
+			removeTestOrders,
+		} );
+	};
+
+	useEffect( () => {
+		if ( launchStoreError?.message ) {
+			setHasSubmitted( false );
+		}
+	}, [ launchStoreError?.message ] );
+
 	return (
 		<div
 			className={ classnames(
@@ -171,16 +195,40 @@ export const LaunchYourStoreHubSidebar: React.FC< SidebarComponentProps > = (
 					</>
 				) }
 				<ItemGroup className="edit-site-sidebar-navigation-screen-launch-store-button__group">
-					<Button
-						variant="primary"
-						onClick={ () => {
-							props.sendEventToSidebar( {
-								type: 'LAUNCH_STORE',
-								removeTestOrders,
-							} );
-						} }
-					>
-						{ __( 'Launch Store', 'woocommerce' ) }
+					{ launchStoreError?.message && ! errorNoticeDismissed && (
+						<Notice
+							className="launch-store-error-notice"
+							isDismissible={ true }
+							onRemove={ () => setErrorNoticeDismissed( true ) }
+							status="error"
+						>
+							{ createInterpolateElement(
+								__(
+									'Oops! We encountered a problem while launching your store. <retryButton/>',
+									'woocommerce'
+								),
+								{
+									retryButton: (
+										<Button
+											onClick={ launchStoreAction }
+											variant="tertiary"
+										>
+											{ __(
+												'Please try again',
+												'woocommerce'
+											) }
+										</Button>
+									),
+								}
+							) }
+						</Notice>
+					) }
+					<Button variant="primary" onClick={ launchStoreAction }>
+						{ hasSubmitted ? (
+							<Spinner />
+						) : (
+							__( 'Launch your store', 'woocommerce' )
+						) }
 					</Button>
 				</ItemGroup>
 			</SidebarContainer>

plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx

@@ -12,7 +12,8 @@ import {
 import React from 'react';
 import classnames from 'classnames';
 import { getQuery, navigateTo } from '@woocommerce/navigation';
-import { TaskListType, TaskType } from '@woocommerce/data';
+import { OPTIONS_STORE_NAME, TaskListType, TaskType } from '@woocommerce/data';
+import { dispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -29,6 +30,9 @@ export type SidebarMachineContext = {
 	tasklist?: TaskListType;
 	testOrderCount: number;
 	removeTestOrders?: boolean;
+	launchStoreError?: {
+		message: string;
+	};
 };
 export type SidebarComponentProps = LaunchYourStoreComponentProps & {
 	context: SidebarMachineContext;
@@ -47,6 +51,17 @@ const sidebarQueryParamListener = fromCallback( ( { sendBack } ) => {
 	return createQueryParamsListener( 'sidebar', sendBack );
 } );
 
+const launchStoreAction = async () => {
+	const results = await dispatch( OPTIONS_STORE_NAME ).updateOptions( {
+		woocommerce_coming_soon: 'no',
+		'launch-status': 'launched',
+	} );
+	if ( results.success ) {
+		return results;
+	}
+	throw new Error( JSON.stringify( results ) );
+};
+
 export const sidebarMachine = setup( {
 	types: {} as {
 		context: SidebarMachineContext;
@@ -101,6 +116,7 @@ export const sidebarMachine = setup( {
 	actors: {
 		sidebarQueryParamListener,
 		getTasklist: fromPromise( getLysTasklist ),
+		updateLaunchStoreOptions: fromPromise( launchStoreAction ),
 	},
 } ).createMachine( {
 	id: 'sidebar',
@@ -151,6 +167,7 @@ export const sidebarMachine = setup( {
 					},
 				},
 				launchYourStoreHub: {
+					id: 'launchYourStoreHub',
 					tags: 'sidebar-visible',
 					meta: {
 						component: LaunchYourStoreHubSidebar,
@@ -168,12 +185,22 @@ export const sidebarMachine = setup( {
 			initial: 'launching',
 			states: {
 				launching: {
-					tags: 'fullscreen',
-					entry: { type: 'showLoadingPage' },
-					on: {
-						LAUNCH_STORE_SUCCESS: {
+					entry: assign( { launchStoreError: undefined } ), // clear the errors if any from previously
+					invoke: {
+						src: 'updateLaunchStoreOptions',
+						onDone: {
 							target: '#storeLaunchSuccessful',
 						},
+						onError: {
+							actions: assign( {
+								launchStoreError: ( { event } ) => {
+									return {
+										message: JSON.stringify( event.error ), // for some reason event.error is an empty object, worth investigating if we decide to use the error message somewhere
+									};
+								},
+							} ),
+							target: '#launchYourStoreHub',
+						},
 					},
 				},
 			},

plugins/woocommerce-admin/client/launch-your-store/hub/styles.scss

@@ -228,6 +228,38 @@
 								button {
 									justify-content: center;
 								}
+
+								.components-spinner {
+									margin-bottom: 6px;
+								}
+
+								.launch-store-error-notice {
+									background: #fce2e4;
+									padding: $gap-small;
+									font-size: 13px;
+									font-style: normal;
+									font-weight: 400;
+									line-height: 24px;
+									color: $gray-900;
+									margin: 0;
+									margin-bottom: 16px;
+
+									.components-notice__content {
+										margin: 0;
+									}
+
+									.components-button {
+										padding: 0;
+										height: initial;
+										min-width: 24px;
+										min-height: 24px;
+
+										svg {
+											width: 16px;
+											fill: $gray-900;
+										}
+									}
+								}
 							}
 
 							.components-heading {

plugins/woocommerce/changelog/add-lys-launch-store-action

@@ -0,0 +1,5 @@
+Significance: minor
+Type: add
+
+Added the action to set the appropriate options when launch store button is clicked in LYS
+