@licklist/design 0.68.5-dev.0 → 0.68.6-dev.0

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

@@ -98,14 +98,14 @@ export function IntervalInput({
 
   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,7 +147,7 @@ export function IntervalInput({
       {start && (
         <Form.Group controlId={recurrentId}>
           <Form.Check
-            label="Recurrent"
+            label='Recurrent'
             custom
             checked={recurrent}
             onChange={({ target: { checked } }) => {
@@ -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

@@ -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>
@@ -415,8 +415,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>

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

@@ -118,23 +118,23 @@ export const SelectEventProductSet = ({
 
   return (
     <>
-      <div className="d-flex mt-5 mb-5 align-items-end">
+      <div className='d-flex mt-5 mb-5 align-items-end'>
         <Form.Group
           controlId={productSetsId}
-          className="d-flex flex-column  w-100 choose-product-set-container "
+          className='d-flex flex-column  w-100 choose-product-set-container '
         >
           <Form.Label>{t('Design:selectProductSet')}</Form.Label>
 
           <Controller
             control={control}
-            name="productSetId"
+            name='productSetId'
             render={() => (
               <>
-                <div className="d-flex align-items-center flex-row w-100">
+                <div className='d-flex align-items-center flex-row w-100'>
                   <ConfirmModal>
                     {(confirm) => (
                       <Typeahead
-                        name="productSetId"
+                        name='productSetId'
                         value={selectedProductSetTypeheadValue}
                         containerStyles={{ width: '100%' }}
                         onChangeValue={(typeheadValue) => {
@@ -147,11 +147,11 @@ export const SelectEventProductSet = ({
                     )}
                   </ConfirmModal>
 
-                  <div className="buttons-container">
+                  <div className='buttons-container'>
                     {!showEditProductSet && !editedProductSet && (
                       <Button
-                        variant=""
-                        className="btn product-set-button mr-4"
+                        variant=''
+                        className='btn product-set-button mr-4'
                         onClick={handleCreateProductSet}
                       >
                         {t('addNewProductSet')}
@@ -159,8 +159,8 @@ export const SelectEventProductSet = ({
                     )}
                     {showOverrideProductSet && (
                       <Button
-                        variant=""
-                        className="btn product-set-button "
+                        variant=''
+                        className='btn product-set-button '
                         onClick={onEditProductSet}
                       >
                         {isOverrideProductSet
@@ -170,8 +170,8 @@ export const SelectEventProductSet = ({
                     )}
                     {showEditProductSet && (
                       <Button
-                        variant=""
-                        className="btn product-set-button"
+                        variant=''
+                        className='btn product-set-button'
                         onClick={revertEditProductSet}
                       >
                         {t('cancelAndRevert')}
@@ -179,8 +179,8 @@ export const SelectEventProductSet = ({
                     )}
                     {!showEditProductSet && editedProductSet && (
                       <Button
-                        variant=""
-                        className="btn product-set-button ml-4 text-danger"
+                        variant=''
+                        className='btn product-set-button ml-4 text-danger'
                         onClick={revertEditProductSet}
                       >
                         {t('undoChanges')}
@@ -189,7 +189,7 @@ export const SelectEventProductSet = ({
                   </div>
                 </div>
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors?.productSetId?.message}
                 </Form.Control.Feedback>
               </>

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -102,14 +102,14 @@ export const EditEventProductSet = ({
       providerHasMap={settings?.providerHasMap}
       venueMapSets={venueMapSets}
     >
-      <div className="edit-product-set-warning">
+      <div className='edit-product-set-warning'>
         {t('editProductSetWarning', {
           attribute: productSetData?.name,
         })}
       </div>
-      <div className="product-set-border" />
+      <div className='product-set-border' />
       <FormProvider {...form}>
-        <Form className="mt-6">
+        <Form className='mt-6'>
           <ProductSetControl
             smsTemplates={getFilteredTemplates(
               smsTemplates,
@@ -132,12 +132,12 @@ export const EditEventProductSet = ({
           />
           <Button
             disabled={isLoading}
-            className="save-event mt-4"
+            className='save-event mt-4'
             onClick={handleSubmit(onSubmit)}
           >
             {t('update')}
           </Button>
-          <div className="edit-product-set-warning mt-4">
+          <div className='edit-product-set-warning mt-4'>
             {t('recurrentOverridesWarining')}
           </div>
         </Form>