@simplybusiness/services 0.1.1

package/dist/types/services/snowplow/index.d.ts

@@ -0,0 +1,29 @@
+import { SelfDescribingJson, StructuredEvent } from "@snowplow/browser-tracker";
+import { EventDefinition, TrackingProps } from "./types";
+export type FrontOfficeStructuredEvent = StructuredEvent & {
+    serviceChannelIdentifier: string;
+};
+/**
+ * This class is an abstraction which wraps Snowplow
+ * and exposes common methods with other services:
+ * - trackEvent            : sends a standard payload
+ * - trackUnstructEvent    : sends a payload for custom schema
+ */
+export declare class Snowplow {
+    avalancheTrackerName: string;
+    bronzeAvalancheTrackerName: string;
+    pvAvalancheTrackerName: string;
+    uid: unknown;
+    trackPageView: boolean;
+    contexts: SelfDescribingJson<Record<string, unknown>>[];
+    eventHandlers: Record<string, (params?: Record<string, unknown>) => void>;
+    constructor(props?: TrackingProps);
+    setContexts(contexts: SelfDescribingJson<Record<string, unknown>>[]): this;
+    trackView(): this;
+    trackEvent(event: StructuredEvent): Promise<this>;
+    trackUnstructEvent(event: SelfDescribingJson<Record<string, unknown>>): Promise<this>;
+    addEventHandlers(eventDefinitions: EventDefinition[]): this;
+    private addEventHandler;
+    private removeEventHandler;
+    trigger(name: string, params?: Record<string, unknown>): this;
+}

package/dist/types/services/snowplow/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/services/snowplow/types.d.ts

@@ -0,0 +1,37 @@
+import { EventMethod, SelfDescribingJson, StructuredEvent } from "@snowplow/browser-tracker";
+type BaseConfig = {
+    appId: string;
+    avalancheCollector: string;
+    eventMethod: EventMethod;
+    trackPageView: boolean;
+    includeGAContext: boolean;
+    uid?: string;
+    postPath?: string;
+};
+export type EnvConfig = BaseConfig & {
+    cookieDomain: Record<string, string>;
+};
+export type TrackingProps = BaseConfig & {
+    eventMethod: EventMethod;
+    cookieDomain?: string;
+};
+export type ChannelContext = {
+    schema: string;
+    data: Record<string, string | number>;
+};
+export type ChannelContexts = Record<string, ChannelContext>;
+export type ArrayOneOrMore<T> = [T, ...T[]];
+export type ParamsType = Record<"label" | "deviceType" | "category" | "product" | "title" | "label" | "name" | "fromValue" | "toValue", string>;
+export type EventDefinition = {
+    name: string;
+    type: "structured" | "unstructured";
+    makePayload: (params?: Record<string, unknown>) => StructuredEvent | SelfDescribingJson<Record<string, unknown>>;
+};
+export interface PageDataProps extends Partial<Record<"scripts", Array<{
+    metadata: {
+        name: string;
+    };
+    props?: Record<string, unknown>;
+}>>> {
+}
+export {};

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./text";

package/dist/types/utils/testUtils.d.ts

@@ -0,0 +1,7 @@
+import { RenderOptions } from "@testing-library/react";
+import { ReactElement } from "react";
+export declare const renderWithProviders: (ui: ReactElement, options?: RenderOptions) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export declare const mockLocation: ({ origin, pathname, }: {
+    origin?: string;
+    pathname?: string;
+}) => Window & typeof globalThis;

package/dist/types/utils/text.d.ts

@@ -0,0 +1 @@
+export declare const snakeCase: (text?: string) => string;

package/dist/types/utils/text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@simplybusiness/services",
+  "license": "UNLICENSED",
+  "version": "0.1.1",
+  "description": "Internal library for services",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/simplybusiness/mobius.git"
+  },
+  "simplyBusiness": {
+    "publishToPublicNpm": true
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "yarn run -T turbo run turbo:build",
+    "prepack": "yarn run build",
+    "build:cjs": "cd src && swc --config-file ../../.swcrc . -d ../dist/cjs -C module.type=commonjs",
+    "build:esm": "cd src && swc --config-file ../../.swcrc . -d ../dist/esm -C module.type=es6",
+    "build:types": "tsc --emitDeclarationOnly",
+    "lint": "eslint --ext .tsx,.ts,.js,.jsx,.mjs .",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --collect-coverage",
+    "check-types": "tsc --noEmit --pretty"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@react-types/shared": "^3.23.1",
+    "@swc/cli": "^0.3.14",
+    "@swc/core": "^1.6.5",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.2"
+  },
+  "dependencies": {
+    "@airbrake/browser": "^2.1.8",
+    "@simplybusiness/mobius": "^4.13.0",
+    "@snowplow/browser-tracker": "^3.24.0",
+    "classnames": "^2.5.1"
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx}": "eslint --ext .tsx,.ts,.js,.jsx,.mjs --fix"
+  }
+}

package/src/__mocks__/snowplowBrowserTrackerMock.js

@@ -0,0 +1,6 @@
+/**
+ * Mocking this module prevents requests being sent to
+ * Snowplow which causes CORS errors in the test enviornment.
+ */
+
+jest.mock("@snowplow/browser-tracker");

package/src/data/scripts-mock.ts

@@ -0,0 +1,44 @@
+export const pageData = {
+  scripts: [
+    {
+      metadata: { name: "snowplow" },
+      props: {
+        uid: "49a449d8aaa9dd58f90a623d4b9dbcae235bf92a",
+        cookieDomain: "",
+        // TODO: Change this url to "http://localhost:8000" for local development
+        avalancheCollector:
+          "https://snowplow-collector-staging.simplybusiness.com",
+        appId: "us-chopin",
+        includeGAContext: true,
+        eventMethod: "post",
+        postPath: "/com.simplybusiness/events",
+        trackActivity: true,
+        trackPageView: true,
+        pageViewContext: {
+          schema: "igluuk.co.simplybusiness/journey_context/jsonschema/1-0-0",
+          data: {
+            site: "simplybusiness_us",
+            vertical: "usa",
+            super_segment: "Unknown",
+            primary_detail: "Lawn care services",
+            journey_name: "usa",
+            journey_id: "666ff79d90abbc3582e496da",
+            page_step_name: "thank_you_ssr",
+            page_step_depth: -1,
+          },
+        },
+        distributionChannelContext: {
+          schema:
+            "iglucom.simplybusiness/distribution_channel_context/jsonschema/1-0-0",
+          data: { service_channel_identifier: "simplybusiness_us" },
+        },
+        serviceChannelContext: {
+          schema:
+            "iglucom.simplybusiness/service_channel_context/jsonschema/1-0-0",
+          data: { service_channel_identifier: "simplybusiness_us" },
+        },
+        forceSecureTracker: true,
+      },
+    },
+  ],
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export * from "./services";

package/src/mocks/eventDefinitions.ts

@@ -0,0 +1,39 @@
+export default [
+  {
+    name: "navButtonClicked",
+    type: "structured",
+    makePayload: (params: { label: "next" | "back" | "redirect" }) => {
+      const { label } = params;
+      return {
+        category: "navigation",
+        action: "thankyou_navigation_button_click",
+        label,
+        property: "test-property",
+      };
+    },
+  },
+  {
+    name: "questionAnswered",
+    type: "unstructured",
+    makePayload: (params: {
+      vertical?: string;
+      question: string;
+      answer?: string;
+    }) => {
+      const { vertical, question, answer } = params;
+      return {
+        schema:
+          "iglu:com.simplybusiness/form_question_answered/jsonschema/1-0-1",
+        data: {
+          site: "",
+          vertical: vertical || "business",
+          page_index: 1,
+          page_name: "Coverage diagnosis questionnaire",
+          section_name: "Coverage diagnosis questionnaire",
+          question,
+          answer,
+        },
+      };
+    },
+  },
+];

package/src/services/airbrake/index.ts

@@ -0,0 +1,16 @@
+// Set Airbrake configuration for embedded-qcp project
+
+import { Notifier } from "@airbrake/browser";
+
+const getEnvironment = () =>
+  process.env.NODE_ENV === "test" ? "test" : "development";
+
+// https://simplybusiness.airbrake.io/projects/512949/edit#tab-access
+const projectId = 512949;
+const projectKey = "4e25197d8faea61c10fbb97702200780";
+
+export const airbrake = new Notifier({
+  projectId: +projectId,
+  projectKey,
+  environment: getEnvironment(),
+});

package/src/services/index.tsx

@@ -0,0 +1,6 @@
+// TODO: move all Snowplow related code to a single index.tsx file
+export * from "./snowplow";
+export * from "./snowplow/SnowplowContext";
+export * from "./snowplow/getSnowplowConfig";
+export * from "./snowplow/contexts";
+export * from "./airbrake";

package/src/services/snowplow/SnowplowContext.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { pageData } from "../../data/scripts-mock";
+import { getSnowplowConfig } from "./getSnowplowConfig";
+import { SnowplowProvider } from "./SnowplowContext";
+import { PageDataProps } from "./types";
+
+const pageDataWithoutScripts = {
+  ...pageData,
+  scripts: [],
+};
+
+const snowplowProps = getSnowplowConfig(
+  pageDataWithoutScripts as PageDataProps,
+);
+
+describe("SnowplowProvider", () => {
+  describe("given pagaData has empty scripts entry", () => {
+    it("should render children without Snowplow instance errors", () => {
+      const text = "Example";
+
+      render(
+        <SnowplowProvider scripts={snowplowProps!}>
+          <p>{text}</p>
+        </SnowplowProvider>,
+      );
+
+      const textElement = screen.getByText(text);
+
+      expect(textElement).toBeInTheDocument();
+    });
+  });
+});

package/src/services/snowplow/SnowplowContext.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { Snowplow } from ".";
+import { getContexts } from "./contexts";
+import { eventDefinitions } from "./event-definitions";
+import { EventDefinition, TrackingProps } from "./types";
+
+export interface SnowplowContextInterface {
+  config: TrackingProps;
+  snowplow?: Snowplow;
+}
+
+const SnowplowContext = createContext<SnowplowContextInterface | null>(null);
+
+type ProviderProps = {
+  scripts: TrackingProps;
+  children: ReactNode;
+};
+
+export const SnowplowProvider = ({ scripts, children }: ProviderProps) => {
+  const [config, _setConfig] = useState<TrackingProps>(scripts);
+  const [snowplow, setSnowplow] = useState<Snowplow>(new Snowplow(config));
+
+  // Attach event handlers and set contexts
+  useEffect(() => {
+    if (snowplow && scripts) {
+      const contexts = getContexts(config);
+
+      snowplow
+        .setContexts(contexts)
+        .addEventHandlers(eventDefinitions as EventDefinition[]);
+      // Send page view event
+      if (config.trackPageView) snowplow.trackView();
+    }
+  }, [config, snowplow, scripts]);
+
+  const value: SnowplowContextInterface = useMemo(
+    () => ({
+      config,
+      snowplow,
+    }),
+    [config, snowplow],
+  );
+
+  return (
+    <SnowplowContext.Provider value={value}>
+      {children}
+    </SnowplowContext.Provider>
+  );
+};
+
+export function useSnowplowContext() {
+  const context = useContext(SnowplowContext);
+
+  if (!context) {
+    throw new Error(
+      "useSnowplowContext must be used inside a `SnowplowProvider`",
+    );
+  }
+  return context;
+}

package/src/services/snowplow/contexts.test.ts

@@ -0,0 +1,42 @@
+import { pageData } from "../../data/scripts-mock";
+import { getContexts } from "./contexts";
+import { getSnowplowConfig } from "./getSnowplowConfig";
+import { PageDataProps, TrackingProps } from "./types";
+
+describe("Snowplow Contexts", () => {
+  it("should extract all context records from snowplow props", () => {
+    const snowplowProps = getSnowplowConfig(pageData as PageDataProps);
+    const contexts = getContexts(snowplowProps as TrackingProps);
+
+    expect(contexts).toHaveLength(3);
+    expect(contexts[0]).toEqual({
+      pageViewContext: {
+        schema: "igluuk.co.simplybusiness/journey_context/jsonschema/1-0-0",
+        data: {
+          site: "simplybusiness_us",
+          vertical: "usa",
+          super_segment: "Unknown",
+          primary_detail: "Lawn care services",
+          journey_name: "usa",
+          journey_id: "666ff79d90abbc3582e496da",
+          page_step_name: "thank_you_ssr",
+          page_step_depth: -1,
+        },
+      },
+    });
+    expect(contexts[1]).toEqual({
+      distributionChannelContext: {
+        schema:
+          "iglucom.simplybusiness/distribution_channel_context/jsonschema/1-0-0",
+        data: { service_channel_identifier: "simplybusiness_us" },
+      },
+    });
+    expect(contexts[2]).toEqual({
+      serviceChannelContext: {
+        schema:
+          "iglucom.simplybusiness/service_channel_context/jsonschema/1-0-0",
+        data: { service_channel_identifier: "simplybusiness_us" },
+      },
+    });
+  });
+});

package/src/services/snowplow/contexts.ts

@@ -0,0 +1,14 @@
+import { SelfDescribingJson } from "@snowplow/browser-tracker";
+import { TrackingProps } from "./types";
+
+export const getContexts = (
+  config: TrackingProps,
+): SelfDescribingJson<Record<string, unknown>>[] => {
+  const contexts =
+    config &&
+    Object.entries(config)
+      .filter(([key]) => key.includes("Context") && key !== "includeGAContext")
+      .map(([key, value]) => ({ [key]: value }));
+
+  return contexts as unknown as SelfDescribingJson<Record<string, unknown>>[];
+};