@simplybusiness/mobius 3.0.0

package/src/components/Chopin/TradeSelector/TradeSelector.tsx

@@ -0,0 +1,166 @@
+import { Ref, forwardRef, RefAttributes, useMemo } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { useSlotId } from "@react-aria/utils";
+import { useLabel } from "@react-aria/label";
+import type { LabelProps, TradeProps, UrlProps } from ".";
+import { getConfig } from "./config";
+import { SelectedTrade } from "./SelectedTrade";
+import { SearchResults } from "./SearchResults";
+import { useTradeSelector } from "./useTradeSelector";
+import { getItemsToDisplay } from "./getItemsToDisplay";
+import { ForwardedRefComponent } from "../../../types/components";
+import { ErrorMessage } from "../../ErrorMessage";
+import { spaceDelimitedList } from "../../../utils/spaceDelimitedList";
+import { Label } from "../../Label";
+import { Text } from "../../Text";
+
+export type TradeSelectorElementType = HTMLDivElement;
+
+export const ERROR_MESSAGE_SERVICE_UNAVAIALBLE =
+  "The service is currently unavailable. Please try again later";
+export interface TradeSelectorProps
+  extends DOMProps,
+    RefAttributes<TradeSelectorElementType> {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  elementType?: string | React.ElementType;
+  minInput?: number;
+  apiRequestDebounceInMs?: number;
+  labels?: LabelProps;
+  urls?: UrlProps;
+  onTradeSelected?: (trade: TradeProps) => void;
+  hideLabel?: boolean;
+}
+
+export type TradeSelectorRef = Ref<TradeSelectorElementType>;
+
+const TradeSelector: ForwardedRefComponent<
+  TradeSelectorProps,
+  TradeSelectorElementType
+> = forwardRef((props: TradeSelectorProps, ref: TradeSelectorRef) => {
+  const {
+    elementType: Element = "div",
+    minInput = 3,
+    apiRequestDebounceInMs = 250,
+    urls,
+    labels,
+    className,
+    onTradeSelected,
+    hideLabel,
+  } = props;
+
+  const fieldLabels = {
+    input: "What is your specific trade/profession?",
+    description: "",
+    exact: "Exact matches for your search",
+    placeholder: "e.g. Cleaner, builder, consultant",
+    suggested: "Suggested matches for your search",
+    noResults: "View all trades",
+    loading: "Loading...",
+    ...labels,
+  };
+
+  const { site, baseUrl } = getConfig();
+
+  const links = useMemo(
+    () => ({
+      quoteRedirect: site,
+      tradeApi: baseUrl,
+      allOccupations:
+        "https://quote.simplybusiness.co.uk/trades?vertical=business",
+      ...urls,
+    }),
+    [site, baseUrl, urls],
+  );
+
+  const {
+    inputValue,
+    trades,
+    onInputChange,
+    onSelectionChange,
+    error,
+    isLoading,
+    selectedTrade,
+    hasUserChangedMind,
+    onUserChangedMind,
+  } = useTradeSelector({
+    minInput,
+    apiRequestDebounceInMs,
+    urls: links,
+    onTradeSelected,
+  });
+
+  const classes = clsx("chopin", "chopin/TradeSelector", className);
+  const errorMessage = error?.message;
+  const errorMessageId = useSlotId([Boolean(errorMessage)]);
+  const { labelProps, fieldProps } = useLabel({
+    label: fieldLabels.input,
+  });
+  const describedBy = spaceDelimitedList([
+    errorMessageId,
+    props["aria-describedby"],
+  ]);
+  const isOpen = inputValue.length >= minInput && !errorMessage;
+  const shouldSelectedTradeDisplay =
+    selectedTrade?.value && !hasUserChangedMind;
+  const items = isOpen
+    ? getItemsToDisplay({
+        trades,
+        isLoading,
+        labels: fieldLabels,
+      })
+    : [];
+  const { input: inputLabel, description } = fieldLabels;
+  const ariaLabel = hideLabel ? inputLabel : undefined;
+  const inputProps = hideLabel ? undefined : fieldProps;
+
+  return (
+    <Element ref={ref} className={classes}>
+      {!hideLabel && (
+        <>
+          <Label
+            {...labelProps}
+            className="chopin/TradeSelectorLabel"
+            aria-hidden
+          >
+            {inputLabel}
+          </Label>
+          <Text className="chopin/TradeSelectorDescription" variant="caption">
+            {description}
+          </Text>
+        </>
+      )}
+      {shouldSelectedTradeDisplay ? (
+        <SelectedTrade
+          trade={selectedTrade.value}
+          onClick={onUserChangedMind}
+        />
+      ) : (
+        <>
+          <SearchResults
+            inputValue={inputValue}
+            items={items}
+            labels={fieldLabels}
+            describedBy={describedBy}
+            fallbackUrl={links.allOccupations}
+            onInputChange={onInputChange}
+            onSelectionChange={onSelectionChange}
+            fieldProps={inputProps}
+            label={ariaLabel}
+          />
+          {error && (
+            <ErrorMessage
+              id={errorMessageId}
+              errorMessage={ERROR_MESSAGE_SERVICE_UNAVAIALBLE}
+            />
+          )}
+        </>
+      )}
+    </Element>
+  );
+});
+
+TradeSelector.displayName = "TradeSelector";
+
+export { TradeSelector };

package/src/components/Chopin/TradeSelector/config/development.ts

@@ -0,0 +1,9 @@
+const development = {
+  site: "simplybusiness_hoverla",
+  baseUrl:
+    "https://fns-staging.simplybusiness.co.uk/rambdas/trade-selector-chopin",
+  redirectUrl: "https://quote-staging.simplybusiness.co.uk/route_trade",
+  useTracking: false,
+};
+
+export { development };

package/src/components/Chopin/TradeSelector/config/index.ts

@@ -0,0 +1,22 @@
+import { shared } from "./shared";
+import { test } from "./testing";
+import { development } from "./development";
+import { production } from "./production";
+
+const env = process.env.NODE_ENV;
+
+const getConfig = () => {
+  const { appId: id, ...rest } = shared;
+  const appId = `${id}_${env}`;
+
+  if (env === "production") {
+    return { env, ...production, appId, ...rest };
+  }
+  if (env === "test") {
+    return { env, ...test, appId, ...rest };
+  }
+
+  return { env, ...development, appId, ...rest };
+};
+
+export { getConfig };

package/src/components/Chopin/TradeSelector/config/production.ts

@@ -0,0 +1,8 @@
+const production = {
+  site: "simplybusiness_hoverla",
+  baseUrl: "https://fns.simplybusiness.co.uk/rambdas/trade-selector-chopin",
+  redirectUrl: "https://quote.simplybusiness.co.uk/route_trade",
+  useTracking: true,
+};
+
+export { production };

package/src/components/Chopin/TradeSelector/config/shared.ts

@@ -0,0 +1,9 @@
+/**
+ * This file contains configuation that remains
+ * consistent across all environments
+ */
+const shared = {
+  appId: "simplybusiness_hoverla",
+};
+
+export { shared };

package/src/components/Chopin/TradeSelector/config/testing.ts

@@ -0,0 +1,10 @@
+// NOTE: file called `testing.js`, so that it is not picked up by Jest
+const test = {
+  site: "simplybusiness_hoverla",
+  baseUrl:
+    "https://fns-staging.simplybusiness.co.uk/rambdas/trade-selector-chopin",
+  redirectUrl: "https://quote-staging.simplybusiness.co.uk/route_trade",
+  useTracking: false,
+};
+
+export { test };

package/src/components/Chopin/TradeSelector/getItemsToDisplay/getItemsToDisplay.test.ts

@@ -0,0 +1,97 @@
+import { getItemsToDisplay } from "./getItemsToDisplay";
+import { exactResults, suggestedResults } from "../mockApiResults";
+
+const mockedApiResults = [...exactResults, ...suggestedResults];
+
+describe("getItemsToDisplay", () => {
+  const defaultLabels = {
+    input: "",
+    exact: "",
+    suggested: "",
+    loading: "",
+    noResults: "",
+    description: "",
+    placeholder: "",
+  };
+
+  describe("given no trades have been provided", () => {
+    it("returns a single item with the no results label", () => {
+      const props = {
+        trades: [],
+        isLoading: false,
+        labels: {
+          ...defaultLabels,
+          noResults: "No results",
+        },
+      };
+
+      const actual = getItemsToDisplay({ ...props });
+
+      const expected = [
+        {
+          name: props.labels.noResults,
+          title: props.labels.noResults,
+          children: [],
+        },
+      ];
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe("given a list of trades have been provided", () => {
+    it("returns the trades grouped by type", () => {
+      const props = {
+        trades: mockedApiResults,
+        isLoading: false,
+        labels: {
+          ...defaultLabels,
+          exact: "Exact matches for your search",
+          suggested: "Suggested matches for your search",
+        },
+      };
+
+      const actual = getItemsToDisplay({ ...props });
+
+      const expected = [
+        {
+          name: "exact",
+          title: props.labels.exact,
+          children: [...exactResults],
+        },
+        {
+          name: "suggested",
+          title: props.labels.suggested,
+          children: [...suggestedResults],
+        },
+      ];
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe("given isLoading is set to true", () => {
+    it("returns a single item with the loading label", () => {
+      const props = {
+        trades: [],
+        isLoading: true,
+        labels: {
+          ...defaultLabels,
+          loading: "Is loading",
+        },
+      };
+
+      const actual = getItemsToDisplay({ ...props });
+
+      const expected = [
+        {
+          name: props.labels.loading,
+          title: props.labels.loading,
+          children: [],
+        },
+      ];
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});

package/src/components/Chopin/TradeSelector/getItemsToDisplay/getItemsToDisplay.ts

@@ -0,0 +1,36 @@
+import { getTradesGroupedByType } from "../getTradesGroupedByType";
+import type { LabelProps, TradeProps } from "..";
+
+export type getItemsToDisplayProps = {
+  trades: TradeProps[] | [];
+  isLoading: boolean;
+  labels: LabelProps;
+};
+
+export const getItemsToDisplay = ({
+  trades,
+  isLoading,
+  labels,
+}: getItemsToDisplayProps) => {
+  if (trades.length > 0) {
+    return getTradesGroupedByType(trades, labels);
+  }
+
+  if (isLoading) {
+    return [
+      {
+        name: labels.loading as string,
+        title: labels.loading as string,
+        children: [],
+      },
+    ];
+  }
+
+  return [
+    {
+      name: labels.noResults as string,
+      title: labels.noResults as string,
+      children: [],
+    },
+  ];
+};

package/src/components/Chopin/TradeSelector/getItemsToDisplay/index.ts

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

package/src/components/Chopin/TradeSelector/getTradesGroupedByType/getTradesGroupedByType.test.ts

@@ -0,0 +1,49 @@
+import { getTradesGroupedByType } from ".";
+import { exactResults, suggestedResults } from "../mockApiResults";
+
+describe("getTradesGroupedByType", () => {
+  describe("given a list of API results", () => {
+    it("should return a list of grouped results with labels", () => {
+      const labels = {
+        exact: "Exact matches for your search",
+        suggested: "Suggested matches for your search",
+      };
+
+      const mockedApiResults = [...exactResults, ...suggestedResults];
+
+      const input = getTradesGroupedByType(mockedApiResults, labels);
+
+      const expected = [
+        {
+          name: "exact",
+          title: "Exact matches for your search",
+          children: [...exactResults],
+        },
+        {
+          name: "suggested",
+          title: "Suggested matches for your search",
+          children: [...suggestedResults],
+        },
+      ];
+
+      expect(input).toEqual(expected);
+    });
+  });
+
+  describe("given no API results", () => {
+    it("should return an empty array ", () => {
+      const labels = {
+        exact: "Exact matches",
+        suggested: "Suggested matches",
+      };
+
+      const apiResults = [] as [];
+
+      const input = getTradesGroupedByType(apiResults, labels);
+
+      const expected = [] as [];
+
+      expect(input).toEqual(expected);
+    });
+  });
+});

package/src/components/Chopin/TradeSelector/getTradesGroupedByType/getTradesGroupedByType.ts

@@ -0,0 +1,19 @@
+import type { LabelProps, GroupedTradeProps, TradeProps } from "..";
+
+export const getTradesGroupedByType = (
+  trades: Array<TradeProps>,
+  labels: Pick<LabelProps, "exact" | "suggested">,
+) =>
+  Object.entries(
+    trades.reduce((prev, acc) => {
+      const { type } = acc;
+      // eslint-disable-next-line no-param-reassign
+      prev[type] ??= [];
+      prev[type].push(acc);
+      return prev;
+    }, {}),
+  ).map(([name, children]) => ({
+    name,
+    title: labels[name],
+    children,
+  })) as GroupedTradeProps[];

package/src/components/Chopin/TradeSelector/getTradesGroupedByType/index.ts

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

package/src/components/Chopin/TradeSelector/index.tsx

@@ -0,0 +1,2 @@
+export * from "./TradeSelector";
+export * from "./types";

package/src/components/Chopin/TradeSelector/mockApiResults.ts

@@ -0,0 +1,67 @@
+import { TradeProps } from ".";
+
+export const exactResults = [
+  {
+    value: "Swim Shop",
+    vertical: "shop",
+    supported_verticals: null,
+    label: "<strong>Swim</strong> Shop",
+    type: "exact",
+    trade_detail: null,
+    trade_type: null,
+    blocked: false,
+  },
+  {
+    value: "Swimming pool installers",
+    vertical: "business",
+    supported_verticals: ["contractors_combined"],
+    label: "<strong>Swim</strong>ming pool installers",
+    type: "exact",
+    trade_detail: null,
+    trade_type: null,
+    blocked: false,
+  },
+  {
+    value: "Swimming pool cleaners",
+    vertical: "business",
+    supported_verticals: ["contractors_combined"],
+    label: "<strong>Swim</strong>ming pool cleaners",
+    type: "exact",
+    trade_detail: null,
+    trade_type: null,
+    blocked: false,
+  },
+  {
+    value: "Swimming pool, sports centre or arena",
+    vertical: "not_for_profit",
+    supported_verticals: null,
+    label: "<strong>Swim</strong>ming pool, sports centre or arena",
+    type: "exact",
+    trade_detail: null,
+    trade_type: null,
+    blocked: false,
+  },
+] as TradeProps[];
+
+export const suggestedResults = [
+  {
+    value: "Teacher / tutor",
+    vertical: "business",
+    supported_verticals: null,
+    label: "<strong>Teacher</strong> / tutor",
+    type: "suggested",
+    trade_detail: null,
+    trade_type: null,
+    blocked: false,
+  },
+  {
+    value: "Fitness instructor",
+    vertical: "business",
+    supported_verticals: null,
+    label: "<strong>Fitness</strong> instructor",
+    type: "suggested",
+    trade_detail: null,
+    trade_type: null,
+    blocked: false,
+  },
+] as TradeProps[];

package/src/components/Chopin/TradeSelector/types.ts

@@ -0,0 +1,42 @@
+export type TradeProps = {
+  value: string;
+  vertical: string;
+  /* eslint-disable camelcase */
+  supported_verticals: string[] | null;
+  label: string;
+  type: string;
+  /* eslint-disable camelcase */
+  trade_detail: string | null;
+  /* eslint-disable camelcase */
+  trade_type: string | null;
+  blocked: boolean;
+};
+
+export type GroupedTradeProps = {
+  name: string;
+  title: string;
+  children: TradeProps[];
+};
+
+export type LabelProps = {
+  input: string;
+  exact: string;
+  suggested: string;
+  noResults: string;
+  loading: string;
+  description: string;
+  placeholder: string;
+};
+
+export type UrlProps = {
+  quoteRedirect: string;
+  tradeApi: string;
+  allOccupations: string;
+};
+
+export type useTradeSelectorProps = {
+  minInput: number;
+  apiRequestDebounceInMs: number;
+  urls: UrlProps;
+  onTradeSelected?: (trade: TradeProps) => void;
+};

package/src/components/Chopin/TradeSelector/useTradeSelector/index.ts

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

package/src/components/Chopin/TradeSelector/useTradeSelector/useTradeSelector.ts

@@ -0,0 +1,67 @@
+import { useState, useEffect, Key } from "react";
+import { useAsyncList } from "@react-stately/data";
+import type { TradeProps, useTradeSelectorProps } from "..";
+
+const useTradeSelector = ({
+  minInput,
+  urls,
+  onTradeSelected,
+}: useTradeSelectorProps) => {
+  const [userInput, setUserInput] = useState<string>("");
+  const [selectedTrade, setSelectedTrade] = useState<TradeProps | undefined>(
+    undefined,
+  );
+  const [hasUserChangedMind, setHasUserChangedMind] = useState<Boolean>(false);
+  const endpoint = `${urls.tradeApi}?q=${encodeURIComponent(userInput)}&site=${
+    urls.quoteRedirect
+  }`;
+  const list = useAsyncList({
+    async load({ signal }) {
+      const response = await fetch(endpoint, {
+        signal,
+      });
+
+      const json = await response.json();
+      return { items: json.results };
+    },
+  });
+
+  const handleSelectionChange = (value: Key) => {
+    const items = list.items as TradeProps[];
+    const trade = items.find(entry => entry.value === value);
+    setSelectedTrade(trade);
+    setUserInput(value.toString());
+    setHasUserChangedMind(false);
+    if (trade && onTradeSelected) {
+      try {
+        onTradeSelected(trade);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error("onTradeSelected returned the following error", err);
+      }
+    }
+  };
+
+  const handleUserChangedMind = () => setHasUserChangedMind(true);
+
+  useEffect(() => {
+    if (userInput.length >= minInput) list.reload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userInput, minInput]);
+
+  return {
+    inputValue: userInput,
+    isLoading: list.isLoading,
+    trades: list.items as TradeProps[],
+    error: list.error,
+    onInputChange: setUserInput,
+    onSelectionChange: handleSelectionChange,
+    selectedTrade,
+    hasUserChangedMind,
+    onUserChangedMind: handleUserChangedMind,
+  };
+};
+
+useTradeSelector.displayName = "useTradeSelector";
+
+export { useTradeSelector };

package/src/components/Chopin/index.tsx

@@ -0,0 +1,10 @@
+export * from "./PercentageTotalsQuestion";
+export * from "./Question";
+export * from "./QuestionGroup";
+export * from "./Steps";
+export * from "./Section";
+export * from "./TradeSelector";
+export * from "./Footer";
+export * from "./Header";
+export * from "./Actions";
+export * from "./Testimonial";