140 lines
3.6 KiB
TypeScript
140 lines
3.6 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
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';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { SiteHub } from '../assembler-hub/site-hub';
|
|
import { MShotsImage } from './mshots-image';
|
|
import { ADMIN_URL } from '~/utils/admin-settings';
|
|
import './style.scss';
|
|
export * as services from './services';
|
|
|
|
export type events = { type: 'GO_BACK_TO_HOME' };
|
|
export const PREVIEW_IMAGE_OPTION = {
|
|
vpw: 1200,
|
|
vph: 742,
|
|
w: 588,
|
|
h: 363.58,
|
|
requeue: true,
|
|
};
|
|
|
|
export const Transitional = ( {
|
|
sendEvent,
|
|
}: {
|
|
sendEvent: ( event: events ) => void;
|
|
} ) => {
|
|
const homeUrl: string = getSetting( 'homeUrl', '' );
|
|
|
|
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="woocommerce-customize-store__transitional-site-img-container">
|
|
<MShotsImage
|
|
url={ homeUrl }
|
|
alt={ __( 'Your store screenshot', 'woocommerce' ) }
|
|
aria-labelledby={ __(
|
|
'Your store screenshot',
|
|
'woocommerce'
|
|
) }
|
|
options={ PREVIEW_IMAGE_OPTION }
|
|
/>
|
|
</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'
|
|
);
|
|
window.location.href = `${ 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>
|
|
);
|
|
};
|