@licklist/design 0.63.0-dev.1 → 0.63.0

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/src/typeahead/Typeahead.tsx

@@ -16,7 +16,6 @@ export interface TypeaheadProps {
   isMultipleChoise?: boolean;
   noOptionsMessage: string;
   isInvalid?: boolean;
-  isCouponForm?: boolean;
 }
 
 function Typeahead({
@@ -25,25 +24,13 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = "",
-  isCouponForm = false,
   noOptionsMessage = "",
   isInvalid,
 }: TypeaheadProps) {
   const { control } = useFormContext();
 
-  const getStyle = (): CSSObjectWithLabel => {
-    const couponFormStyle = isCouponForm
-      ? {
-          borderRadius: "1rem",
-          minHeight: "3rem",
-        }
-      : {};
-    return isInvalid
-      ? { borderColor: "red", ...couponFormStyle }
-      : {
-          ...couponFormStyle,
-        };
-  };
+  const getErrorStyle = (): CSSObjectWithLabel =>
+    isInvalid ? { borderColor: "red" } : {};
 
   return (
     <>
@@ -59,7 +46,7 @@ function Typeahead({
             styles={{
               control: (base) => ({
                 ...base,
-                ...getStyle(),
+                ...getErrorStyle(),
               }),
             }}
             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[] | undefined;
+  workHours?: WorkHour[];
 };
 
 export type ZoneFormValues = Partial<Zone> & {
@@ -25,7 +25,6 @@ export const ZoneForm = ({
   onSubmit,
   serverErrors,
   isLoading = false,
-  workHours,
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -55,7 +54,7 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} workHours={workHours} />
+        <ZoneControl isLoading={isLoading} />
         <Row>
           <Col md={6} sm={12} />
           <Col

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

@@ -21,6 +21,8 @@ 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[] | undefined;
+  workHours?: WorkHour[];
 };
 
-export const ZoneControl = ({ isLoading, workHours }: ZoneControlProps) => {
+export const ZoneControl = ({ isLoading }: ZoneControlProps) => {
   return (
     <Row>
       <Col md={6} sm={12} className="pr-5">
         <NameControl isLoading={isLoading} />
-        <ZoneRecurrencesControl workHours={workHours} />
+        <ZoneRecurrencesControl />
         <hr />
         <Row>
           <Col md={6} sm={6}>

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

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

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

@@ -53,17 +53,18 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
   if (!workHours || !workHours.length)
     return getTimeCheckboxRanges(DEFAULT_START_DAY_TIME, DEFAULT_END_DAY_TIME);
 
-  const providerWorkHoursByWeek = workHours.reduce<
-    { start: string; end: string }[]
-  >((workHoursNextArray, currentWorkHour) => {
-    const { start, end } = currentWorkHour;
+  const providerWorkHoursByWeek = workHours.reduce(
+    (workHoursNextArray: { start: string; end: string }[], 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/tests/Auth/Authorizer.test.tsx

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

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

@@ -0,0 +1,33 @@
+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();
+  });
+});

package/tests/Auth/Login/LoginComponent.test.tsx

@@ -0,0 +1,246 @@
+import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
+import { UserLoginRequest } from "@licklist/plugins/dist/types/Request/UserLoginRequest";
+import { mount, shallow } from "enzyme";
+import * as React from "react";
+import { act } from "react-dom/test-utils";
+import { MemoryRouter } from "react-router-dom";
+import { LoginComponent, LoginFormComponent } from "../../../src/auth/Login";
+import useAuthMock from "../../__mock__/hooks/useAuthMock";
+import useFormMock from "../../__mock__/hooks/useFormMock";
+import useNotificationMock from "../../__mock__/hooks/useNotificationMock";
+import useTranslationMock from "../../__mock__/hooks/useTranslationMock";
+import useUserApiMock from "../../__mock__/hooks/useUserApiMock";
+import useUserMock from "../../__mock__/hooks/useUserMock";
+
+jest.mock("react-i18next", () => ({
+  Trans: jest.fn().mockReturnValue("test"),
+  useTranslation: jest.fn(),
+}));
+jest.mock("react-hook-form");
+jest.mock("@licklist/plugins/dist/context/app/hooks/useNotification");
+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/useUserApi");
+
+beforeEach(() => {
+  useTranslationMock();
+  useNotificationMock({
+    danger: jest.fn(),
+    success: jest.fn(),
+  });
+  useAuthMock({
+    setSecrets: jest.fn(),
+  });
+  useUserMock({
+    login: jest.fn(),
+    clearInvitation: jest.fn(),
+  });
+  useFormMock();
+});
+
+afterAll(() => {
+  jest.resetAllMocks();
+});
+
+describe("LoginComponent", () => {
+  it("should be rendered without issues", () => {
+    const component = shallow(
+      <MemoryRouter initialEntries={["/"]}>
+        <LoginComponent />
+      </MemoryRouter>
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("should show danger notification if login did not succeed", async () => {
+    let component: any;
+
+    const notificationDangerMock = jest.fn();
+    const notificationSuccessMock = jest.fn();
+    const loginMock = jest.fn(() => Promise.reject(new Error("danger")));
+    const profileMock = jest.fn();
+
+    useNotificationMock({
+      danger: notificationDangerMock,
+      success: notificationSuccessMock,
+    });
+    useUserApiMock({
+      login: loginMock,
+      profile: profileMock,
+    });
+
+    RouteService.redirectTo = jest.fn();
+
+    act(() => {
+      component = mount(
+        <MemoryRouter>
+          <LoginComponent />
+        </MemoryRouter>
+      );
+    });
+
+    await act(async () => {
+      const credentials: UserLoginRequest = {
+        email: "email",
+        password: "password",
+      };
+
+      await component.find(LoginFormComponent).prop("onSubmit")(credentials);
+    });
+
+    component.update();
+
+    expect(component.exists()).toBeTruthy();
+    expect(loginMock).toHaveBeenCalledTimes(1);
+    expect(notificationDangerMock).toHaveBeenCalledTimes(1);
+    expect(profileMock).toHaveBeenCalledTimes(0);
+    expect(notificationSuccessMock).toHaveBeenCalledTimes(0);
+  });
+
+  it("should show danger notification if profile did not succeed", async () => {
+    let component: any;
+
+    const loginResponse = {
+      access_token: "access_token",
+      refresh_token: "refresh_token",
+      token_type: "token_type",
+      expires_in: null,
+    };
+
+    const notificationDangerMock = jest.fn();
+    const notificationSuccessMock = jest.fn();
+    const loginMock = jest.fn(() => Promise.resolve(loginResponse));
+    const profileMock = jest.fn(() => Promise.reject(new Error("danger")));
+    const setAuthorizationTokenMock = jest.fn();
+    const setSecretsMock = jest.fn();
+
+    useNotificationMock({
+      danger: notificationDangerMock,
+      success: notificationSuccessMock,
+    });
+    useUserApiMock({
+      login: loginMock,
+      profile: profileMock,
+      setAuthorizationToken: setAuthorizationTokenMock,
+    });
+    useAuthMock({
+      setSecrets: setSecretsMock,
+    });
+
+    RouteService.redirectTo = jest.fn();
+
+    act(() => {
+      component = mount(
+        <MemoryRouter>
+          <LoginComponent />
+        </MemoryRouter>
+      );
+    });
+
+    await act(async () => {
+      const credentials: UserLoginRequest = {
+        email: "email",
+        password: "password",
+      };
+
+      await component.find(LoginFormComponent).prop("onSubmit")(credentials);
+    });
+
+    component.update();
+
+    expect(component.exists()).toBeTruthy();
+    expect(loginMock).toHaveBeenCalledTimes(1);
+    expect(setSecretsMock).toHaveBeenCalledTimes(1);
+    expect(setSecretsMock).toHaveBeenCalledWith(loginResponse);
+    expect(setAuthorizationTokenMock).toHaveBeenCalledTimes(1);
+    expect(setAuthorizationTokenMock).toHaveBeenCalledWith(
+      loginResponse.access_token
+    );
+    expect(profileMock).toHaveBeenCalledTimes(1);
+    expect(notificationDangerMock).toHaveBeenCalledTimes(1);
+    expect(notificationSuccessMock).toHaveBeenCalledTimes(0);
+  });
+
+  it("should show success notification if login and profile did succeed", async () => {
+    let component: any;
+
+    const loginResponse = {
+      access_token: "access_token",
+      refresh_token: "refresh_token",
+      token_type: "token_type",
+      expires_in: null,
+    };
+    const profileResponse = {
+      id: 1,
+      first_name: "first_name",
+      last_name: "last_name",
+      email: "email",
+      role: null,
+    };
+
+    const notificationDangerMock = jest.fn();
+    const notificationSuccessMock = jest.fn();
+    const loginMock = jest.fn(() => Promise.resolve(loginResponse));
+    const profileMock = jest.fn(() =>
+      Promise.resolve({
+        data: profileResponse,
+      })
+    );
+    const setAuthorizationTokenMock = jest.fn();
+    const setSecretsMock = jest.fn();
+    const userLoginMock = jest.fn();
+
+    useNotificationMock({
+      danger: notificationDangerMock,
+      success: notificationSuccessMock,
+    });
+    useUserApiMock({
+      login: loginMock,
+      profile: profileMock,
+      setAuthorizationToken: setAuthorizationTokenMock,
+    });
+    useAuthMock({
+      setSecrets: setSecretsMock,
+    });
+    useUserMock({
+      login: userLoginMock,
+    });
+
+    RouteService.redirectTo = jest.fn();
+
+    act(() => {
+      component = mount(
+        <MemoryRouter>
+          <LoginComponent />
+        </MemoryRouter>
+      );
+    });
+
+    await act(async () => {
+      const credentials: UserLoginRequest = {
+        email: "email",
+        password: "password",
+      };
+
+      await component.find(LoginFormComponent).prop("onSubmit")(credentials);
+    });
+
+    component.update();
+
+    expect(component.exists()).toBeTruthy();
+    expect(loginMock).toHaveBeenCalledTimes(1);
+    expect(setSecretsMock).toHaveBeenCalledTimes(1);
+    expect(setSecretsMock).toHaveBeenCalledWith(loginResponse);
+    expect(setAuthorizationTokenMock).toHaveBeenCalledTimes(1);
+    expect(setAuthorizationTokenMock).toHaveBeenCalledWith(
+      loginResponse.access_token
+    );
+    expect(profileMock).toHaveBeenCalledTimes(1);
+    expect(userLoginMock).toHaveBeenCalledTimes(1);
+    expect(userLoginMock).toHaveBeenCalledWith(profileResponse);
+    expect(notificationDangerMock).toHaveBeenCalledTimes(0);
+    expect(notificationSuccessMock).toHaveBeenCalledTimes(1);
+    expect(RouteService.redirectTo).toHaveBeenCalledTimes(1);
+  });
+});