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';
|
2022-12-18 12:08:21 +00:00
|
|
|
import {
|
2022-12-21 17:52:24 +00:00
|
|
|
Button,
|
2022-12-18 12:08:21 +00:00
|
|
|
Card,
|
2022-12-21 17:52:24 +00:00
|
|
|
CardHeader,
|
2022-12-18 12:08:21 +00:00
|
|
|
CardBody,
|
2022-12-18 12:37:25 +00:00
|
|
|
CardFooter,
|
2022-12-18 12:08:21 +00:00
|
|
|
Flex,
|
|
|
|
FlexItem,
|
|
|
|
FlexBlock,
|
|
|
|
} from '@wordpress/components';
|
2023-02-02 09:17:29 +00:00
|
|
|
import { Icon, megaphone, cancelCircleFilled } from '@wordpress/icons';
|
2023-02-24 09:09:42 +00:00
|
|
|
import {
|
|
|
|
Pagination,
|
|
|
|
Table,
|
|
|
|
TablePlaceholder,
|
|
|
|
Link,
|
|
|
|
} from '@woocommerce/components';
|
2022-12-15 17:13:32 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2023-02-24 09:09:42 +00:00
|
|
|
import { CardHeaderTitle } from '~/marketing/components';
|
2022-12-17 13:08:14 +00:00
|
|
|
import { useCampaigns } from './useCampaigns';
|
2022-12-21 17:52:24 +00:00
|
|
|
import { CreateNewCampaignModal } from './CreateNewCampaignModal';
|
2022-12-15 17:13:32 +00:00
|
|
|
import './Campaigns.scss';
|
2022-12-21 17:52:24 +00:00
|
|
|
|
2023-02-24 09:09:42 +00:00
|
|
|
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 );
|
2023-03-09 14:11:53 +00:00
|
|
|
const [ isModalOpen, setModalOpen ] = useState( false );
|
2023-03-09 15:46:54 +00:00
|
|
|
const { loading, data, meta } = useCampaigns( page, perPage );
|
2023-02-24 09:09:42 +00:00
|
|
|
const total = meta?.total;
|
2022-12-17 13:08:14 +00:00
|
|
|
|
2023-02-02 09:47:42 +00:00
|
|
|
const getContent = () => {
|
2023-03-09 15:46:54 +00:00
|
|
|
if ( loading ) {
|
2022-12-21 17:52:24 +00:00
|
|
|
return (
|
2023-02-24 09:09:42 +00:00
|
|
|
<TablePlaceholder
|
|
|
|
caption={ tableCaption }
|
|
|
|
headers={ tableHeaders }
|
2023-02-24 15:48:04 +00:00
|
|
|
numberOfRows={ perPage }
|
2023-02-24 09:09:42 +00:00
|
|
|
/>
|
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-21 17:52:24 +00:00
|
|
|
);
|
|
|
|
}
|
2022-12-17 13:08:14 +00:00
|
|
|
|
2022-12-21 17:52:24 +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-21 17:52:24 +00:00
|
|
|
);
|
|
|
|
}
|
2022-12-17 13:08:14 +00:00
|
|
|
|
2022-12-21 17:52:24 +00:00
|
|
|
return (
|
2022-12-18 11:34:16 +00:00
|
|
|
<Table
|
2023-02-24 09:09:42 +00:00
|
|
|
caption={ tableCaption }
|
|
|
|
headers={ tableHeaders }
|
|
|
|
rows={ data.map( ( el ) => {
|
2022-12-18 11:34:16 +00:00
|
|
|
return [
|
2022-12-18 12:08:21 +00:00
|
|
|
{
|
|
|
|
display: (
|
|
|
|
<Flex gap={ 4 }>
|
2023-02-24 09:09:42 +00:00
|
|
|
<FlexItem className="woocommerce-marketing-campaigns-card__campaign-logo">
|
2022-12-18 12:08:21 +00:00
|
|
|
<img
|
|
|
|
src={ el.icon }
|
|
|
|
alt={ el.channelName }
|
|
|
|
width="16"
|
|
|
|
height="16"
|
|
|
|
/>
|
|
|
|
</FlexItem>
|
|
|
|
<FlexBlock>
|
|
|
|
<Flex direction="column" gap={ 1 }>
|
2023-02-24 09:09:42 +00:00
|
|
|
<FlexItem className="woocommerce-marketing-campaigns-card__campaign-title">
|
|
|
|
<Link href={ el.manageUrl }>
|
2022-12-18 12:08:21 +00:00
|
|
|
{ el.title }
|
2023-02-24 09:09:42 +00:00
|
|
|
</Link>
|
2022-12-18 12:08:21 +00:00
|
|
|
</FlexItem>
|
2023-02-24 09:09:42 +00:00
|
|
|
{ el.description && (
|
|
|
|
<FlexItem className="woocommerce-marketing-campaigns-card__campaign-description">
|
|
|
|
{ el.description }
|
2023-02-02 09:47:42 +00:00
|
|
|
</FlexItem>
|
2023-02-24 09:09:42 +00:00
|
|
|
) }
|
2022-12-18 12:08:21 +00:00
|
|
|
</Flex>
|
|
|
|
</FlexBlock>
|
|
|
|
</Flex>
|
|
|
|
),
|
|
|
|
},
|
2022-12-18 11:34:16 +00:00
|
|
|
{ display: el.cost },
|
|
|
|
];
|
|
|
|
} ) }
|
|
|
|
/>
|
2022-12-21 17:52:24 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Card className="woocommerce-marketing-campaigns-card">
|
|
|
|
<CardHeader>
|
|
|
|
<CardHeaderTitle>
|
|
|
|
{ __( 'Campaigns', 'woocommerce' ) }
|
|
|
|
</CardHeaderTitle>
|
2023-03-09 14:11:53 +00:00
|
|
|
<Button
|
|
|
|
variant="secondary"
|
|
|
|
onClick={ () => setModalOpen( true ) }
|
|
|
|
>
|
2022-12-21 17:52:24 +00:00
|
|
|
{ __( 'Create new campaign', 'woocommerce' ) }
|
|
|
|
</Button>
|
2023-03-09 14:11:53 +00:00
|
|
|
{ isModalOpen && (
|
2022-12-21 17:52:24 +00:00
|
|
|
<CreateNewCampaignModal
|
2023-03-09 14:11:53 +00:00
|
|
|
onRequestClose={ () => setModalOpen( false ) }
|
2022-12-21 17:52:24 +00:00
|
|
|
/>
|
|
|
|
) }
|
|
|
|
</CardHeader>
|
2023-02-02 09:47:42 +00:00
|
|
|
{ getContent() }
|
2023-02-24 09:09:42 +00:00
|
|
|
{ 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>
|
|
|
|
) }
|
2022-12-18 11:34:16 +00:00
|
|
|
</Card>
|
|
|
|
);
|
2022-12-15 17:13:32 +00:00
|
|
|
};
|