@simplybusiness/mobius 3.10.0 → 3.11.0

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

@@ -1,183 +0,0 @@
-"use client";
-
-import {
-  forwardRef,
-  useState,
-  useRef,
-  useEffect,
-  ChangeEvent,
-  useMemo,
-} from "react";
-import clsx from "clsx";
-import { useLabel } from "@react-aria/label";
-import { useSlotId } from "@react-aria/utils";
-
-import {
-  InputRef,
-  TradeProps,
-  TradeSelectorElementType,
-  TradeSelectorProps,
-  TradeSelectorRef,
-} from "./types";
-import { getConfig } from "./config";
-import { TradeInput } from "./TradeInput";
-import { SearchResults } from "./SearchResults";
-import { useFetchTrades } from "./useFetchTrades";
-import { useTradeSelectorUrl } from "./useTradeSelectorUrl";
-import { Header } from "./Header";
-import { ErrorMessage } from "../../ErrorMessage";
-import { ForwardedRefComponent } from "../../../types/components";
-import { spaceDelimitedList } from "../../../utils/spaceDelimitedList";
-
-export const ERROR_MESSAGE_SERVICE_UNAVAILABLE =
-  "The service is currently unavailable. Please try again later";
-
-const TradeSelector: ForwardedRefComponent<
-  TradeSelectorProps,
-  TradeSelectorElementType
-> = forwardRef((props: TradeSelectorProps, ref: TradeSelectorRef) => {
-  const {
-    minInput = 3,
-    apiRequestDebounceInMs = 250,
-    urls,
-    labels,
-    className,
-    onTradeSelected,
-    hideLabel,
-    initialTrade = "",
-    vertical,
-    searchScope,
-  } = props;
-  const { site, baseUrl, defaultLabels } = getConfig();
-  const fieldLabels = {
-    ...defaultLabels,
-    ...labels,
-  };
-  const links = useMemo(
-    () => ({
-      quoteRedirect: site,
-      tradeApi: baseUrl,
-      allOccupations:
-        "https://quote.simplybusiness.co.uk/trades?vertical=business",
-      ...urls,
-    }),
-    [site, baseUrl, urls],
-  );
-  const classes = clsx("chopin", "chopin/TradeSelector", className);
-  const [userInput, setUserInput] = useState<string>("");
-  const [selectedTrade, setSelectedTrade] = useState<TradeProps | null>(null);
-  const [editMode, setEditMode] = useState<boolean>(false);
-  const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(false);
-  const inputRef = useRef<InputRef>(null);
-  const currentTrade = selectedTrade ? selectedTrade.value : initialTrade;
-  const endpoint = useTradeSelectorUrl(links.tradeApi, userInput, {
-    site: links.quoteRedirect,
-    vertical,
-    searchScope,
-  });
-  const { trades, isLoading, error, fetchTrades } = useFetchTrades(
-    endpoint,
-    apiRequestDebounceInMs,
-  );
-  const errorMessage = error?.message;
-  const errorMessageId = useSlotId([Boolean(errorMessage)]);
-  const { labelProps, fieldProps } = useLabel({
-    label: fieldLabels.input,
-  });
-  const ariaLabel = hideLabel ? fieldLabels.input : undefined;
-  const inputProps = hideLabel ? undefined : fieldProps;
-  const describedBy = spaceDelimitedList([
-    errorMessageId,
-    props["aria-describedby"],
-  ]);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) =>
-    setUserInput(event.target.value);
-
-  const toggleEditMode = () => setEditMode(!editMode);
-
-  const handleOverlayClose = () => {
-    setIsOverlayVisible(false);
-  };
-
-  const handleTradeSelect = (trade: TradeProps) => {
-    setSelectedTrade(trade);
-
-    if (editMode) {
-      toggleEditMode();
-    }
-
-    if (trade && onTradeSelected) {
-      try {
-        onTradeSelected(trade);
-      } catch (err) {
-        // eslint-disable-next-line no-console
-        console.error("onTradeSelected returned the following error", err);
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (editMode && currentTrade) {
-      setUserInput(currentTrade);
-    }
-
-    if (!editMode) {
-      setUserInput("");
-    }
-  }, [editMode, currentTrade]);
-
-  useEffect(() => {
-    if (userInput.length >= minInput) {
-      setIsOverlayVisible(true);
-      fetchTrades(true);
-    }
-
-    if (userInput.length < minInput) {
-      setIsOverlayVisible(false);
-    }
-  }, [minInput, fetchTrades, userInput.length]);
-
-  return (
-    <div ref={ref} className={classes} data-cy={props["data-cy"]}>
-      <Header
-        isOpen={!hideLabel}
-        labelProps={labelProps}
-        labels={fieldLabels}
-      />
-      <TradeInput
-        inputRef={inputRef}
-        inputProps={inputProps}
-        value={userInput}
-        onChange={handleChange}
-        label={ariaLabel}
-        placeholder={fieldLabels.placeholder}
-        initialTrade={currentTrade}
-        onEdit={toggleEditMode}
-        isEditable={editMode}
-      />
-      {error ? (
-        <ErrorMessage
-          id={errorMessageId}
-          errorMessage={ERROR_MESSAGE_SERVICE_UNAVAILABLE}
-        />
-      ) : (
-        <SearchResults
-          isOpen={isOverlayVisible}
-          labels={fieldLabels}
-          onClick={handleTradeSelect}
-          onClose={handleOverlayClose}
-          results={trades}
-          isLoading={isLoading}
-          fallbackUrl={links.allOccupations}
-          describedBy={describedBy}
-          inputRef={inputRef}
-        />
-      )}
-    </div>
-  );
-});
-
-TradeSelector.displayName = "TradeSelector";
-
-export { TradeSelector };

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

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

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

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

@@ -1,18 +0,0 @@
-/**
- * This file contains configuation that remains
- * consistent across all environments
- */
-const shared = {
-  appId: "simplybusiness_hoverla",
-  defaultLabels: {
-    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...",
-  },
-};
-
-export { shared };

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

@@ -1,10 +0,0 @@
-// 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/index.tsx

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

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

@@ -1,17 +0,0 @@
-// Workaround for lack of `<dialog>` support in jsdom
-// Workaround from: https://github.com/jsdom/jsdom/issues/3294#issuecomment-1268330372
-// Fix: https://github.com/jsdom/jsdom/pull/3403
-// This can be removed once `<dialog>` support is introduced in Jest via jsdom
-export const jestHTMLDialogPolyfill = () => {
-  HTMLDialogElement.prototype.show = jest.fn(function mock(
-    this: HTMLDialogElement,
-  ) {
-    this.open = true;
-  });
-
-  HTMLDialogElement.prototype.close = jest.fn(function mock(
-    this: HTMLDialogElement,
-  ) {
-    this.open = false;
-  });
-};

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

@@ -1,78 +0,0 @@
-import { TradeProps } from ".";
-
-export const mockTrade = {
-  blocked: false,
-  label: "<strong>Landlord</strong>",
-  supported_verticals: null,
-  trade_detail: null,
-  trade_type: null,
-  type: "exact",
-  value: "Landlord",
-  vertical: "landlord",
-};
-
-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

@@ -1,80 +0,0 @@
-import { Ref, RefAttributes } from "react";
-import { DOMProps } from "@react-types/shared";
-
-export type DialogRef = HTMLDialogElement;
-export type InputRef = HTMLInputElement;
-
-export type TradeSelectorSearchScope =
-  | "all_verticals"
-  | "current_and_supported_verticals"
-  | "current_vertical"
-  | "except_current_vertical"
-  | "usa_contractors"
-  | "commercial_landlord_business_types"
-  | "contractors_combined"
-  | "supported_for_current_vertical"
-  | "commercial_combined_manufacturer"
-  | "commercial_combined_wholesaler"
-  | "commercial_combined_all";
-
-// TODO: We could probably use a union type here instead of a string
-//       but we may not want to restrict the possible values.
-export type TradeSelectorVertical = string;
-
-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 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 TradeSelectorCommonProps = {
-  minInput: number;
-  apiRequestDebounceInMs: number;
-  urls: UrlProps;
-  onTradeSelected?: (trade: TradeProps | string) => void;
-  initialTrade?: string;
-  vertical?: TradeSelectorVertical;
-  searchScope?: TradeSelectorSearchScope;
-};
-
-export type TradeSelectorElementType = HTMLDivElement;
-
-export interface TradeSelectorProps
-  extends Partial<TradeSelectorCommonProps>,
-    DOMProps,
-    RefAttributes<TradeSelectorElementType> {
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  elementType?: string | React.ElementType;
-  onTradeSelected?: (trade: TradeProps | string) => void;
-  labels?: LabelProps;
-  hideLabel?: boolean;
-  "data-cy"?: string;
-  "aria-describedby"?: string;
-}
-
-export type TradeSelectorRef = Ref<TradeSelectorElementType>;

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

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

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

@@ -1,69 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-import debounce from "lodash.debounce";
-import { TradeProps } from "../types";
-
-export const useFetchTrades = (endpoint: URL, debounceInMs: number) => {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [trades, setTrades] = useState<TradeProps[] | null>(null);
-  const [fetchTrades, setFetchTrades] = useState<boolean>(false);
-
-  const getTrades = useCallback(
-    // eslint-disable-next-line consistent-return
-    async (signal: AbortSignal) => {
-      try {
-        const response = await fetch(endpoint, {
-          signal,
-        });
-        const json = await response.json();
-        setIsLoading(false);
-
-        if (!response.ok) {
-          throw new Error(json.message || json.statusText);
-        }
-
-        setError(null);
-        return setTrades(json.results);
-      } catch (err) {
-        if (err instanceof Error && err.name !== "AbortError") {
-          // eslint-disable-next-line no-console
-          console.error(err);
-          setError(err);
-        }
-      }
-    },
-    [endpoint],
-  );
-
-  useEffect(() => {
-    const controller = new AbortController();
-
-    if (fetchTrades) {
-      setIsLoading(true);
-
-      const fetchData = debounce(async () => {
-        const { signal } = controller;
-        await getTrades(signal);
-      }, debounceInMs);
-
-      fetchData();
-    }
-
-    return () => controller.abort();
-  }, [getTrades, debounceInMs, fetchTrades]);
-
-  useEffect(() => {
-    if (!isLoading) {
-      setFetchTrades(false);
-    }
-  }, [isLoading]);
-
-  return {
-    isLoading,
-    error,
-    trades,
-    fetchTrades: setFetchTrades,
-  };
-};

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

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

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

@@ -1,37 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { useTradeSelectorUrl } from "./useTradeSelectorUrl";
-
-describe("useTradeSelectorUrl", () => {
-  it("should return a url", () => {
-    const { result } = renderHook(() =>
-      useTradeSelectorUrl("https://trade-api.example.com/search", "foo"),
-    );
-    expect(result.current).toBeInstanceOf(URL);
-  });
-
-  it("should return a url with the correct query params", () => {
-    const { result } = renderHook(() =>
-      useTradeSelectorUrl("https://trade-api.example.com/search", "foo", {
-        vertical: "bar",
-        searchScope: "baz",
-      }),
-    );
-    expect(result.current.searchParams.get("q")).toEqual("foo");
-    expect(result.current.searchParams.get("vertical")).toEqual("bar");
-    expect(result.current.searchParams.get("search_scope")).toEqual("baz");
-  });
-
-  it("should return a new url when the input changes", () => {
-    const { result, rerender } = renderHook(
-      ({ userInput }) =>
-        useTradeSelectorUrl("https://trade-api.example.com/search", userInput),
-      {
-        initialProps: { userInput: "foo" },
-      },
-    );
-    const firstUrl = result.current;
-    rerender({ userInput: "bar" });
-    const secondUrl = result.current;
-    expect(firstUrl).not.toEqual(secondUrl);
-  });
-});

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

@@ -1,26 +0,0 @@
-import { useMemo } from "react";
-
-export type TradeSelectorUrlOptions = {
-  vertical?: string;
-  searchScope?: string;
-  site?: string;
-};
-
-function addQueryParam(url: URL, key: string, value?: string) {
-  if (value) url.searchParams.set(key, value);
-}
-
-export function useTradeSelectorUrl(
-  tradeApi: string,
-  userInput: string,
-  { vertical, searchScope, site }: TradeSelectorUrlOptions = {},
-) {
-  return useMemo(() => {
-    const url = new URL(tradeApi);
-    addQueryParam(url, "q", userInput);
-    addQueryParam(url, "vertical", vertical);
-    addQueryParam(url, "search_scope", searchScope);
-    addQueryParam(url, "site", site);
-    return url;
-  }, [tradeApi, userInput, vertical, searchScope, site]);
-}

package/src/components/Chopin/index.tsx

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