Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create property and measurement ID from SetupBanner #5717

Merged
merged 14 commits into from
Sep 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions assets/js/components/notifications/BannerNotification/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ function BannerNotification( {
WinImageSVG,
rounded = false,
footer,
ctaComponent,
tofumatt marked this conversation as resolved.
Show resolved Hide resolved
} ) {
// Closed notifications are invisible, but still occupy space.
const [ isClosed, setIsClosed ] = useState( false );
Expand Down Expand Up @@ -334,7 +335,7 @@ function BannerNotification( {

// ctaLink links are always buttons, in which case the dismiss should be a Link.
// If there is only a dismiss however, it should be the primary action with a Button.
const DismissComponent = ctaLink ? Link : Button;
const DismissComponent = ctaLink || ctaComponent ? Link : Button;

return (
<section
Expand Down Expand Up @@ -398,8 +399,13 @@ function BannerNotification( {
</Fragment>
) }

{ ( ctaLink || isDismissible || dismiss ) && (
{ ( ctaLink ||
isDismissible ||
dismiss ||
ctaComponent ) && (
<div className="googlesitekit-publisher-win__actions">
{ ctaComponent }

{ ctaLink && (
<Button
className="googlesitekit-notification__cta"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import { AdminMenuTooltip } from '../../../../../components/AdminMenuTooltip/Adm
import { getBannerDismissalExpiryTime } from '../../../utils/banner-dismissal-expiry';
const { useSelect } = Data;

export default function ReminderBanner( { onCTAClick } ) {
export default function ReminderBanner( { onSubmitSuccess } ) {
const referenceDateString = useSelect( ( select ) =>
select( CORE_USER ).getReferenceDate()
);
Expand Down Expand Up @@ -79,8 +79,8 @@ export default function ReminderBanner( { onCTAClick } ) {
/* TODO: Internationalize title below */
description={ 'Placeholder description text to replace.' }
ctaLabel={ __( 'Set up now', 'google-site-kit' ) }
ctaLink={ onCTAClick ? '#' : null }
onCTAClick={ onCTAClick }
ctaLink={ onSubmitSuccess ? '#' : null }
onCTAClick={ onSubmitSuccess }
dismiss={ __( 'Remind me later', 'google-site-kit' ) }
dismissExpires={ getBannerDismissalExpiryTime(
referenceDateString
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
/**
* WordPress dependencies
*/
import { Fragment } from '@wordpress/element';
import { Fragment, useCallback, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

/**
Expand All @@ -31,18 +31,25 @@ import {
PropertySelect,
UseSnippetSwitch,
} from '../../../../analytics-4/components/common';
import ErrorNotice from '../../../../../components/ErrorNotice';
import SpinnerButton from '../../../../../components/SpinnerButton';
import {
MODULES_ANALYTICS_4,
PROPERTY_CREATE,
} from '../../../datastore/constants';
import useExistingTagEffect from '../../../../analytics-4/hooks/useExistingTagEffect';
import { MODULES_ANALYTICS } from '../../../../analytics/datastore/constants';
import { MODULES_ANALYTICS_4 } from '../../../datastore/constants';
import { CORE_USER } from '../../../../../googlesitekit/datastore/user/constants';
import { ACTIVATION_ACKNOWLEDGEMENT_TOOLTIP_STATE_KEY } from '../../../constants';
import { useTooltipState } from '../../../../../components/AdminMenuTooltip/useTooltipState';
import { useShowTooltip } from '../../../../../components/AdminMenuTooltip/useShowTooltip';
import { AdminMenuTooltip } from '../../../../../components/AdminMenuTooltip/AdminMenuTooltip';
import { getBannerDismissalExpiryTime } from '../../../utils/banner-dismissal-expiry';
const { useSelect } = Data;
const { useDispatch, useSelect } = Data;

export default function SetupBanner( { onSubmitSuccess } ) {
const [ errorNotice, setErrorNotice ] = useState( null );

export default function SetupBanner( { onCTAClick } ) {
const hasExistingProperty = useSelect( ( select ) => {
const accountID = select( MODULES_ANALYTICS ).getAccountID();
const properties =
Expand All @@ -59,6 +66,22 @@ export default function SetupBanner( { onCTAClick } ) {
select( CORE_USER ).getReferenceDate()
);

const { submitChanges, selectProperty } =
useDispatch( MODULES_ANALYTICS_4 );

const handleSubmitChanges = useCallback( async () => {
const { error } = await submitChanges();

if ( error ) {
setErrorNotice( error );

return;
}

// Ask the parent component to show the success banner.
onSubmitSuccess();
}, [ onSubmitSuccess, submitChanges ] );

const { isTooltipVisible } = useTooltipState(
ACTIVATION_ACKNOWLEDGEMENT_TOOLTIP_STATE_KEY
);
Expand Down Expand Up @@ -137,47 +160,50 @@ export default function SetupBanner( { onCTAClick } ) {
) }
</div>
);
} else if ( existingTag ) {
title = __(
'No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site',
'google-site-kit'
);
ctaLabel = __( 'Create property', 'google-site-kit' );
footer = sprintf(
/* translators: %s: The existing tag ID. */
__(
'A GA4 tag %s is found on this site but this property is not associated with your Google Analytics account. You can always add/edit this in the Site Kit Settings.',
'google-site-kit'
),
existingTag
);
} else {
selectProperty( PROPERTY_CREATE );

title = __(
'No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site',
'google-site-kit'
);
ctaLabel = __( 'Create property', 'google-site-kit' );
footer = __(
'You can always add/edit this in the Site Kit Settings.',
'google-site-kit'
);

if ( existingTag ) {
footer = sprintf(
/* translators: %s: The existing tag ID. */
__(
'A GA4 tag %s is found on this site but this property is not associated with your Google Analytics account. You can always add/edit this in the Site Kit Settings.',
'google-site-kit'
),
existingTag
);
} else {
footer = __(
'You can always add/edit this in the Site Kit Settings.',
'google-site-kit'
);
}
}

return (
<BannerNotification
id="ga4-activation-banner"
className="googlesitekit-ga4-setup-banner"
title={ title }
ctaLabel={ ctaLabel }
ctaLink={ onCTAClick ? '#' : null }
onCTAClick={ onCTAClick }
ctaComponent={
<SpinnerButton onClick={ handleSubmitChanges }>
{ ctaLabel }
</SpinnerButton>
}
footer={ <p>{ footer }</p> }
dismiss={ __( 'Cancel', 'google-site-kit' ) }
dismissExpires={ getBannerDismissalExpiryTime(
referenceDateString
) }
onDismiss={ showTooltip }
>
{ errorNotice && <ErrorNotice error={ errorNotice } /> }
{ children }
</BannerNotification>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ NoPropertyWithTag.decorators = [
export default {
title: 'Modules/Analytics4/SetupBanner',
args: {
onCTAClick: () => {},
onSubmitSuccess: () => {},
},
decorators: [
( Story ) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function ActivationBanner() {
select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
);

const handleCTAClick = () => {
const handleSubmit = () => {
if ( step === ACTIVATION_STEP_REMINDER ) {
setStep( ACTIVATION_STEP_SETUP );
}
Expand All @@ -65,9 +65,9 @@ export default function ActivationBanner() {

switch ( step ) {
case ACTIVATION_STEP_REMINDER:
return <ReminderBanner onCTAClick={ handleCTAClick } />;
return <ReminderBanner onSubmitSuccess={ handleSubmit } />;
case ACTIVATION_STEP_SETUP:
return <SetupBanner onCTAClick={ handleCTAClick } />;
return <SetupBanner onSubmitSuccess={ handleSubmit } />;
case ACTIVATION_STEP_SUCCESS:
return <SuccessBanner />;
default:
Expand Down