Skip to content

Commit

Permalink
Merge branch 'develop' into enhancement/8181-site-health-created-audi…
Browse files Browse the repository at this point in the history 
…ences.
  • Loading branch information
@ankitrox
ankitrox committed May 23, 2024
2 parents 77051fc + 6ca0730 commit 8d16c2e
Show file tree
Hide file tree
Showing 51 changed files with 2,066 additions and 215 deletions.
13 changes: 12 additions & 1 deletion assets/js/components/DashboardMainApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import { DAY_IN_SECONDS } from '../util';
import Header from './Header';
import DashboardSharingSettingsButton from './dashboard-sharing/DashboardSharingSettingsButton';
import WidgetContextRenderer from '../googlesitekit/widgets/components/WidgetContextRenderer';
import { AudienceSegmentationSetupCTAWidget } from '../modules/analytics-4/components/audience-segmentation/dashboard';
import EntitySearchInput from './EntitySearchInput';
import DateRangeSelector from './DateRangeSelector';
import HelpMenu from './help/HelpMenu';
Expand Down Expand Up @@ -75,9 +76,12 @@ import {
import OfflineNotification from './notifications/OfflineNotification';
import OverlayNotificationsRenderer from './OverlayNotification/OverlayNotificationsRenderer';
import { useMonitorInternetConnection } from '../hooks/useMonitorInternetConnection';
import { useFeature } from '../hooks/useFeature';
const { useSelect, useDispatch } = Data;

export default function DashboardMainApp() {
const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );

const [ showSurveyPortal, setShowSurveyPortal ] = useState( false );

const viewOnlyDashboard = useViewOnly();
Expand Down Expand Up @@ -249,7 +253,14 @@ export default function DashboardMainApp() {
<HelpMenu />
</Header>

{ ! viewOnlyDashboard && <ConsentModeSetupCTAWidget /> }
{ ! viewOnlyDashboard && (
<Fragment>
{ audienceSegmentationEnabled && (
<AudienceSegmentationSetupCTAWidget />
) }
<ConsentModeSetupCTAWidget />
</Fragment>
) }

<OverlayNotificationsRenderer />

Expand Down
7 changes: 7 additions & 0 deletions assets/js/components/notifications/SubtleNotifications.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@ import { Fragment } from '@wordpress/element';
/**
* Internal dependencies
*/
import AudienceSegmentationSetupSuccessSubtleNotification from '../../modules/analytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupSuccessSubtleNotification';
import GA4AdSenseLinkedNotification from './GA4AdSenseLinkedNotification';
import SetupSuccessSubtleNotification from './SetupSuccessSubtleNotification';
import { useFeature } from '../../hooks/useFeature';

export default function SubtleNotifications() {
const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );

// Each notification component rendered here has its own logic to determine
// whether it should be displayed; in most cases none of these components
// will be displayed, but it's also (currently) possible for multiple
Expand All @@ -37,6 +41,9 @@ export default function SubtleNotifications() {
// Because these notifications are subtle and small, this is acceptable UX.
return (
<Fragment>
{ audienceSegmentationEnabled && (
<AudienceSegmentationSetupSuccessSubtleNotification />
) }
<GA4AdSenseLinkedNotification />
<SetupSuccessSubtleNotification />
</Fragment>
Expand Down
219 changes: 141 additions & 78 deletions ...lytics-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,23 @@ import PropTypes from 'prop-types';
/**
* WordPress dependencies
*/
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { Fragment, useCallback, useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import Data from 'googlesitekit-data';
import { CORE_USER } from '../../../../../googlesitekit/datastore/user/constants';
import {
MODULES_ANALYTICS_4,
DATE_RANGE_OFFSET,
} from '../../../datastore/constants';
import { Button, SpinnerButton } from 'googlesitekit-components';
import { getPreviousDate } from '../../../../../util';
import whenActive from '../../../../../util/when-active';
import { withWidgetComponentProps } from '../../../../../googlesitekit/widgets/util';
import { Cell, Grid, Row } from '../../../../../material-components';
import {
BREAKPOINT_SMALL,
Expand All @@ -42,93 +51,146 @@ import BannerGraphicsSVGDesktop from '../../../../../../svg/graphics/audience-se
import BannerGraphicsSVGTablet from '../../../../../../svg/graphics/audience-segmentation-setup-tablet.svg';
import BannerGraphicsSVGMobile from '../../../../../../svg/graphics/audience-segmentation-setup-mobile.svg';

function AudienceSegmentationSetupCTAWidget( { Widget, title, description } ) {
const { useSelect, useDispatch } = Data;

function AudienceSegmentationSetupCTAWidget( { Widget } ) {
const [ isSaving, setIsSaving ] = useState( false );
const breakpoint = useBreakpoint();
const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
const isTabletBreakpoint = breakpoint === BREAKPOINT_TABLET;

const onEnableGroups = useCallback( () => {
const { enableAudienceGroup } = useDispatch( MODULES_ANALYTICS_4 );

const onEnableGroups = useCallback( async () => {
setIsSaving( true );
}, [] );

await enableAudienceGroup();
}, [ enableAudienceGroup ] );

const configuredAudiences = useSelect( ( select ) =>
select( MODULES_ANALYTICS_4 ).getConfiguredAudiences()
);

const hasDataWithinPast90Days = useSelect( ( select ) => {
const endDate = select( CORE_USER ).getReferenceDate();

const startDate = getPreviousDate(
endDate,
90 + DATE_RANGE_OFFSET // Add offset to ensure we have data for the entirety of the last 90 days.
);

const args = {
metrics: [ { name: 'totalUsers' } ],
startDate,
endDate,
};

return select( MODULES_ANALYTICS_4 ).hasZeroData( args ) === false;
} );

if ( configuredAudiences !== null || ! hasDataWithinPast90Days ) {
return null;
}

// TODO: We need to refactor this and the ConsentModeSetupCTAWidget to avoid this duplicate inlining of the widget context and area structure,
// and to ensure only one of these setup CTAs is shown at a time. This will be handled in a subsequent issue.
return (
<Widget
noPadding
className="googlesitekit-audience-segmentation-setup-cta-widget"
>
<Grid collapsed>
<div className="googlesitekit-widget-context">
<Grid className="googlesitekit-widget-area">
<Row>
<Cell
smSize={ 6 }
mdSize={ 8 }
lgSize={ 7 }
className="googlesitekit-widget-audience-segmentation-primary-cell"
>
<div className="googlesitekit-widget-audience-segmentation-text__wrapper">
<h3 className="googlesitekit-publisher-win__title">
{ title }
</h3>
<p>{ description }</p>
</div>
<div className="googlesitekit-widget-audience-segmentation-actions__wrapper">
<Fragment>
<SpinnerButton
className="googlesitekit-audience-segmentation-cta-button"
onClick={ onEnableGroups }
isSaving={ isSaving }
>
{ isSaving
? __(
'Enabling groups',
'google-site-kit'
)
: __(
'Enable groups',
'google-site-kit'
) }
</SpinnerButton>
<Button
tertiary
onClick={ () => {
return false; // @todo update when logic ready.
} }
>
{ __( 'Maybe later', 'google-site-kit' ) }
</Button>
</Fragment>
</div>
</Cell>
{ ! isMobileBreakpoint && ! isTabletBreakpoint && (
<Cell
alignBottom
className="googlesitekit-widget-audience-segmentation-svg__wrapper"
smSize={ 6 }
mdSize={ 3 }
lgSize={ 5 }
<Cell size={ 12 }>
<Widget
noPadding
className="googlesitekit-audience-segmentation-setup-cta-widget"
>
<BannerGraphicsSVGDesktop />
</Cell>
) }
{ isTabletBreakpoint && (
<Cell
className="googlesitekit-widget-audience-segmentation-svg__wrapper"
mdSize={ 8 }
>
<BannerGraphicsSVGTablet />
</Cell>
) }
{ isMobileBreakpoint && (
<Cell
className="googlesitekit-widget-audience-segmentation-svg__wrapper"
smSize={ 8 }
>
<BannerGraphicsSVGMobile />
</Cell>
) }
<Grid collapsed>
<Row>
<Cell
smSize={ 6 }
mdSize={ 8 }
lgSize={ 7 }
className="googlesitekit-widget-audience-segmentation-primary-cell"
>
<div className="googlesitekit-widget-audience-segmentation-text__wrapper">
<h3 className="googlesitekit-publisher-win__title">
{ __(
'Learn how different types of visitors interact with your site',
'google-site-kit'
) }
</h3>
<p>
{ __(
'Understand what brings new visitors to your site and keeps them coming back. Site Kit can now group your site visitors into relevant segments like "new" and "returning". To set up these new groups, Site Kit needs to update your Google Analytics property.',
'google-site-kit'
) }
</p>
</div>
<div className="googlesitekit-widget-audience-segmentation-actions__wrapper">
<Fragment>
<SpinnerButton
className="googlesitekit-audience-segmentation-cta-button"
onClick={ onEnableGroups }
isSaving={ isSaving }
>
{ isSaving
? __(
'Enabling groups',
'google-site-kit'
)
: __(
'Enable groups',
'google-site-kit'
) }
</SpinnerButton>
<Button
tertiary
onClick={ () => {
return false; // @todo update when logic ready.
} }
>
{ __(
'Maybe later',
'google-site-kit'
) }
</Button>
</Fragment>
</div>
</Cell>
{ ! isMobileBreakpoint &&
! isTabletBreakpoint && (
<Cell
alignBottom
className="googlesitekit-widget-audience-segmentation-svg__wrapper"
smSize={ 6 }
mdSize={ 3 }
lgSize={ 5 }
>
<BannerGraphicsSVGDesktop />
</Cell>
) }
{ isTabletBreakpoint && (
<Cell
className="googlesitekit-widget-audience-segmentation-svg__wrapper"
mdSize={ 8 }
>
<BannerGraphicsSVGTablet />
</Cell>
) }
{ isMobileBreakpoint && (
<Cell
className="googlesitekit-widget-audience-segmentation-svg__wrapper"
smSize={ 8 }
>
<BannerGraphicsSVGMobile />
</Cell>
) }
</Row>
</Grid>
</Widget>
</Cell>
</Row>
</Grid>
</Widget>
</div>
);
}

Expand All @@ -137,6 +199,7 @@ AudienceSegmentationSetupCTAWidget.propTypes = {
WidgetNull: PropTypes.elementType,
};

export default whenActive( { moduleName: 'analytics-4' } )(
AudienceSegmentationSetupCTAWidget
);
export default compose(
whenActive( { moduleName: 'analytics-4' } ),
withWidgetComponentProps( 'audienceSegmentationSetupCTA' )
)( AudienceSegmentationSetupCTAWidget );
Loading

0 comments on commit 8d16c2e

Please sign in to comment.