woocommerce/plugins/woocommerce-admin/client/homescreen/welcome-modal/index.js

90 lines
2.3 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 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 stores online HQ!',
'woocommerce-admin'
) }
body={ __(
"Here's where youll find setup suggestions, tips and tools, and key data on your stores 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.',
'woocommerce-admin'
) }
/>
),
},
];
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 }
/>
) }
</>
);
};