@simplybusiness/mobius 3.3.1 → 3.4.0

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

@@ -1,97 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,49 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

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

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

@@ -1,107 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import { useTradeSelector } from "./useTradeSelector";
-
-const trade = {
-  value: "Builder",
-  vertical: "business",
-  supported_verticals: ["contractors_combined"],
-  label: "<strong>Builder</strong>",
-  type: "exact",
-  trade_detail: null,
-  trade_type: null,
-  blocked: false,
-};
-
-let fetchMock: any;
-
-global.fetch = jest.fn(() =>
-  Promise.resolve({
-    json: () =>
-      Promise.resolve({
-        items: [],
-      }),
-  }),
-) as jest.Mock;
-
-describe("useTradeSelector", () => {
-  beforeEach(() => {
-    fetchMock = jest.spyOn(global, "fetch");
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  describe("with no initial trade provided", () => {
-    it("should not call the API on initial render", async () => {
-      const { result } = renderHook(() =>
-        useTradeSelector({
-          minInput: 3,
-          apiRequestDebounceInMs: 250,
-          urls: {
-            quoteRedirect: "redirect-link",
-            tradeApi: "trade-api-link",
-            allOccupations:
-              "https://quote.simplybusiness.co.uk/trades?vertical=business",
-          },
-        }),
-      );
-
-      await waitFor(() => {
-        expect(result.current.isLoading).toBeFalsy();
-        expect(fetchMock).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe("with initial trade provided", () => {
-    it("should not call the API on initial render", async () => {
-      const { result } = renderHook(() =>
-        useTradeSelector({
-          minInput: 3,
-          apiRequestDebounceInMs: 250,
-          urls: {
-            quoteRedirect: "redirect-link",
-            tradeApi: "trade-api-link",
-            allOccupations:
-              "https://quote.simplybusiness.co.uk/trades?vertical=business",
-          },
-          initialTrade: trade.value,
-        }),
-      );
-
-      await waitFor(() => {
-        expect(result.current.isLoading).toBeFalsy();
-        expect(fetchMock).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe("with user input set above minimum length", () => {
-    it("should call the API", async () => {
-      const quoteRedirect = "redirect-link";
-      const tradeApi = "trade-api-link";
-      const userInput = "Cleaner";
-      const link = `${tradeApi}?q=${userInput}&site=${quoteRedirect}`;
-      const AbortSignalMock = expect.anything();
-
-      const { result } = renderHook(() =>
-        useTradeSelector({
-          minInput: 3,
-          apiRequestDebounceInMs: 250,
-          urls: {
-            quoteRedirect: "redirect-link",
-            tradeApi: "trade-api-link",
-            allOccupations:
-              "https://quote.simplybusiness.co.uk/trades?vertical=business",
-          },
-        }),
-      );
-
-      await waitFor(() => {
-        result.current.onInputChange(userInput);
-        expect(fetchMock).toHaveBeenCalledWith(link, AbortSignalMock);
-      });
-    });
-  });
-});

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

@@ -1,82 +0,0 @@
-import { useState, useEffect, Key } from "react";
-import { useAsyncList } from "@react-stately/data";
-import type { TradeProps, TradeSelectorCommonProps } from "..";
-
-const formattedTrades = (trades: TradeProps[] | string = []) => ({
-  items: Array.isArray(trades) ? trades : [trades],
-});
-
-const useTradeSelector = ({
-  minInput,
-  urls,
-  onTradeSelected,
-  initialTrade,
-}: TradeSelectorCommonProps) => {
-  const [userInput, setUserInput] = useState<string>("");
-  const [selectedTrade, setSelectedTrade] = useState<string | undefined>(
-    initialTrade,
-  );
-  const [hasUserChangedMind, setHasUserChangedMind] = useState<Boolean>(false);
-  const endpoint = `${urls.tradeApi}?q=${encodeURIComponent(userInput)}&site=${
-    urls.quoteRedirect
-  }`;
-  const list = useAsyncList({
-    async load({ signal }) {
-      if (userInput.length === 0) return formattedTrades();
-
-      if (initialTrade && userInput.length === 0) formattedTrades(initialTrade);
-
-      const response = await fetch(endpoint, {
-        signal,
-      });
-
-      const json = await response.json();
-
-      return formattedTrades(json.results);
-    },
-  });
-
-  const handleSelectionChange = (value: Key) => {
-    const items = list.items as TradeProps[];
-    const trade = items.find(entry => entry.value === value);
-    setSelectedTrade(trade?.value);
-    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 = () => {
-    if (initialTrade) {
-      setUserInput(initialTrade);
-    }
-    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 };