@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/affiliate/form/AffiliateForm.tsx

@@ -1,17 +1,17 @@
-import { useCallback, useEffect } from "react";
-import { Button, Form } from "react-bootstrap";
-import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { Affiliate } from "@licklist/core/dist/DataMapper/Product/AffiliateDataMapper";
-import { Dialog, useDialogContext } from "../../modals/dialog";
-import { AffiliateFormValues, GenerateLinkFunction } from "../types";
-import { AffiliateControl } from "./AffiliateControl";
+import { useCallback, useEffect } from 'react'
+import { Button, Form } from 'react-bootstrap'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { Affiliate } from '@licklist/core/dist/DataMapper/Product/AffiliateDataMapper'
+import { Dialog, useDialogContext } from '../../modals/dialog'
+import { AffiliateFormValues, GenerateLinkFunction } from '../types'
+import { AffiliateControl } from './AffiliateControl'
 
 export interface AffiliateFormProps {
-  defaultValues?: Affiliate | null;
-  handleSubmit: (values: AffiliateFormValues) => void;
-  generateLink: GenerateLinkFunction;
-  isLoading: boolean;
+  defaultValues?: Affiliate | null
+  handleSubmit: (values: AffiliateFormValues) => void
+  generateLink: GenerateLinkFunction
+  isLoading: boolean
 }
 
 export const AffiliateForm = ({
@@ -20,71 +20,70 @@ export const AffiliateForm = ({
   generateLink,
   isLoading,
 }: AffiliateFormProps) => {
-  const { t } = useTranslation("Design");
-  const { isShownDialog, showDialog, hideDialog } = useDialogContext();
+  const { t } = useTranslation('Design')
+  const { isShownDialog, showDialog, hideDialog } = useDialogContext()
 
   const form = useForm({
     defaultValues,
-    mode: "onChange",
-  });
-  const { reset } = form;
-  const formValues = form.watch();
+    mode: 'onChange',
+  })
+  const { reset } = form
+  const formValues = form.watch()
 
   const onBeforeUnload = useCallback((e: Event) => {
-    e.preventDefault();
-    e.returnValue = false;
-  }, []);
+    e.preventDefault()
+    e.returnValue = false
+  }, [])
 
   const onPopState = useCallback(
     (e: Event) => {
-      e.preventDefault();
+      e.preventDefault()
       if (!isShownDialog) {
-        showDialog();
+        showDialog()
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isShownDialog],
-  );
+  )
 
   const onApproveDialog = useCallback(() => {
-    window.history.back();
-  }, []);
+    window.history.back()
+  }, [])
 
   const onDeclineDialog = useCallback(() => {
-    window.history.pushState(null, "", window.location.pathname);
-    hideDialog();
+    window.history.pushState(null, '', window.location.pathname)
+    hideDialog()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   useEffect(() => {
-    reset(defaultValues);
+    reset(defaultValues)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValues]);
+  }, [defaultValues])
 
   useEffect(() => {
-    window.history.pushState(null, "", window.location.pathname);
-    window.addEventListener("beforeunload", onBeforeUnload);
-    window.addEventListener("popstate", onPopState);
+    window.history.pushState(null, '', window.location.pathname)
+    window.addEventListener('beforeunload', onBeforeUnload)
+    window.addEventListener('popstate', onPopState)
 
     return () => {
-      window.removeEventListener("beforeunload", onBeforeUnload);
-      window.removeEventListener("popstate", onPopState);
-    };
+      window.removeEventListener('beforeunload', onBeforeUnload)
+      window.removeEventListener('popstate', onPopState)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
-  const copyToClipboard = () => {
+  const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
-    return window.navigator.clipboard.writeText(formValues.link);
-  };
+    window.navigator.clipboard.writeText(formValues.link)
 
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>
         <Dialog
           isActive={isShownDialog}
-          title={t("Design:leavePage")}
-          content={t("Design:changesNotBeSaved")}
+          title={t('Design:leavePage')}
+          content={t('Design:changesNotBeSaved')}
           onApprove={onApproveDialog}
           onDecline={onDeclineDialog}
         />
@@ -97,7 +96,7 @@ export const AffiliateForm = ({
             disabled={isLoading || !formValues.link}
             onClick={copyToClipboard}
           >
-            {t("Design:copyToClipboard")}
+            {t('Design:copyToClipboard')}
           </Button>
           <Button
             className="affiliate-save-btn mt-5 ml-2 d-no dne d-md-block"
@@ -109,10 +108,10 @@ export const AffiliateForm = ({
               !formValues.link
             }
           >
-            {t("saveAndClose")}
+            {t('saveAndClose')}
           </Button>
         </div>
       </Form>
     </FormProvider>
-  );
-};
+  )
+}

package/src/affiliate/form/index.ts

@@ -1,2 +1,2 @@
-export * from "./AffiliateControl";
-export * from "./AffiliateForm";
+export * from './AffiliateControl'
+export * from './AffiliateForm'

package/src/affiliate/index.ts

@@ -1,3 +1,3 @@
-export * from "./card";
-export * from "./form";
-export * from "./types";
+export * from './card'
+export * from './form'
+export * from './types'

package/src/affiliate/types/index.ts

@@ -1,14 +1,14 @@
 export interface AffiliateFormValues {
-  name: string;
-  targetLink: string;
-  link: string;
-  token: string;
+  name: string
+  targetLink: string
+  link: string
+  token: string
 }
 export interface GenerateLinkResponse {
-  token: string;
-  link: string;
+  token: string
+  link: string
 }
 
 export type GenerateLinkFunction = (
   targetLink: string,
-) => Promise<void | GenerateLinkResponse | null>;
+) => Promise<void | GenerateLinkResponse | null>

package/src/auth/AccessDenied/AccessDenied.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, Story } from "@storybook/react";
-import { AccessDenied } from "./AccessDenied";
+import { Meta, Story } from '@storybook/react'
+import { AccessDenied } from './AccessDenied'
 
 export default {
-  title: "Auth/Access Denied",
-} as Meta;
+  title: 'Auth/Access Denied',
+} as Meta
 
 export const Login: Story<{}> = (args) => {
-  return <AccessDenied {...args} />;
-};
+  return <AccessDenied {...args} />
+}

package/src/auth/AccessDenied/AccessDenied.tsx

@@ -1,21 +1,21 @@
-import { Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
-import { FaLock } from "react-icons/fa";
+import { Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
+import { FaLock } from 'react-icons/fa'
 
 export const AccessDenied = () => {
-  const { t } = useTranslation("App");
-  const user = useUser();
+  const { t } = useTranslation('App')
+  const user = useUser()
 
   const onGoToHomepage = () => {
-    RouteService.redirectTo("/");
-  };
+    RouteService.redirectTo('/')
+  }
 
   const logOutHandler = () => {
-    user.logout();
-    RouteService.redirectTo("/");
-  };
+    user.logout()
+    RouteService.redirectTo('/')
+  }
 
   return (
     <div className="d-flex align-items-center justify-content-center flex-column text-center access-denied h-100">
@@ -23,16 +23,16 @@ export const AccessDenied = () => {
         <div className="icon-wrapper mb-5">
           <FaLock size={80} />
         </div>
-        <h3 className="mb-3">{t("accessDenied")}</h3>
-        <h6 className="mb-3">{t("youDontHavePermissions")}</h6>
-        <h6 className="mb-5">{t("contactAnAdministrator")}</h6>
+        <h3 className="mb-3">{t('accessDenied')}</h3>
+        <h6 className="mb-3">{t('youDontHavePermissions')}</h6>
+        <h6 className="mb-5">{t('contactAnAdministrator')}</h6>
         <Button className="d-block mx-auto" onClick={onGoToHomepage}>
-          {t("goToHomepage")}
+          {t('goToHomepage')}
         </Button>
         <Button className="d-block mx-auto mt-5" onClick={logOutHandler}>
-          {t("logOut")}
+          {t('logOut')}
         </Button>
       </div>
     </div>
-  );
-};
+  )
+}

package/src/auth/AccessDenied/index.ts

@@ -1 +1 @@
-export { AccessDenied } from "./AccessDenied";
+export { AccessDenied } from './AccessDenied'

package/src/auth/Auth.stories.tsx

@@ -1,18 +1,18 @@
-import { useEffect } from "react";
-import { Meta, Story } from "@storybook/react";
-import UserProvider from "@licklist/plugins/dist/context/user/providers/UserProvider";
-import InviteProvider from "@licklist/plugins/dist/context/user/providers/InviteProvider";
-import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
-import { Authorizer, AuthorizerProps } from "./Authorizer";
-import { Router, RouterProps } from "./Router";
+import { useEffect } from 'react'
+import { Meta, Story } from '@storybook/react'
+import UserProvider from '@licklist/plugins/dist/context/user/providers/UserProvider'
+import InviteProvider from '@licklist/plugins/dist/context/user/providers/InviteProvider'
+import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
+import { Authorizer, AuthorizerProps } from './Authorizer'
+import { Router, RouterProps } from './Router'
 
 export default {
-  title: "Auth",
-} as Meta;
+  title: 'Auth',
+} as Meta
 
 export const RouterComponent: Story<RouterProps> = (args) => (
   <Router {...args} />
-);
+)
 export const AuthorizerComponent: Story<AuthorizerProps> = (args) => (
   <>
     <UserProvider>
@@ -23,25 +23,25 @@ export const AuthorizerComponent: Story<AuthorizerProps> = (args) => (
       </InviteProvider>
     </UserProvider>
   </>
-);
+)
 
 function AuthorizerWrapper(args) {
-  const user = useUser();
+  const user = useUser()
 
   useEffect(() => {
     user.login({
       id: 1,
-      first_name: "Ben",
-      last_name: "Jonson",
-      email: "b.jonson@gmail.com",
+      first_name: 'Ben',
+      last_name: 'Jonson',
+      email: 'b.jonson@gmail.com',
       user_roles: [],
       user_detail: {
         birthday: String(Date.now()),
-        postcode: "TEST",
-        phone: "+1234",
+        postcode: 'TEST',
+        phone: '+1234',
       },
-    });
-  }, []);
+    })
+  }, [])
 
   return (
     <>
@@ -52,5 +52,5 @@ function AuthorizerWrapper(args) {
         </Authorizer>
       )}
     </>
-  );
+  )
 }

package/src/auth/Authorizer.tsx

@@ -1,42 +1,44 @@
-import { ReactNode, useEffect, useState, useCallback } from "react";
-import { matchPath } from "react-router-dom";
-import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { ROUTES, MATCH_ROUTE_PATTERNS } from "@licklist/core/dist/Config";
-import useAuthApi from "@licklist/plugins/dist/hooks/Api/useAuthApi";
-import useAuth from "@licklist/plugins/dist/context/user/hooks/useAuth";
-import { BlockLoader } from "../static/loader/BlockLoader";
+import { ReactNode, useEffect, useState, useCallback } from 'react'
+import { matchPath } from 'react-router-dom'
+import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import { ROUTES, MATCH_ROUTE_PATTERNS } from '@licklist/core/dist/Config'
+import useAuthApi from '@licklist/plugins/dist/hooks/Api/useAuthApi'
+import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
+import { BlockLoader } from '../static/loader/BlockLoader'
 
 export interface AuthorizerProps {
-  children?: ReactNode | ReactNode[];
+  children?: ReactNode | ReactNode[]
 }
 
 function Authorizer(props: AuthorizerProps) {
-  const { children } = props;
-  const auth = useAuth();
-  const user = useUser();
-  const { useProfile } = useAuthApi();
+  const { children } = props
+  const auth = useAuth()
+  const user = useUser()
+  const { useProfile } = useAuthApi()
 
   // This will re-fetch user's profile
-  const profile = useProfile();
+  const profile = useProfile()
 
-  const [isValidated, setIsValidated] = useState<boolean>(false);
+  const [isValidated, setIsValidated] = useState<boolean>(false)
 
-  const matchedPathPatternUrls = useCallback(() => {
-    return Object.values(MATCH_ROUTE_PATTERNS)
-      .map((pathUrlPattern) =>
-        matchPath<{ url: string }>(
-          RouteService.getCurrentPage(),
-          pathUrlPattern,
-        ),
-      )
-      .filter(Boolean)
-      .map((matched) => matched.url);
-  }, []);
+  const matchedPathPatternUrls = useCallback(
+    () =>
+      Object.values(MATCH_ROUTE_PATTERNS)
+        .map((pathUrlPattern) =>
+          matchPath<{ url: string }>(
+            RouteService.getCurrentPage(),
+            pathUrlPattern,
+          ),
+        )
+        .filter(Boolean)
+        .map((matched) => matched.url),
+    [],
+  )
 
   useEffect(() => {
     if (profile.isLoading || profile.isFetching) {
-      return;
+      return
     }
 
     if (
@@ -44,8 +46,8 @@ function Authorizer(props: AuthorizerProps) {
       user.profile !== null &&
       profile.data !== null
     ) {
-      setIsValidated(() => true);
-      return;
+      setIsValidated(() => true)
+      return
     }
 
     if (
@@ -60,15 +62,15 @@ function Authorizer(props: AuthorizerProps) {
         ...matchedPathPatternUrls(),
       ].includes(RouteService.getCurrentPage())
     ) {
-      setIsValidated(() => true);
-      return;
+      setIsValidated(() => true)
+      return
     }
 
-    const route = RouteService.getCurrentRoute();
+    const route = RouteService.getCurrentRoute()
 
     RouteService.cleanRedirect(
-      [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join("?"),
-    );
+      [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join('?'),
+    )
   }, [
     auth.secrets,
     user.profile,
@@ -77,12 +79,12 @@ function Authorizer(props: AuthorizerProps) {
     profile.isError,
     profile.isLoading,
     profile.isFetching,
-  ]);
+  ])
 
   if (profile.isFetching || profile.isLoading || !isValidated)
-    return <BlockLoader />;
+    return <BlockLoader />
 
-  return <>{children}</>;
+  return <>{children}</>
 }
 
-export { Authorizer };
+export { Authorizer }

package/src/auth/ChangePassword/ChangePassword.stories.tsx

@@ -1,18 +1,18 @@
-import { Meta, Story } from "@storybook/react";
-import { Router } from "../Router";
-import { ChangePasswordComponent } from "./ChangePasswordComponent";
+import { Meta, Story } from '@storybook/react'
+import { Router } from '../Router'
+import { ChangePasswordComponent } from './ChangePasswordComponent'
 import {
   ChangePasswordFormComponent,
   ChangePasswordFormComponentProps,
-} from "./ChangePasswordFormComponent";
+} from './ChangePasswordFormComponent'
 
 export default {
-  title: "Auth/ChangePassword",
-} as Meta;
+  title: 'Auth/ChangePassword',
+} as Meta
 
 export const ChangePassword: Story<{}> = (args) => (
   <ChangePasswordComponent {...args} />
-);
+)
 
 export const ChangePasswordForm: Story<ChangePasswordFormComponentProps> = (
   args,
@@ -22,4 +22,4 @@ export const ChangePasswordForm: Story<ChangePasswordFormComponentProps> = (
       <ChangePasswordFormComponent {...args} />
     </Router>
   </>
-);
+)

package/src/auth/ChangePassword/ChangePasswordComponent.tsx

@@ -1,73 +1,73 @@
-import { useContext, useEffect, useState } from "react";
-import Row from "react-bootstrap/Row";
-import Col from "react-bootstrap/Col";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { ApiServiceError } from "@licklist/core/dist/Api/ApiService";
-import RequestContext from "@licklist/plugins/dist/context/app/RequestContext";
-import useUserApi from "@licklist/plugins/dist/hooks/Api/useUserApi";
-import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import { UserChangePasswordRequest } from "@licklist/plugins/dist/types/Request/UserChangePasswordRequest";
-import { ROUTES } from "@licklist/core/dist/Config";
-import { ChangePasswordFormComponent } from "./ChangePasswordFormComponent";
-import { Router } from "../Router";
-import FormCard from "../../static/FormCard";
-import { LoaderIndicator } from "../../static/loader/LoaderIndicator";
+import { useContext, useEffect, useState } from 'react'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+import { ApiServiceError } from '@licklist/core/dist/Api/ApiService'
+import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
+import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
+import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import { UserChangePasswordRequest } from '@licklist/plugins/dist/types/Request/UserChangePasswordRequest'
+import { ROUTES } from '@licklist/core/dist/Config'
+import { ChangePasswordFormComponent } from './ChangePasswordFormComponent'
+import { Router } from '../Router'
+import FormCard from '../../static/FormCard'
+import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 
 function ChangePasswordComponent() {
-  const { t } = useTranslation(["Notification", "User", "App"]);
-  const request = useContext(RequestContext);
-  const notification = useNotification();
-  const { search } = useLocation();
-  const email = new URLSearchParams(search).get("email");
-  const token = new URLSearchParams(search).get("token");
+  const { t } = useTranslation(['Notification', 'User', 'App'])
+  const request = useContext(RequestContext)
+  const notification = useNotification()
+  const { search } = useLocation()
+  const email = new URLSearchParams(search).get('email')
+  const token = new URLSearchParams(search).get('token')
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false)
 
-  const userApiService = useUserApi(request);
+  const userApiService = useUserApi(request)
 
   const handleError = (error: ApiServiceError<{ message: string }>) => {
     notification.danger({
-      title: t("App:error"),
+      title: t('App:error'),
       message: error.response?.data?.message,
-    });
+    })
 
-    RouteService.redirectTo(ROUTES.FORGOT_PASSWORD);
-  };
+    RouteService.redirectTo(ROUTES.FORGOT_PASSWORD)
+  }
 
   const changePassword = async (resetRequest: UserChangePasswordRequest) =>
-    userApiService.changePassword(resetRequest).catch(handleError);
+    userApiService.changePassword(resetRequest).catch(handleError)
 
   const handleOnSubmit = async (credentials: UserChangePasswordRequest) => {
-    const resetResponse = await changePassword(credentials);
+    const resetResponse = await changePassword(credentials)
 
     if (!resetResponse) {
-      return;
+      return
     }
 
     notification.success({
-      title: "Success",
-      message: t("Notification:passwordChangedSuccessfully"),
-    });
+      title: 'Success',
+      message: t('Notification:passwordChangedSuccessfully'),
+    })
 
-    RouteService.redirectTo(ROUTES.LOGIN_PAGE);
-  };
+    RouteService.redirectTo(ROUTES.LOGIN_PAGE)
+  }
 
   useEffect(() => {
     if (!email && !token) {
-      RouteService.redirectTo(ROUTES.LOGIN_PAGE);
+      RouteService.redirectTo(ROUTES.LOGIN_PAGE)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   return (
     <Router>
       <Row className="justify-content-center">
         <Col xs sm={12} md={7} lg={6} xl={5} className="align-self-center">
           <>
-            <h1 className="text-center">{t("User:resetPasswordTitle")}</h1>
-            <h3 className="text-center">{t("User:forEmail", { email })}</h3>
+            <h1 className="text-center">{t('User:resetPasswordTitle')}</h1>
+            <h3 className="text-center">{t('User:forEmail', { email })}</h3>
 
             <FormCard>
               <ChangePasswordFormComponent
@@ -84,7 +84,7 @@ function ChangePasswordComponent() {
         </Col>
       </Row>
     </Router>
-  );
+  )
 }
 
-export { ChangePasswordComponent };
+export { ChangePasswordComponent }