@licklist/design 0.62.3 → 0.63.0-dev.0

package/src/typeahead/Typeahead.tsx

@@ -16,6 +16,7 @@ export interface TypeaheadProps {
   isMultipleChoise?: boolean;
   noOptionsMessage: string;
   isInvalid?: boolean;
+  isCouponForm?: boolean;
 }
 
 function Typeahead({
@@ -24,13 +25,25 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = "",
+  isCouponForm = false,
   noOptionsMessage = "",
   isInvalid,
 }: TypeaheadProps) {
   const { control } = useFormContext();
 
-  const getErrorStyle = (): CSSObjectWithLabel =>
-    isInvalid ? { borderColor: "red" } : {};
+  const getStyle = (): CSSObjectWithLabel => {
+    const couponFormStyle = isCouponForm
+      ? {
+          borderRadius: "1rem",
+          minHeight: "3rem",
+        }
+      : {};
+    return isInvalid
+      ? { borderColor: "red", ...couponFormStyle }
+      : {
+          ...couponFormStyle,
+        };
+  };
 
   return (
     <>
@@ -46,7 +59,7 @@ function Typeahead({
             styles={{
               control: (base) => ({
                 ...base,
-                ...getErrorStyle(),
+                ...getStyle(),
               }),
             }}
             onChange={(value) => {

package/src/zone/form/ZoneForm.tsx

@@ -13,7 +13,7 @@ export type ZoneFormProps = {
   onSubmit: (values: Partial<Zone>) => void;
   serverErrors?: ServerError;
   isLoading?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
 };
 
 export type ZoneFormValues = Partial<Zone> & {
@@ -25,6 +25,7 @@ export const ZoneForm = ({
   onSubmit,
   serverErrors,
   isLoading = false,
+  workHours,
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -54,7 +55,7 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} />
+        <ZoneControl isLoading={isLoading} workHours={workHours} />
         <Row>
           <Col md={6} sm={12} />
           <Col

package/src/zone/form/components/AvailableTimesControl.tsx

@@ -21,8 +21,6 @@ type AvailableTimesControlProps = {
   isLoading: boolean;
   workHours?: WorkHour[];
   defaultValues?: string[];
-  startTime?: string;
-  endTime?: string;
   errorMessage?: string;
   clearErrorMessage: () => void;
 };

package/src/zone/form/components/ZoneControl.tsx

@@ -11,15 +11,15 @@ import { GameDurationControl } from "./GameDurationControl";
 
 export type ZoneControlProps = {
   isLoading: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
 };
 
-export const ZoneControl = ({ isLoading }: ZoneControlProps) => {
+export const ZoneControl = ({ isLoading, workHours }: ZoneControlProps) => {
   return (
     <Row>
       <Col md={6} sm={12} className="pr-5">
         <NameControl isLoading={isLoading} />
-        <ZoneRecurrencesControl />
+        <ZoneRecurrencesControl workHours={workHours} />
         <hr />
         <Row>
           <Col md={6} sm={6}>

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -25,12 +25,13 @@ export interface DateAndRecurrenceInputValues {
   zoneRecurrences?: Partial<ZoneRecurrence>[];
 }
 
-export type ZoneRecurrenceControlProps = {
-  workHours?: WorkHour[];
-  isLoading?: boolean;
+type ZoneRecurrenceControlProps = {
+  workHours: WorkHour[] | undefined;
 };
 
-export const ZoneRecurrencesControl = () => {
+export const ZoneRecurrencesControl = ({
+  workHours,
+}: ZoneRecurrenceControlProps) => {
   const {
     control,
     register,
@@ -69,7 +70,7 @@ export const ZoneRecurrencesControl = () => {
     clearEditState();
   });
 
-  const popoverId = useId()!;
+  const popoverId = useId();
 
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -166,6 +167,7 @@ export const ZoneRecurrencesControl = () => {
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
                 setInitialStartDateAfterSelect
+                workHours={workHours}
               />
             </Popover.Content>
           </Popover>

package/src/zone/form/utils/dates.ts

@@ -53,18 +53,17 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
   if (!workHours || !workHours.length)
     return getTimeCheckboxRanges(DEFAULT_START_DAY_TIME, DEFAULT_END_DAY_TIME);
 
-  const providerWorkHoursByWeek = workHours.reduce(
-    (workHoursNextArray: { start: string; end: string }[], currentWorkHour) => {
-      const { start, end } = currentWorkHour;
+  const providerWorkHoursByWeek = workHours.reduce<
+    { start: string; end: string }[]
+  >((workHoursNextArray, currentWorkHour) => {
+    const { start, end } = currentWorkHour;
 
-      if (start && end) {
-        return [...workHoursNextArray, { start, end }];
-      }
+    if (start && end) {
+      return [...workHoursNextArray, { start, end }];
+    }
 
-      return workHoursNextArray;
-    },
-    []
-  );
+    return workHoursNextArray;
+  }, []);
 
   // If venue has filled only 1 work day from wee
   // For another days we use default 00:00 and 23:59

package/jest.config.js

@@ -1,29 +0,0 @@
-// For a detailed explanation regarding each configuration property, visit:
-// https://jestjs.io/docs/en/configuration.html
-
-module.exports = {
-  modulePathIgnorePatterns: ["/dist/"],
-  roots: ["<rootDir>/src", "<rootDir>/tests"],
-  globals: {
-    "ts-jest": {
-      isolatedModules: true,
-      babelConfig: {
-        presets: ["@babel/preset-env", "@babel/preset-react"],
-      },
-    },
-  },
-  transform: {
-    "^.+\\.(t|j)sx?$": "ts-jest",
-  },
-  transformIgnorePatterns: [
-    "node_modules/(?!(redux-persist)/)",
-    "node_modules/(?!(@licklist)/)",
-  ],
-  testRegex: ["(\\/tests\\/.*.(test|spec))\\.tsx?$"],
-  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
-  setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
-  moduleNameMapper: {
-    "^.+\\.(css|scss|sass|less)$": "<rootDir>/tests/__mock__/styleMock.js",
-    ".+\\.(svg|png|jpg)$": "identity-obj-proxy",
-  },
-};

package/tests/Auth/Authorizer.test.tsx

@@ -1,194 +0,0 @@
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-import { act } from "react-dom/test-utils";
-import { QueryClientProvider } from "react-query";
-import { Authorizer } from "../../src/auth/Authorizer";
-import useAuthMock from "../__mock__/hooks/useAuthMock";
-import useUserMock from "../__mock__/hooks/useUserMock";
-import useAuthApi from "../__mock__/hooks/useAuthApi";
-import { queryClient } from "../packages/react-query";
-
-jest.mock("react-i18next", () => ({
-  Trans: jest.fn().mockReturnValue("test"),
-  useTranslation: () => ({
-    t: jest.fn((arg) => arg),
-  }),
-}));
-jest.mock("@licklist/plugins/dist/context/user/hooks/useAuth");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useUser");
-jest.mock("@licklist/plugins/dist/hooks/Api/useAuthApi");
-
-const DEFAULT_PROFILE_RESPONSE = {
-  useProfile: () => ({
-    isLoading: false,
-    isFetching: false,
-    isError: false,
-    data: { access_token: "test" },
-  }),
-};
-
-const DEFAULT_PROFILE_LOADING_RESPONSE = {
-  useProfile: () => ({
-    isLoading: true,
-    isFetching: false,
-    isError: false,
-    data: { access_token: "test" },
-  }),
-};
-
-describe("Authorizer", () => {
-  it("should be rendered without issues", () => {
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    const component = shallow(
-      <QueryClientProvider client={queryClient}>
-        <Authorizer />
-      </QueryClientProvider>
-    );
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should render children if authorized", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: "not-null",
-    });
-    useUserMock({
-      profile: "not-null",
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn();
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(0);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(0);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(0);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-
-  it("should render children if current page is login", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn().mockReturnValue("/login");
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(0);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(0);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(0);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-
-  it("should NOT render children if profile is loading or fetching", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_LOADING_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn();
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(0);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(0);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(0);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-
-  it("should NOT render children if unauthorized and current page is not login", () => {
-    let component: any;
-
-    useAuthMock({
-      secrets: null,
-    });
-    useUserMock({
-      profile: null,
-    });
-    useAuthApi(DEFAULT_PROFILE_RESPONSE);
-
-    RouteService.getCurrentPage = jest.fn();
-    RouteService.getCurrentRoute = jest.fn();
-    RouteService.cleanRedirect = jest.fn();
-
-    act(() => {
-      component = mount(
-        <QueryClientProvider client={queryClient}>
-          <Authorizer>
-            <p>test</p>
-          </Authorizer>
-        </QueryClientProvider>
-      );
-    });
-
-    component.update();
-
-    expect(RouteService.getCurrentPage).toHaveBeenCalledTimes(3);
-    expect(RouteService.getCurrentRoute).toHaveBeenCalledTimes(1);
-    expect(RouteService.cleanRedirect).toHaveBeenCalledTimes(1);
-    expect(component.exists()).toBeTruthy();
-    expect(component.find("BlockLoader").exists()).toBeTruthy();
-  });
-});

package/tests/Auth/Layout/UserNavDropDown.test.tsx

@@ -1,43 +0,0 @@
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { mount, shallow } from "enzyme";
-import * as React from "react";
-import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
-import useUserMock from "../../__mock__/hooks/useUserMock";
-import { UserNavDropDown } from "../../../src/auth/Layout/UserNavDropDown";
-
-jest.mock("react-i18next");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useUser");
-
-describe("UserNavDropDown", () => {
-  it("should be rendered without issues", () => {
-    useTranslationMock({
-      t: jest.fn(),
-    });
-    useUserMock({
-      profile: null,
-    });
-
-    const component = shallow(<UserNavDropDown />);
-
-    expect(component.exists()).toBeTruthy();
-  });
-
-  it("should logout on click", () => {
-    useTranslationMock({
-      t: jest.fn(),
-    });
-    useUserMock({
-      logout: jest.fn(),
-    });
-
-    RouteService.redirectTo = jest.fn();
-
-    const component = mount(<UserNavDropDown />);
-
-    expect(component.exists()).toBeTruthy();
-
-    component.children().prop("onClick")();
-
-    expect(RouteService.redirectTo).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/Auth/Layout/UserNavDropDownToggle.test.tsx

@@ -1,33 +0,0 @@
-import { IUser } from "@licklist/plugins/dist/types/context/user/IUser";
-import { shallow } from "enzyme";
-import * as React from "react";
-import { UserNavDropDownToggle } from "../../../src/auth/Layout/UserNavDropDownToggle";
-import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
-
-jest.mock("react-i18next");
-jest.mock("@licklist/plugins/dist/context/user/hooks/useUser");
-
-const user: IUser = {
-  id: 1,
-  first_name: "first_name",
-  last_name: "last_name",
-  email: "email",
-  user_roles: [],
-  user_detail: {
-    postcode: "",
-    birthday: "",
-    phone: "",
-  },
-};
-
-describe("UserNavDropDownToggle", () => {
-  it("should be rendered without issues", () => {
-    useTranslationMock({
-      t: jest.fn(),
-    });
-
-    const component = shallow(<UserNavDropDownToggle user={user} />);
-
-    expect(component.exists()).toBeTruthy();
-  });
-});