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

194 lines
4.8 KiB
TypeScript
Raw Normal View History

2022-12-15 17:13:32 +00:00
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
2022-12-18 12:37:25 +00:00
import { useState } from '@wordpress/element';
import {
Button,
Card,
CardHeader,
CardBody,
2022-12-18 12:37:25 +00:00
CardFooter,
Flex,
FlexItem,
FlexBlock,
} from '@wordpress/components';
2023-02-02 09:17:29 +00:00
import { Icon, megaphone, cancelCircleFilled } from '@wordpress/icons';
import {
Pagination,
Table,
TablePlaceholder,
Link,
} from '@woocommerce/components';
2022-12-15 17:13:32 +00:00
/**
* Internal dependencies
*/
import { CardHeaderTitle } from '~/marketing/components';
2022-12-17 13:08:14 +00:00
import { useCampaigns } from './useCampaigns';
import { CreateNewCampaignModal } from './CreateNewCampaignModal';
2022-12-15 17:13:32 +00:00
import './Campaigns.scss';
const tableCaption = __( 'Campaigns', 'woocommerce' );
const tableHeaders = [
{
key: 'campaign',
label: __( 'Campaign', 'woocommerce' ),
},
{
key: 'cost',
label: __( 'Cost', 'woocommerce' ),
isNumeric: true,
},
];
2023-02-23 18:13:20 +00:00
const perPage = 5;
2022-12-15 17:13:32 +00:00
2023-03-01 19:15:38 +00:00
/**
* Card displaying campaigns in a table.
*
* Pagination will be rendered in the card footer if the total number of campaigns is more than one page.
*
* If there are no campaigns, there will be no table but an info message instead.
*
* If there is an error, there will be no table but an error message instead.
*/
2022-12-15 17:13:32 +00:00
export const Campaigns = () => {
2022-12-18 12:37:25 +00:00
const [ page, setPage ] = useState( 1 );
const [ isModalOpen, setModalOpen ] = useState( false );
const { loading, data, meta } = useCampaigns( page, perPage );
const total = meta?.total;
2022-12-17 13:08:14 +00:00
2023-02-02 09:47:42 +00:00
const getContent = () => {
if ( loading ) {
return (
<TablePlaceholder
caption={ tableCaption }
headers={ tableHeaders }
numberOfRows={ perPage }
/>
2023-02-02 09:47:42 +00:00
);
}
2022-12-17 13:08:14 +00:00
2023-02-02 09:47:42 +00:00
if ( ! data ) {
return (
<CardBody className="woocommerce-marketing-campaigns-card__content">
<Icon
className="woocommerce-marketing-campaigns-card__content-icon woocommerce-marketing-campaigns-card__content-icon--error"
icon={ cancelCircleFilled }
size={ 32 }
/>
<div className="woocommerce-marketing-campaigns-card__content-title">
2023-02-02 09:17:29 +00:00
{ __( 'An unexpected error occurred.', 'woocommerce' ) }
</div>
2023-02-02 09:47:42 +00:00
<div className="woocommerce-marketing-campaigns-card-body__content-description">
2023-02-02 09:17:29 +00:00
{ __(
'Please try again later. Check the logs if the problem persists. ',
'woocommerce'
) }
</div>
2022-12-17 13:08:14 +00:00
</CardBody>
);
}
2022-12-17 13:08:14 +00:00
if ( data.length === 0 ) {
return (
2023-02-02 09:47:42 +00:00
<CardBody className="woocommerce-marketing-campaigns-card__content">
<Icon
className="woocommerce-marketing-campaigns-card__content-icon woocommerce-marketing-campaigns-card__content-icon--empty"
icon={ megaphone }
size={ 32 }
/>
<div className="woocommerce-marketing-campaigns-card__content-title">
2022-12-17 13:08:14 +00:00
{ __(
'Advertise with marketing campaigns',
'woocommerce'
) }
</div>
2023-02-02 09:47:42 +00:00
<div className="woocommerce-marketing-campaigns-card__content-description">
2022-12-17 13:08:14 +00:00
{ __(
'Easily create and manage marketing campaigns without leaving WooCommerce.',
'woocommerce'
) }
</div>
</CardBody>
);
}
2022-12-17 13:08:14 +00:00
return (
<Table
caption={ tableCaption }
headers={ tableHeaders }
rows={ data.map( ( el ) => {
return [
{
display: (
<Flex gap={ 4 }>
<FlexItem className="woocommerce-marketing-campaigns-card__campaign-logo">
<img
src={ el.icon }
alt={ el.channelName }
width="16"
height="16"
/>
</FlexItem>
<FlexBlock>
<Flex direction="column" gap={ 1 }>
<FlexItem className="woocommerce-marketing-campaigns-card__campaign-title">
<Link href={ el.manageUrl }>
{ el.title }
</Link>
</FlexItem>
{ el.description && (
<FlexItem className="woocommerce-marketing-campaigns-card__campaign-description">
{ el.description }
2023-02-02 09:47:42 +00:00
</FlexItem>
) }
</Flex>
</FlexBlock>
</Flex>
),
},
{ display: el.cost },
];
} ) }
/>
);
};
return (
<Card className="woocommerce-marketing-campaigns-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Campaigns', 'woocommerce' ) }
</CardHeaderTitle>
<Button
variant="secondary"
onClick={ () => setModalOpen( true ) }
>
{ __( 'Create new campaign', 'woocommerce' ) }
</Button>
{ isModalOpen && (
<CreateNewCampaignModal
onRequestClose={ () => setModalOpen( false ) }
/>
) }
</CardHeader>
2023-02-02 09:47:42 +00:00
{ getContent() }
{ total && total > perPage && (
<CardFooter className="woocommerce-marketing-campaigns-card__footer">
<Pagination
showPerPagePicker={ false }
perPage={ perPage }
page={ page }
total={ total }
onPageChange={ ( newPage: number ) => {
setPage( newPage );
} }
/>
</CardFooter>
) }
</Card>
);
2022-12-15 17:13:32 +00:00
};