Use ref instead of location hash to scroll to add channels section.
This commit is contained in:
parent
0cb2fb1cd0
commit
8fe3781266
|
@ -2,5 +2,4 @@ export { useIntroductionBanner } from './useIntroductionBanner';
|
|||
export { useInstalledPlugins } from './useInstalledPlugins';
|
||||
export { useRegisteredChannels } from './useRegisteredChannels';
|
||||
export { useRecommendedChannels } from './useRecommendedChannels';
|
||||
export { useIsLocationHashAddChannels } from './useIsLocationHashAddChannels';
|
||||
export { useNewCampaignTypes } from './useNewCampaignTypes';
|
||||
|
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
|
||||
|
||||
export const useIsLocationHashAddChannels = () => {
|
||||
const location = useLocation();
|
||||
|
||||
return location.hash === hashAddChannels;
|
||||
};
|
|
@ -27,12 +27,14 @@ import { RegisteredChannelCardBody } from './RegisteredChannelCardBody';
|
|||
import './Channels.scss';
|
||||
|
||||
type ChannelsProps = {
|
||||
addChannelsButtonRef: React.ForwardedRef< HTMLButtonElement >;
|
||||
registeredChannels: Array< RegisteredChannel >;
|
||||
recommendedChannels: Array< RecommendedChannel >;
|
||||
onInstalledAndActivated?: () => void;
|
||||
};
|
||||
|
||||
export const Channels: React.FC< ChannelsProps > = ( {
|
||||
addChannelsButtonRef,
|
||||
registeredChannels,
|
||||
recommendedChannels,
|
||||
onInstalledAndActivated,
|
||||
|
@ -81,6 +83,7 @@ export const Channels: React.FC< ChannelsProps > = ( {
|
|||
<CardDivider />
|
||||
<CardBody>
|
||||
<Button
|
||||
ref={ addChannelsButtonRef }
|
||||
variant="link"
|
||||
onClick={ () => setExpanded( ! expanded ) }
|
||||
>
|
||||
|
|
|
@ -10,7 +10,6 @@ import { Icon, trendingUp, megaphone, closeSmall } from '@wordpress/icons';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { CreateNewCampaignModal } from '~/marketing/components';
|
||||
import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
|
||||
import './IntroductionBanner.scss';
|
||||
import wooIconUrl from './woo.svg';
|
||||
import illustrationUrl from './illustration.svg';
|
||||
|
@ -19,11 +18,13 @@ import illustrationLargeUrl from './illustration-large.svg';
|
|||
type IntroductionBannerProps = {
|
||||
showButtons: boolean;
|
||||
onDismiss: () => void;
|
||||
onAddChannels: () => void;
|
||||
};
|
||||
|
||||
export const IntroductionBanner = ( {
|
||||
showButtons,
|
||||
onDismiss,
|
||||
onAddChannels,
|
||||
}: IntroductionBannerProps ) => {
|
||||
const [ open, setOpen ] = useState( false );
|
||||
|
||||
|
@ -98,7 +99,7 @@ export const IntroductionBanner = ( {
|
|||
>
|
||||
{ __( 'Create a campaign', 'woocommerce' ) }
|
||||
</Button>
|
||||
<Button variant="secondary" href={ hashAddChannels }>
|
||||
<Button variant="secondary" onClick={ onAddChannels }>
|
||||
{ __( 'Add channels', 'woocommerce' ) }
|
||||
</Button>
|
||||
</Flex>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useRef } from '@wordpress/element';
|
||||
import { useUser } from '@woocommerce/data';
|
||||
import { ScrollTo } from '@woocommerce/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
@ -14,7 +14,6 @@ import {
|
|||
useIntroductionBanner,
|
||||
useRegisteredChannels,
|
||||
useRecommendedChannels,
|
||||
useIsLocationHashAddChannels,
|
||||
} from '~/marketing/hooks';
|
||||
import { getAdminSetting } from '~/utils/admin-settings';
|
||||
import { IntroductionBanner } from './IntroductionBanner';
|
||||
|
@ -38,8 +37,8 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
|||
} = useRegisteredChannels();
|
||||
const { loading: loadingRecommended, data: dataRecommended } =
|
||||
useRecommendedChannels();
|
||||
const isLocationHashAddChannels = useIsLocationHashAddChannels();
|
||||
const { currentUserCan } = useUser();
|
||||
const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
|
||||
|
||||
const shouldShowExtensions =
|
||||
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
||||
|
@ -61,27 +60,24 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
|||
!! dataRegistered && dataRegistered.length >= 1
|
||||
}
|
||||
onDismiss={ dismissIntroductionBanner }
|
||||
onAddChannels={ () => {
|
||||
addChannelsButtonRef.current?.focus();
|
||||
addChannelsButtonRef.current?.click();
|
||||
addChannelsButtonRef.current?.scrollIntoView();
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
{ dataRegistered?.length && <Campaigns /> }
|
||||
{ dataRegistered &&
|
||||
dataRecommended &&
|
||||
( dataRegistered.length || dataRecommended.length ) &&
|
||||
( isLocationHashAddChannels ? (
|
||||
<ScrollTo>
|
||||
<Channels
|
||||
registeredChannels={ dataRegistered }
|
||||
recommendedChannels={ dataRecommended }
|
||||
onInstalledAndActivated={ refetch }
|
||||
/>
|
||||
</ScrollTo>
|
||||
) : (
|
||||
( dataRegistered.length || dataRecommended.length ) && (
|
||||
<Channels
|
||||
addChannelsButtonRef={ addChannelsButtonRef }
|
||||
registeredChannels={ dataRegistered }
|
||||
recommendedChannels={ dataRecommended }
|
||||
onInstalledAndActivated={ refetch }
|
||||
/>
|
||||
) ) }
|
||||
) }
|
||||
<InstalledExtensions />
|
||||
{ shouldShowExtensions && <DiscoverTools /> }
|
||||
<LearnMarketing />
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
export const idAddChannels = 'add-channels';
|
||||
export const hashAddChannels = `#${ idAddChannels }`;
|
Loading…
Reference in New Issue