woocommerce/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx

120 lines
2.8 KiB
TypeScript

/**
* External dependencies
*/
import { Fragment, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
Card,
CardHeader,
CardBody,
CardDivider,
Button,
Icon,
} from '@wordpress/components';
import { chevronUp, chevronDown } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { RecommendedChannel } from '~/marketing/data-multichannel/types';
import {
CardHeaderTitle,
CardHeaderDescription,
SmartPluginCardBody,
} from '~/marketing/components';
import { RegisteredChannel } from '~/marketing/types';
import { RegisteredChannelCardBody } from './RegisteredChannelCardBody';
import './Channels.scss';
type ChannelsProps = {
registeredChannels: Array< RegisteredChannel >;
recommendedChannels: Array< RecommendedChannel >;
onInstalledAndActivated?: () => void;
};
export const Channels: React.FC< ChannelsProps > = ( {
registeredChannels,
recommendedChannels,
onInstalledAndActivated,
} ) => {
const hasRegisteredChannels = registeredChannels.length >= 1;
/**
* State to collapse / expand the recommended channels.
* Initial state is expanded if there are no registered channels in first page load.
*/
const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
return (
<Card className="woocommerce-marketing-channels-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Channels', 'woocommerce' ) }
</CardHeaderTitle>
{ ! hasRegisteredChannels && (
<CardHeaderDescription>
{ __(
'Start by adding a channel to your store',
'woocommerce'
) }
</CardHeaderDescription>
) }
</CardHeader>
{ /* Registered channels section. */ }
{ registeredChannels.map( ( el, idx ) => {
return (
<Fragment key={ el.slug }>
<RegisteredChannelCardBody registeredChannel={ el } />
{ idx !== registeredChannels.length - 1 && (
<CardDivider />
) }
</Fragment>
);
} ) }
{ /* Recommended channels section. */ }
{ recommendedChannels.length >= 1 && (
<div>
{ hasRegisteredChannels && (
<>
<CardDivider />
<CardBody>
<Button
variant="link"
onClick={ () => setExpanded( ! expanded ) }
>
{ __( 'Add channels', 'woocommerce' ) }
<Icon
icon={
expanded ? chevronUp : chevronDown
}
size={ 24 }
/>
</Button>
</CardBody>
</>
) }
{ expanded &&
recommendedChannels.map( ( el, idx ) => {
return (
<Fragment key={ el.plugin }>
<SmartPluginCardBody
plugin={ el }
onInstalledAndActivated={
onInstalledAndActivated
}
/>
{ idx !==
recommendedChannels.length - 1 && (
<CardDivider />
) }
</Fragment>
);
} ) }
</div>
) }
</Card>
);
};