143 lines
3.7 KiB
TypeScript
143 lines
3.7 KiB
TypeScript
/* eslint-disable @woocommerce/dependency-group */
|
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classNames from 'classnames';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { getSetting } from '@woocommerce/settings';
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
import {
|
|
Button,
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore No types for this exist yet.
|
|
__unstableMotion as motion,
|
|
} from '@wordpress/components';
|
|
// @ts-ignore No types for this exist yet.
|
|
import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { SiteHub } from '../assembler-hub/site-hub';
|
|
import { ADMIN_URL } from '~/utils/admin-settings';
|
|
|
|
import './style.scss';
|
|
import { navigateOrParent } from '../utils';
|
|
|
|
export type events = { type: 'GO_BACK_TO_HOME' };
|
|
|
|
export const Transitional = ( {
|
|
editor,
|
|
sendEvent,
|
|
}: {
|
|
editor: React.ReactNode;
|
|
sendEvent: ( event: events ) => void;
|
|
} ) => {
|
|
const homeUrl: string = getSetting( 'homeUrl', '' );
|
|
const isEditorLoading = useIsSiteEditorLoading();
|
|
|
|
return (
|
|
<div className="woocommerce-customize-store__transitional">
|
|
<SiteHub
|
|
as={ motion.div }
|
|
variants={ {
|
|
view: { x: 0 },
|
|
} }
|
|
isTransparent={ false }
|
|
className="edit-site-layout__hub"
|
|
/>
|
|
|
|
<div className="woocommerce-customize-store__transitional-content">
|
|
<h1 className="woocommerce-customize-store__transitional-heading">
|
|
{ __( 'Your store looks great!', 'woocommerce' ) }
|
|
</h1>
|
|
<h2 className="woocommerce-customize-store__transitional-subheading">
|
|
{ __(
|
|
"Your store is a reflection of your unique style and personality, and we're thrilled to see it come to life.",
|
|
'woocommerce'
|
|
) }
|
|
</h2>
|
|
<Button
|
|
className="woocommerce-customize-store__transitional-preview-button"
|
|
variant="primary"
|
|
onClick={ () => {
|
|
recordEvent(
|
|
'customize_your_store_transitional_preview_store_click'
|
|
);
|
|
window.open( homeUrl, '_blank' );
|
|
} }
|
|
>
|
|
{ __( 'Preview store', 'woocommerce' ) }
|
|
</Button>
|
|
|
|
<div
|
|
className={ classNames(
|
|
'woocommerce-customize-store__transitional-site-preview-container',
|
|
{
|
|
'is-loading': isEditorLoading,
|
|
}
|
|
) }
|
|
>
|
|
{ editor }
|
|
</div>
|
|
<div className="woocommerce-customize-store__transitional-actions">
|
|
<div className="woocommerce-customize-store__transitional-action">
|
|
<h3>
|
|
{ __( 'Fine-tune your design', 'woocommerce' ) }
|
|
</h3>
|
|
<p>
|
|
{ __(
|
|
'Head to the Editor to change your images and text, add more pages, and make any further customizations.',
|
|
'woocommerce'
|
|
) }
|
|
</p>
|
|
<Button
|
|
variant="tertiary"
|
|
onClick={ () => {
|
|
recordEvent(
|
|
'customize_your_store_transitional_editor_click'
|
|
);
|
|
navigateOrParent(
|
|
window,
|
|
`${ ADMIN_URL }site-editor.php`
|
|
);
|
|
} }
|
|
>
|
|
{ __( 'Go to the Editor', 'woocommerce' ) }
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="woocommerce-customize-store__transitional-action">
|
|
<h3>
|
|
{ __(
|
|
'Continue setting up your store',
|
|
'woocommerce'
|
|
) }
|
|
</h3>
|
|
<p>
|
|
{ __(
|
|
'Go back to the Home screen to complete your store setup and start selling',
|
|
'woocommerce'
|
|
) }
|
|
</p>
|
|
<Button
|
|
variant="tertiary"
|
|
onClick={ () => {
|
|
recordEvent(
|
|
'customize_your_store_transitional_home_click'
|
|
);
|
|
sendEvent( {
|
|
type: 'GO_BACK_TO_HOME',
|
|
} );
|
|
} }
|
|
>
|
|
{ __( 'Back to Home', 'woocommerce' ) }
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|