@licklist/design 0.68.7-dev.1 → 0.69.0

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

@@ -25,7 +25,7 @@ import {
 } from 'react-icons/fa'
 import { ProductSetLoadingContext } from './context'
 
-export const CATEGORY_TYPES_NAMES = {
+const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,31 +33,31 @@ export const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const
 
-export type CategoryConfig = { label: string; icon: ReactElement }
+type CategoryConfig = { label: string; icon: ReactElement }
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {
     label: 'tickets',
-    icon: <FaTicketAlt color='#0e8ce2' size={32} />,
+    icon: <FaTicketAlt color="#0e8ce2" size={32} />,
   },
   [CATEGORY_TYPES_NAMES.bookings]: {
     label: 'bookings',
-    icon: <FaCalendar color='#0e8ce2' size={32} />,
+    icon: <FaCalendar color="#0e8ce2" size={32} />,
   },
   [CATEGORY_TYPES_NAMES.menuItems]: {
     label: 'menuItems',
-    icon: <FaBars color='#0e8ce2' size={32} />,
+    icon: <FaBars color="#0e8ce2" size={32} />,
   },
 }
 
 const BOOKING_SUBCATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.game]: {
     label: 'game',
-    icon: <FaBowlingBall color='#0e8ce2' size={32} />,
+    icon: <FaBowlingBall color="#0e8ce2" size={32} />,
   },
   [CATEGORY_TYPES_NAMES.fixedDuration]: {
     label: 'fixedDuration',
-    icon: <FaCalendar color='#0e8ce2' size={32} />,
+    icon: <FaCalendar color="#0e8ce2" size={32} />,
   },
 }
 
@@ -102,18 +102,18 @@ export function SelectCategoryModal({
 
   return (
     <Modal
-      size='lg'
+      size="lg"
       centered
       show={isVisible}
       onHide={onHide}
-      className='p-3 border-0'
+      className="p-3 border-0"
       animation={false}
-      contentClassName='rounded'
+      contentClassName="rounded"
     >
-      <ModalHeader className='align-items-center border-0'>
-        <ModalTitle as='h5'>{t('Design:selectCategory')}</ModalTitle>
+      <ModalHeader className="align-items-center border-0">
+        <ModalTitle as="h5">{t('Design:selectCategory')}</ModalTitle>
 
-        <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
+        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
           <FaTimes size={20} />
         </Button>
       </ModalHeader>
@@ -127,22 +127,22 @@ export function SelectCategoryModal({
           controls={false}
         >
           <Carousel.Item>
-            <div className='d-flex flex-row flex-wrap p-4 justify-content-between mb-6'>
+            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
               {mainCategories.map((categoryType) => {
                 const { label, icon } = MAIN_CATEGORIES[categoryType]
 
                 return (
                   <Col key={label}>
                     <Button
-                      variant='outline-light'
-                      className='d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded'
-                      role='button'
+                      variant="outline-light"
+                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
+                      role="button"
                       tabIndex={0}
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
                       {icon}
-                      <h6 className='text-dark mt-3'>{t(label)}</h6>
+                      <h6 className="text-dark mt-3">{t(label)}</h6>
                     </Button>
                   </Col>
                 )
@@ -150,22 +150,22 @@ export function SelectCategoryModal({
             </div>
           </Carousel.Item>
           <Carousel.Item>
-            <div className='d-flex flex-row flex-wrap p-4 justify-content-between mb-6'>
+            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
               {bookingSubcategories.map((categoryType) => {
                 const { label, icon } = BOOKING_SUBCATEGORIES[categoryType]
 
                 return (
                   <Col key={label}>
                     <Button
-                      variant='outline-light'
-                      className='d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded'
-                      role='button'
+                      variant="outline-light"
+                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
+                      role="button"
                       tabIndex={0}
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
                       {icon}
-                      <h6 className='text-dark mt-3'>{t(label)}</h6>
+                      <h6 className="text-dark mt-3">{t(label)}</h6>
                     </Button>
                   </Col>
                 )
@@ -176,7 +176,7 @@ export function SelectCategoryModal({
 
         {isBookingsSelected && (
           <Button
-            size='sm'
+            size="sm"
             className={`carousel-control-button ${
               activeCarouselIndex ? 'left' : 'right'
             }`}

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,6 +70,9 @@ 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,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>