chore: Emit metric when wizard is unmounted

Author: michaeldowseza

pages/wizard/navigation.page.tsx

@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import Wizard, { WizardProps } from '~components/wizard';
+import Toggle from '~components/toggle';
+import Button from '~components/button';
+import Link from '~components/link';
+import styles from './styles.scss';
+
+import { i18nStrings } from './common';
+
+const steps: WizardProps.Step[] = [
+  {
+    title: 'Step 1',
+    content: (
+      <div className={styles['step-content']}>
+        <div id="content-text">Content 1</div>
+      </div>
+    ),
+  },
+  {
+    title: 'Step 2',
+    content: (
+      <div className={styles['step-content']}>
+        <div id="content-text">Content 2</div>
+      </div>
+    ),
+  },
+  {
+    title: 'Step 3',
+    info: <Link variant="info">Info</Link>,
+    content: (
+      <div className={styles['step-content']}>
+        {Array.from(Array(15).keys()).map(key => (
+          <div key={key} className={styles['content-item']}>
+            Item {key}
+          </div>
+        ))}
+      </div>
+    ),
+  },
+];
+
+export default function WizardPage() {
+  const [activeStepIndex, setActiveStepIndex] = useState(0);
+  const [renderWizard, setRenderWizard] = useState<boolean>(true);
+  return (
+    <div>
+      <Toggle checked={renderWizard} ariaLabel={'toggle'} onChange={({ detail }) => setRenderWizard(detail.checked)} />
+      <input id="focus-reset" aria-label="input" />
+      {renderWizard && (
+        <Wizard
+          id="wizard"
+          steps={steps}
+          i18nStrings={i18nStrings}
+          activeStepIndex={activeStepIndex}
+          onNavigate={e => setActiveStepIndex(e.detail.requestedStepIndex)}
+          secondaryActions={activeStepIndex === 2 ? <Button>Save as draft</Button> : null}
+        />
+      )}
+    </div>
+  );
+}

src/wizard/__tests__/wizard.test.tsx

@@ -695,7 +695,6 @@ describe('Metrics', () => {
         eventContext: 'csa_wizard_step2',
         eventDetail: 'step2',
         eventType: 'csa_wizard_submit',
-        eventValue: expect.any(String),
         timestamp: expect.any(Number),
       })
     );

src/wizard/index.tsx

@@ -16,7 +16,14 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 
-import { trackStartStep, trackNavigate, trackSubmit, trackStartWizard } from './internal/analytics';
+import {
+  trackStartStep,
+  trackNavigate,
+  trackSubmit,
+  trackStartWizard,
+  trackEndWizard,
+  trackCancel,
+} from './internal/analytics';
 
 export { WizardProps };
 
@@ -61,7 +68,10 @@ export default function Wizard({
   };
   const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');
   const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');
-  const onCancelClick = () => fireNonCancelableEvent(onCancel);
+  const onCancelClick = () => {
+    trackCancel(actualActiveStepIndex, funnelId);
+    fireNonCancelableEvent(onCancel);
+  };
   const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');
   const onPrimaryClick = () => {
     if (isLastStep) {
@@ -90,6 +100,11 @@ export default function Wizard({
 
   useEffect(() => {
     trackStartWizard();
+
+    return () => {
+      trackEndWizard(funnelId);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- this is intentional
   }, []);
 
   useEffect(() => {

src/wizard/internal/analytics.tsx

@@ -16,7 +16,10 @@ const createEventDetail = (stepIndex = 0) => `step${stepIndex + 1}`;
 // A custom time cache is used to not clear the timer between navigation attempts
 // This allows us the ability to track time to attempt each step as well as the time to complete
 // each step
-const timeCache: Record<string, number> = {};
+let timeCache: Record<string, number>;
+let currentStepIndex: number;
+let success: boolean;
+
 const timeStart = (key = 'current') => {
   timeCache[key] = Date.now();
 };
@@ -36,10 +39,29 @@ const timeEnd = (key = 'current', clear = false) => {
 };
 
 export const trackStartWizard = () => {
+  timeCache = {};
+  currentStepIndex = 0;
+  success = false;
+
   timeStart(prefix);
 };
 
-export const trackStartStep = (stepIndex?: number, funnelId?: string) => {
+export const trackEndWizard = (funnelId: string | undefined) => {
+  // End the timer of the wizard
+  const time = timeEnd(prefix, true);
+
+  const eventContext = createEventContext(currentStepIndex);
+  metrics.sendPanoramaMetric({
+    eventContext,
+    eventDetail: `${success}`,
+    eventType: createEventType('end'),
+    ...(time !== undefined && { eventValue: time.toString() }),
+    ...(funnelId && { funnel: funnelId }),
+  });
+};
+
+export const trackStartStep = (stepIndex: number, funnelId?: string) => {
+  currentStepIndex = stepIndex;
   const eventContext = createEventContext(stepIndex);
 
   // End the timer of the previous step
@@ -76,9 +98,9 @@ export const trackNavigate = (
 };
 
 export const trackSubmit = (stepIndex: number, funnelId?: string) => {
-  const eventContext = createEventContext(stepIndex);
-  // End the timer of the wizard
+  success = true;
   const time = timeEnd(prefix);
+  const eventContext = createEventContext(stepIndex);
 
   metrics.sendPanoramaMetric({
     eventContext,
@@ -88,3 +110,17 @@ export const trackSubmit = (stepIndex: number, funnelId?: string) => {
     ...(funnelId && { funnel: funnelId }),
   });
 };
+
+export const trackCancel = (stepIndex: number, funnelId?: string) => {
+  success = false;
+  const time = timeEnd(prefix);
+  const eventContext = createEventContext(stepIndex);
+
+  metrics.sendPanoramaMetric({
+    eventContext,
+    eventDetail: createEventDetail(stepIndex),
+    eventType: createEventType('cancel'),
+    ...(time !== undefined && { eventValue: time.toString() }),
+    ...(funnelId && { funnel: funnelId }),
+  });
+};