@licklist/design 0.69.1 → 0.69.3-dev.0

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}

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

@@ -17,7 +17,6 @@ import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorServ
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import { scrollToError } from '@licklist/plugins/dist/utils/ScrollUtils'
 import { getFirstErrorKey } from '@licklist/plugins/dist/utils/FormValues'
-
 import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
 import { CategoryGroup } from '../../../../types/categories'
 import { SaleDeadline } from '../SaleDeadline/SaleDeadline'
@@ -31,7 +30,6 @@ import { FileUpload } from '../../../../file-upload'
 import { IntervalInput, IntervalInputValues } from '../../IntervalInput'
 import { SelectEventProductSet } from '../SelectEventProductSet'
 import { Dialog, useDialogContext } from '../../../../modals/dialog'
-
 import { ProductSetFormValues } from '../../../../product-set/form/ProductSetForm'
 import { isUrlValid } from '../../utils/isUrlValid'
 
@@ -65,6 +63,7 @@ export interface EditEventFormProps extends HasPermissionProp {
   setEditProductSetId: (value: string) => void
   isExternalPaymentLinkEnabled?: boolean
   timeZone: string
+  eventProductSet?: ProductSet
 }
 
 const eventImageTypes = {
@@ -85,6 +84,7 @@ export const EditEventForm = ({
   setEditProductSetId,
   isExternalPaymentLinkEnabled,
   timeZone,
+  eventProductSet,
 }: EditEventFormProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
 
@@ -186,16 +186,16 @@ export const EditEventForm = ({
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
-      <h5 className="edit-event-modal-title highlited-primary-title">
+      <h5 className='edit-event-modal-title highlited-primary-title'>
         {title}
       </h5>
       <FormProvider {...form}>
         <Modal.Body
-          as="form"
+          as='form'
           noValidate
           onSubmit={handleSubmit(onSaveEvent, onErrorSubmit)}
         >
-          <Form.Group controlId="name">
+          <Form.Group controlId='name'>
             <Form.Label>{t('nameOfEvent')}</Form.Label>
             <Form.Control
               {...register('name', {
@@ -210,12 +210,12 @@ export const EditEventForm = ({
                   }),
                 },
               })}
-              name="name"
+              name='name'
               required
               isInvalid={Boolean(errors.name)}
               disabled={disabled}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.name?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -262,7 +262,7 @@ export const EditEventForm = ({
                   disabled={disabled}
                 />
               )}
-              name="description"
+              name='description'
             />
           </Form.Group>
           {/* key is used as a hack to make sure rrule is rendered correctly */}
@@ -277,7 +277,7 @@ export const EditEventForm = ({
             <Form.Group>
               <Accordion>
                 <CollapsibleInputGroup
-                  eventKey="categories"
+                  eventKey='categories'
                   label={t('categories')}
                   description={
                     <CategoriesInputDescription categories={categories} />
@@ -303,7 +303,7 @@ export const EditEventForm = ({
                   disabled={disabled}
                 />
               )}
-              name="termsAndConditions"
+              name='termsAndConditions'
             />
           </Form.Group>
 
@@ -319,25 +319,25 @@ export const EditEventForm = ({
                     return validateURL(url, t('Design:externalPaymentLink'))
                   },
                 })}
-                name="externalPaymentLink"
-                type="url"
-                inputMode="url"
+                name='externalPaymentLink'
+                type='url'
+                inputMode='url'
                 disabled={disabled}
                 isInvalid={Boolean(errors.externalPaymentLink)}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.externalPaymentLink?.message}
               </Form.Control.Feedback>
             </Form.Group>
           )}
 
-          <Form.Group controlId={visibilityId} className="mt-5">
+          <Form.Group controlId={visibilityId} className='mt-5'>
             <Form.Label>
               {t('public')} / {t('private')}
             </Form.Label>
             <Controller
               control={control}
-              name="visible"
+              name='visible'
               rules={{
                 validate: (value) => {
                   if (typeof value !== 'boolean') {
@@ -355,20 +355,20 @@ export const EditEventForm = ({
                 return (
                   <>
                     <Form.Control
-                      as="select"
+                      as='select'
                       onChange={({ target: { value } }) => {
                         field.onChange(!value ? value : value === 'true')
                       }}
                       isInvalid={invalid}
-                      defaultValue=""
+                      defaultValue=''
                       value={fieldValue}
                       disabled={disabled}
                     >
-                      <option value="">{t('Design:pleaseChooseOne')}</option>
-                      <option value="false">{t('Design:private')}</option>
-                      <option value="true">{t('Design:public')}</option>
+                      <option value=''>{t('Design:pleaseChooseOne')}</option>
+                      <option value='false'>{t('Design:private')}</option>
+                      <option value='true'>{t('Design:public')}</option>
                     </Form.Control>
-                    <Form.Control.Feedback type="invalid">
+                    <Form.Control.Feedback type='invalid'>
                       {error?.message}
                     </Form.Control.Feedback>
                   </>
@@ -387,12 +387,12 @@ export const EditEventForm = ({
                   validate: (url) =>
                     validateURL(url, t('Design:integrationUrl')),
                 })}
-                name="integrationUrl"
+                name='integrationUrl'
                 isInvalid={Boolean(errors.integrationUrl)}
                 placeholder={t('Design:integrationUrl')}
                 disabled={disabled}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors.integrationUrl?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -405,6 +405,7 @@ export const EditEventForm = ({
             setShowEditProductSet={setShowEditProductSet}
             showEditProductSet={showEditProductSet}
             timeZone={timeZone}
+            eventProductSet={eventProductSet}
           />
 
           {hasPermission && !showEditProductSet && (
@@ -415,8 +416,8 @@ export const EditEventForm = ({
                 isImagesLoading ||
                 isCoverImagesLoading
               }
-              className="save-event"
-              type="submit"
+              className='save-event'
+              type='submit'
             >
               {formState.isSubmitting
                 ? `${t('saveAndAdd')}...`

package/src/events/edit-event-modal/component/ProductSetShortForm/ProductSetShortForm.tsx

@@ -37,7 +37,7 @@ export const ProductSetShortForm = ({
   const nameId = useId()
 
   return (
-    <Col md={12} sm={12} className="p-0 mt-5">
+    <Col md={12} sm={12} className='p-0 mt-5'>
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(onSubmit)}>
           <Form.Group controlId={nameId}>
@@ -49,7 +49,7 @@ export const ProductSetShortForm = ({
               placeholder={t('Design:placeholderProductSetName')}
               isInvalid={!!errors.name}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.hasError(errors.name, 'required') &&
                 t('Validation:fieldRequired', {
                   attribute: t('Design:name'),
@@ -61,7 +61,7 @@ export const ProductSetShortForm = ({
           {/* <DateAndRecurrenceInput /> */}
 
           {hasPermission && (
-            <Button disabled={formState.isSubmitting} type="submit">
+            <Button disabled={formState.isSubmitting} type='submit'>
               {formState.isSubmitting ? `${t('save')}...` : t('save')}
             </Button>
           )}

package/src/events/edit-event-modal/component/SaleDeadline/SaleDeadline.tsx

@@ -42,14 +42,14 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
   }, [saleDeadline])
 
   return (
-    <Form.Group className="sales-deadline">
+    <Form.Group className='sales-deadline'>
       <Form.Label>{t('Design:salesDeadline')}</Form.Label>
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {errors.saleDeadline?.message}
       </Form.Control.Feedback>
       <Controller
         control={control}
-        name="saleDeadline"
+        name='saleDeadline'
         render={({
           field: { value, onChange },
           fieldState: { invalid, error },
@@ -111,9 +111,9 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
 
           return (
             <>
-              <Form.Group className="d-flex flex-column flex-grow-1 align-items-start">
+              <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
                 <Switch
-                  name="sale-deadline"
+                  name='sale-deadline'
                   options={SALE_DEADLINES_EVENT_START_TYPES.map(({ type }) => ({
                     id: type,
                     value: t(`Design:${type}`),
@@ -123,8 +123,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                   disabled={disabled}
                 />
               </Form.Group>
-              <div className="d-flex">
-                <Form.Group className="d-flex flex-column col-4 pl-0">
+              <div className='d-flex'>
+                <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleDays')}</Form.Label>
                   <NumberInput
                     value={days}
@@ -135,7 +135,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                     disabled={disabled}
                   />
                 </Form.Group>
-                <Form.Group className="d-flex flex-column col-4 pl-0">
+                <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleHours')}</Form.Label>
                   <NumberInput
                     value={hours}
@@ -147,7 +147,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                     disabled={disabled}
                   />
                 </Form.Group>
-                <Form.Group className="d-flex flex-column col-4 pl-0">
+                <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleMinutes')}</Form.Label>
                   <NumberInput
                     value={minutes}
@@ -161,8 +161,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                 </Form.Group>
               </div>
               {invalid && (
-                <div className="d-flex w-100">
-                  <span className="invalid-feedback-message">
+                <div className='d-flex w-100'>
+                  <span className='invalid-feedback-message'>
                     {error?.message}
                   </span>
                 </div>