111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useRef } from '@wordpress/element';
|
|
import { useUser } from '@woocommerce/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import '~/marketing/data';
|
|
import '~/marketing/data-multichannel';
|
|
import { CenteredSpinner } from '~/marketing/components';
|
|
import {
|
|
useIntroductionBanner,
|
|
useCampaigns,
|
|
useRegisteredChannels,
|
|
useRecommendedChannels,
|
|
useCampaignTypes,
|
|
useInstalledPluginsWithoutChannels,
|
|
} from '~/marketing/hooks';
|
|
import { getAdminSetting } from '~/utils/admin-settings';
|
|
import { IntroductionBanner } from './IntroductionBanner';
|
|
import { Campaigns } from './Campaigns';
|
|
import { Channels, ChannelsRef } from './Channels';
|
|
import { InstalledExtensions } from './InstalledExtensions';
|
|
import { DiscoverTools } from './DiscoverTools';
|
|
import { LearnMarketing } from './LearnMarketing';
|
|
import './MarketingOverviewMultichannel.scss';
|
|
|
|
export const MarketingOverviewMultichannel: React.FC = () => {
|
|
const {
|
|
loading: loadingIntroductionBanner,
|
|
isIntroductionBannerDismissed,
|
|
dismissIntroductionBanner,
|
|
} = useIntroductionBanner();
|
|
const { loading: loadingCampaigns, meta: metaCampaigns } = useCampaigns();
|
|
const {
|
|
loading: loadingCampaignTypes,
|
|
data: dataCampaignTypes,
|
|
refetch: refetchCampaignTypes,
|
|
} = useCampaignTypes();
|
|
const {
|
|
loading: loadingRegistered,
|
|
data: dataRegistered,
|
|
refetch: refetchRegisteredChannels,
|
|
} = useRegisteredChannels();
|
|
const { loading: loadingRecommended, data: dataRecommended } =
|
|
useRecommendedChannels();
|
|
const { loadInstalledPluginsAfterActivation } =
|
|
useInstalledPluginsWithoutChannels();
|
|
const { currentUserCan } = useUser();
|
|
const channelsRef = useRef< ChannelsRef >( null );
|
|
|
|
if (
|
|
loadingIntroductionBanner ||
|
|
( loadingCampaigns && metaCampaigns?.total === undefined ) ||
|
|
( loadingCampaignTypes && ! dataCampaignTypes ) ||
|
|
( loadingRegistered && ! dataRegistered ) ||
|
|
( loadingRecommended && ! dataRecommended )
|
|
) {
|
|
return <CenteredSpinner />;
|
|
}
|
|
|
|
const showCampaigns = !! (
|
|
dataRegistered?.length &&
|
|
( isIntroductionBannerDismissed || metaCampaigns?.total )
|
|
);
|
|
|
|
const showChannels = !! (
|
|
dataRegistered &&
|
|
dataRecommended &&
|
|
( dataRegistered.length || dataRecommended.length )
|
|
);
|
|
|
|
const showExtensions = !! (
|
|
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
|
currentUserCan( 'install_plugins' )
|
|
);
|
|
|
|
const onInstalledAndActivated = ( pluginSlug: string ) => {
|
|
refetchCampaignTypes();
|
|
refetchRegisteredChannels();
|
|
loadInstalledPluginsAfterActivation( pluginSlug );
|
|
};
|
|
|
|
return (
|
|
<div className="woocommerce-marketing-overview-multichannel">
|
|
{ ! isIntroductionBannerDismissed && (
|
|
<IntroductionBanner
|
|
onDismissClick={ dismissIntroductionBanner }
|
|
onAddChannelsClick={ () => {
|
|
channelsRef.current?.scrollIntoAddChannels();
|
|
} }
|
|
/>
|
|
) }
|
|
{ showCampaigns && <Campaigns /> }
|
|
{ showChannels && (
|
|
<Channels
|
|
ref={ channelsRef }
|
|
registeredChannels={ dataRegistered }
|
|
recommendedChannels={ dataRecommended }
|
|
onInstalledAndActivated={ onInstalledAndActivated }
|
|
/>
|
|
) }
|
|
<InstalledExtensions />
|
|
{ showExtensions && <DiscoverTools /> }
|
|
<LearnMarketing />
|
|
</div>
|
|
);
|
|
};
|