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

Merge branch 'feature/34903-multichannel-marketing-frontend/34906-channels-card' into feature/34903-multichannel-marketing-frontend/34905-campaigns-card 

Conflicts:
	plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
This commit is contained in:
Gan Eng Chin 2022-12-24 01:39:57 +08:00
parent 558ddf2609 52dd8845cc
commit ee6fa9508e
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
9 changed files with 64 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/marketing/hooks/index.ts
View File

@ -1 +1,3 @@
export { useInstalledPlugins } from './useInstalledPlugins';
export { useRegisteredChannels } from './useRegisteredChannels';
export { useRecommendedChannels } from './useRecommendedChannels';

0
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRecommendedChannels.ts → plugins/woocommerce-admin/client/marketing/hooks/useRecommendedChannels.ts
View File

15
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useRegisteredChannels.ts → plugins/woocommerce-admin/client/marketing/hooks/useRegisteredChannels.ts
View File

@ -1,3 +1,13 @@
/**
* Internal dependencies
*/
import { InstalledChannel } from '~/marketing/types';
type UseRegisteredChannels = {
loading: boolean;
data: Array< InstalledChannel >;
};
// // TODO: To be removed. This is for testing loading state.
// export const useRegisteredChannels = () => {
// // TODO: call API here to get data.
@ -17,7 +27,6 @@
// data: [
// {
// slug: 'google-listings-and-ads',
// name: 'Google Listings and Ads',
// title: 'Google Listings and Ads',
// description:
// 'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.',
@ -42,7 +51,6 @@
// data: [
// {
// slug: 'google-listings-and-ads',
// name: 'Google Listings and Ads',
// title: 'Google Listings and Ads',
// description:
// 'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.',
@ -59,7 +67,7 @@
// };
// TODO: To be removed. This is for testing everything works okay.
export const useRegisteredChannels = () => {
export const useRegisteredChannels = (): UseRegisteredChannels => {
// TODO: call API here to get data.
// The following are just dummy data for testing now.
return {
@ -67,7 +75,6 @@ export const useRegisteredChannels = () => {
data: [
{
slug: 'google-listings-and-ads',
name: 'Google Listings and Ads',
title: 'Google Listings and Ads',
description:
'Get in front of shoppers and drive traffic so you can grow your business with Smart Shopping Campaigns and free listings.',

4
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.scss
View File

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

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

@ -3,54 +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 { useChannels } from './useChannels';
import './Channels.scss';
import { CardHeaderTitle, CardHeaderDescription } from '~/marketing/components';
import { InstalledChannel, RecommendedChannel } from '~/marketing/types';
import { InstalledChannelCardBody } from './InstalledChannelCardBody';
import { CollapsibleRecommendedChannels } from './CollapsibleRecommendedChannels';
import { RecommendedChannels } from './RecommendedChannels';
import { RecommendedChannelsList } from './RecommendedChannelsList';
import './Channels.scss';
export const Channels = () => {
const {
loading,
data: { registeredChannels, recommendedChannels },
} = useChannels();
/**
* TODO: we may need to filter the channels against
* `@woocommerce/data` installed plugins.
*/
if ( loading ) {
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 display recommended channels without collapsible list
* we should display recommended channels without collapsible list
* and with a description in the card header.
*/
if ( registeredChannels.length === 0 && recommendedChannels.length > 0 ) {
if ( registeredChannels.length === 0 ) {
return (
<Card className="woocommerce-marketing-channels-card">
<CardHeader>
@ -98,8 +77,8 @@ export const Channels = () => {
} ) }
{ /* Recommended channels section. */ }
{ recommendedChannels.length > 0 && (
<CollapsibleRecommendedChannels
{ recommendedChannels.length >= 1 && (
<RecommendedChannels
recommendedChannels={ recommendedChannels }
/>
) }

8
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.scss Normal file
View File

@ -0,0 +1,8 @@
.woocommerce-marketing-recommended-channels {
.components-button.is-link {
font-size: 14px;
font-weight: 600;
line-height: 17px;
text-decoration: none;
}
}

14
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/CollapsibleRecommendedChannels.tsx → plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { Fragment, useState } from '@wordpress/element';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { CardBody, CardDivider, Button, Icon } from '@wordpress/components';
import { chevronUp, chevronDown } from '@wordpress/icons';
@ -11,19 +11,19 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
*/
import { RecommendedChannel } from '~/marketing/types';
import { RecommendedChannelsList } from './RecommendedChannelsList';
import './Channels.scss';
import './RecommendedChannels.scss';
type RecommendedChannelsType = {
recommendedChannels: Array< RecommendedChannel >;
};
export const CollapsibleRecommendedChannels: React.FC<
RecommendedChannelsType
> = ( { recommendedChannels } ) => {
export const RecommendedChannels: React.FC< RecommendedChannelsType > = ( {
recommendedChannels,
} ) => {
const [ collapsed, setCollapsed ] = useState( true );
return (
<>
<div className="woocommerce-marketing-recommended-channels">
<CardDivider />
<CardBody>
<Button
@ -42,6 +42,6 @@ export const CollapsibleRecommendedChannels: React.FC<
recommendedChannels={ recommendedChannels }
/>
) }
</>
</div>
);
};

20
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts
View File

@ -1,20 +0,0 @@
/**
* Internal dependencies
*/
import { useRecommendedChannels } from './useRecommendedChannels';
import { useRegisteredChannels } from './useRegisteredChannels';
export const useChannels = () => {
const { loading: loadingRegistered, data: dataRegistered } =
useRegisteredChannels();
const { loading: loadingRecommended, data: dataRecommended } =
useRecommendedChannels();
return {
loading: loadingRegistered || loadingRecommended,
data: {
registeredChannels: dataRegistered,
recommendedChannels: dataRecommended,
},
};
};

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

@ -13,20 +13,38 @@ 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">
{ /* TODO: show Campaigns card only when there is at least one registered channel. */ }
<Campaigns />
<Channels />
{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
<Channels
registeredChannels={ dataRegistered }
recommendedChannels={ dataRecommended }
/>
) }
<InstalledExtensions />
{ shouldShowExtensions && <DiscoverTools /> }
<LearnMarketing />