@licklist/design 0.58.9 → 0.58.11-dev.0

package/src/styles/product-set/EditVenueMapSetModal.scss

@@ -91,7 +91,7 @@
   }
 
   @include media-breakpoint-down(sm) {
-    top: 50%;
+    top: 100%;
   
     .step-save-btn {
       width: 100%;

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -1,10 +1,52 @@
 .payment_link {
+  padding: 0 0 1rem 0;
+
+  .button-wrapper {
+    top: 2rem;
+    right: 2rem;
+    position: absolute;
+    z-index: 100;
+  }
+
   .page-body {
+    padding: 0;
+    height: calc(100vh - 2rem) !important;
+
+    .navigation {
+      display: block;
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
+    .right-block {
+      margin-left: 0;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 1rem);
+      @include media-breakpoint-down(sm) {
+        width: calc(100% - 2rem);
+        max-width: unset;
+        position: inherit;
+        overflow: visible;
+        margin: 0 1rem 1rem;
+        height: unset;
+        min-height: unset;
+        max-height: 100%;
+      }
+    }
+
     .left-block {
       .left-block-container {
         position: relative;
         max-height: 100%;
 
+        .payment-title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          align-items: center;
+          margin-left: 0.5rem;
+        }
+
         .ryft-payment-form {
           .submit-button-wrapper {
             margin: -1rem 0 1rem;
@@ -13,7 +55,55 @@
               width: 100%;
             }
           }
+          #mobile-pay-divider-container {
+            display: flex;
+            position: relative;
+            margin-bottom: 1rem;
+            #mobile-pay-divider-text {
+              margin-right: 1rem;
+              font-size: 0.875rem;
+              font-weight: 600;
+            }
+            #mobile-pay-divider {
+              width: 100%;
+              border-bottom: 1px #dfdfdf solid;
+              margin-bottom: 0.6rem;
+            }
+          }
 
+          #card-title-container {
+            height: auto;
+            border: none;
+            margin-bottom: 0.5rem;
+            text-align: left;
+            :first-child {
+              font-size: 1rem;
+              font-weight: 600;
+              margin-bottom: 1rem;
+            }
+
+            .form-label {
+              margin-bottom: 0.5rem;
+            }
+          }
+          .mobile-pay-title {
+            display: block;
+            font-weight: 600;
+            font-size: 1rem;
+            color: black;
+            padding: 0;
+            font-style: normal;
+            font-family: inherit;
+            margin-bottom: 1rem;
+          }
+        }
+        .form {
+          .input {
+            border: 2px solid #525252 !important;
+          }
+        }
+
+        .ryft-payment-form {
           @include media-breakpoint-up(md) {
             .submit-button-wrapper {
               max-width: 15.5rem;
@@ -22,10 +112,9 @@
 
           // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
           .ryft-pay-grid {
-            position: absolute !important;
-            top: 10rem;
             width: 100%;
             max-width: 15.5rem;
+            margin-bottom: 1rem;
           }
           .ryft-pay-apple-pay-button {
             border-radius: 0.25rem;
@@ -36,6 +125,36 @@
           display: none !important;
         }
       }
+      @include media-breakpoint-down(sm) {
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column-reverse;
+      overflow: scroll;
+
+      @include media-breakpoint-down(sm) {
+        .left-block {
+          min-height: 100%;
+        }
+        .right-block {
+          margin: 0 auto;
+          width: 100%;
+          .children-wrapper {
+            .accordion {
+              .collapse {
+                overflow: visible;
+                overflow-x: unset;
+                scrollbar-width: unset;
+              }
+            }
+          }
+        }
+      }
     }
   }
   ::-webkit-scrollbar {
@@ -62,3 +181,7 @@
     }
   }
 }
+
+#ryft-threeDSMethodIframe {
+  display: none;
+}

package/src/styles/sales/BookingResults.scss

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

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();
-  });
-});