@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/auth/Register/RegisterComponent.tsx

@@ -1,110 +1,110 @@
-import { useContext, useState } from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import { Row, Col } from "react-bootstrap";
-import RequestContext from "@licklist/plugins/dist/context/app/RequestContext";
-import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
-import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
-import useAuth from "@licklist/plugins/dist/context/user/hooks/useAuth";
-import useInvite from "@licklist/plugins/dist/context/user/hooks/useInvite";
-import useUserApi from "@licklist/plugins/dist/hooks/Api/useUserApi";
-import { IAuth } from "@licklist/plugins/dist/types/context/user/IAuth";
-import { IUser } from "@licklist/plugins/dist/types/context/user/IUser";
-import { UserRegisterRequest } from "@licklist/plugins/dist/types/Request/UserRegisterRequest";
-import { ErrorHandlerFn } from "@licklist/core/dist/Api/ApiService";
-
-import { RegisterFormComponent } from "./RegisterFormComponent";
-import { SocialFormComponent } from "../Social/SocialFormComponent";
-import { Router } from "../Router";
-import FormCard from "../../static/FormCard";
-import { LoaderIndicator } from "../../static/loader/LoaderIndicator";
+import { useContext, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Row, Col } from 'react-bootstrap'
+import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
+import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
+import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
+import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
+import useInvite from '@licklist/plugins/dist/context/user/hooks/useInvite'
+import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
+import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
+import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
+import { UserRegisterRequest } from '@licklist/plugins/dist/types/Request/UserRegisterRequest'
+import { ErrorHandlerFn } from '@licklist/core/dist/Api/ApiService'
+
+import { RegisterFormComponent } from './RegisterFormComponent'
+import { SocialFormComponent } from '../Social/SocialFormComponent'
+import { Router } from '../Router'
+import FormCard from '../../static/FormCard'
+import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 
 type RegisterComponentProps = {
-  showSocialLinks?: boolean;
-};
+  showSocialLinks?: boolean
+}
 
 function RegisterComponent({
   showSocialLinks = false,
 }: RegisterComponentProps) {
-  const { t } = useTranslation("User");
-  const request = useContext(RequestContext);
-  const notification = useNotification();
-  const auth = useAuth();
-  const user = useUser();
-  const invite = useInvite();
+  const { t } = useTranslation('User')
+  const request = useContext(RequestContext)
+  const notification = useNotification()
+  const auth = useAuth()
+  const user = useUser()
+  const invite = useInvite()
 
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [serverErrors, setServerErrors] = useState(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [serverErrors, setServerErrors] = useState(null)
 
-  const userService = useUserApi(request);
+  const userService = useUserApi(request)
 
   const handleErrorForm: ErrorHandlerFn = (error: unknown) => {
     if (error instanceof Error) {
-      const errorsArray = Object.values(error);
-      if (!Array.isArray(errorsArray)) return;
-      const { data: errorData } = errorsArray[2];
+      const errorsArray = Object.values(error)
+      if (!Array.isArray(errorsArray)) return
+      const { data: errorData } = errorsArray[2]
 
-      setServerErrors(errorData?.errors);
+      setServerErrors(errorData?.errors)
     }
-  };
+  }
 
   const handleError = (error: Error) => {
     notification.danger({
-      title: "Error",
+      title: 'Error',
       message: error.message,
-    });
-  };
+    })
+  }
 
   const storeSecrets = (secrets: IAuth) => {
-    auth.setSecrets(secrets);
-  };
+    auth.setSecrets(secrets)
+  }
 
   const getSecrets = async (credentials: UserRegisterRequest) =>
     userService
       .register(credentials)
       .catch(handleErrorForm)
-      .finally(() => setIsLoading(false));
+      .finally(() => setIsLoading(false))
 
-  const getProfile = async () => userService.profile().catch(handleError);
+  const getProfile = async () => userService.profile().catch(handleError)
 
   const handleOnSubmit = async (credentials: UserRegisterRequest) => {
-    const secrets = await getSecrets(credentials);
+    const secrets = await getSecrets(credentials)
 
-    if (!secrets) return;
+    if (!secrets) return
 
-    storeSecrets(secrets);
+    storeSecrets(secrets)
 
     // Update Authorization header value
-    userService.setAuthorizationToken(secrets.access_token);
+    userService.setAuthorizationToken(secrets.access_token)
 
-    const profile = await getProfile();
+    const profile = await getProfile()
 
-    if (!profile) return;
+    if (!profile) return
 
     // Store user profile
-    user.login(profile.message as IUser);
+    user.login(profile.message as IUser)
 
-    invite.clearInvitation();
+    invite.clearInvitation()
 
     notification.success({
-      title: "Success",
-      message: t("Notification:registeredSuccessfully"),
-    });
+      title: 'Success',
+      message: t('Notification:registeredSuccessfully'),
+    })
 
-    RouteService.redirectTo("/");
-  };
+    RouteService.redirectTo('/')
+  }
 
   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("registerTitle")}</h1>
+            <h1 className="text-center">{t('registerTitle')}</h1>
 
             <h6 className="text-center">
               <Trans t={t} i18nKey="registerPromo">
-                Fill out the form below to sign up for {{ name: t("bookedit") }}
+                Fill out the form below to sign up for {{ name: t('bookedit') }}
                 . Already signed up? Then just <Link to="/login">Log in</Link>.
               </Trans>
             </h6>
@@ -135,7 +135,7 @@ function RegisterComponent({
         </Col>
       </Row>
     </Router>
-  );
+  )
 }
 
-export { RegisterComponent };
+export { RegisterComponent }

package/src/auth/Register/RegisterFormComponent.tsx

@@ -1,41 +1,41 @@
-import { useState, ChangeEvent, useEffect, useCallback } from "react";
-import { Form, Button, Row, Col, InputGroup } from "react-bootstrap";
-import { Controller, useForm } from "react-hook-form";
-import { Trans, useTranslation } from "react-i18next";
-import { isPossiblePhoneNumber } from "react-phone-number-input";
-import Input from "react-phone-number-input/input";
-import { Link } from "react-router-dom";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { UserRegisterRequest } from "@licklist/plugins/dist/types/Request/UserRegisterRequest";
-import emailRule from "@licklist/plugins/dist/validation/Rules/emailRule";
-import postCodeRule from "@licklist/plugins/dist/validation/Rules/postCodeRule";
-import { Invitation } from "@licklist/plugins/dist/types/context/user/Invitation";
-import * as Config from "@licklist/core/dist/Config";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
-
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import { BirthDateFormComponent } from "./BirthDateFormComponent";
-import CountrySelect from "../../static/CountrySelect";
+import { useState, ChangeEvent, useEffect, useCallback } from 'react'
+import { Form, Button, Row, Col, InputGroup } from 'react-bootstrap'
+import { Controller, useForm } from 'react-hook-form'
+import { Trans, useTranslation } from 'react-i18next'
+import { isPossiblePhoneNumber } from 'react-phone-number-input'
+import Input from 'react-phone-number-input/input'
+import { Link } from 'react-router-dom'
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import { UserRegisterRequest } from '@licklist/plugins/dist/types/Request/UserRegisterRequest'
+import emailRule from '@licklist/plugins/dist/validation/Rules/emailRule'
+import postCodeRule from '@licklist/plugins/dist/validation/Rules/postCodeRule'
+import { Invitation } from '@licklist/plugins/dist/types/context/user/Invitation'
+import * as Config from '@licklist/core/dist/Config'
+import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
+
+import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import { BirthDateFormComponent } from './BirthDateFormComponent'
+import CountrySelect from '../../static/CountrySelect'
 
 export type RegisterFormComponentValues = {
-  first_name: string;
-  last_name: string;
-  email: string;
-  password: string;
-  phone: string;
-  post_code: string;
-  gender: string;
-  receive_promo: boolean;
-  receive_partner_promo: boolean;
-  invitation_hash?: string;
-};
+  first_name: string
+  last_name: string
+  email: string
+  password: string
+  phone: string
+  post_code: string
+  gender: string
+  receive_promo: boolean
+  receive_partner_promo: boolean
+  invitation_hash?: string
+}
 
 export interface RegisterFormComponentProps {
-  isLoading: boolean;
-  setIsLoading: (isLoading: boolean) => void;
-  onSubmit?: (credentials: UserRegisterRequest) => void;
-  invitation: Invitation | null;
-  serverErrors?: ServerError;
+  isLoading: boolean
+  setIsLoading: (isLoading: boolean) => void
+  onSubmit?: (credentials: UserRegisterRequest) => void
+  invitation: Invitation | null
+  serverErrors?: ServerError
 }
 
 function RegisterFormComponent({
@@ -45,17 +45,17 @@ function RegisterFormComponent({
   onSubmit,
   serverErrors,
 }: RegisterFormComponentProps) {
-  const { t } = useTranslation(["Validation", "User"]);
+  const { t } = useTranslation(['Validation', 'User'])
 
   const defaultValues = () => {
     if (!invitation) {
-      return {};
+      return {}
     }
 
-    const { email, invitation_hash } = invitation;
+    const { email, invitation_hash } = invitation
 
-    return { email, invitation_hash };
-  };
+    return { email, invitation_hash }
+  }
 
   const {
     register,
@@ -68,54 +68,51 @@ function RegisterFormComponent({
     control,
     watch,
   } = useForm<RegisterFormComponentValues>({
-    mode: "onChange",
+    mode: 'onChange',
     defaultValues: defaultValues(),
-  });
+  })
 
   useEffect(() => {
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
+    FormErrorService.handleServerErrors(serverErrors, setError)
+  }, [serverErrors, setError])
 
-  const [country, setCountry] = useState<string>(Config.Country.GB);
-  const [phoneCode, setPhoneCode] = useState<string>();
-  const [isPhoneValid, setIsPhoneValid] = useState<boolean>(true);
+  const [country, setCountry] = useState<string>(Config.Country.GB)
+  const [phoneCode, setPhoneCode] = useState<string>()
+  const [isPhoneValid, setIsPhoneValid] = useState<boolean>(true)
 
-  const phoneNumberValue = watch("phone");
+  const phoneNumberValue = watch('phone')
 
   const onFormSubmit = async (credentialsNext: any) => {
-    setIsLoading(true);
+    setIsLoading(true)
 
     if (onSubmit) {
-      await onSubmit(credentialsNext);
+      await onSubmit(credentialsNext)
     }
 
-    setIsLoading(false);
-  };
+    setIsLoading(false)
+  }
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(
-      e.target.name as keyof RegisterFormComponentValues,
-      e.target.value,
-    );
-  };
+    setValue(e.target.name as keyof RegisterFormComponentValues, e.target.value)
+  }
 
   const handlePhoneCountry = (phoneCountry: string, code: string) => {
-    setCountry(() => phoneCountry);
-    setPhoneCode(() => code);
+    setCountry(() => phoneCountry)
+    setPhoneCode(() => code)
 
-    setValue("phone", "");
-  };
+    setValue('phone', '')
+  }
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
     [formState, errors],
-  );
+  )
 
   useEffect(() => {
-    const isPhoneNumberValid = isPossiblePhoneNumber(phoneNumberValue ?? "");
+    const isPhoneNumberValid = isPossiblePhoneNumber(phoneNumberValue ?? '')
 
-    setIsPhoneValid(isPhoneNumberValid);
-  }, [phoneNumberValue]);
+    setIsPhoneValid(isPhoneNumberValid)
+  }, [phoneNumberValue])
 
   return (
     <>
@@ -126,10 +123,10 @@ function RegisterFormComponent({
               <Form.Control
                 type="input"
                 name="first_name"
-                placeholder={t("User:firstName")}
-                isValid={isFieldValid("first_name")}
+                placeholder={t('User:firstName')}
+                isValid={isFieldValid('first_name')}
                 isInvalid={!!errors.first_name}
-                {...register("first_name", {
+                {...register('first_name', {
                   required: true,
                   maxLength: 100,
                 })}
@@ -137,13 +134,13 @@ function RegisterFormComponent({
               />
 
               <Form.Control.Feedback type="invalid">
-                {HookFormService.hasError(errors.first_name, "required") &&
-                  t("Validation:fieldRequired", {
-                    attribute: t("User:firstName"),
+                {HookFormService.hasError(errors.first_name, 'required') &&
+                  t('Validation:fieldRequired', {
+                    attribute: t('User:firstName'),
                   })}
-                {HookFormService.hasError(errors.first_name, "maxLength") &&
-                  t("Validation:fieldMaxLength", {
-                    attribute: t("User:firstName"),
+                {HookFormService.hasError(errors.first_name, 'maxLength') &&
+                  t('Validation:fieldMaxLength', {
+                    attribute: t('User:firstName'),
                     max: 100,
                   })}
               </Form.Control.Feedback>
@@ -154,10 +151,10 @@ function RegisterFormComponent({
               <Form.Control
                 type="input"
                 name="last_name"
-                placeholder={t("User:lastName")}
-                isValid={isFieldValid("last_name")}
+                placeholder={t('User:lastName')}
+                isValid={isFieldValid('last_name')}
                 isInvalid={!!errors.last_name}
-                {...register("last_name", {
+                {...register('last_name', {
                   required: true,
                   maxLength: 100,
                 })}
@@ -165,13 +162,13 @@ function RegisterFormComponent({
               />
 
               <Form.Control.Feedback type="invalid">
-                {HookFormService.hasError(errors.last_name, "required") &&
-                  t("Validation:fieldRequired", {
-                    attribute: t("User:lastName"),
+                {HookFormService.hasError(errors.last_name, 'required') &&
+                  t('Validation:fieldRequired', {
+                    attribute: t('User:lastName'),
                   })}
-                {HookFormService.hasError(errors.last_name, "maxLength") &&
-                  t("Validation:fieldMaxLength", {
-                    attribute: t("User:lastName"),
+                {HookFormService.hasError(errors.last_name, 'maxLength') &&
+                  t('Validation:fieldMaxLength', {
+                    attribute: t('User:lastName'),
                     max: 100,
                   })}
               </Form.Control.Feedback>
@@ -183,10 +180,10 @@ function RegisterFormComponent({
           <Form.Control
             type="email"
             name="email"
-            placeholder={t("User:email")}
-            isValid={isFieldValid("email")}
+            placeholder={t('User:email')}
+            isValid={isFieldValid('email')}
             isInvalid={Boolean(errors.email)}
-            {...register("email", {
+            {...register('email', {
               required: true,
               pattern: emailRule,
               maxLength: 100,
@@ -195,17 +192,17 @@ function RegisterFormComponent({
           />
 
           <Form.Control.Feedback type="invalid">
-            {HookFormService.hasError(errors.email, "required") &&
-              t("Validation:fieldRequired", {
-                attribute: t("User:email"),
+            {HookFormService.hasError(errors.email, 'required') &&
+              t('Validation:fieldRequired', {
+                attribute: t('User:email'),
               })}
-            {HookFormService.hasError(errors.email, "pattern") &&
-              t("Validation:fieldValidEmail", {
-                attribute: t("User:email"),
+            {HookFormService.hasError(errors.email, 'pattern') &&
+              t('Validation:fieldValidEmail', {
+                attribute: t('User:email'),
               })}
-            {HookFormService.hasError(errors.email, "maxLength") &&
-              t("Validation:fieldMaxLength", {
-                attribute: t("User:email"),
+            {HookFormService.hasError(errors.email, 'maxLength') &&
+              t('Validation:fieldMaxLength', {
+                attribute: t('User:email'),
                 max: 100,
               })}
             {errors.email?.message}
@@ -216,10 +213,10 @@ function RegisterFormComponent({
           <Form.Control
             type="password"
             name="password"
-            placeholder={t("User:password")}
-            isValid={isFieldValid("password")}
+            placeholder={t('User:password')}
+            isValid={isFieldValid('password')}
             isInvalid={!!errors.password}
-            {...register("password", {
+            {...register('password', {
               required: true,
               minLength: 10,
               maxLength: 100,
@@ -228,18 +225,18 @@ function RegisterFormComponent({
           />
 
           <Form.Control.Feedback type="invalid">
-            {HookFormService.hasError(errors.password, "required") &&
-              t("Validation:fieldRequired", {
-                attribute: t("User:password"),
+            {HookFormService.hasError(errors.password, 'required') &&
+              t('Validation:fieldRequired', {
+                attribute: t('User:password'),
               })}
-            {HookFormService.hasError(errors.password, "minLength") &&
-              t("Validation:fieldMinLength", {
-                attribute: t("User:password"),
+            {HookFormService.hasError(errors.password, 'minLength') &&
+              t('Validation:fieldMinLength', {
+                attribute: t('User:password'),
                 min: 10,
               })}
-            {HookFormService.hasError(errors.password, "maxLength") &&
-              t("Validation:fieldMaxLength", {
-                attribute: t("User:password"),
+            {HookFormService.hasError(errors.password, 'maxLength') &&
+              t('Validation:fieldMaxLength', {
+                attribute: t('User:password'),
                 max: 100,
               })}
           </Form.Control.Feedback>
@@ -262,15 +259,15 @@ function RegisterFormComponent({
             <Controller
               render={() => (
                 <Input
-                  placeholder={t("User:phoneNumber")}
+                  placeholder={t('User:phoneNumber')}
                   defaultCountry={country}
                   disabled={isLoading}
                   className={[
-                    "form-control",
-                    isPhoneValid && getValues("phone") && "is-valid",
-                    !isPhoneValid && getValues("phone") && "is-invalid",
-                  ].join(" ")}
-                  onChange={(value: string) => setValue("phone", value)}
+                    'form-control',
+                    isPhoneValid && getValues('phone') && 'is-valid',
+                    !isPhoneValid && getValues('phone') && 'is-invalid',
+                  ].join(' ')}
+                  onChange={(value: string) => setValue('phone', value)}
                 />
               )}
               control={control}
@@ -280,8 +277,8 @@ function RegisterFormComponent({
 
             <Form.Control.Feedback type="invalid">
               {!isPhoneValid &&
-                t("Validation:fieldValidPhone", {
-                  attribute: t("User:phoneNumber"),
+                t('Validation:fieldValidPhone', {
+                  attribute: t('User:phoneNumber'),
                 })}
             </Form.Control.Feedback>
           </InputGroup>
@@ -303,20 +300,20 @@ function RegisterFormComponent({
               <Form.Control
                 type="input"
                 name="post_code"
-                placeholder={t("User:postCode")}
+                placeholder={t('User:postCode')}
                 onChange={handleChange}
-                isValid={isFieldValid("post_code") && !!getValues("post_code")}
+                isValid={isFieldValid('post_code') && !!getValues('post_code')}
                 isInvalid={!!errors.post_code}
-                {...register("post_code", {
+                {...register('post_code', {
                   pattern: postCodeRule,
                 })}
                 disabled={isLoading}
               />
 
               <Form.Control.Feedback type="invalid">
-                {HookFormService.hasError(errors.post_code, "pattern") &&
-                  t("Validation:fieldValidPostCode", {
-                    attribute: t("User:postCode"),
+                {HookFormService.hasError(errors.post_code, 'pattern') &&
+                  t('Validation:fieldValidPostCode', {
+                    attribute: t('User:postCode'),
                   })}
               </Form.Control.Feedback>
             </Form.Group>
@@ -331,8 +328,8 @@ function RegisterFormComponent({
                 name="gender"
                 value="male"
                 id="genderMale"
-                label={t("User:male")}
-                {...register("gender")}
+                label={t('User:male')}
+                {...register('gender')}
                 disabled={isLoading}
                 inline
               />
@@ -342,8 +339,8 @@ function RegisterFormComponent({
                 name="gender"
                 value="female"
                 id="genderFemale"
-                label={t("User:female")}
-                {...register("gender")}
+                label={t('User:female')}
+                {...register('gender')}
                 disabled={isLoading}
                 inline
               />
@@ -357,11 +354,11 @@ function RegisterFormComponent({
             name="receive_promo"
             className="mb-1"
             id="noPromoFromUs"
-            {...register("receive_promo")}
+            {...register('receive_promo')}
             label={
               <Trans t={t} i18nKey="User:noPromoFromUs">
                 I&apos;d prefer to receive promotions and exclusive information
-                from {{ name: t("User:bookedit") }}
+                from {{ name: t('User:bookedit') }}
               </Trans>
             }
             disabled={isLoading}
@@ -370,12 +367,12 @@ function RegisterFormComponent({
           <Form.Check
             type="checkbox"
             id="noPromoFromPartners"
-            {...register("receive_partner_promo")}
+            {...register('receive_partner_promo')}
             name="receive_partner_promo"
             label={
               <Trans t={t} i18nKey="User:noPromoFromPartners">
                 I&apos;d prefer to receive promotions and exclusive information
-                from {{ name: t("User:bookedit") }} Partners
+                from {{ name: t('User:bookedit') }} Partners
               </Trans>
             }
             disabled={isLoading}
@@ -385,7 +382,7 @@ function RegisterFormComponent({
         <Form.Control
           hidden
           name="invitation_hash"
-          {...register("invitation_hash")}
+          {...register('invitation_hash')}
           disabled
         />
 
@@ -396,18 +393,18 @@ function RegisterFormComponent({
           block
           disabled={isLoading}
         >
-          {t("register")}
+          {t('register')}
         </Button>
 
         <p className="text-center mb-0 mt-3">
           <Trans t={t} i18nKey="User:agreementsPromo">
-            By creating an account, I agree to {{ name: t("User:bookedit") }}
-            &apos;s{" "}
-            <Link to="/terms" className={[isLoading && "disabled"].join(" ")}>
+            By creating an account, I agree to {{ name: t('User:bookedit') }}
+            &apos;s{' '}
+            <Link to="/terms" className={[isLoading && 'disabled'].join(' ')}>
               terms of service
-            </Link>{" "}
-            and{" "}
-            <Link to="/privacy" className={[isLoading && "disabled"].join(" ")}>
+            </Link>{' '}
+            and{' '}
+            <Link to="/privacy" className={[isLoading && 'disabled'].join(' ')}>
               privacy policy
             </Link>
             .
@@ -415,7 +412,7 @@ function RegisterFormComponent({
         </p>
       </Form>
     </>
-  );
+  )
 }
 
-export { RegisterFormComponent };
+export { RegisterFormComponent }