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

Load registered and recommended channels in MarketingOverviewMultichannel. 

The data will be used to conditionally display Campaigns card later.
This commit is contained in:
Gan Eng Chin 2022-12-24 01:14:02 +08:00
parent e950417542
commit 52dd8845cc
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
2 changed files with 40 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,65 +3,33 @@
*/
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Card, CardHeader, CardBody, CardDivider } from '@wordpress/components';
import { Card, CardHeader, CardDivider } from '@wordpress/components';
/**
* Internal dependencies
*/
import {
CardHeaderTitle,
CardHeaderDescription,
CenteredSpinner,
} from '~/marketing/components';
import {
useRegisteredChannels,
useRecommendedChannels,
} from '~/marketing/hooks';
import { CardHeaderTitle, CardHeaderDescription } from '~/marketing/components';
import { InstalledChannel, RecommendedChannel } from '~/marketing/types';
import { InstalledChannelCardBody } from './InstalledChannelCardBody';
import { RecommendedChannels } from './RecommendedChannels';
import { RecommendedChannelsList } from './RecommendedChannelsList';
import './Channels.scss';
export const Channels = () => {
const { loading: loadingRegistered, data: dataRegistered } =
useRegisteredChannels();
const { loading: loadingRecommended, data: dataRecommended } =
useRecommendedChannels();
/**
* TODO: we may need to filter the channels against
* `@woocommerce/data` installed plugins.
*/
if ( loadingRegistered || loadingRecommended ) {
return (
<Card>
<CardHeader>
<CardHeaderTitle>
{ __( 'Channels', 'woocommerce' ) }
</CardHeaderTitle>
</CardHeader>
<CardBody>
<CenteredSpinner />
</CardBody>
</Card>
);
}
type ChannelsProps = {
registeredChannels: Array< InstalledChannel >;
recommendedChannels: Array< RecommendedChannel >;
};
export const Channels: React.FC< ChannelsProps > = ( {
registeredChannels,
recommendedChannels,
} ) => {
/*
* If users have no registered channels,
* we should display recommended channels without collapsible list
* and with a description in the card header.
*/
if ( dataRegistered.length === 0 ) {
/**
* If for some reasons we don't have recommended channels,
* then we should not show the Channels card at all.
*/
if ( dataRecommended.length === 0 ) {
return null;
}
if ( registeredChannels.length === 0 ) {
return (
<Card className="woocommerce-marketing-channels-card">
<CardHeader>
@ -76,7 +44,7 @@ export const Channels = () => {
</CardHeaderDescription>
</CardHeader>
<RecommendedChannelsList
recommendedChannels={ dataRecommended }
recommendedChannels={ recommendedChannels }
/>
</Card>
);
@ -97,18 +65,22 @@ export const Channels = () => {
</CardHeader>
{ /* Registered channels section. */ }
{ dataRegistered.map( ( el, idx ) => {
{ registeredChannels.map( ( el, idx ) => {
return (
<Fragment key={ el.slug }>
<InstalledChannelCardBody installedChannel={ el } />
{ idx < dataRegistered.length - 1 && <CardDivider /> }
{ idx < registeredChannels.length - 1 && (
<CardDivider />
) }
</Fragment>
);
} ) }
{ /* Recommended channels section. */ }
{ dataRecommended.length > 0 && (
<RecommendedChannels recommendedChannels={ dataRecommended } />
{ recommendedChannels.length >= 1 && (
<RecommendedChannels
recommendedChannels={ recommendedChannels }
/>
) }
</Card>
);

20
plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
View File

@ -12,18 +12,36 @@ import { InstalledExtensions } from './InstalledExtensions';
import { DiscoverTools } from './DiscoverTools';
import { LearnMarketing } from './LearnMarketing';
import '~/marketing/data';
import {
useRegisteredChannels,
useRecommendedChannels,
} from '~/marketing/hooks';
import './MarketingOverviewMultichannel.scss';
import { CenteredSpinner } from '../components';
export const MarketingOverviewMultichannel: React.FC = () => {
const { loading: loadingRegistered, data: dataRegistered } =
useRegisteredChannels();
const { loading: loadingRecommended, data: dataRecommended } =
useRecommendedChannels();
const { currentUserCan } = useUser();
const shouldShowExtensions =
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
currentUserCan( 'install_plugins' );
if ( loadingRegistered || loadingRecommended ) {
return <CenteredSpinner />;
}
return (
<div className="woocommerce-marketing-overview-multichannel">
<Channels />
{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
<Channels
registeredChannels={ dataRegistered }
recommendedChannels={ dataRecommended }
/>
) }
<InstalledExtensions />
{ shouldShowExtensions && <DiscoverTools /> }
<LearnMarketing />