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

Display new campaign types in create campaign modal.

This commit is contained in:
Gan Eng Chin 2022-12-21 02:38:56 +08:00
parent 24d59f7316
commit 6b3fbdf16b
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
4 changed files with 170 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,11 +54,16 @@
.woocommerce-marketing-create-campaign-modal {
max-width: 600px;
&__question-label {
font-size: 14px;
font-weight: 600;
line-height: 17px;
margin-bottom: 16px;
.woocommerce-marketing-new-campaigns {
padding-top: $gap-large;
padding-bottom: $gap;
&__question-label {
font-size: 14px;
font-weight: 600;
line-height: 17px;
margin-bottom: 16px;
}
}
.components-button.is-link {
@ -75,4 +80,22 @@
.components-card-divider {
display: none;
}
.woocommerce-marketing-new-campaign-type {
padding: $gap 0;
&__name {
font-weight: 600;
font-size: 14px;
line-height: 20px;
}
&__description {
color: #555d66;
}
}
.woocommerce-marketing-add-channels {
padding-top: $gap;
}
}

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

@ -3,7 +3,15 @@
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Button, CardHeader, Modal, Icon } from '@wordpress/components';
import {
Button,
CardHeader,
Modal,
Icon,
Flex,
FlexBlock,
FlexItem,
} from '@wordpress/components';
import { chevronUp, chevronDown } from '@wordpress/icons';
/**
@ -14,11 +22,13 @@ import {
RecommendedChannelsList,
} from '~/marketing/components';
import { useRecommendedChannels } from '~/marketing/hooks';
import { useNewCampaignTypes } from './useNewCampaignTypes';
export const CampaignsCardHeader = () => {
const [ open, setOpen ] = useState( false );
const [ collapsed, setCollapsed ] = useState( true );
const { data } = useRecommendedChannels();
const { loading, data: newCampaignTypes } = useNewCampaignTypes();
const { data: recommendedChannels } = useRecommendedChannels();
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );
@ -37,34 +47,90 @@ export const CampaignsCardHeader = () => {
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. */ }
{ data.length > 0 && (
<>
<Button
variant="link"
onClick={ () => setCollapsed( ! collapsed ) }
>
{ __(
'Add channels for other campaign types',
'woocommerce'
) }
<Icon
icon={ collapsed ? chevronDown : chevronUp }
size={ 24 }
/>
</Button>
{ ! collapsed && (
<RecommendedChannelsList
recommendedChannels={ data }
/>
<div className="woocommerce-marketing-new-campaigns">
<div className="woocommerce-marketing-new-campaigns__question-label">
{ __(
'Where would you like to promote your products?',
'woocommerce'
) }
</>
</div>
<div>
{ newCampaignTypes.map( ( el ) => {
return (
<Flex
key={ el.id }
className="woocommerce-marketing-new-campaign-type"
gap={ 4 }
>
<FlexItem>
<img
src={ el.icon }
alt={ el.name }
width="32"
height="32"
/>
</FlexItem>
<FlexBlock>
<Flex direction="column" gap={ 1 }>
<FlexItem className="woocommerce-marketing-new-campaign-type__name">
{ el.name }
</FlexItem>
<FlexItem className="woocommerce-marketing-new-campaign-type__description">
{ el.description }
</FlexItem>
</Flex>
</FlexBlock>
<FlexItem>
<Button
variant="secondary"
href={ el.createUrl }
>
{ __(
'Create',
'woocommerce'
) }
</Button>
</FlexItem>
</Flex>
);
} ) }
</div>
</div>
{ recommendedChannels.length > 0 && (
<div className="woocommerce-marketing-add-channels">
<Flex direction="column">
<FlexItem>
<Button
variant="link"
onClick={ () =>
setCollapsed( ! collapsed )
}
>
{ __(
'Add channels for other campaign types',
'woocommerce'
) }
<Icon
icon={
collapsed
? chevronDown
: chevronUp
}
size={ 24 }
/>
</Button>
</FlexItem>
{ ! collapsed && (
<FlexItem>
<RecommendedChannelsList
recommendedChannels={
recommendedChannels
}
/>
</FlexItem>
) }
</Flex>
</div>
) }
</Modal>
) }

38
plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useNewCampaignTypes.ts Normal file
View File

@ -0,0 +1,38 @@
/**
* Internal dependencies
*/
import { CampaignType } from '~/marketing/types/CampaignType';
type UseNewCampaignTypes = {
loading: boolean;
data: Array< CampaignType >;
};
export const useNewCampaignTypes = (): UseNewCampaignTypes => {
return {
loading: false,
data: [
{
id: 'google-ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
name: 'Google',
description:
'Boost your product listings with a campaign that is automatically optimized to meet your goals',
createUrl:
'https://wc1.test/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fsetup-ads',
channelSlug: 'google-listings-and-ads',
channelName: 'Google Listings and Ads',
},
{
id: 'pinterest-ads',
icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/pinterest.svg',
name: 'Pinterest',
description:
'Create single or multi image ads that promote a product relevant to people’s interests (Opens in Pinterest Ads Manager)',
createUrl: 'https://pinterest.com/create-campaign',
channelSlug: 'pinterest-for-woocommerce',
channelName: 'Pinterest for WooCommerce',
},
],
};
};

9
plugins/woocommerce-admin/client/marketing/types/CampaignType.ts Normal file
View File

@ -0,0 +1,9 @@
export type CampaignType = {
id: string;
icon: string;
name: string;
description: string;
createUrl: string;
channelName: string;
channelSlug: string;
};