@licklist/design 0.68.7-dev.1 → 0.69.0

package/src/product-set/control/ProductSetRecurrenceOverridesControl.tsx

@@ -16,36 +16,36 @@ export const ProductSetRecurrenceOverridesControl = ({
   const { formatDate } = useIntl()
 
   return (
-    <div className='sortable-tree-root flex-column' role='button' tabIndex={0}>
+    <div className="sortable-tree-root flex-column" role="button" tabIndex={0}>
       <div
         key={menuRecurrence.rrule}
-        className='product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1'
+        className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
       >
-        <span className='d-flex flex-row align-items-center'>
+        <span className="d-flex flex-row align-items-center">
           <FaCalendar
             size={16}
-            className='product-set-recurrence-icon-calendar'
+            className="product-set-recurrence-icon-calendar"
           />
-          <span className='product-set-recurrence-title d-flex flex-grow-1'>
+          <span className="product-set-recurrence-title d-flex flex-grow-1">
             {formatDate(menuRecurrence.startDate, {
               dateStyle: 'medium',
             })}{' '}
           </span>
 
           <div
-            className='d-inline-flex'
-            role='button'
+            className="d-inline-flex"
+            role="button"
             tabIndex={0}
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
             <FaEllipsisH
               size={16}
-              className='product-set-recurrence-icon-more'
+              className="product-set-recurrence-icon-more"
             />
           </div>
         </span>
-        <span className='product-set-recurrence-description'>
+        <span className="product-set-recurrence-description">
           {formatDate(menuRecurrence.startDate, {
             dateStyle: 'medium',
           })}{' '}

package/src/product-set/control/TutorialGifCard.tsx

@@ -24,38 +24,38 @@ const TutorialGifCard = ({
   return (
     <>
       <Card className={`tutorial-card ${!isVisible && 'hidden'}`}>
-        <Card.Header className='tutorial-card-header'>
+        <Card.Header className="tutorial-card-header">
           <div>
             <FaCheck
-              color='white'
-              className='rounded product-set-item-icon'
+              color="white"
+              className="rounded product-set-item-icon"
               size={14}
             />
             <span>{t('bookedTopTip')}</span>
           </div>
           <button
-            className='border-0'
+            className="border-0"
             onClick={() => setIsVisible(false)}
-            type='button'
+            type="button"
           >
             <span>{t('gotIt')}</span>
-            <FaTimes size={18} className='rounded tutorial-close-icon p-1' />
+            <FaTimes size={18} className="rounded tutorial-close-icon p-1" />
           </button>
         </Card.Header>
-        <Card.Body className='tutorial-card-body'>
+        <Card.Body className="tutorial-card-body">
           <p>
             {t(isOverrides ? 'buildOverrideProductSet' : 'buildProductSet')}
           </p>
           <span>
             {t(isOverrides ? 'buildOverrideRules' : 'buildProductSetDesc')}
           </span>
-          {tutorialAsset && <Image src={tutorialAsset} alt='Tutorial Gif' />}
+          {tutorialAsset && <Image src={tutorialAsset} alt="Tutorial Gif" />}
         </Card.Body>
       </Card>
       <Button
-        type='button'
+        type="button"
         onClick={() => setIsVisible(true)}
-        className='mb-4'
+        className="mb-4"
         style={{ display: !isVisible ? 'block' : 'none' }}
       >
         <span>{t('hint')}</span>

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

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

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'
@@ -12,7 +12,6 @@ import { isEqual } from 'lodash'
 import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
-import { transformErrorToMessage } from '@licklist/plugins'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -23,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
@@ -90,7 +84,6 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext()
-  const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -128,15 +121,6 @@ export function ProductSetForm({
     if (!serverErrors) {
       return
     }
-    if (!Array.isArray(serverErrors)) {
-      setErrorMessage(transformErrorToMessage(serverErrors))
-      return
-    }
-
-    if (Array.isArray(serverErrors) && serverErrors[0]) {
-      setErrorMessage(serverErrors[0])
-    }
-
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
 
@@ -172,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>
@@ -207,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),
                         )}
@@ -225,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>
     </>