@licklist/design 0.68.7-dev.0 → 0.68.7

package/src/product-set/deposit-paid/ProductSetDepositPaidControl.tsx

@@ -38,11 +38,11 @@ export function ProductSetDepositPaidControl(
   return (
     <Row>
       <Col xs={12}>
-        <div className='form-inline'>
+        <div className="form-inline">
           <Form.Group controlId={depositPaidId}>
             <Form.Label>{t('depositPaid')}</Form.Label>
 
-            <div className='form-inline-group'>
+            <div className="form-inline-group">
               <InputGroup hasValidation>
                 <InputGroup.Prepend>
                   <InputGroup.Text>{t('pay')}</InputGroup.Text>
@@ -58,7 +58,7 @@ export function ProductSetDepositPaidControl(
                     />
                   )}
                   control={control}
-                  name='depositPaidAmount'
+                  name="depositPaidAmount"
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidAmount'),
@@ -83,7 +83,7 @@ export function ProductSetDepositPaidControl(
                 <Controller
                   render={({ field: { value, onChange } }) => (
                     <Form.Control
-                      as='select'
+                      as="select"
                       onChange={onChange}
                       isInvalid={Boolean(errors.depositPaidAmountType)}
                       disabled={isLoading}
@@ -100,7 +100,7 @@ export function ProductSetDepositPaidControl(
                     </Form.Control>
                   )}
                   control={control}
-                  name='depositPaidAmountType'
+                  name="depositPaidAmountType"
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidAmountType'),
@@ -122,7 +122,7 @@ export function ProductSetDepositPaidControl(
                     />
                   )}
                   control={control}
-                  name='depositPaidPeriod'
+                  name="depositPaidPeriod"
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidPeriod'),
@@ -147,7 +147,7 @@ export function ProductSetDepositPaidControl(
                 <Controller
                   render={({ field: { value, onChange } }) => (
                     <Form.Control
-                      as='select'
+                      as="select"
                       onChange={onChange}
                       isInvalid={Boolean(errors.depositPaidPeriodType)}
                       disabled={isLoading}
@@ -164,7 +164,7 @@ export function ProductSetDepositPaidControl(
                     </Form.Control>
                   )}
                   control={control}
-                  name='depositPaidPeriodType'
+                  name="depositPaidPeriodType"
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidPeriodType'),
@@ -176,7 +176,7 @@ export function ProductSetDepositPaidControl(
                   <InputGroup.Text>{t('beforeEvent')}</InputGroup.Text>
                 </InputGroup.Append>
 
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {errors.depositPaidAmount?.message}
                   {errors.depositPaidPeriod?.message}
                 </Form.Control.Feedback>

package/src/product-set/elements/DeleteFieldButton.tsx

@@ -11,11 +11,11 @@ export function DeleteFieldButton({ onDelete }: DeleteFieldButtonProps) {
   return (
     <Button
       onClick={onDelete}
-      variant='outline-danger'
-      className='d-flex align-items-center'
+      variant="outline-danger"
+      className="d-flex align-items-center"
     >
       <FaTrashAlt size={16} />{' '}
-      <span className='d-none d-sm-inline ml-2'>{t('delete')}</span>
+      <span className="d-none d-sm-inline ml-2">{t('delete')}</span>
     </Button>
   )
 }

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

@@ -5,11 +5,12 @@ export function MobileFooter() {
   const { t } = useTranslation('Design')
 
   return (
-    <div className='container product-set-mobile-footer'>
+    <div className="container product-set-mobile-footer">
       <div
-        className={`d-block d-sm-none bg-white border-top fixed-bottom py-4 px-5 d-flex justify-content-between flex-row-reverse`}
+        className={`d-block d-sm-none bg-white border-top fixed-bottom
+         py-4 px-5 d-flex justify-content-between flex-row-reverse`}
       >
-        <Button type='submit'>{t('save')}</Button>
+        <Button type="submit">{t('save')}</Button>
       </div>
     </div>
   )

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

@@ -8,7 +8,6 @@ import {
   useFormContext,
   useWatch,
 } from 'react-hook-form'
-import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from 'react-icons/fa'
 import { useTranslation } from 'react-i18next'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import {
@@ -26,11 +25,7 @@ import { ProductCategoryControl } from '../product-category'
 import { ProductCategory } from '../types'
 import { ProductsControl } from './ProductsControl'
 import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import {
-  SelectCategoryModal,
-  CATEGORY_TYPES_NAMES,
-  CategoryConfig,
-} from './SelectCategoryModal'
+import { SelectCategoryModal } from './SelectCategoryModal'
 import { ProductSetLoadingContext } from './context'
 import { VenueMapSetModal } from './VenueMapSetModal'
 import { moveArrayElements, sortArrayByIndex } from '../utils'
@@ -38,29 +33,6 @@ import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
-const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
-  [CATEGORY_TYPES_NAMES.tickets]: {
-    label: 'tickets',
-    icon: <FaTicketAlt color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.bookings]: {
-    label: 'bookings',
-    icon: <FaCalendar color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.menuItems]: {
-    label: 'menuItems',
-    icon: <FaBars color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.game]: {
-    label: 'game',
-    icon: <FaBowlingBall color='#0e8ce2' size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.fixedDuration]: {
-    label: 'fixedDuration',
-    icon: <FaCalendar color='#0e8ce2' size={10} />,
-  },
-}
-
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number
   isOverrides?: boolean
@@ -256,8 +228,6 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type]
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -278,14 +248,14 @@ export function ProductCategoriesControl({
                   cancelChanges={() => cancelChanges(index)}
                   isInvalid={!!productCategoriesErrors}
                   badge={
-                    <Badge className='category-badge'>
+                    <Badge className="category-badge">
                       {t('productCategory')}
                     </Badge>
                   }
                   isIconInHeader={false}
                   subTitle={
-                    <div className='product-set-badges-container'>
-                      <div className='product-set-subtitle-dot product-set-subtitle-category-dot' />
+                    <div className="product-set-badges-container">
+                      <div className="product-set-subtitle-dot product-set-subtitle-category-dot" />
                       <span>
                         {productCategoryState[
                           productCategory?.id ?? productCategory.uniqueId
@@ -294,7 +264,7 @@ export function ProductCategoriesControl({
                       </span>
                     </div>
                   }
-                  treeLineIconColor='#1A93AA'
+                  treeLineIconColor="#1A93AA"
                   modalLabel={t('addNewCategory')}
                   secondaryBadge={getBadgeConfig(
                     productCategory.type,
@@ -302,12 +272,6 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
-                  itemButton={
-                    <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
-                      {categoryType.icon}
-                      <span className='ml-2'>{t(categoryType.label)}</span>
-                    </div>
-                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}
@@ -389,7 +353,7 @@ export function ProductCategoriesControl({
             )}
           />
           {showVenueMapSetError && (
-            <div className='manual-form-error'>
+            <div className="manual-form-error">
               {venueMapSetIdError &&
                 t('Validation:fieldRequired', {
                   attribute: t('Design:venueMapSet'),
@@ -409,7 +373,7 @@ export function ProductCategoriesControl({
         </>
       )}
 
-      <div className='manual-form-error'>
+      <div className="manual-form-error">
         {productCategoriesErrors && productCategoriesErrors.message}
       </div>
     </>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { FormValues } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
 import { Button, Form, Col, Row } from 'react-bootstrap'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -22,21 +22,16 @@ import { Step } from '../types'
 import { ProductSetContextProvider, ProductSetLoadingContext } from './context'
 import { SelectItem } from '../../types/generic/SelectItem'
 import { checkAvailableTimesErrors, getFilteredTemplates } from '../utils'
-import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 
 export interface WithIsLoading {
   isLoading: boolean
 }
-export interface WithIdOptional {
-  id?: number
-}
-
 export interface WithId {
   id: number
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean
@@ -89,7 +84,6 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext()
-  const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -127,9 +121,6 @@ export function ProductSetForm({
     if (!serverErrors) {
       return
     }
-    if (Array.isArray(serverErrors) && serverErrors[0]) {
-      setErrorMessage(serverErrors[0])
-    }
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
 
@@ -165,12 +156,6 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
-      <ErrorModal
-        message={errorMessage}
-        isOpen={!!errorMessage}
-        onClose={() => setErrorMessage('')}
-      />
-
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
@@ -200,13 +185,13 @@ export function ProductSetForm({
                 <Row>
                   <Col md={6} sm={12} />
                   <Col
-                    className='product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100'
+                    className="product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100"
                     md={6}
                     sm={12}
                   >
                     {onSubmitNoRedirect && (
                       <Button
-                        className='product-set-save-btn mt-5 ml-5 d-no dne d-md-block'
+                        className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
                         onClick={form.handleSubmit(
                           submitHandler(onSubmitNoRedirect),
                         )}
@@ -218,8 +203,8 @@ export function ProductSetForm({
                       </Button>
                     )}
                     <Button
-                      className='product-set-save-btn mt-5 ml-5 d-no dne d-md-block'
-                      type='submit'
+                      className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
+                      type="submit"
                       disabled={
                         isLoading || contextIsLoading || !formValues.name
                       }

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

@@ -14,18 +14,18 @@ function ProductSetFormPopover({ className = '' }: ProductSetFormPopoverProps) {
 
   return (
     <ProductSetPopover
-      placement='bottom'
+      placement="bottom"
       ref={popoverRef}
       onClick={() => setIsVisible(true)}
       isVisible={isVisible}
       className={className}
     >
-      <Tabs defaultActiveKey='first'>
-        <Tabs.Tab eventKey='first' title='Add item'>
+      <Tabs defaultActiveKey="first">
+        <Tabs.Tab eventKey="first" title="Add item">
           <p>Add new sub product item</p>
           <p>Add new sub product modifier</p>
         </Tabs.Tab>
-        <Tabs.Tab eventKey='second' title='Reusable subsets'>
+        <Tabs.Tab eventKey="second" title="Reusable subsets">
           <p>Add new sub product item 1</p>
           <p>Add new sub product modifier 2</p>
         </Tabs.Tab>

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

@@ -1,4 +1,7 @@
-import { useContext, useState } from 'react'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React, { useContext, useState } from 'react'
+
 import {
   ArrayPath,
   Controller,
@@ -122,14 +125,14 @@ export const ProductZonesControl = <T extends FormValues>({
               id={String(productZones._id)}
               title={zones.find((zone) => zone.id === Number(value))?.name}
               badge={
-                <Badge className='product-zone-badge'>{t('productZone')}</Badge>
+                <Badge className="product-zone-badge">{t('productZone')}</Badge>
               }
               isIconInHeader={false}
               cancelChanges={() => cancelChanges(index)}
               edit={() => edit(index)}
               subTitle={
-                <div className='product-set-badges-container'>
-                  <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
+                <div className="product-set-badges-container">
+                  <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
                   <span>
                     {zoneCapacity[index] &&
                       `${t('Cap')}: ${zoneCapacity[index]}; `}
@@ -172,7 +175,7 @@ export const ProductZonesControl = <T extends FormValues>({
           }
         }}
       />
-      <div className='manual-form-error'>{productZonesError}</div>
+      <div className="manual-form-error">{productZonesError}</div>
     </>
   )
 }

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

@@ -219,15 +219,15 @@ export function ProductsControl({
                   title={value}
                   isOverride={isOverrides}
                   badge={
-                    <Badge className='product-badge'>{t('product')}</Badge>
+                    <Badge className="product-badge">{t('product')}</Badge>
                   }
                   isIconInHeader={false}
                   cancelChanges={() => cancelChanges(index)}
                   edit={() => edit(index)}
                   secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
                   subTitle={
-                    <div className='product-set-badges-container'>
-                      <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
+                    <div className="product-set-badges-container">
+                      <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
                       <span>
                         {`£${prices[index]} ${t('each')} - ${t('qty')}:${
                           !isUnlimitedQuantities[index]
@@ -295,7 +295,7 @@ export function ProductsControl({
           }
         }}
       />
-      <div className='manual-form-error'>
+      <div className="manual-form-error">
         {categoryProductErrors && categoryProductErrors.message}
       </div>
     </>

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)
               }}
             />