@licklist/design 0.68.7-dev.1 → 0.68.7

package/src/auth/Register/BirthDateFormComponent.tsx

@@ -120,11 +120,11 @@ function BirthDateFormComponent({
 
   return (
     <Row>
-      <Col xs={12} sm={3} className='pr-sm-1'>
-        <Form.Group controlId='formGroupDay'>
+      <Col xs={12} sm={3} className="pr-sm-1">
+        <Form.Group controlId="formGroupDay">
           <Form.Control
-            type='number'
-            name='day'
+            type="number"
+            name="day"
             placeholder={t('User:day')}
             {...register('day', {
               max: 31,
@@ -138,11 +138,11 @@ function BirthDateFormComponent({
         </Form.Group>
       </Col>
 
-      <Col xs={12} sm={4} className='px-sm-1'>
-        <Form.Group controlId='formGroupMonth'>
+      <Col xs={12} sm={4} className="px-sm-1">
+        <Form.Group controlId="formGroupMonth">
           <Form.Control
-            as='select'
-            name='month'
+            as="select"
+            name="month"
             custom
             {...register('month', {
               pattern: monthRule,
@@ -151,7 +151,7 @@ function BirthDateFormComponent({
             isInvalid={!!errors.month && getValues('month')}
             disabled={disabled}
           >
-            <option value=''>{t('User:month')}</option>
+            <option value="">{t('User:month')}</option>
             {Object.keys(MONTHS).map((key) => (
               <option key={key} value={key}>
                 {t(`Design:${MONTHS[key]}`)}
@@ -159,7 +159,7 @@ function BirthDateFormComponent({
             ))}
           </Form.Control>
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.month, 'pattern') &&
               t('Validation:fieldValidMonth', {
                 attribute: t('User:month'),
@@ -168,11 +168,11 @@ function BirthDateFormComponent({
         </Form.Group>
       </Col>
 
-      <Col xs={12} sm={5} className='pl-sm-1'>
-        <Form.Group controlId='formGroupYear'>
+      <Col xs={12} sm={5} className="pl-sm-1">
+        <Form.Group controlId="formGroupYear">
           <Form.Control
-            type='number'
-            name='year'
+            type="number"
+            name="year"
             placeholder={t('User:year')}
             {...register('year')}
             isValid={isValidYear && getValues('year')}
@@ -180,14 +180,14 @@ function BirthDateFormComponent({
             disabled={disabled}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {!isAdult && t('Validation:fieldValidYear')}
           </Form.Control.Feedback>
         </Form.Group>
 
         <Form.Control
-          type='hidden'
-          name='birthday'
+          type="hidden"
+          name="birthday"
           {...register('birthday', {
             validate: () => isAdult && isValidDate,
           })}

package/src/auth/Register/RegisterComponent.tsx

@@ -97,15 +97,15 @@ function RegisterComponent({
 
   return (
     <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+      <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'>
+            <h6 className="text-center">
+              <Trans t={t} i18nKey="registerPromo">
                 Fill out the form below to sign up for {{ name: t('bookedit') }}
-                . Already signed up? Then just <Link to='/login'>Log in</Link>.
+                . Already signed up? Then just <Link to="/login">Log in</Link>.
               </Trans>
             </h6>
 
@@ -117,7 +117,7 @@ function RegisterComponent({
                     setIsLoading={setIsLoading}
                   />
 
-                  <hr className='mb-2' />
+                  <hr className="mb-2" />
                 </>
               )}
 

package/src/auth/Register/RegisterFormComponent.tsx

@@ -118,11 +118,11 @@ function RegisterFormComponent({
     <>
       <Form onSubmit={handleSubmit(onFormSubmit)} noValidate>
         <Row>
-          <Col xs={12} sm={6} className='pr-sm-1'>
-            <Form.Group controlId='formGroupFirstName'>
+          <Col xs={12} sm={6} className="pr-sm-1">
+            <Form.Group controlId="formGroupFirstName">
               <Form.Control
-                type='input'
-                name='first_name'
+                type="input"
+                name="first_name"
                 placeholder={t('User:firstName')}
                 isValid={isFieldValid('first_name')}
                 isInvalid={!!errors.first_name}
@@ -133,7 +133,7 @@ function RegisterFormComponent({
                 disabled={isLoading}
               />
 
-              <Form.Control.Feedback type='invalid'>
+              <Form.Control.Feedback type="invalid">
                 {HookFormService.hasError(errors.first_name, 'required') &&
                   t('Validation:fieldRequired', {
                     attribute: t('User:firstName'),
@@ -146,11 +146,11 @@ function RegisterFormComponent({
               </Form.Control.Feedback>
             </Form.Group>
           </Col>
-          <Col xs={12} sm={6} className='pl-sm-1'>
-            <Form.Group controlId='formGroupLastName'>
+          <Col xs={12} sm={6} className="pl-sm-1">
+            <Form.Group controlId="formGroupLastName">
               <Form.Control
-                type='input'
-                name='last_name'
+                type="input"
+                name="last_name"
                 placeholder={t('User:lastName')}
                 isValid={isFieldValid('last_name')}
                 isInvalid={!!errors.last_name}
@@ -161,7 +161,7 @@ function RegisterFormComponent({
                 disabled={isLoading}
               />
 
-              <Form.Control.Feedback type='invalid'>
+              <Form.Control.Feedback type="invalid">
                 {HookFormService.hasError(errors.last_name, 'required') &&
                   t('Validation:fieldRequired', {
                     attribute: t('User:lastName'),
@@ -176,10 +176,10 @@ function RegisterFormComponent({
           </Col>
         </Row>
 
-        <Form.Group controlId='formGroupEmail'>
+        <Form.Group controlId="formGroupEmail">
           <Form.Control
-            type='email'
-            name='email'
+            type="email"
+            name="email"
             placeholder={t('User:email')}
             isValid={isFieldValid('email')}
             isInvalid={Boolean(errors.email)}
@@ -191,7 +191,7 @@ function RegisterFormComponent({
             disabled={isLoading || Boolean(defaultValues().email)}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.email, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:email'),
@@ -209,10 +209,10 @@ function RegisterFormComponent({
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group controlId='formGroupPassword'>
+        <Form.Group controlId="formGroupPassword">
           <Form.Control
-            type='password'
-            name='password'
+            type="password"
+            name="password"
             placeholder={t('User:password')}
             isValid={isFieldValid('password')}
             isInvalid={!!errors.password}
@@ -224,7 +224,7 @@ function RegisterFormComponent({
             disabled={isLoading}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.password, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:password'),
@@ -242,13 +242,13 @@ function RegisterFormComponent({
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group controlId='formGroupPhone'>
-          <InputGroup className='mb-3'>
+        <Form.Group controlId="formGroupPhone">
+          <InputGroup className="mb-3">
             <InputGroup.Prepend>
               <InputGroup.Text>
                 <CountrySelect
                   defaultCountry={Config.Country.GB}
-                  className='w-25'
+                  className="w-25"
                   onChange={handlePhoneCountry}
                 />
               </InputGroup.Text>
@@ -271,11 +271,11 @@ function RegisterFormComponent({
                 />
               )}
               control={control}
-              name='phone'
-              defaultValue=''
+              name="phone"
+              defaultValue=""
             />
 
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {!isPhoneValid &&
                 t('Validation:fieldValidPhone', {
                   attribute: t('User:phoneNumber'),
@@ -295,11 +295,11 @@ function RegisterFormComponent({
         />
 
         <Row>
-          <Col xs={12} sm={6} className='pr-sm-1'>
-            <Form.Group controlId='formGroupPostCode'>
+          <Col xs={12} sm={6} className="pr-sm-1">
+            <Form.Group controlId="formGroupPostCode">
               <Form.Control
-                type='input'
-                name='post_code'
+                type="input"
+                name="post_code"
                 placeholder={t('User:postCode')}
                 onChange={handleChange}
                 isValid={isFieldValid('post_code') && !!getValues('post_code')}
@@ -310,7 +310,7 @@ function RegisterFormComponent({
                 disabled={isLoading}
               />
 
-              <Form.Control.Feedback type='invalid'>
+              <Form.Control.Feedback type="invalid">
                 {HookFormService.hasError(errors.post_code, 'pattern') &&
                   t('Validation:fieldValidPostCode', {
                     attribute: t('User:postCode'),
@@ -319,15 +319,15 @@ function RegisterFormComponent({
             </Form.Group>
           </Col>
 
-          <Col xs={12} sm={6} className='pr-sm-2'>
+          <Col xs={12} sm={6} className="pr-sm-2">
             <strong>Gender</strong>
 
             <div>
               <Form.Check
-                type='radio'
-                name='gender'
-                value='male'
-                id='genderMale'
+                type="radio"
+                name="gender"
+                value="male"
+                id="genderMale"
                 label={t('User:male')}
                 {...register('gender')}
                 disabled={isLoading}
@@ -335,10 +335,10 @@ function RegisterFormComponent({
               />
 
               <Form.Check
-                type='radio'
-                name='gender'
-                value='female'
-                id='genderFemale'
+                type="radio"
+                name="gender"
+                value="female"
+                id="genderFemale"
                 label={t('User:female')}
                 {...register('gender')}
                 disabled={isLoading}
@@ -348,15 +348,15 @@ function RegisterFormComponent({
           </Col>
         </Row>
 
-        <div className='text-left mb-4 mt-1'>
+        <div className="text-left mb-4 mt-1">
           <Form.Check
-            type='checkbox'
-            name='receive_promo'
-            className='mb-1'
-            id='noPromoFromUs'
+            type="checkbox"
+            name="receive_promo"
+            className="mb-1"
+            id="noPromoFromUs"
             {...register('receive_promo')}
             label={
-              <Trans t={t} i18nKey='User:noPromoFromUs'>
+              <Trans t={t} i18nKey="User:noPromoFromUs">
                 I&apos;d prefer to receive promotions and exclusive information
                 from {{ name: t('User:bookedit') }}
               </Trans>
@@ -365,12 +365,12 @@ function RegisterFormComponent({
           />
 
           <Form.Check
-            type='checkbox'
-            id='noPromoFromPartners'
+            type="checkbox"
+            id="noPromoFromPartners"
             {...register('receive_partner_promo')}
-            name='receive_partner_promo'
+            name="receive_partner_promo"
             label={
-              <Trans t={t} i18nKey='User:noPromoFromPartners'>
+              <Trans t={t} i18nKey="User:noPromoFromPartners">
                 I&apos;d prefer to receive promotions and exclusive information
                 from {{ name: t('User:bookedit') }} Partners
               </Trans>
@@ -381,30 +381,30 @@ function RegisterFormComponent({
 
         <Form.Control
           hidden
-          name='invitation_hash'
+          name="invitation_hash"
           {...register('invitation_hash')}
           disabled
         />
 
         <Button
-          variant='primary'
-          type='submit'
-          className='rounded-pill text-uppercase'
+          variant="primary"
+          type="submit"
+          className="rounded-pill text-uppercase"
           block
           disabled={isLoading}
         >
           {t('register')}
         </Button>
 
-        <p className='text-center mb-0 mt-3'>
-          <Trans t={t} i18nKey='User:agreementsPromo'>
+        <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(' ')}>
+            <Link to="/terms" className={[isLoading && 'disabled'].join(' ')}>
               terms of service
             </Link>{' '}
             and{' '}
-            <Link to='/privacy' className={[isLoading && 'disabled'].join(' ')}>
+            <Link to="/privacy" className={[isLoading && 'disabled'].join(' ')}>
               privacy policy
             </Link>
             .

package/src/auth/ResetPassword/ResetPasswordComponent.tsx

@@ -50,10 +50,10 @@ function ResetPasswordComponent() {
 
   return (
     <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+      <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>
+            <h1 className="text-center">{t('User:resetPasswordTitle')}</h1>
 
             <FormCard>
               <ResetPasswordFormComponent

package/src/auth/ResetPassword/ResetPasswordFormComponent.tsx

@@ -57,10 +57,10 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
   return (
     <>
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
-        <Form.Group controlId='formGroupEmail'>
+        <Form.Group controlId="formGroupEmail">
           <Form.Control
-            type='email'
-            name='email'
+            type="email"
+            name="email"
             placeholder={t('User:email')}
             onChange={handleChange}
             isValid={isFieldValid('email')}
@@ -72,7 +72,7 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
             disabled={isLoading}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.email, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:email'),
@@ -85,29 +85,29 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         </Form.Group>
 
         <Button
-          variant='primary'
-          type='submit'
-          className='rounded-pill text-uppercase'
+          variant="primary"
+          type="submit"
+          className="rounded-pill text-uppercase"
           block
           disabled={isLoading}
         >
           {t('User:submit')}
         </Button>
 
-        <p className='text-center mb-0 mt-3'>
-          <Trans t={t} i18nKey='User:signinPromo'>
+        <p className="text-center mb-0 mt-3">
+          <Trans t={t} i18nKey="User:signinPromo">
             Already a user?{' '}
-            <Link to='/login' className={[isLoading && 'disabled'].join(' ')}>
+            <Link to="/login" className={[isLoading && 'disabled'].join(' ')}>
               Sign in
             </Link>
             !
           </Trans>
         </p>
-        <p className='text-center mb-0 mt-3'>
-          <Trans t={t} i18nKey='User:loginPromo'>
+        <p className="text-center mb-0 mt-3">
+          <Trans t={t} i18nKey="User:loginPromo">
             Don&apos;t have an account?{' '}
             <Link
-              to='/register'
+              to="/register"
               className={[isLoading && 'disabled'].join(' ')}
             >
               Sign up

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -115,10 +115,10 @@ function SocialCallbackComponent() {
 
   return (
     <>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={5} xl={4} className='align-self-center'>
+      <Row className="justify-content-center">
+        <Col xs sm={12} md={7} lg={5} xl={4} className="align-self-center">
           <>
-            <FormCard className='p-5'>
+            <FormCard className="p-5">
               <LoaderIndicator isLoaded={false} />
             </FormCard>
           </>

package/src/auth/Social/SocialFormComponent.tsx

@@ -70,10 +70,10 @@ function SocialFormComponent(props: SocialFormComponentProps) {
       <LoaderIndicator isLoaded={!isLoading} />
 
       <Row>
-        <Col xs={6} className='pr-1'>
+        <Col xs={6} className="pr-1">
           <SocialButton
             className={['btn-social-lg', 'pl-5', 'pr-1'].join(' ')}
-            type='facebook'
+            type="facebook"
             onClick={handleFacebookClick}
             disabled={isLoading}
           >
@@ -81,10 +81,10 @@ function SocialFormComponent(props: SocialFormComponentProps) {
           </SocialButton>
         </Col>
 
-        <Col xs={6} className='pl-1'>
+        <Col xs={6} className="pl-1">
           <SocialButton
             className={['btn-social-lg', 'pl-5', 'pr-1'].join(' ')}
-            type='twitter'
+            type="twitter"
             onClick={handleTwitterClick}
             disabled={isLoading}
           >

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -60,7 +60,7 @@ export const AvailabilityIndicator = ({
 }
 
 const Indicator = ({ Icon, label }: Config) => (
-  <div className='availability-indicator'>
+  <div className="availability-indicator">
     <Icon />
     <div>{label}</div>
   </div>

package/src/calendar/Calendar.tsx

@@ -29,8 +29,8 @@ export type CalendarProps = {
 export const Calendar = (props: CalendarProps) => {
   const { initialDate = defaultStartDay, isLoading } = props
   return (
-    <div className='calendar-wrapper'>
-      <div className='calendar'>
+    <div className="calendar-wrapper">
+      <div className="calendar">
         <CalendarButtons initialDate={initialDate} {...props} />
 
         {isLoading ? <LoaderIndicator /> : <CalendarDates {...props} />}

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { range } from 'lodash'
-import { DateTime } from 'luxon'
+import { ReactComponent as SelectArrow } from '../../../assets/iframe/selectArrow.svg'
 import { CalendarSelect } from '../CalendarSelect'
 import { CalendarProps } from '../../Calendar'
 
@@ -26,21 +26,15 @@ export const CalendarButtons = ({
 }: CalendarButtonsProps) => {
   const { t } = useTranslation('Design')
 
-  const onSelectMonth = useCallback(
-    (value: string) => {
-      const selectedMonth = Number(value)
-      const nextDateTime = currentDate.set({ month: selectedMonth })
-
-      if (nextDateTime <= initialDate) {
-        setCurrentDate(initialDate)
-        return
-      }
+  const onSelectNextMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-      setCurrentDate(nextDateTime)
-    },
+  const onSelectPreviousMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setCurrentDate, currentDate],
-  )
+  }, [])
 
   const yearOptions = useMemo(
     () =>
@@ -51,16 +45,10 @@ export const CalendarButtons = ({
     [initialDate],
   )
 
-  const monthOptions = useMemo(() => {
-    const initialMonth =
-      currentDate.year > initialDate.year ? 1 : initialDate.month
-    return range(initialMonth, 13).map((monthNumber) => ({
-      label: DateTime.fromObject({ month: monthNumber }).toLocaleString({
-        month: 'long',
-      }),
-      value: monthNumber,
-    }))
-  }, [initialDate, currentDate])
+  const canMoveBack = useMemo(
+    () => currentDate > initialDate,
+    [currentDate, initialDate],
+  )
 
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value)
@@ -100,19 +88,19 @@ export const CalendarButtons = ({
 
   return (
     <div>
-      <div className='calendar-top-buttons'>
+      <div className="calendar-top-buttons">
         <Button
-          variant='outline-secondary'
-          className='mr-4'
-          size='sm'
+          variant="outline-secondary"
+          className="mr-4"
+          size="sm"
           onClick={onTodayClick}
           disabled={isLoading}
         >
           {t('today')}
         </Button>
         <Button
-          variant='outline-secondary'
-          size='sm'
+          variant="outline-secondary"
+          size="sm"
           onClick={onTomorrowClick}
           disabled={isLoading}
         >
@@ -120,19 +108,30 @@ export const CalendarButtons = ({
         </Button>
       </div>
       <hr />
-      <div className='calendar-buttons'>
-        <div className='buttons-wrapper'>
-          <CalendarSelect
-            options={monthOptions}
-            onChange={onSelectMonth}
-            value={currentDate.month}
-          />
+      <div className="calendar-buttons">
+        <div className="buttons-wrapper">
+          <Button
+            className="calendar-button left-button"
+            onClick={onSelectPreviousMonth}
+            disabled={!canMoveBack}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
+          <div className="month-title">{currentDate.toFormat('MMMM')}</div>
+          <Button
+            className="calendar-button"
+            onClick={onSelectNextMonth}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
         </div>
         <CalendarSelect
           options={yearOptions}
           onChange={onSelectYear}
           value={currentDate.year}
-          className='ml-4'
+          className="ml-4"
         />
       </div>
     </div>

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -38,9 +38,9 @@ export const CalendarDates = ({
   }, [calendarDates])
 
   return (
-    <div className='calendar-dates-wrapper'>
+    <div className="calendar-dates-wrapper">
       <CalendarWeekdays />
-      <div className='calendar-dates'>
+      <div className="calendar-dates">
         {fillCalendarDates.map((date: DateTime | null) => {
           if (date === null) return <div />