Display recommended channels in a collapsible list in Channels card.

This commit is contained in:
Gan Eng Chin 2022-12-14 01:13:00 +08:00
parent 9963fd07ab
commit 4a2205bcd1
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
3 changed files with 68 additions and 10 deletions

View File

@ -4,4 +4,8 @@
align-items: flex-start;
gap: $gap-smallest;
}
.components-button.is-link {
text-decoration: none;
}
}

View File

@ -17,6 +17,7 @@ import {
import { useChannels } from './useChannels';
import './Channels.scss';
import { InstalledChannelCardBody } from './InstalledChannelCardBody';
import { CollapsibleRecommendedChannels } from './CollapsibleRecommendedChannels';
export const Channels = () => {
const {
@ -46,7 +47,8 @@ export const Channels = () => {
/*
* If users have no registered channels,
* we display recommended channels without collapsible list.
* we display recommended channels without collapsible list
* and with a description in the card header.
*/
if ( registeredChannels.length === 0 && recommendedChannels.length > 0 ) {
return (
@ -77,10 +79,10 @@ export const Channels = () => {
}
/*
* TODO: Users have registered channels,
* display the registered channels.
* Users have registered channels,
* so here we display the registered channels first.
* If there are recommended channels,
* display them in a collapsible list.
* we display them next in a collapsible list.
*/
return (
<Card className="woocommerce-marketing-channels-card">
@ -90,7 +92,7 @@ export const Channels = () => {
</CardHeaderTitle>
</CardHeader>
{ /* TODO: registered channels here. */ }
{ /* Registered channels section. */ }
{ registeredChannels.map( ( el, idx ) => {
return (
<Fragment key={ el.slug }>
@ -102,12 +104,11 @@ export const Channels = () => {
);
} ) }
{ /* TODO: recommended channels here. */ }
{ /* Recommended channels section. */ }
{ recommendedChannels.length > 0 && (
<>
<CardDivider />
<CardBody>recommended</CardBody>
</>
<CollapsibleRecommendedChannels
recommendedChannels={ recommendedChannels }
/>
) }
</Card>
);

View File

@ -0,0 +1,53 @@
/**
* External dependencies
*/
import { Fragment, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { CardBody, CardDivider, Button, Icon } from '@wordpress/components';
import { chevronUp, chevronDown } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { SmartPluginCardBody } from '~/marketing/components';
import { RecommendedChannel } from './types';
import './Channels.scss';
type RecommendedChannelsType = {
recommendedChannels: Array< RecommendedChannel >;
};
export const CollapsibleRecommendedChannels: React.FC<
RecommendedChannelsType
> = ( { recommendedChannels } ) => {
const [ collapsed, setCollapsed ] = useState( true );
return (
<>
<CardDivider />
<CardBody>
<Button
variant="link"
onClick={ () => setCollapsed( ! collapsed ) }
>
{ __( 'Add channels', 'woocommerce' ) }
<Icon
icon={ collapsed ? chevronDown : chevronUp }
size={ 24 }
/>
</Button>
</CardBody>
{ ! collapsed &&
recommendedChannels.map( ( el, idx ) => {
return (
<Fragment key={ el.plugin }>
<SmartPluginCardBody plugin={ el } />
{ idx < recommendedChannels.length - 1 && (
<CardDivider />
) }
</Fragment>
);
} ) }
</>
);
};