Code refactor for Campaigns card.
This commit is contained in:
Gan Eng Chin
parent
0abe368962
commit
c17f336acc
|
|
@ -1,39 +1,35 @@
|
|||
.woocommerce-marketing-campaigns-card {
|
||||
.woocommerce-marketing-campaigns-card-body {
|
||||
&__content {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
background-color: $studio-gray-0;
|
||||
border-radius: 28px;
|
||||
margin-bottom: $gap-smallest;
|
||||
}
|
||||
&__content-icon {
|
||||
background-color: $studio-gray-0;
|
||||
border-radius: 28px;
|
||||
margin-bottom: $gap-smallest;
|
||||
|
||||
&--error {
|
||||
svg {
|
||||
fill: $alert-red;
|
||||
}
|
||||
fill: $alert-red;
|
||||
}
|
||||
|
||||
&--empty {
|
||||
svg {
|
||||
fill: $studio-woocommerce-purple-50;
|
||||
}
|
||||
fill: $studio-woocommerce-purple-50;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
color: $gray-900;
|
||||
margin-bottom: $gap-smallest;
|
||||
}
|
||||
&__content-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
color: $gray-900;
|
||||
margin-bottom: $gap-smallest;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $gray-700;
|
||||
margin-bottom: $gap-smallest;
|
||||
}
|
||||
&__content-description {
|
||||
color: $gray-700;
|
||||
margin-bottom: $gap-smallest;
|
||||
}
|
||||
|
||||
.woocommerce-marketing-campaign-logo {
|
||||
|
|
|
|||
|
|
@ -26,76 +26,130 @@ export const Campaigns = () => {
|
|||
const [ page, setPage ] = useState( 1 );
|
||||
const { loading, data } = useCampaigns();
|
||||
|
||||
if ( loading ) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardHeaderTitle>
|
||||
{ __( 'Campaigns', 'woocommerce' ) }
|
||||
</CardHeaderTitle>
|
||||
</CardHeader>
|
||||
const getContent = () => {
|
||||
if ( loading ) {
|
||||
return (
|
||||
<CardBody>
|
||||
<CenteredSpinner />
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if ( ! data ) {
|
||||
return (
|
||||
<Card className="woocommerce-marketing-campaigns-card">
|
||||
<CardHeader>
|
||||
<CardHeaderTitle>
|
||||
{ __( 'Campaigns', 'woocommerce' ) }
|
||||
</CardHeaderTitle>
|
||||
</CardHeader>
|
||||
<CardBody className="woocommerce-marketing-campaigns-card-body woocommerce-marketing-campaigns-card-body--error">
|
||||
<Icon icon={ cancelCircleFilled } size={ 32 } />
|
||||
<div className="woocommerce-marketing-campaigns-card-body__title">
|
||||
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">
|
||||
{ __( 'An unexpected error occurred.', 'woocommerce' ) }
|
||||
</div>
|
||||
<div className="woocommerce-marketing-campaigns-card-body__description">
|
||||
<div className="woocommerce-marketing-campaigns-card-body__content-description">
|
||||
{ __(
|
||||
'Please try again later. Check the logs if the problem persists. ',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if ( data.length === 0 ) {
|
||||
return (
|
||||
<Card className="woocommerce-marketing-campaigns-card">
|
||||
<CardHeader>
|
||||
<CardHeaderTitle>
|
||||
{ __( 'Campaigns', 'woocommerce' ) }
|
||||
</CardHeaderTitle>
|
||||
</CardHeader>
|
||||
<CardBody className="woocommerce-marketing-campaigns-card-body woocommerce-marketing-campaigns-card-body--empty">
|
||||
<Icon icon={ megaphone } size={ 32 } />
|
||||
<div className="woocommerce-marketing-campaigns-card-body__title">
|
||||
if ( data.length === 0 ) {
|
||||
return (
|
||||
<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">
|
||||
{ __(
|
||||
'Advertise with marketing campaigns',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
<div className="woocommerce-marketing-campaigns-card-body__description">
|
||||
<div className="woocommerce-marketing-campaigns-card__content-description">
|
||||
{ __(
|
||||
'Easily create and manage marketing campaigns without leaving WooCommerce.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const perPage = 5;
|
||||
const total = data.length;
|
||||
const start = ( page - 1 ) * perPage;
|
||||
const pagedData = data.slice( start, start + perPage );
|
||||
const perPage = 5;
|
||||
const total = data.length;
|
||||
const start = ( page - 1 ) * perPage;
|
||||
const pagedData = data.slice( start, start + perPage );
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
caption={ __( 'Campaigns', 'woocommerce' ) }
|
||||
headers={ [
|
||||
{
|
||||
key: 'campaign',
|
||||
label: __( 'Campaign', 'woocommerce' ),
|
||||
},
|
||||
{
|
||||
key: 'cost',
|
||||
label: __( 'Cost', 'woocommerce' ),
|
||||
isNumeric: true,
|
||||
},
|
||||
] }
|
||||
rows={ pagedData.map( ( el ) => {
|
||||
return [
|
||||
{
|
||||
display: (
|
||||
<Flex gap={ 4 }>
|
||||
<FlexItem className="woocommerce-marketing-campaign-logo">
|
||||
<img
|
||||
src={ el.icon }
|
||||
alt={ el.channelName }
|
||||
width="16"
|
||||
height="16"
|
||||
/>
|
||||
</FlexItem>
|
||||
<FlexBlock>
|
||||
<Flex direction="column" gap={ 1 }>
|
||||
<FlexItem className="woocommerce-marketing-campaign-title">
|
||||
<Link href={ el.manageUrl }>
|
||||
{ el.title }
|
||||
</Link>
|
||||
</FlexItem>
|
||||
{ el.description && (
|
||||
<FlexItem className="woocommerce-marketing-campaign-description">
|
||||
{ el.description }
|
||||
</FlexItem>
|
||||
) }
|
||||
</Flex>
|
||||
</FlexBlock>
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
{ display: el.cost },
|
||||
];
|
||||
} ) }
|
||||
/>
|
||||
{ total > perPage && (
|
||||
<CardFooter className="woocommerce-marketing-campaigns-card-footer">
|
||||
<Pagination
|
||||
showPerPagePicker={ false }
|
||||
perPage={ perPage }
|
||||
page={ page }
|
||||
total={ total }
|
||||
onPageChange={ ( newPage: number ) => {
|
||||
setPage( newPage );
|
||||
} }
|
||||
/>
|
||||
</CardFooter>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="woocommerce-marketing-campaigns-card">
|
||||
|
|
@ -104,66 +158,7 @@ export const Campaigns = () => {
|
|||
{ __( 'Campaigns', 'woocommerce' ) }
|
||||
</CardHeaderTitle>
|
||||
</CardHeader>
|
||||
<Table
|
||||
caption={ __( 'Campaigns', 'woocommerce' ) }
|
||||
headers={ [
|
||||
{
|
||||
key: 'campaign',
|
||||
label: __( 'Campaign', 'woocommerce' ),
|
||||
},
|
||||
{
|
||||
key: 'cost',
|
||||
label: __( 'Cost', 'woocommerce' ),
|
||||
isNumeric: true,
|
||||
},
|
||||
] }
|
||||
rows={ pagedData.map( ( el ) => {
|
||||
return [
|
||||
{
|
||||
display: (
|
||||
<Flex gap={ 4 }>
|
||||
<FlexItem className="woocommerce-marketing-campaign-logo">
|
||||
<img
|
||||
src={ el.icon }
|
||||
alt={ el.channelName }
|
||||
width="16"
|
||||
height="16"
|
||||
/>
|
||||
</FlexItem>
|
||||
<FlexBlock>
|
||||
<Flex direction="column" gap={ 1 }>
|
||||
<FlexItem className="woocommerce-marketing-campaign-title">
|
||||
<Link href={ el.manageUrl }>
|
||||
{ el.title }
|
||||
</Link>
|
||||
</FlexItem>
|
||||
{ el.description && (
|
||||
<FlexItem className="woocommerce-marketing-campaign-description">
|
||||
{ el.description }
|
||||
</FlexItem>
|
||||
) }
|
||||
</Flex>
|
||||
</FlexBlock>
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
{ display: el.cost },
|
||||
];
|
||||
} ) }
|
||||
/>
|
||||
{ total > perPage && (
|
||||
<CardFooter className="woocommerce-marketing-campaigns-card-footer">
|
||||
<Pagination
|
||||
showPerPagePicker={ false }
|
||||
perPage={ perPage }
|
||||
page={ page }
|
||||
total={ total }
|
||||
onPageChange={ ( newPage: number ) => {
|
||||
setPage( newPage );
|
||||
} }
|
||||
/>
|
||||
</CardFooter>
|
||||
) }
|
||||
{ getContent() }
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue