@licklist/design 0.68.7-dev.1 → 0.69.0

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import React, { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'
@@ -45,7 +45,7 @@ export const AdvancedOptions = <T extends FormValues>({
     <>
       <Form.Group
         controlId={isRequiredId}
-        className='advanced-switch-container'
+        className="advanced-switch-container"
       >
         <Form.Label>{t('isRequired')}</Form.Label>
 
@@ -65,7 +65,7 @@ export const AdvancedOptions = <T extends FormValues>({
 
       <Form.Group
         controlId={hasSpecialNotesId}
-        className='advanced-switch-container'
+        className="advanced-switch-container"
       >
         <Form.Label>{t('hasSpecialNotes')}</Form.Label>
 
@@ -94,23 +94,23 @@ export const AdvancedOptions = <T extends FormValues>({
       <Form.Group controlId={productGroupId}>
         <Form.Label>{t('productGroup')}</Form.Label>
         <Form.Control
-          as='select'
+          as="select"
           {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
             errors,
           )}
           disabled={isLoading || isOverrides}
-          defaultValue=''
+          defaultValue=""
         >
-          <option value=''>{t('Design:selectProductGroup')}</option>
+          <option value="">{t('Design:selectProductGroup')}</option>
           {productGroupList.map((productGroup) => (
             <option value={productGroup.id} key={productGroup.id}>
               {productGroup.value}
             </option>
           ))}
         </Form.Control>
-        <Form.Control.Feedback type='invalid'>
+        <Form.Control.Feedback type="invalid">
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
             errors,
@@ -118,7 +118,7 @@ export const AdvancedOptions = <T extends FormValues>({
         </Form.Control.Feedback>
       </Form.Group>
 
-      <Col lg={8} md={8} className='pl-0'>
+      <Col lg={8} md={8} className="pl-0">
         <Form.Group controlId={termsAndConditionsId}>
           <Form.Label>{t('productTermsConditions')}</Form.Label>
 
@@ -126,7 +126,7 @@ export const AdvancedOptions = <T extends FormValues>({
             render={({ field: { value, onChange, name, ref } }) => (
               <Form.Control
                 ref={ref}
-                as='textarea'
+                as="textarea"
                 rows={3}
                 value={value as string}
                 onChange={onChange}
@@ -142,7 +142,7 @@ export const AdvancedOptions = <T extends FormValues>({
             name={`${fieldNamePrefix}.termsAndConditions` as Path<T>}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.termsAndConditions` as Path<T>,
               errors,
@@ -151,7 +151,7 @@ export const AdvancedOptions = <T extends FormValues>({
         </Form.Group>
       </Col>
 
-      <Form.Group controlId={minSpendId} className='advanced-switch-container'>
+      <Form.Group controlId={minSpendId} className="advanced-switch-container">
         <ProductPriceControl
           title={t('minSpend')}
           isRequired={false}

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story<ProductBookingManagementControlProps<{}>> = (
   return (
     <FormProvider {...form}>
       <Form
-        className='d-flex flex-column'
+        className="d-flex flex-column"
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -49,7 +49,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
       <Form.Group controlId={zoneId}>
         <Form.Label>{t('zone')}</Form.Label>
         <Form.Control
-          as='select'
+          as="select"
           {...register(`${fieldNamePrefix}.zoneId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.zoneId` as Path<T>,
@@ -63,7 +63,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             </option>
           ))}
         </Form.Control>
-        <Form.Control.Feedback type='invalid'>
+        <Form.Control.Feedback type="invalid">
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.zoneId` as Path<T>,
             errors,
@@ -85,8 +85,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type='number'
-                onWheel={(event) => event.currentTarget.blur()}
+                type="number"
                 min={0}
                 step={1}
                 value={value as string}
@@ -112,7 +111,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             }}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.capacity` as Path<T>,
               errors,
@@ -129,10 +128,9 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type='number'
-                onWheel={(event) => event.currentTarget.blur()}
-                min='0'
-                step='1'
+                type="number"
+                min="0"
+                step="1"
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -149,7 +147,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                as='select'
+                as="select"
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -169,7 +167,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             name={`${fieldNamePrefix}.duration` as Path<T>}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.duration` as Path<T>,
               errors,

package/src/product-set/product/deposit/ProductDeposit.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<ProductDepositControlProps<{}>> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className='d-flex flex-column'
+        className="d-flex flex-column"
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -41,7 +41,7 @@ export function ProductDepositControl<T extends FormValues>(
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaPoundSign size={10} className='p-0' />
+              <FaPoundSign size={10} className="p-0" />
             </InputGroup.Text>
           </InputGroup.Prepend>
 
@@ -49,11 +49,10 @@ export function ProductDepositControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type='number'
-                onWheel={(event) => event.currentTarget.blur()}
+                type="number"
                 min={0}
                 max={Number(totalPrice)}
-                step='0.01'
+                step="0.01"
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -86,7 +85,7 @@ export function ProductDepositControl<T extends FormValues>(
             }}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.deposit` as Path<T>,
               errors,

package/src/product-set/product/duration/ProductDurationControl.stories.tsx

@@ -15,7 +15,7 @@ export const Default: Story = () => {
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(console.log)}>
         <ProductDurationControl
-          fieldNamePrefix=''
+          fieldNamePrefix=""
           providerHasBookingManagement
         />
       </form>

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -75,23 +75,22 @@ export const ProductDurationControl = <T,>({
       render={({ field }) => (
         <>
           <Col lg={4} md={4} sm={6}>
-            <Form.Group controlId={hoursId} className='position-relative'>
+            <Form.Group controlId={hoursId} className="position-relative">
               <Form.Label>{t('durationHours')}</Form.Label>
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
-                  className='arrow-up-btn'
+                  className="arrow-up-btn"
                   onClick={() => onHoursChange(durationHours + 1)}
                 >
-                  <InputGroup.Text className='py-0 px-3'>
+                  <InputGroup.Text className="py-0 px-3">
                     <IncrementIcon />
                   </InputGroup.Text>
                 </InputGroup.Prepend>
 
                 <Form.Control
-                  type='number'
+                  type="number"
                   min={0}
-                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -103,7 +102,7 @@ export const ProductDurationControl = <T,>({
                   onFocus={onFocus}
                 />
 
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {HookFormService.getErrors<T>(fieldName, errors)}
                 </Form.Control.Feedback>
               </InputGroup>
@@ -111,24 +110,23 @@ export const ProductDurationControl = <T,>({
           </Col>
 
           <Col lg={4} md={4} sm={6}>
-            <Form.Group controlId={minutesId} className='position-relative'>
+            <Form.Group controlId={minutesId} className="position-relative">
               <Form.Label>{t('durationMinutes')}</Form.Label>
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
-                  className='arrow-up-btn'
+                  className="arrow-up-btn"
                   onClick={() => onMinutesChange(durationMinutes + 1)}
                 >
-                  <InputGroup.Text className='py-0 px-3'>
+                  <InputGroup.Text className="py-0 px-3">
                     <IncrementIcon />
                   </InputGroup.Text>
                 </InputGroup.Prepend>
 
                 <Form.Control
-                  type='number'
+                  type="number"
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}
@@ -138,7 +136,7 @@ export const ProductDurationControl = <T,>({
                   onFocus={onFocus}
                 />
 
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {HookFormService.getErrors<T>(fieldName, errors)}
                 </Form.Control.Feedback>
               </InputGroup>

package/src/product-set/product/fixed-duration-fields/FixedDurationOptions.tsx

@@ -18,7 +18,7 @@ export const FixedDurationOptions = <T,>({
 
   return (
     <>
-      <Row className='mt-4'>
+      <Row className="mt-4">
         <Col lg={4} md={4} sm={6}>
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.subSlots`}

package/src/product-set/product/price/ProductPrice.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<ProductPriceControlProps<{}>> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className='d-flex flex-column'
+        className="d-flex flex-column"
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -49,7 +49,7 @@ export function ProductPriceControl<T extends FormValues>({
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaPoundSign size={10} className='p-0' />
+              <FaPoundSign size={10} className="p-0" />
             </InputGroup.Text>
           </InputGroup.Prepend>
 
@@ -57,11 +57,10 @@ export function ProductPriceControl<T extends FormValues>({
             render={({ field: { value, onChange, name, ref } }) => (
               <Form.Control
                 ref={ref}
-                type='number'
+                type="number"
                 min={0}
-                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
-                step='0.01'
+                step="0.01"
                 value={value as string}
                 name={name}
                 onChange={onChange}
@@ -115,7 +114,7 @@ export function ProductPriceControl<T extends FormValues>({
             }}
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}` as Path<T>,
               errors,

package/src/product-set/product/quantity/ProductQuantity.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story<ProductQuantityControlProps<{}>> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className='d-flex flex-column'
+        className="d-flex flex-column"
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >
@@ -57,7 +57,7 @@ export const ConstantForm: Story<ProductQuantityConstantControlProps<{}>> = (
   return (
     <FormProvider {...form}>
       <Form
-        className='d-flex flex-column'
+        className="d-flex flex-column"
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >
@@ -79,7 +79,7 @@ export const RechargingForm: Story<
   return (
     <FormProvider {...form}>
       <Form
-        className='d-flex flex-column'
+        className="d-flex flex-column"
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -99,7 +99,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend>
-              <InputGroup.Text className='py-0 px-3'>
+              <InputGroup.Text className="py-0 px-3">
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -108,10 +108,9 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               render={({ field: { value, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type='number'
+                  type="number"
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -127,7 +126,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               }}
             />
 
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.totalQuantity` as Path<T>,
                 errors,
@@ -143,7 +142,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend
-              className='arrow-up-btn'
+              className="arrow-up-btn"
               onClick={() => {
                 const currentNextQuantity = getValues(
                   `${fieldNamePrefix}.nextQuantity` as Path<T>,
@@ -154,7 +153,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                 )
               }}
             >
-              <InputGroup.Text className='py-0 px-3'>
+              <InputGroup.Text className="py-0 px-3">
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -163,10 +162,9 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               render={({ field: { value, onChange, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type='number'
+                  type="number"
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -189,8 +187,8 @@ export function ProductQuantityConstantControl<T extends FormValues>(
 
             <InputGroup.Append>
               <Button
-                className='px-2 py-0'
-                variant='outline-info'
+                className="px-2 py-0"
+                variant="outline-info"
                 onClick={handleClick}
                 disabled={isLoading || disabled}
               >
@@ -198,7 +196,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               </Button>
             </InputGroup.Append>
 
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.nextQuantity` as Path<T>,
                 errors,
@@ -206,7 +204,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
             </Form.Control.Feedback>
           </InputGroup>
 
-          <Form.Text className='text-muted'>
+          <Form.Text className="text-muted">
             {t('youCanUsePositiveAndNegativeNumbersHere')}
           </Form.Text>
         </Form.Group>

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -65,7 +65,7 @@ export function ProductQuantityControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend
-              className='arrow-up-btn'
+              className="arrow-up-btn"
               onClick={() => {
                 setValue(
                   `${fieldNamePrefix}.minQuantity` as Path<T>,
@@ -73,7 +73,7 @@ export function ProductQuantityControl<T extends FormValues>(
                 )
               }}
             >
-              <InputGroup.Text className='py-0 px-3'>
+              <InputGroup.Text className="py-0 px-3">
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -82,10 +82,9 @@ export function ProductQuantityControl<T extends FormValues>(
               render={({ field: { value, onChange, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type='number'
+                  type="number"
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -108,7 +107,7 @@ export function ProductQuantityControl<T extends FormValues>(
               }}
             />
 
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.minQuantity` as Path<T>,
                 errors,
@@ -124,7 +123,7 @@ export function ProductQuantityControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend
-              className='arrow-up-btn'
+              className="arrow-up-btn"
               onClick={() => {
                 setValue(
                   `${fieldNamePrefix}.maxQuantity` as Path<T>,
@@ -132,7 +131,7 @@ export function ProductQuantityControl<T extends FormValues>(
                 )
               }}
             >
-              <InputGroup.Text className='py-0 px-3'>
+              <InputGroup.Text className="py-0 px-3">
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -141,10 +140,9 @@ export function ProductQuantityControl<T extends FormValues>(
               render={({ field: { value, onChange, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type='number'
+                  type="number"
                   min={0}
                   step={1}
-                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}
@@ -167,7 +165,7 @@ export function ProductQuantityControl<T extends FormValues>(
               }}
             />
 
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.maxQuantity` as Path<T>,
                 errors,

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -57,7 +57,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
 
         <InputGroup hasValidation>
           <InputGroup.Prepend>
-            <InputGroup.Text className='py-0 px-3'>
+            <InputGroup.Text className="py-0 px-3">
               <IncrementIcon />
             </InputGroup.Text>
           </InputGroup.Prepend>
@@ -66,10 +66,9 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type='number'
+                type="number"
                 min={0}
                 step={1}
-                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true
@@ -113,7 +112,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
             }
           />
 
-          <Form.Control.Feedback type='invalid'>
+          <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.totalQuantity` as Path<T>,
               errors,

package/src/product-set/product-category/ProductCategory.stories.tsx

@@ -59,7 +59,7 @@ export const Default: Story<ProductCategoryControlProps> = (args) => {
     <ProductSetLoadingContext.Provider value={contextValue}>
       <FormProvider {...form}>
         <Form
-          className='d-flex flex-column'
+          className="d-flex flex-column"
           noValidate
           onSubmit={form.handleSubmit(onSubmit)}
         >
@@ -88,7 +88,7 @@ export const WithData: Story<ProductCategoryControlProps> = (args) => {
     <ProductSetLoadingContext.Provider value={contextValue}>
       <FormProvider {...form}>
         <Form
-          className='d-flex flex-column'
+          className="d-flex flex-column"
           noValidate
           onSubmit={form.handleSubmit(onSubmit)}
         >
@@ -120,7 +120,7 @@ export const WithSortable: Story<ProductCategoryControlProps> = (args) => {
       <ProductSetLoadingContext.Provider value={contextValue}>
         <FormProvider {...form}>
           <Form
-            className='d-flex flex-column'
+            className="d-flex flex-column"
             noValidate
             onSubmit={form.handleSubmit(onSubmit)}
           >
@@ -130,7 +130,7 @@ export const WithSortable: Story<ProductCategoryControlProps> = (args) => {
             >
               <SortableTree.Item
                 id={id}
-                title='Product category #1'
+                title="Product category #1"
                 body={<ProductCategoryControl {...args} />}
               />
             </SortableContext>