@licklist/design 0.58.6-dev.0 → 0.58.6-dev.10

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

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

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