@licklist/design 0.69.1-dev.3 → 0.69.1

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,6 +46,9 @@ 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}
@@ -54,26 +57,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,2 +1 @@
 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,6 +34,7 @@ import {
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -229,7 +230,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,
@@ -261,7 +262,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,
@@ -314,11 +315,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}
@@ -330,7 +331,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>(
@@ -345,7 +346,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,
@@ -355,7 +356,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}
@@ -374,7 +375,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}
@@ -386,10 +387,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>
 
@@ -409,7 +410,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>
 
@@ -426,24 +427,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>
@@ -470,14 +471,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 { 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>