feat(sandbox): add segment analytics integration (#1344)

* segment integration

Author: mfrancisc

workspaces/sandbox/plugins/sandbox/package.json

@@ -49,6 +49,7 @@
     "@mui/material": "^5.16.14",
     "@rhds/elements": "^2.0.1",
     "@rhds/icons": "^1.1.1",
+    "@segment/analytics-next": "^1.0.0",
     "libphonenumber-js": "^1.12.8",
     "lodash": "^4.17.21",
     "react-phone-number-input": "^3.4.12",

workspaces/sandbox/plugins/sandbox/src/api/RegistrationBackendClient.tsx

@@ -35,6 +35,7 @@ export interface RegistrationService {
   ): Promise<void>;
   completePhoneVerification(code: string): Promise<void>;
   verifyActivationCode(code: string): Promise<void>;
+  getSegmentWriteKey(): Promise<string>;
 }
 
 export class RegistrationBackendClient implements RegistrationService {
@@ -192,4 +193,21 @@ export class RegistrationBackendClient implements RegistrationService {
       throw new Error(error?.message);
     }
   };
+
+  getSegmentWriteKey = async (): Promise<string> => {
+    const signupAPI = this.configApi.getString('sandbox.signupAPI');
+    const response = await this.secureFetchApi.fetch(
+      `${signupAPI}/analytics/segment-write-key`,
+      {
+        method: 'GET',
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch Segment write key: ${response.status}`);
+    }
+
+    const writeKey = await response.text();
+    return writeKey.trim();
+  };
 }

workspaces/sandbox/plugins/sandbox/src/components/Modals/AnsibleLaunchInfoModal.tsx

@@ -38,7 +38,7 @@ import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { Link } from '@backstage/core-components';
 import { useSandboxContext } from '../../hooks/useSandboxContext';
 import { AnsibleStatus } from '../../utils/aap-utils';
-import { pushCtaEvent } from '../../utils/eddl-utils';
+import { useTrackAnalytics } from '../../utils/eddl-utils';
 import { Intcmp } from '../../hooks/useProductURLs';
 
 // Import the logos
@@ -64,14 +64,17 @@ export const AnsibleLaunchInfoModal: React.FC<AnsibleLaunchInfoModalProps> = ({
     ansibleStatus,
   } = useSandboxContext();
 
+  const trackAnalytics = useTrackAnalytics();
+
   // Handle CTA click for analytics
-  const handleAnsibleCtaClick = () => {
+  const handleAnsibleCtaClick = async () => {
     if (ansibleUILink) {
-      pushCtaEvent(
+      await trackAnalytics(
         'Get Started - Ansible',
         'Catalog',
         ansibleUILink,
         Intcmp.AAP,
+        'cta',
       );
     }
   };

workspaces/sandbox/plugins/sandbox/src/components/Modals/PhoneVerificationSteps/PhoneNumberStep.tsx

@@ -32,7 +32,10 @@ import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 
 import CircularProgress from '@mui/material/CircularProgress';
-import { getEddlDataAttributes } from '../../../utils/eddl-utils';
+import {
+  getEddlDataAttributes,
+  useTrackAnalytics,
+} from '../../../utils/eddl-utils';
 
 const FLAG_FETCH_URL =
   'https://catamphetamine.github.io/country-flag-icons/3x2';
@@ -65,6 +68,7 @@ export const PhoneNumberStep: React.FC<PhoneNumberFormProps> = ({
   error,
 }) => {
   const theme = useTheme();
+  const trackAnalytics = useTrackAnalytics();
   const sendCodeEddlAttributes = getEddlDataAttributes(
     'Send Code',
     'Verification',
@@ -74,6 +78,22 @@ export const PhoneNumberStep: React.FC<PhoneNumberFormProps> = ({
     'Verification',
   );
 
+  // Handle Send Code click for analytics tracking
+  const handleSendCodeClick = async () => {
+    await trackAnalytics('Send Code', 'Verification', window.location.href);
+    handlePhoneNumberSubmit();
+  };
+
+  // Handle Cancel click for analytics tracking
+  const handleCancelClick = async () => {
+    await trackAnalytics(
+      'Cancel Verification',
+      'Verification',
+      window.location.href,
+    );
+    handleClose();
+  };
+
   const PhoneInputField = forwardRef(function PhoneInputField(
     props: TextFieldProps,
     ref: ForwardedRef<React.ComponentType<TextFieldProps>>,
@@ -213,7 +233,7 @@ export const PhoneNumberStep: React.FC<PhoneNumberFormProps> = ({
         <Button
           data-testid="submit-phone-button"
           variant="contained"
-          onClick={handlePhoneNumberSubmit}
+          onClick={handleSendCodeClick}
           type="submit"
           disabled={!phoneNumber || loading}
           endIcon={
@@ -226,7 +246,7 @@ export const PhoneNumberStep: React.FC<PhoneNumberFormProps> = ({
         <Button
           data-testid="close-phone-button"
           variant="outlined"
-          onClick={handleClose}
+          onClick={handleCancelClick}
           sx={{
             border: `1px solid ${theme.palette.primary.main}`,
             '&:hover': {

workspaces/sandbox/plugins/sandbox/src/components/Modals/PhoneVerificationSteps/VerificationCodeStep.tsx

@@ -39,7 +39,10 @@ import { useSandboxContext } from '../../../hooks/useSandboxContext';
 import { Country, getCountryCallingCode } from 'react-phone-number-input';
 import { useApi } from '@backstage/core-plugin-api';
 import { registerApiRef } from '../../../api';
-import { getEddlDataAttributes } from '../../../utils/eddl-utils';
+import {
+  getEddlDataAttributes,
+  useTrackAnalytics,
+} from '../../../utils/eddl-utils';
 
 type VerificationCodeProps = {
   id: Product;
@@ -69,6 +72,7 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
   setLoading,
 }) => {
   const theme = useTheme();
+  const trackAnalytics = useTrackAnalytics();
   const startTrialEddlAttributes = getEddlDataAttributes(
     'Start Trial',
     'Verification',
@@ -161,7 +165,7 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
       setVerificationCodeError(undefined);
       setLoading(true);
       await registerApi.completePhoneVerification(otp.join(''));
-      const maxAttempts = 5;
+      const maxAttempts = 60;
       const retryInterval = 1000; // 1 second
 
       // Poll until user is found or max attempts reached
@@ -216,6 +220,28 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
     }
   };
 
+  // Handle Start Trial click for analytics tracking
+  const handleStartTrialClickWithTracking = async (pdt: Product) => {
+    await trackAnalytics('Start Trial', 'Verification', window.location.href);
+    handleStartTrialClick(pdt);
+  };
+
+  // Handle Resend Code click for analytics tracking
+  const handleResendCodeClickWithTracking = async () => {
+    await trackAnalytics('Resend Code', 'Verification', window.location.href);
+    handleResendCode();
+  };
+
+  // Handle Cancel click for analytics tracking
+  const handleCancelVerificationClick = async () => {
+    await trackAnalytics(
+      'Cancel Verification',
+      'Verification',
+      window.location.href,
+    );
+    handleClose();
+  };
+
   return (
     <>
       <DialogTitle
@@ -297,7 +323,7 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
             backgroundColor: 'transparent !important',
           }}
           onClick={() => {
-            handleResendCode();
+            handleResendCodeClickWithTracking();
             inputRefs.current[0]?.focus();
           }}
           {...resendCodeEddlAttributes}
@@ -331,7 +357,7 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
           data-testid="submit-opt-button"
           variant="contained"
           type="submit"
-          onClick={() => handleStartTrialClick(id)}
+          onClick={() => handleStartTrialClickWithTracking(id)}
           disabled={otp.some(digit => !digit) || loading}
           endIcon={
             loading && <CircularProgress size={20} sx={{ color: '#AFAFAF' }} />
@@ -343,7 +369,7 @@ export const VerificationCodeStep: React.FC<VerificationCodeProps> = ({
         <Button
           data-testid="close-opt-button"
           variant="outlined"
-          onClick={handleClose}
+          onClick={handleCancelVerificationClick}
           sx={{
             border: `1px solid ${theme.palette.primary.main}`,
             '&:hover': {

workspaces/sandbox/plugins/sandbox/src/components/Modals/PhoneVerificationSteps/__tests__/PhoneNumberStep.test.tsx

@@ -15,12 +15,19 @@
  */
 
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { PhoneNumberStep } from '../PhoneNumberStep';
 import { E164Number } from 'libphonenumber-js/types';
 import { Country } from 'react-phone-number-input';
 import { parsePhoneNumber } from 'libphonenumber-js/min';
 import { PhoneNumber } from 'libphonenumber-js';
+import * as eddlUtils from '../../../../utils/eddl-utils';
+
+// Mock the useTrackAnalytics hook
+jest.mock('../../../../utils/eddl-utils', () => ({
+  ...jest.requireActual('../../../../utils/eddl-utils'),
+  useTrackAnalytics: jest.fn(),
+}));
 
 // Mock the props interface if it's not exported from the component file
 declare module '../PhoneNumberStep' {
@@ -43,10 +50,16 @@ describe('PhoneNumberStep', () => {
   const mockHandleClose = jest.fn();
   const mockHandlePhoneNumberSubmit = jest.fn();
   const mockSetCountry = jest.fn();
+  const mockTrackAnalytics = jest.fn();
   const phoneNumber = parsePhoneNumber(' 8 (800) 555-35-35 ', 'RU');
 
   beforeEach(() => {
     jest.clearAllMocks();
+    // Mock the useTrackAnalytics hook to return a mock function
+    mockTrackAnalytics.mockResolvedValue(undefined); // Make it async
+    (eddlUtils.useTrackAnalytics as jest.Mock).mockReturnValue(
+      mockTrackAnalytics,
+    );
   });
 
   function renderComponent(inputPhoneNumber: PhoneNumber, error?: string) {
@@ -86,37 +99,49 @@ describe('PhoneNumberStep', () => {
     expect(closeButton).toHaveLength(1);
   });
 
-  test('should submit phone number when clicking send code button', () => {
+  test('should submit phone number when clicking send code button', async () => {
     renderComponent(phoneNumber);
     // Find and click send code button
     const submitPhoneNumberButton = screen.getByRole('button', {
       name: /Send code/i,
     });
     fireEvent.click(submitPhoneNumberButton);
-    expect(mockHandlePhoneNumberSubmit).toHaveBeenCalled();
+
+    // Wait for the async tracking call to complete
+    await waitFor(() => {
+      expect(mockHandlePhoneNumberSubmit).toHaveBeenCalled();
+    });
   });
 
-  test('should show an error when phone number is invalid', () => {
+  test('should show an error when phone number is invalid', async () => {
     const invalidPhoneNumber = parsePhoneNumber(' 8 (800) xxxx ', 'RU');
     renderComponent(invalidPhoneNumber, 'invalid phone number error');
     // Find and click send code
     const submitPhoneNumberButton = screen.getByRole('button', {
       name: /Send code/i,
     });
     fireEvent.click(submitPhoneNumberButton);
-    // submit the phone number to backend
-    expect(mockHandlePhoneNumberSubmit).toHaveBeenCalled();
+
+    // Wait for the async tracking call to complete
+    await waitFor(() => {
+      expect(mockHandlePhoneNumberSubmit).toHaveBeenCalled();
+    });
+
     // expect mock error from backend to be displayed
     expect(screen.getByText('invalid phone number error')).toBeInTheDocument();
     // submit button should be enabled so user can retry with new number
     expect(screen.getByText(/Send code/i).closest('button')).toBeEnabled();
   });
 
-  test('closes the modal when the close button is clicked', () => {
+  test('closes the modal when the close button is clicked', async () => {
     renderComponent(phoneNumber);
     const closeButton = screen.getByRole('button', { name: /Cancel/i });
     fireEvent.click(closeButton);
-    expect(mockHandleClose).toHaveBeenCalled();
+
+    // Wait for the async tracking call to complete
+    await waitFor(() => {
+      expect(mockHandleClose).toHaveBeenCalled();
+    });
   });
 
   test('should not have a default country when no country is provided', () => {

workspaces/sandbox/plugins/sandbox/src/components/Modals/__tests__/AnsibleLaunchInfoModal.test.tsx

@@ -49,12 +49,17 @@ describe('AnsibleLaunchInfoModal', () => {
   const mockUseSandboxContext = useSandboxContext as jest.MockedFunction<
     typeof useSandboxContext
   >;
-  const mockPushCtaEvent = jest.spyOn(eddlUtils, 'pushCtaEvent');
+  const mockUseTrackAnalytics = jest.spyOn(eddlUtils, 'useTrackAnalytics');
+
+  const mockTrackAnalytics = jest.fn();
 
   beforeEach(() => {
     jest.clearAllMocks();
     // Setup window.appEventData for tests
     (global as any).window = { appEventData: [] };
+
+    // Mock useTrackAnalytics to return our mock function
+    mockUseTrackAnalytics.mockReturnValue(mockTrackAnalytics);
   });
 
   const renderModal = (contextOverrides = {}) => {
@@ -290,11 +295,12 @@ describe('AnsibleLaunchInfoModal', () => {
       fireEvent.click(linkElement!);
 
       // Should push CTA event with correct parameters
-      expect(mockPushCtaEvent).toHaveBeenCalledWith(
+      expect(mockTrackAnalytics).toHaveBeenCalledWith(
         'Get Started - Ansible',
         'Catalog',
         'https://ansible.example.com',
         Intcmp.AAP,
+        'cta',
       );
     });
 
@@ -320,7 +326,7 @@ describe('AnsibleLaunchInfoModal', () => {
       fireEvent.click(linkElement!);
 
       // Should not push event when link is not available
-      expect(mockPushCtaEvent).not.toHaveBeenCalled();
+      expect(mockTrackAnalytics).not.toHaveBeenCalled();
     });
   });
 });

workspaces/sandbox/plugins/sandbox/src/components/SandboxActivities/SandboxActivitiesCard.tsx

@@ -20,7 +20,10 @@ import Typography from '@mui/material/Typography';
 import CardMedia from '@mui/material/CardMedia';
 import { useTheme } from '@mui/material/styles';
 import { Link } from '@backstage/core-components';
-import { getEddlDataAttributes } from '../../utils/eddl-utils';
+import {
+  getEddlDataAttributes,
+  useTrackAnalytics,
+} from '../../utils/eddl-utils';
 
 type SandboxActivitiesCardProps = {
   article: {
@@ -35,10 +38,21 @@ export const SandboxActivitiesCard: React.FC<SandboxActivitiesCardProps> = ({
   article: { img, title, description, link },
 }) => {
   const theme = useTheme();
+  const trackAnalytics = useTrackAnalytics();
   const eddlAttributes = getEddlDataAttributes(title, 'Activities');
 
+  // Handle activity click for analytics tracking
+  const handleActivityClick = async () => {
+    await trackAnalytics(title, 'Activities', link);
+  };
+
   return (
-    <Link to={link} style={{ textDecoration: 'none' }} {...eddlAttributes}>
+    <Link
+      to={link}
+      onClick={handleActivityClick}
+      style={{ textDecoration: 'none' }}
+      {...eddlAttributes}
+    >
       <Card
         elevation={0}
         sx={{