Use SmartPluginCardBody in Channels component.

This commit is contained in:
Gan Eng Chin 2022-12-10 00:51:57 +08:00
parent 5da2385d41
commit 7852448a7a
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
1 changed files with 52 additions and 8 deletions

View File

@ -1,8 +1,9 @@
/**
* External dependencies
*/
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Card, CardHeader, CardBody } from '@wordpress/components';
import { Card, CardHeader, CardBody, CardDivider } from '@wordpress/components';
/**
* Internal dependencies
@ -11,6 +12,7 @@ import {
CardHeaderTitle,
CardHeaderDescription,
CenteredSpinner,
SmartPluginCardBody,
} from '~/marketing/components';
import { useChannels } from './useChannels';
import './Channels.scss';
@ -21,6 +23,11 @@ export const Channels = () => {
data: { registeredChannels, recommendedChannels },
} = useChannels();
/**
* TODO: we may need to filter the channels against
* `@woocommerce/data` installed plugins.
*/
if ( loading ) {
return (
<Card>
@ -36,21 +43,58 @@ export const Channels = () => {
);
}
const description =
registeredChannels.length === 0 &&
recommendedChannels.length > 0 &&
__( 'Start by adding a channel to your store', 'woocommerce' );
/*
* If users have no registered channels,
* we display recommended channels without collapsible list.
*/
if ( registeredChannels.length === 0 && recommendedChannels.length > 0 ) {
return (
<Card className="woocommerce-marketing-channels-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Channels', 'woocommerce' ) }
</CardHeaderTitle>
<CardHeaderDescription>
{ __(
'Start by adding a channel to your store',
'woocommerce'
) }
</CardHeaderDescription>
</CardHeader>
{ recommendedChannels.map( ( el, idx ) => {
return (
<Fragment key={ el.plugin }>
<SmartPluginCardBody plugin={ el } />
{ idx < recommendedChannels.length - 1 && (
<CardDivider />
) }
</Fragment>
);
} ) }
</Card>
);
}
/*
* TODO: Users have registered channels,
* display the registered channels.
* If there are recommended channels,
* display them in a collapsible list.
*/
return (
<Card className="woocommerce-marketing-channels-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Channels', 'woocommerce' ) }
</CardHeaderTitle>
<CardHeaderDescription>{ description }</CardHeaderDescription>
</CardHeader>
{ /* TODO: */ }
<CardBody>Body</CardBody>
{ /* TODO: registered channels here. */ }
{ /* TODO: recommended channels here. */ }
{ recommendedChannels.length > 0 && (
<CardBody>recommended</CardBody>
) }
</Card>
);
};