Code refactor: Simplify boolean expression before `&&` in Marketing page (#37452)
This commit is contained in:
commit
5094cc6742
|
@ -47,6 +47,9 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
|
||||||
const { loadInstalledPluginsAfterActivation } =
|
const { loadInstalledPluginsAfterActivation } =
|
||||||
useInstalledPluginsWithoutChannels();
|
useInstalledPluginsWithoutChannels();
|
||||||
|
|
||||||
|
const hasCampaignTypes = !! campaignTypes?.length;
|
||||||
|
const hasRecommendedChannels = !! recommendedChannels?.length;
|
||||||
|
|
||||||
const onInstalledAndActivated = ( pluginSlug: string ) => {
|
const onInstalledAndActivated = ( pluginSlug: string ) => {
|
||||||
refetchCampaignTypes();
|
refetchCampaignTypes();
|
||||||
refetchRegisteredChannels();
|
refetchRegisteredChannels();
|
||||||
|
@ -64,7 +67,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
|
||||||
>
|
>
|
||||||
<div className="woocommerce-marketing-new-campaigns">
|
<div className="woocommerce-marketing-new-campaigns">
|
||||||
<div className="woocommerce-marketing-new-campaigns__question-label">
|
<div className="woocommerce-marketing-new-campaigns__question-label">
|
||||||
{ !! campaignTypes?.length
|
{ hasCampaignTypes
|
||||||
? __(
|
? __(
|
||||||
'Where would you like to promote your products?',
|
'Where would you like to promote your products?',
|
||||||
'woocommerce'
|
'woocommerce'
|
||||||
|
@ -109,7 +112,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
{ __( 'Create', 'woocommerce' ) }
|
{ __( 'Create', 'woocommerce' ) }
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
{ !! isExternalURL( el.createUrl ) && (
|
{ isExternalURL( el.createUrl ) && (
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Icon
|
<Icon
|
||||||
icon={ external }
|
icon={ external }
|
||||||
|
@ -123,7 +126,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
|
||||||
</Flex>
|
</Flex>
|
||||||
) ) }
|
) ) }
|
||||||
</div>
|
</div>
|
||||||
{ !! recommendedChannels?.length && (
|
{ hasRecommendedChannels && (
|
||||||
<div className="woocommerce-marketing-add-channels">
|
<div className="woocommerce-marketing-add-channels">
|
||||||
<Flex direction="column">
|
<Flex direction="column">
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
|
|
|
@ -16,13 +16,14 @@ import '../data';
|
||||||
const CouponsOverview = () => {
|
const CouponsOverview = () => {
|
||||||
const { currentUserCan } = useUser();
|
const { currentUserCan } = useUser();
|
||||||
|
|
||||||
const shouldShowExtensions =
|
const showExtensions = !! (
|
||||||
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
||||||
currentUserCan( 'install_plugins' );
|
currentUserCan( 'install_plugins' )
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="woocommerce-marketing-coupons">
|
<div className="woocommerce-marketing-coupons">
|
||||||
{ !! shouldShowExtensions && (
|
{ showExtensions && (
|
||||||
<RecommendedExtensions
|
<RecommendedExtensions
|
||||||
title={ __(
|
title={ __(
|
||||||
'Recommended coupon extensions',
|
'Recommended coupon extensions',
|
||||||
|
|
|
@ -158,6 +158,8 @@ export const Campaigns = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const showFooter = !! ( total && total > perPage );
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="woocommerce-marketing-campaigns-card">
|
<Card className="woocommerce-marketing-campaigns-card">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
|
@ -170,14 +172,14 @@ export const Campaigns = () => {
|
||||||
>
|
>
|
||||||
{ __( 'Create new campaign', 'woocommerce' ) }
|
{ __( 'Create new campaign', 'woocommerce' ) }
|
||||||
</Button>
|
</Button>
|
||||||
{ !! isModalOpen && (
|
{ isModalOpen && (
|
||||||
<CreateNewCampaignModal
|
<CreateNewCampaignModal
|
||||||
onRequestClose={ () => setModalOpen( false ) }
|
onRequestClose={ () => setModalOpen( false ) }
|
||||||
/>
|
/>
|
||||||
) }
|
) }
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
{ getContent() }
|
{ getContent() }
|
||||||
{ !! ( total && total > perPage ) && (
|
{ showFooter && (
|
||||||
<CardFooter className="woocommerce-marketing-campaigns-card__footer">
|
<CardFooter className="woocommerce-marketing-campaigns-card__footer">
|
||||||
<Pagination
|
<Pagination
|
||||||
showPerPagePicker={ false }
|
showPerPagePicker={ false }
|
||||||
|
|
|
@ -103,7 +103,7 @@ export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
|
||||||
{ /* Recommended channels section. */ }
|
{ /* Recommended channels section. */ }
|
||||||
{ recommendedChannels.length >= 1 && (
|
{ recommendedChannels.length >= 1 && (
|
||||||
<div>
|
<div>
|
||||||
{ !! hasRegisteredChannels && (
|
{ hasRegisteredChannels && (
|
||||||
<>
|
<>
|
||||||
<CardDivider />
|
<CardDivider />
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
@ -127,7 +127,7 @@ export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</>
|
</>
|
||||||
) }
|
) }
|
||||||
{ !! expanded &&
|
{ expanded &&
|
||||||
recommendedChannels.map( ( el, idx ) => (
|
recommendedChannels.map( ( el, idx ) => (
|
||||||
<Fragment key={ el.plugin }>
|
<Fragment key={ el.plugin }>
|
||||||
<SmartPluginCardBody
|
<SmartPluginCardBody
|
||||||
|
|
|
@ -47,8 +47,9 @@ export const IntroductionBanner = ( {
|
||||||
* and clicking on the "Add channels" button in this introduction banner
|
* and clicking on the "Add channels" button in this introduction banner
|
||||||
* will scroll to the button in Channels card.
|
* will scroll to the button in Channels card.
|
||||||
*/
|
*/
|
||||||
const showAddChannelsButton =
|
const showAddChannelsButton = !! (
|
||||||
!! dataRegistered?.length && !! dataRecommended?.length;
|
dataRegistered?.length && dataRecommended?.length
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="woocommerce-marketing-introduction-banner">
|
<Card className="woocommerce-marketing-introduction-banner">
|
||||||
|
|
|
@ -61,14 +61,21 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
||||||
return <CenteredSpinner />;
|
return <CenteredSpinner />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const shouldShowCampaigns = !! (
|
const showCampaigns = !! (
|
||||||
dataRegistered?.length &&
|
dataRegistered?.length &&
|
||||||
( isIntroductionBannerDismissed || metaCampaigns?.total )
|
( isIntroductionBannerDismissed || metaCampaigns?.total )
|
||||||
);
|
);
|
||||||
|
|
||||||
const shouldShowExtensions =
|
const showChannels = !! (
|
||||||
|
dataRegistered &&
|
||||||
|
dataRecommended &&
|
||||||
|
( dataRegistered.length || dataRecommended.length )
|
||||||
|
);
|
||||||
|
|
||||||
|
const showExtensions = !! (
|
||||||
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
||||||
currentUserCan( 'install_plugins' );
|
currentUserCan( 'install_plugins' )
|
||||||
|
);
|
||||||
|
|
||||||
const onInstalledAndActivated = ( pluginSlug: string ) => {
|
const onInstalledAndActivated = ( pluginSlug: string ) => {
|
||||||
refetchCampaignTypes();
|
refetchCampaignTypes();
|
||||||
|
@ -86,9 +93,8 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
||||||
} }
|
} }
|
||||||
/>
|
/>
|
||||||
) }
|
) }
|
||||||
{ shouldShowCampaigns && <Campaigns /> }
|
{ showCampaigns && <Campaigns /> }
|
||||||
{ !! ( dataRegistered && dataRecommended ) &&
|
{ showChannels && (
|
||||||
!! ( dataRegistered.length || dataRecommended.length ) && (
|
|
||||||
<Channels
|
<Channels
|
||||||
ref={ channelsRef }
|
ref={ channelsRef }
|
||||||
registeredChannels={ dataRegistered }
|
registeredChannels={ dataRegistered }
|
||||||
|
@ -97,7 +103,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
||||||
/>
|
/>
|
||||||
) }
|
) }
|
||||||
<InstalledExtensions />
|
<InstalledExtensions />
|
||||||
{ !! shouldShowExtensions && <DiscoverTools /> }
|
{ showExtensions && <DiscoverTools /> }
|
||||||
<LearnMarketing />
|
<LearnMarketing />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: dev
|
||||||
|
|
||||||
|
Simplify boolean expression before && in Marketing page.
|
Loading…
Reference in New Issue