@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/product-set/form/StepsControl.tsx

@@ -92,7 +92,7 @@ export function StepsControl({
               <SortableTree.Item
                 id={step._id}
                 title={value}
-                badge={<Badge className="step-badge">{t('step')}</Badge>}
+                badge={<Badge className='step-badge'>{t('step')}</Badge>}
                 isExpanded={isFirstStepAdded || !!errors.steps?.[index]}
                 isInvalid={!!errors.steps?.[index]}
                 isIconInHeader={false}
@@ -103,14 +103,14 @@ export function StepsControl({
                 cancelChanges={() => cancelChanges(index)}
                 isOverride={isOverrideStep}
                 subTitle={
-                  <div className="product-set-badges-container">
-                    <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
+                  <div className='product-set-badges-container'>
+                    <div className='product-set-subtitle-dot product-set-subtitle-step-dot' />
                     <span>
                       {stepData.productCategories?.length} {t('categories')}
                     </span>
                   </div>
                 }
-                treeLineIconColor="#D52902"
+                treeLineIconColor='#D52902'
                 body={
                   <StepControl
                     isLoading={isLoading}
@@ -167,7 +167,7 @@ export function StepsControl({
           }
         }}
       />
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {errors.steps && errors.steps.message}
       </div>
     </>

package/src/product-set/form/SubProductsControl.tsx

@@ -61,7 +61,7 @@ export function SubProductsControl({
                 `steps.${stepIndex}.productCategories.${productCategoryIndex}.products.${productIndex}.subProducts.${index}` as const
               }
               onProductNameChange={() => {}}
-              productName=""
+              productName=''
               onCopy={() => {
                 const subProductCopy = {
                   ...subProducts[index],
@@ -70,9 +70,6 @@ export function SubProductsControl({
                   images: subProducts[index]?.images as Image[],
                 }
                 // @ts-expect-error TS2345
-                // @TODO fix prod type error
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 append(subProductCopy)
               }}
             />

package/src/product-set/form/VenueMapSetModal.tsx

@@ -113,42 +113,42 @@ export const VenueMapSetModal = ({
 
   return (
     <Modal
-      size="lg"
+      size='lg'
       show={isVisible}
       className={clsx(
         'm-0 edit-product-set-element-modal edit-right-form-modal',
         'h-100 edit-venue-map-set',
       )}
-      dialogClassName="edit-event-dialog edit-step-dialog"
+      dialogClassName='edit-event-dialog edit-step-dialog'
       onHide={onCloseModal}
     >
-      <div className="edit-step-modal-header">
+      <div className='edit-step-modal-header'>
         <button
-          className="p-0 cancel-add-step-btn border-0"
-          type="button"
+          className='p-0 cancel-add-step-btn border-0'
+          type='button'
           onClick={onCloseModal}
         >
           <span>{t('Design:cancel')}</span>
         </button>
       </div>
-      <Modal.Body as="form" noValidate>
-        <div className="top-label-container">
+      <Modal.Body as='form' noValidate>
+        <div className='top-label-container'>
           <span>{t('Design:editMap')}</span>
         </div>
 
         <Form.Group>
-          <Form.Label className="mt-4">
+          <Form.Label className='mt-4'>
             {t('Design:chooseTheVenueMapSet')}
           </Form.Label>
           {venueMapSets.length > 0 ? (
             <Form.Control
-              as="select"
+              as='select'
               {...register(key, {
                 required: Boolean(providerHasMap),
               })}
               isInvalid={HookFormService.isInvalid(key, errors)}
             >
-              <option value="">{t('Design:choose')}</option>
+              <option value=''>{t('Design:choose')}</option>
               {venueMapSets.map((venueMapSet) => (
                 <option value={Number(venueMapSet.id)} key={venueMapSet.id}>
                   {venueMapSet.name}
@@ -158,7 +158,7 @@ export const VenueMapSetModal = ({
           ) : (
             <>
               <Form.Control
-                as="select"
+                as='select'
                 hidden
                 {...register(key, {
                   required: Boolean(providerHasMap),
@@ -168,7 +168,7 @@ export const VenueMapSetModal = ({
               <WarningMessage message={t('Design:noVenueMapSets')} />
             </>
           )}
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(
               errors?.steps?.[stepIndex]?.venueMapSetId,
               'required',
@@ -203,7 +203,7 @@ export const VenueMapSetModal = ({
               Boolean(providerHasMap) && Boolean(!filteredPointProducts.length)
             }
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors?.steps?.[stepIndex]?.pointProducts &&
               t('Validation:fieldMinNumber', {
                 attribute: t('pointProduct'),
@@ -212,10 +212,10 @@ export const VenueMapSetModal = ({
           </Form.Control.Feedback>
         </Form.Group>
 
-        <div className="d-flex product-set-element-control-btns justify-content-between">
+        <div className='d-flex product-set-element-control-btns justify-content-between'>
           <Button
-            className="step-save-btn mt-4"
-            type="button"
+            className='step-save-btn mt-4'
+            type='button'
             onClick={onSubmitModal}
           >
             {t('Design:saveAndAdd')}

package/src/product-set/form/VenueMapsControl.tsx

@@ -23,19 +23,19 @@ export const VenueMapsControl = ({
   const { t } = useTranslation('Design')
 
   return (
-    <div className="mt-5 venue-maps-wrapper">
+    <div className='mt-5 venue-maps-wrapper'>
       {venueMaps.map(({ id, name, image, points }) => (
-        <div key={id} className="venue-map">
-          <div className="image">
+        <div key={id} className='venue-map'>
+          <div className='image'>
             {image ? (
               <img
                 src={MediaService.getImageSrc([image], 'thumbnail')}
                 alt={name}
               />
             ) : (
-              <div className="no-image" />
+              <div className='no-image' />
             )}
-            <div className="image-hover">
+            <div className='image-hover'>
               {points.length ? (
                 <>
                   {image ? (
@@ -46,9 +46,6 @@ export const VenueMapsControl = ({
                             url={image.url}
                             name={name}
                             points={points}
-                            // @TODO fix prod type error
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
                             products={products}
                             pointProducts={pointProducts}
                             onPointProductsChange={onPointProductsChange}
@@ -57,26 +54,26 @@ export const VenueMapsControl = ({
                       }
                     >
                       {(confirm) => (
-                        <Button size="sm" onClick={confirm}>
+                        <Button size='sm' onClick={confirm}>
                           {t('choose')}
                         </Button>
                       )}
                     </FullscreenModal>
                   ) : (
-                    <p className="m-0 no-points">
+                    <p className='m-0 no-points'>
                       {t('toSelectPointsPleaseAddVenueMapImage')}
                     </p>
                   )}
                 </>
               ) : (
-                <p className="m-0 no-points">
+                <p className='m-0 no-points'>
                   {t('toSelectProductsPleaseAddPointsToSelectedMap')}
                 </p>
               )}
             </div>
           </div>
 
-          <div className="name">{name}</div>
+          <div className='name'>{name}</div>
         </div>
       ))}
     </div>

package/src/product-set/form/index.ts

@@ -1 +1,2 @@
 export * from './ProductSetForm'
+export * from './ProductSetNameControl'

package/src/product-set/item/CreateProductSetItem.tsx

@@ -23,9 +23,9 @@ export function CreateProductSetItem({
         className,
       )}
       onClick={onClick}
-      type="button"
+      type='button'
     >
-      <FaPlus size={20} className="rounded product-set-item-icon" />
+      <FaPlus size={20} className='rounded product-set-item-icon' />
       <span>{title}</span>
     </button>
   )

package/src/product-set/popover/ProductSetPopover.stories.tsx

@@ -36,7 +36,7 @@ export function ControlledComponentWithHook() {
     <ProductSetPopover
       isVisible={isVisisble}
       onClick={() => setIsVisible((prevValue) => !prevValue)}
-      placement="bottom"
+      placement='bottom'
     >
       <span ref={ref}>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nam
@@ -65,17 +65,17 @@ UncontrolledWithTabs.args = {
   placement: 'bottom',
   children: (
     <Tabs
-      defaultActiveKey="profile"
-      id="uncontrolled-tab-example"
-      className="mb-3"
+      defaultActiveKey='profile'
+      id='uncontrolled-tab-example'
+      className='mb-3'
     >
-      <Tab eventKey="home" title="Home">
+      <Tab eventKey='home' title='Home'>
         Content one
       </Tab>
-      <Tab eventKey="profile" title="Profile">
+      <Tab eventKey='profile' title='Profile'>
         Content two
       </Tab>
-      <Tab eventKey="contact" title="Contact">
+      <Tab eventKey='contact' title='Contact'>
         Content three
       </Tab>
     </Tabs>

package/src/product-set/popover/ProductSetPopover.tsx

@@ -37,8 +37,8 @@ export const ProductSetPopover = forwardRef<
     const popoverId = useId()
 
     const popover = (
-      <Popover id={popoverId} className="product-set-popover shadow-sm">
-        <Popover.Title as="h3">{title}</Popover.Title>
+      <Popover id={popoverId} className='product-set-popover shadow-sm'>
+        <Popover.Title as='h3'>{title}</Popover.Title>
         <Popover.Content>{children}</Popover.Content>
       </Popover>
     )
@@ -54,9 +54,9 @@ export const ProductSetPopover = forwardRef<
           trigger={trigger}
         >
           <Button
-            variant="outline-primary"
-            size="sm"
-            className="btn-icon-popover rounded-circle d-inline-flex align-items-center"
+            variant='outline-primary'
+            size='sm'
+            className='btn-icon-popover rounded-circle d-inline-flex align-items-center'
             onClick={() => {
               if (isVisible !== undefined && onClick) {
                 onClick()

package/src/product-set/product/Product.stories.tsx

@@ -51,7 +51,7 @@ export const Default: Story<ProductControlProps<{}>> = (args) => {
         <ProductSetLoadingContext.Consumer>
           {(_) => (
             <Form
-              className="d-flex flex-column"
+              className='d-flex flex-column'
               noValidate
               onSubmit={form.handleSubmit(onSubmit)}
             >
@@ -83,7 +83,7 @@ export const WithData: Story<ProductControlProps<{}>> = (args) => {
         <ProductSetLoadingContext.Consumer>
           {(_) => (
             <Form
-              className="d-flex flex-column"
+              className='d-flex flex-column'
               noValidate
               onSubmit={form.handleSubmit(onSubmit)}
             >
@@ -113,7 +113,7 @@ export const WithSortable: Story<ProductControlProps<{}>> = (args) => {
           <ProductSetLoadingContext.Consumer>
             {(_) => (
               <Form
-                className="d-flex flex-column"
+                className='d-flex flex-column'
                 noValidate
                 onSubmit={form.handleSubmit(onSubmit)}
               >
@@ -123,7 +123,7 @@ export const WithSortable: Story<ProductControlProps<{}>> = (args) => {
                 >
                   <SortableTree.Item
                     id={id}
-                    title="Product #1"
+                    title='Product #1'
                     body={<ProductControl {...args} />}
                   />
                 </SortableContext>

package/src/product-set/product/ProductControl.tsx

@@ -34,7 +34,6 @@ import {
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -230,7 +229,7 @@ export function ProductControl<T extends FormValues>({
               disabled={isLoading || isOverrides}
               placeholder={t('name')}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.name` as Path<T>,
                 errors,
@@ -262,7 +261,7 @@ export function ProductControl<T extends FormValues>({
               name={`${fieldNamePrefix}.description` as Path<T>}
             />
           </Form.Group>
-          <div className="invalid-feedback field-values-error d-block">
+          <div className='invalid-feedback field-values-error d-block'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.description` as Path<T>,
               errors,
@@ -315,11 +314,11 @@ export function ProductControl<T extends FormValues>({
             )}
             <Form.Group
               controlId={unlimitedQuantityId}
-              className="custom-checkbox"
+              className='custom-checkbox'
             >
               <Form.Check
                 custom
-                type="checkbox"
+                type='checkbox'
                 {...register(`${fieldNamePrefix}.isUnlimited` as Path<T>)}
                 name={`${fieldNamePrefix}.isUnlimited` as Path<T>}
                 disabled={isLoading}
@@ -331,7 +330,7 @@ export function ProductControl<T extends FormValues>({
           <Form.Group controlId={quantitySelectorId}>
             <Form.Label>{t('quantitySelectorType')}</Form.Label>
             <Form.Control
-              as="select"
+              as='select'
               defaultValue={hasTicket ? quantitySelectorList[0].id : undefined}
               {...register(`${fieldNamePrefix}.quantitySelector` as Path<T>)}
               isInvalid={HookFormService.isInvalid<T>(
@@ -346,7 +345,7 @@ export function ProductControl<T extends FormValues>({
                 </option>
               ))}
             </Form.Control>
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.quantitySelector` as Path<T>,
                 errors,
@@ -356,7 +355,7 @@ export function ProductControl<T extends FormValues>({
         </Col>
       </Row>
 
-      <Row className="my-4 mx-0 d-flex flex-column">
+      <Row className='my-4 mx-0 d-flex flex-column'>
         {isZoneCategory && (
           <ProductZonesControl
             isOverrides={isOverrides}
@@ -375,7 +374,7 @@ export function ProductControl<T extends FormValues>({
           <FileUpload
             onFilesChange={onFilesChange}
             allowedExtensions={['jpeg', 'jpg', 'png']}
-            subTitle=".jpeg    .jpg    .png"
+            subTitle='.jpeg    .jpg    .png'
             enablePreview
             onFileRemove={onImageRemove}
             defaultFiles={images}
@@ -387,10 +386,10 @@ export function ProductControl<T extends FormValues>({
         </Col>
       </Row>
 
-      <Col lg={12} md={12} xl className="p-0">
+      <Col lg={12} md={12} xl className='p-0'>
         <Form.Group
           controlId={isAvailableId}
-          className="advanced-switch-container"
+          className='advanced-switch-container'
         >
           <Form.Label>{t('isAvailable')}</Form.Label>
 
@@ -410,7 +409,7 @@ export function ProductControl<T extends FormValues>({
 
         <Form.Group
           controlId={isSoldOutId}
-          className="advanced-switch-container"
+          className='advanced-switch-container'
         >
           <Form.Label>{t('isSoldOut')}</Form.Label>
 
@@ -427,24 +426,24 @@ export function ProductControl<T extends FormValues>({
             name={`${fieldNamePrefix}.isSoldOut` as Path<T>}
           />
         </Form.Group>
-        <Form.Group controlId={advancedId} className="custom-checkbox">
+        <Form.Group controlId={advancedId} className='custom-checkbox'>
           <Form.Check
             custom
-            type="checkbox"
+            type='checkbox'
             name={advancedId}
             disabled={isLoading || isOverrides}
           >
             <Form.Check.Input
               checked={expanded}
               onChange={handleExpand}
-              type="checkbox"
+              type='checkbox'
             />
             <Form.Check.Label>{t('showAdvancedOptions')}</Form.Check.Label>
           </Form.Check>
         </Form.Group>
       </Col>
 
-      <Col lg={12} md={12} xl className="p-0">
+      <Col lg={12} md={12} xl className='p-0'>
         <Collapse in={expanded}>
           {/* Div should be here not in component, otherwise component will be always collapsed */}
           <div>
@@ -471,14 +470,14 @@ export function ProductControl<T extends FormValues>({
 
       <Row>
         <Col xs>
-          <div className="d-flex justify-content-end mt-4">
+          <div className='d-flex justify-content-end mt-4'>
             {Boolean(onCopy) && (
               <Button
                 onClick={onCopy}
-                variant="link"
-                className="d-flex align-items-center"
+                variant='link'
+                className='d-flex align-items-center'
               >
-                <FaClipboard size={16} className="mr-2" /> {t('copy')}
+                <FaClipboard size={16} className='mr-2' /> {t('copy')}
               </Button>
             )}
           </div>

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { 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,7 +85,8 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
+                type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -111,7 +112,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,
@@ -128,9 +129,10 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
-                min="0"
-                step="1"
+                type='number'
+                onWheel={(event) => event.currentTarget.blur()}
+                min='0'
+                step='1'
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -147,7 +149,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>(
@@ -167,7 +169,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)}
       >