89 lines
2.2 KiB
JavaScript
89 lines
2.2 KiB
JavaScript
/**
|
||
* External dependencies
|
||
*/
|
||
import React, { useState, useEffect } from '@wordpress/element';
|
||
import { Guide } from '@wordpress/components';
|
||
import { __ } from '@wordpress/i18n';
|
||
import { recordEvent } from '@woocommerce/tracks';
|
||
|
||
/**
|
||
* Internal dependencies
|
||
*/
|
||
import { LineChartIllustration } from './illustrations/line-chart';
|
||
import { InboxIllustration } from './illustrations/inbox';
|
||
import { PieChartIllustration } from './illustrations/pie-chart';
|
||
import { PageContent } from './page-content';
|
||
import './style.scss';
|
||
|
||
const pages = [
|
||
{
|
||
image: <LineChartIllustration />,
|
||
content: (
|
||
<PageContent
|
||
title={ __(
|
||
'Welcome to your WooCommerce store’s online HQ!',
|
||
'woocommerce-admin'
|
||
) }
|
||
body={ __(
|
||
"Here's where you’ll find setup suggestions, tips and tools, and key data on your store’s performance and earnings — all the basics for store management and growth.",
|
||
'woocommerce-admin'
|
||
) }
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
image: <InboxIllustration />,
|
||
content: (
|
||
<PageContent
|
||
title={ __(
|
||
'A personalized inbox full of relevant advice.',
|
||
'woocommerce-admin'
|
||
) }
|
||
body={ __(
|
||
'Check your inbox for helpful growth tips tailored to your store and notifications about key traffic and sales milestones. We look forward to celebrating them with you!',
|
||
'woocommerce-admin'
|
||
) }
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
image: <PieChartIllustration />,
|
||
content: (
|
||
<PageContent
|
||
title={ __(
|
||
'Good data leads to smart business decisions.',
|
||
'woocommerce-admin'
|
||
) }
|
||
body={
|
||
'Monitor your stats to improve performance, increase sales, and track your progress toward revenue goals. The more you know, the better you can serve your customers and grow your store.'
|
||
}
|
||
/>
|
||
),
|
||
},
|
||
];
|
||
|
||
export const WelcomeModal = ( { onClose } ) => {
|
||
const [ guideIsOpen, setGuideIsOpen ] = useState( true );
|
||
|
||
useEffect( () => {
|
||
recordEvent( 'task_list_welcome_modal_open' );
|
||
}, [] );
|
||
|
||
return (
|
||
<>
|
||
{ guideIsOpen && (
|
||
<Guide
|
||
onFinish={ () => {
|
||
setGuideIsOpen( false );
|
||
onClose();
|
||
recordEvent( 'task_list_welcome_modal_close' );
|
||
} }
|
||
className={ 'woocommerce__welcome-modal' }
|
||
finishButtonText={ __( "Let's go", 'woocommerce-admin' ) }
|
||
pages={ pages }
|
||
/>
|
||
) }
|
||
</>
|
||
);
|
||
};
|