Display recommended channels in create campaign modal.

This commit is contained in:
Gan Eng Chin 2022-12-20 02:37:02 +08:00
parent 5f50e63a1e
commit 17f2072d9f
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
2 changed files with 27 additions and 2 deletions

View File

@ -52,10 +52,27 @@
}
.woocommerce-marketing-create-campaign-modal {
max-width: 600px;
&__question-label {
font-size: 14px;
font-weight: 600;
line-height: 17px;
margin-bottom: 16px;
}
.components-button.is-link {
text-decoration: none;
font-size: 14px;
font-weight: 600;
line-height: 17px;
}
.woocommerce_marketing_plugin_card_body {
padding: $gap 0;
}
.components-card-divider {
display: none;
}
}

View File

@ -9,11 +9,17 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { CardHeaderTitle } from '~/marketing/components';
import {
CardHeaderTitle,
RecommendedChannelsList,
} from '~/marketing/components';
import { useRecommendedChannels } from '~/marketing/hooks';
export const CampaignsCardHeader = () => {
const [ open, setOpen ] = useState( false );
const [ collapsed, setCollapsed ] = useState( true );
const { data } = useRecommendedChannels();
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );
@ -51,7 +57,9 @@ export const CampaignsCardHeader = () => {
size={ 24 }
/>
</Button>
{ /* TODO: list of recommended channels here. */ }
{ ! collapsed && (
<RecommendedChannelsList recommendedChannels={ data } />
) }
</Modal>
) }
</CardHeader>