woocommerce/plugins/woocommerce-admin/client/customize-store/intro/index.tsx

130 lines
3.0 KiB
TypeScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { chevronLeft } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { CustomizeStoreComponent } from '../types';
import './intro.scss';
export type events =
| { type: 'DESIGN_WITH_AI' }
| { type: 'CLICKED_ON_BREADCRUMB' }
| { type: 'SELECTED_BROWSE_ALL_THEMES' }
| { type: 'SELECTED_ACTIVE_THEME' }
| { type: 'SELECTED_NEW_THEME'; payload: { theme: string } };
export * as actions from './actions';
export * as services from './services';
export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
const {
intro: { themeCards },
} = context;
return (
<>
<div className="woocommerce-customize-store-header">
<h1>{ 'Site title' }</h1>
</div>
<div className="woocommerce-customize-store-container">
<div className="woocommerce-customize-store-sidebar">
<div className="woocommerce-customize-store-sidebar__title">
<button
onClick={ () => {
sendEvent( 'CLICKED_ON_BREADCRUMB' );
} }
>
{ chevronLeft }
</button>
{ __( 'Customize your store', 'woocommerce' ) }
</div>
<p>
{ __(
'Create a store that reflects your brand and business. Select one of our professionally designed themes to customize, or create your own using AI.',
'woocommerce'
) }
</p>
</div>
<div className="woocommerce-customize-store-main">
<div className="woocommerce-customize-store-banner">
<div
className={ `woocommerce-customize-store-banner-content` }
>
<h1>
{ __(
'Use the power of AI to design your store',
'woocommerce'
) }
</h1>
<p>
{ __(
'Design the look of your store, create pages, and generate copy using our built-in AI tools.',
'woocommerce'
) }
</p>
<button
onClick={ () =>
sendEvent( { type: 'DESIGN_WITH_AI' } )
}
>
{ __( 'Design with AI', 'woocommerce' ) }
</button>
</div>
</div>
<p>
{ __(
'Or select a professionally designed theme to customize and make your own.',
'woocommerce'
) }
</p>
<div className="woocommerce-customize-store-theme-cards">
{ themeCards?.map( ( themeCard ) => (
<div className="theme-card" key={ themeCard.slug }>
<div>
<img
src={ themeCard.image }
alt={ themeCard.description }
/>
</div>
<h2 className="theme-card__title">
{ themeCard.name }
</h2>
</div>
) ) }
</div>
<div className="woocommerce-customize-store-browse-themes">
<button
onClick={ () =>
sendEvent( {
type: 'SELECTED_BROWSE_ALL_THEMES',
} )
}
>
{ __( 'Browse all themes', 'woocommerce' ) }
</button>
</div>
<button
onClick={ () =>
sendEvent( { type: 'SELECTED_ACTIVE_THEME' } )
}
>
Assembler Hub
</button>
</div>
</div>
</>
);
};