@licklist/design 0.68.7-dev.1 → 0.69.0

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 />
 

package/src/calendar/components/CalendarSelect/CalendarSelect.tsx

@@ -35,9 +35,9 @@ export const CalendarSelect = ({
       id={PAGE_CALENDAR_SELECT_WRAPPER}
     >
       <Form.Control
-        as='select'
+        as="select"
         onChange={onValueChange}
-        className='calendar-select'
+        className="calendar-select"
         value={value}
         ref={selectRef}
       >

package/src/calendar/components/CalendarWeekdays/CalendarWeekdays.tsx

@@ -14,9 +14,9 @@ export const CalendarWeekdays = () => {
   const { t } = useTranslation('Design')
 
   return (
-    <div className='calendar-weekdays'>
+    <div className="calendar-weekdays">
       {WEEKDAYS.map(({ key }) => (
-        <div key={key} className='calendar-weekday'>
+        <div key={key} className="calendar-weekday">
           {t(key)}
         </div>
       ))}

package/src/collapsible-input-group/CollapsibleInputGroup.tsx

@@ -31,16 +31,16 @@ export function CollapsibleInputGroup({
   const isInvalid = Boolean(error)
 
   return (
-    <Card className='rounded-0'>
+    <Card className="rounded-0">
       <Accordion.Toggle
         as={Card.Header}
         eventKey={eventKey}
         alwaysopen={alwaysOpen}
-        role='button'
+        role="button"
         className={clsx('accordion-form-control', isInvalid && 'is-invalid')}
       >
-        <div className='accordion-form-control-header'>
-          <h5 className='mb-0 pl-3'>{label}</h5>
+        <div className="accordion-form-control-header">
+          <h5 className="mb-0 pl-3">{label}</h5>
           {currentEventKey === eventKey ? (
             <FaChevronUp size={20} />
           ) : (
@@ -48,10 +48,10 @@ export function CollapsibleInputGroup({
           )}
         </div>
         <Collapse in={currentEventKey !== eventKey}>
-          <div className='pl-3'>{description}</div>
+          <div className="pl-3">{description}</div>
         </Collapse>
         {isInvalid && (
-          <Form.Control.Feedback type='invalid' className='pl-3'>
+          <Form.Control.Feedback type="invalid" className="pl-3">
             {error}
           </Form.Control.Feedback>
         )}

package/src/custom-fields/CustomFields.stories.tsx

@@ -194,5 +194,5 @@ WithDefault.args = {
 }
 
 export function Item() {
-  return <FieldItem icon='font' label='Text' onClick={() => null} />
+  return <FieldItem icon="font" label="Text" onClick={() => null} />
 }

package/src/custom-fields/field/FieldItem.tsx

@@ -11,7 +11,7 @@ interface FieldItemProps {
 
 export function FieldItem({ label, icon, onClick }: FieldItemProps) {
   return (
-    <div className='custom-field-item' onClick={onClick}>
+    <div className="custom-field-item" onClick={onClick}>
       {icon}
       <h6>{label}</h6>
     </div>

package/src/custom-fields/field/SelectFieldModal.tsx

@@ -18,14 +18,14 @@ export function SelectFieldModal({
 
   return (
     <Modal
-      size='lg'
+      size="lg"
       centered
       show={isVisible}
       onHide={onHide}
-      className='p-3 border-0'
+      className="p-3 border-0"
     >
-      <h5 className='mt-5 p-2 ml-3'>Select Field</h5>
-      <div className='d-flex flex-row flex-wrap p-3 my-3'>
+      <h5 className="mt-5 p-2 ml-3">Select Field</h5>
+      <div className="d-flex flex-row flex-wrap p-3 my-3">
         {allFieldTypes.map((fieldKey) => {
           const { label, icon } = FIELD_TYPES[fieldKey]
           const id = uniqueId(fieldKey)

package/src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx

@@ -152,11 +152,11 @@ export const CustomFieldSet = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onSubmit)}>
-        <Form.Control type='hidden' {...register('id')} />
+        <Form.Control type="hidden" {...register('id')} />
         <Form.Group>
           <Form.Label>{t('fieldSetName')}</Form.Label>
           <Form.Control
-            type='fieldSetName'
+            type="fieldSetName"
             placeholder={t('fieldSetName')}
             isInvalid={!!errors.name}
             {...register('name', {
@@ -178,7 +178,7 @@ export const CustomFieldSet = ({
             })}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(errors.name, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('fieldSetName'),
@@ -223,18 +223,18 @@ export const CustomFieldSet = ({
               title={t('addField')}
               onClick={() => setVisibleModal(true)}
             />
-            <div className='manual-form-error'>
+            <div className="manual-form-error">
               {errors[CUSTOM_FIELDS] && errors[CUSTOM_FIELDS].message}
             </div>
-            <div className='d-flex justify-content-between'>
+            <div className="d-flex justify-content-between">
               <Button
-                variant='primary'
+                variant="primary"
                 disabled={Object.keys(errors).length > 0}
-                type='submit'
+                type="submit"
               >
                 {t('save')}
               </Button>
-              <Button variant='danger' onClick={removeFieldSet}>
+              <Button variant="danger" onClick={removeFieldSet}>
                 {t('delete')}
               </Button>
             </div>

package/src/custom-fields/forms/DropdownForm.tsx

@@ -67,7 +67,7 @@ export function DropdownForm<T>({
   return (
     <>
       <Form.Control
-        type='hidden'
+        type="hidden"
         defaultValue={id}
         {...register(`${fieldSetId}.${fieldIndex}.id` as Path<T>)}
       />
@@ -75,7 +75,7 @@ export function DropdownForm<T>({
       <Form.Group>
         <Form.Label>{t('Design:fieldName')}</Form.Label>
         <Form.Control
-          type='text'
+          type="text"
           defaultValue={name}
           placeholder={t('Design:fieldName')}
           isInvalid={errors?.[fieldSetId]?.[fieldIndex]?.name}
@@ -98,7 +98,7 @@ export function DropdownForm<T>({
             },
           })}
         />
-        <Form.Control.Feedback type='invalid'>
+        <Form.Control.Feedback type="invalid">
           {HookFormService.hasError(
             errors?.[fieldSetId]?.[fieldIndex]?.name,
             'required',
@@ -110,8 +110,8 @@ export function DropdownForm<T>({
       </Form.Group>
       <Form.Group>
         <Form.Check
-          type='checkbox'
-          label='Required'
+          type="checkbox"
+          label="Required"
           defaultChecked={isRequired}
           {...register(`${fieldSetId}.${fieldIndex}.isRequired` as Path<T>)}
         />
@@ -122,12 +122,12 @@ export function DropdownForm<T>({
         />
       </Form.Group>
       <FormLabel>{t('Design:dropdownOptions')}</FormLabel>
-      <div className='w-100'>
+      <div className="w-100">
         {fields?.map((field: FieldValues, i) => (
-          <div key={field.id} className='dropdown-option'>
-            <Form.Group className='input'>
+          <div key={field.id} className="dropdown-option">
+            <Form.Group className="input">
               <Form.Control
-                type='text'
+                type="text"
                 placeholder={t('Design:title')}
                 isInvalid={optionErrors?.[i]?.title}
                 {...register(
@@ -158,7 +158,7 @@ export function DropdownForm<T>({
                   )
                 }}
               />
-              <Form.Control.Feedback type='invalid'>
+              <Form.Control.Feedback type="invalid">
                 {HookFormService.hasError(
                   errors?.[fieldSetId]?.[fieldIndex]?.options?.[i]?.title,
                   'validate',
@@ -170,8 +170,8 @@ export function DropdownForm<T>({
             </Form.Group>
             <Form.Group>
               <button
-                type='button'
-                className='btn'
+                type="button"
+                className="btn"
                 onClick={() => {
                   remove(i)
                   trigger()
@@ -183,8 +183,8 @@ export function DropdownForm<T>({
           </div>
         ))}
         <Button
-          className='rounded-circle mb-5 d-flex'
-          size='sm'
+          className="rounded-circle mb-5 d-flex"
+          size="sm"
           onClick={() => {
             append({ title: '', value: '' } as FieldArray<FieldValues, Path<T>>)
 
@@ -194,11 +194,11 @@ export function DropdownForm<T>({
           <FaPlus size={18} />
         </Button>
       </div>
-      <div className='manual-form-error'>
+      <div className="manual-form-error">
         {optionErrors && optionErrors.message}
       </div>
       {hasPermission && (
-        <Button variant='danger' onClick={onRemove}>
+        <Button variant="danger" onClick={onRemove}>
           {t('Design:delete')}
         </Button>
       )}

package/src/custom-fields/forms/TextInputForm.tsx

@@ -33,7 +33,7 @@ export function TextInputForm<T>({
   return (
     <>
       <Form.Control
-        type='hidden'
+        type="hidden"
         defaultValue={id}
         {...register(`${fieldSetId}.${fieldIndex}.id` as Path<T>)}
       />
@@ -41,7 +41,7 @@ export function TextInputForm<T>({
       <Form.Group>
         <Form.Label>{t('Design:fieldName')}</Form.Label>
         <Form.Control
-          type='text'
+          type="text"
           defaultValue={name}
           placeholder={t('Design:fieldName')}
           isInvalid={!!formState.errors?.[fieldSetId]?.[fieldIndex]?.name}
@@ -49,7 +49,7 @@ export function TextInputForm<T>({
             required: true,
           })}
         />
-        <Form.Control.Feedback type='invalid'>
+        <Form.Control.Feedback type="invalid">
           {HookFormService.hasError(
             formState.errors?.[fieldSetId]?.[fieldIndex]?.name,
             'required',
@@ -61,8 +61,8 @@ export function TextInputForm<T>({
       </Form.Group>
       <Form.Group>
         <Form.Check
-          type='checkbox'
-          label='Required'
+          type="checkbox"
+          label="Required"
           defaultChecked={isRequired}
           {...register(`${fieldSetId}.${fieldIndex}.isRequired` as Path<T>)}
         />
@@ -73,7 +73,7 @@ export function TextInputForm<T>({
         />
       </Form.Group>
       {hasPermission && (
-        <Button variant='danger' onClick={onRemove}>
+        <Button variant="danger" onClick={onRemove}>
           {t('Design:delete')}
         </Button>
       )}

package/src/customers/components/filter/CustomerFilter.tsx

@@ -23,8 +23,8 @@ export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
   const { t } = useTranslation(['Design'])
 
   return (
-    <div className='customers-filter d-flex'>
-      <div className='d-flex customers-filter-items'>
+    <div className="customers-filter d-flex">
+      <div className="d-flex customers-filter-items">
         {Object.keys(FILTER_FIELDS).map((filterKeyName) => {
           const label = t(FILTER_FIELDS[filterKeyName])
 
@@ -32,7 +32,7 @@ export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
             <TextField
               key={filterKeyName}
               className={clsx('mb-0', 'col-4', 'customer-filter')}
-              type='text'
+              type="text"
               label={label}
               value={values[filterKeyName]}
               onChange={(event) =>

package/src/date-time-button/DateContent.tsx

@@ -39,7 +39,7 @@ export const DateContent = ({
   const label = t(getDate(date))
 
   return (
-    <div className='weekday-info'>
+    <div className="weekday-info">
       <div>{label}</div>
       <div
         className={clsx(

package/src/date-time-button/DateTimeButton.tsx

@@ -46,7 +46,7 @@ export const DateTimeButton = ({
 
   return (
     <button
-      type='button'
+      type="button"
       onClick={() => onSelect(date)}
       disabled={isDisabled}
       className={clsx(
@@ -66,7 +66,7 @@ export const DateTimeButton = ({
         isSelected={isSelected}
         variant={variant}
       />
-      {price && !isDisabled && <div className='price'>{price}</div>}
+      {price && !isDisabled && <div className="price">{price}</div>}
       {showResources && resources && (
         <AvailabilityIndicator
           resources={resources}

package/src/error/ErrorFallback.tsx

@@ -4,7 +4,7 @@ function ErrorFallback() {
   const { t } = useTranslation('Design')
 
   return (
-    <div role='alert' className='error-fallback'>
+    <div role="alert" className="error-fallback">
       <div>
         <h1>{t('somethingWrong')}</h1>
         <p>{t('somethingWrongMessage')}</p>

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -90,22 +90,22 @@ export function IntervalInput({
   }
 
   const onChangeRecurrent = (checked: boolean) => {
-    setRecurrent(checked)
+    setRecurrent(checked);
     if (!checked) {
-      setValue('rrule', null)
+      setValue("rrule", null);
     }
-  }
+  };
 
   return (
     <>
-      <Form.Row className='interval-container'>
-        <Form.Group as={Col} controlId='start'>
+      <Form.Row className="interval-container">
+        <Form.Group as={Col} controlId="start">
           <Form.Label>{t('start')}</Form.Label>
           <Form.Control
-            type='datetime-local'
+            type="datetime-local"
             {...register('start', validationOptions.start)}
             value={start}
-            name='start'
+            name="start"
             required
             isInvalid={Boolean(errors.start)}
             onChange={updateEndDate}
@@ -113,18 +113,18 @@ export function IntervalInput({
             ref={startDateInput}
             disabled={disabled}
           />
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {errors.start?.message}
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group as={Col} controlId='end'>
+        <Form.Group as={Col} controlId="end">
           <Form.Label>{t('end')}</Form.Label>
           <Form.Control
-            type='datetime-local'
+            type="datetime-local"
             {...register('end', validationOptions.end)}
             value={end}
-            name='end'
+            name="end"
             onChange={({ target: { value: nextEndtDate } }) =>
               onChangeEndDate(nextEndtDate)
             }
@@ -136,7 +136,7 @@ export function IntervalInput({
             disabled={disabled}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {errors.end?.message}
           </Form.Control.Feedback>
           <Form.Text muted>
@@ -147,11 +147,11 @@ export function IntervalInput({
       {start && (
         <Form.Group controlId={recurrentId}>
           <Form.Check
-            label='Recurrent'
+            label="Recurrent"
             custom
             checked={recurrent}
             onChange={({ target: { checked } }) => {
-              onChangeRecurrent(checked)
+              onChangeRecurrent(checked);
             }}
             disabled={disabled || Boolean(editedProductSet)}
           />
@@ -169,7 +169,7 @@ export function IntervalInput({
         <Form.Group>
           <Controller
             control={control}
-            name='rrule'
+            name="rrule"
             render={({ field: { value, onChange } }) => (
               <RecurrenceInput
                 value={value}

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx

@@ -1066,12 +1066,12 @@ export const Default: Story<EditEventFormProps> = (args) => {
   const hasPermission = boolean('hasPermission', true)
   const [editProductSetId, setEditProductSetId] = useState<string>()
   return (
-    <div className='edit-event-dialog'>
+    <div className="edit-event-dialog">
       <EventEditProductSetContext.Provider value={contextValue}>
         <EditEventForm
           {...args}
           isExternalPaymentLinkEnabled
-          title='Create new event'
+          title="Create new event"
           categories={categories}
           setEditProductSetId={setEditProductSetId}
           editProductSetId={editProductSetId}