Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add CampaignsCardHeader component with modal.

This commit is contained in:
Gan Eng Chin 2022-12-20 01:17:30 +08:00
parent 558ddf2609
commit 08661353eb
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
3 changed files with 73 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss
View File

@ -50,3 +50,12 @@
border-top: none;
}
}
.woocommerce-marketing-create-campaign-modal {
&__question-label {
font-size: 14px;
font-weight: 600;
line-height: 17px;
margin-bottom: 16px;
}
}

32
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
View File

@ -4,9 +4,7 @@
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import {
Button,
Card,
CardHeader,
CardBody,
CardFooter,
Flex,
@ -19,9 +17,10 @@ import { Pagination, Table } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { CardHeaderTitle, CenteredSpinner } from '~/marketing/components';
import { CenteredSpinner } from '~/marketing/components';
import { useCampaigns } from './useCampaigns';
import './Campaigns.scss';
import { CampaignsCardHeader } from './CampaignsCardHeader';
export const Campaigns = () => {
const [ page, setPage ] = useState( 1 );
@ -30,14 +29,7 @@ export const Campaigns = () => {
if ( loading ) {
return (
<Card>
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary">
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
</CardHeader>
<CampaignsCardHeader />
<CardBody>
<CenteredSpinner />
</CardBody>
@ -48,14 +40,7 @@ export const Campaigns = () => {
if ( data.length === 0 ) {
return (
<Card className="woocommerce-marketing-campaigns-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary">
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
</CardHeader>
<CampaignsCardHeader />
<CardBody className="woocommerce-marketing-campaigns-card-body-empty-content">
<Icon icon={ megaphone } size={ 32 } />
<div className="woocommerce-marketing-campaigns-card-body-empty-content-title">
@ -82,14 +67,7 @@ export const Campaigns = () => {
return (
<Card className="woocommerce-marketing-campaigns-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary">
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
</CardHeader>
<CampaignsCardHeader />
<Table
caption={ __( 'Campaigns', 'woocommerce' ) }
headers={ [

59
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CampaignsCardHeader.tsx Normal file
View File

@ -0,0 +1,59 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Button, CardHeader, Modal, Icon } from '@wordpress/components';
import { chevronUp, chevronDown } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { CardHeaderTitle } from '~/marketing/components';
export const CampaignsCardHeader = () => {
const [ open, setOpen ] = useState( false );
const [ collapsed, setCollapsed ] = useState( true );
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );
return (
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button variant="secondary" onClick={ openModal }>
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
{ open && (
<Modal
className="woocommerce-marketing-create-campaign-modal"
title={ __( 'Create a new campaign', 'woocommerce' ) }
onRequestClose={ closeModal }
>
<div className="woocommerce-marketing-create-campaign-modal__question-label">
{ __(
'Where would you like to promote your products?',
'woocommerce'
) }
</div>
{ /* TODO: list of campaign type here. */ }
<Button
variant="link"
onClick={ () => setCollapsed( ! collapsed ) }
>
{ __(
'Add channels for other campaign types',
'woocommerce'
) }
<Icon
icon={ collapsed ? chevronDown : chevronUp }
size={ 24 }
/>
</Button>
{ /* TODO: list of recommended channels here. */ }
</Modal>
) }
</CardHeader>
);
};