@licklist/design 0.71.24 → 0.72.0-dev.0

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

@@ -6,13 +6,14 @@ import { TFunction, useTranslation } from 'react-i18next'
 import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper'
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 
 import { isEqual } from 'lodash'
 // eslint-disable-next-line max-len
 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 { transformErrorToMessage } from '@licklist/plugins/dist/utils/error'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -22,18 +23,26 @@ import {
 import { Step } from '../types'
 import { ProductSetContextProvider, ProductSetLoadingContext } from './context'
 import { SelectItem } from '../../types/generic/SelectItem'
-import { checkAvailableTimesErrors, getFilteredTemplates } from '../utils'
+import {
+  checkAvailableTimesErrors,
+  updateModifiersSetAtProductSetForm,
+  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,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean
@@ -58,6 +67,7 @@ export interface ProductSetFormProps
   saleDeadline?: number
   isCreateNewOverrides?: boolean
   timeZone: string
+  modifiersSetList?: ModifierSet[]
 }
 
 export function ProductSetForm({
@@ -67,6 +77,7 @@ export function ProductSetForm({
   onSubmitAndRedirect,
   onSubmitNoRedirect,
   productGroupList,
+  modifiersSetList,
   serverErrors,
   providerHasMap = false,
   venueMapSets = [],
@@ -91,7 +102,7 @@ export function ProductSetForm({
   const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
-    defaultValues,
+    defaultValues: updateModifiersSetAtProductSetForm(defaultValues),
     mode: 'onChange',
   })
 
@@ -118,7 +129,7 @@ export function ProductSetForm({
     if (!defaultValues || isEqual(defaultValues, formValues)) {
       return
     }
-    reset(defaultValues)
+    reset(updateModifiersSetAtProductSetForm(defaultValues))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValues])
 
@@ -158,6 +169,7 @@ export function ProductSetForm({
     <ProductSetContextProvider
       productGroupList={productGroupList}
       providerHasMap={providerHasMap}
+      modifiersSetList={modifiersSetList}
       venueMapSets={venueMapSets}
       providerHasBookingManagement={providerHasBookingManagement}
       zones={zones}

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

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React, { useContext, useState } from 'react'
-
+import { useContext, useState } from 'react'
 import {
   ArrayPath,
   Controller,

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

@@ -49,6 +49,8 @@ const getDefaultProductValue = (sort: number): Product => ({
   maxQuantity: null,
   totalQuantity: 0,
   isAvailable: true,
+  modifiersSet: [],
+  modifiersSetsId: [],
   isSoldOut: false,
   isRequired: false,
   isUnlimited: false,
@@ -139,6 +141,16 @@ export function ProductsControl({
     ],
   })
 
+  const modifierSets = useWatch({
+    control,
+    name: [
+      ...fields.map(
+        (_, index) =>
+          `${productControlFieldName}.${index}.modifiersSet` as const,
+      ),
+    ],
+  })
+
   const categoryProductErrors =
     errors?.steps?.[stepIndex]?.productCategories?.[productCategoryIndex]
       ?.products
@@ -199,6 +211,7 @@ export function ProductsControl({
             : isOverrides && !!product.originalProductId
 
           const isNewProductOverrides = isCreateNewOverrides && !!product.id
+          const modifiersSets = modifierSets[index]?.length || 0
 
           return (
             <Controller
@@ -226,21 +239,26 @@ export function ProductsControl({
                   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' />
-                      <span>
-                        {`£${prices[index]} ${t('each')} - ${t('qty')}:${
-                          !isUnlimitedQuantities[index]
-                            ? ` ${quantities[index]}`
-                            : t(' unlimited')
-                        } ${
-                          !isUnlimitedQuantities[index]
-                            ? ` - ${t('possibleRevenue')} £${
-                                prices[index] * quantities[index]
-                              }`
-                            : ''
-                        } `}
-                      </span>
+                    <div className='d-flex justify-content-between'>
+                      <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]
+                              ? ` ${quantities[index]}`
+                              : t(' unlimited')
+                          } ${
+                            !isUnlimitedQuantities[index]
+                              ? ` - ${t('possibleRevenue')} £${
+                                  prices[index] * quantities[index]
+                                }`
+                              : ''
+                          } `}
+                        </span>
+                      </div>
+                      {!!modifiersSets && (
+                        <Badge className='modifier-badge'>{`${modifiersSets} ${t('modifiersSets')}`}</Badge>
+                      )}
                     </div>
                   }
                   modalLabel={t('addNewProduct')}

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

@@ -70,9 +70,6 @@ export function SubProductsControl({
                   images: subProducts[index]?.images as Image[],
                 }
                 // @ts-expect-error TS2345
-                // @TODO fix prod type error
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 append(subProductCopy)
               }}
             />

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

@@ -3,9 +3,9 @@ import { Button } from 'react-bootstrap'
 import { VenueMap } from '@licklist/core/dist/DataMapper/Product/VenueMapDataMapper'
 import MediaService from '@licklist/plugins/dist/services/Media/MediaService'
 import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
+import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import { FullscreenModal } from '../../modals/fullscreen'
 import { EventVenueMap } from '../../events/event-venue-map'
-import { Product } from '../types'
 
 type VenueMapsControlProps = {
   venueMaps?: VenueMap[]
@@ -46,9 +46,6 @@ export const VenueMapsControl = ({
                             url={image.url}
                             name={name}
                             points={points}
-                            // @TODO fix prod type error
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
                             products={products}
                             pointProducts={pointProducts}
                             onPointProductsChange={onPointProductsChange}

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

@@ -7,15 +7,18 @@ import {
   Dispatch,
 } from 'react'
 import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper'
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 // eslint-disable-next-line max-len
 import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { SelectItem } from '../../types/generic/SelectItem'
 
+
 interface LoadingContext {
   isLoading: boolean
   setLoading: (loading: boolean) => void
   productGroupList?: SelectItem[]
+  modifiersSetList?: ModifierSet[] | null
   providerHasMap?: boolean | null
   venueMapSets?: VenueMapSet[]
   providerHasBookingManagement?: ProviderBookingManagementSetting['hasBookingManagement']
@@ -43,6 +46,7 @@ type ProductSetContextProviderProps = PropsWithChildren<
 export function ProductSetContextProvider({
   children,
   productGroupList = [],
+  modifiersSetList =[],
   providerHasMap = false,
   venueMapSets = [],
   providerHasBookingManagement,
@@ -62,6 +66,7 @@ export function ProductSetContextProvider({
         isLoading: loading,
         setLoading,
         productGroupList,
+        modifiersSetList,
         providerHasMap,
         venueMapSets,
         providerHasBookingManagement,

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

@@ -34,12 +34,13 @@ import {
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,
 } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { FaClipboard } from 'react-icons/fa'
+import { Typeahead } from 'src/typeahead'
+import { convertToTypeaheadOptions } from 'src/sales/coupon/utils'
 import { checkIfZoneCategory } from '@licklist/plugins'
 import { FileUpload } from '../../file-upload'
 import { BooleanSwitch } from '../../static'
@@ -66,6 +67,14 @@ import { ProductZoneControlValues } from '../product-zone'
 import { AdvancedOptions } from './advanced-options'
 import { ProductZonesControl } from '../form/ProductZonesControl'
 
+
+export interface ModifiersSet {
+  id: number
+  value?: string
+  name?: string
+  label?: string
+}
+
 // TO DO refactor this file
 // and add correct types
 export interface ProductControlValues
@@ -89,6 +98,8 @@ export interface ProductControlValues
   hasSpecialNotes: boolean
   minSpend?: number | null
   type?: ProductType
+  modifiersSetsId?: Array<ModifiersSet>
+  modifiersSet?: Array<ModifiersSet>
   weight?: number
   tierId?: number
   images: Image[] | null
@@ -112,6 +123,7 @@ export interface ProductControlProps<T>
   hasTicket?: boolean
   categoryType?: CategoryType
   isOverrides?: boolean
+
 }
 
 export function ProductControl<T extends FormValues>({
@@ -127,6 +139,7 @@ export function ProductControl<T extends FormValues>({
   categoryType,
   isOverrides = false,
 }: ProductControlProps<T>) {
+
   const {
     register,
     control,
@@ -136,14 +149,16 @@ export function ProductControl<T extends FormValues>({
     watch,
   } = useFormContext<T>()
 
-  const { setLoading } = useContext(ProductSetLoadingContext)
+  const { setLoading, modifiersSetList } = useContext(ProductSetLoadingContext)
   const { t } = useTranslation(['Design', 'Validation', 'ProductSet'])
   const [expanded, setExpanded] = useState(false)
+
   const [initialImages, setInitialImages] = useState<Image[] | null>(null)
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
   const isUnlimited = Boolean(
     watch(`${fieldNamePrefix}.isUnlimited` as Path<T>),
   )
+
   const advancedId = useId()
   const nameId = useId()
 
@@ -201,6 +216,7 @@ export function ProductControl<T extends FormValues>({
     setInitialImages(formImages as Image[])
   }, [getValues, setInitialImages, fieldNamePrefix])
 
+
   useEffect(() => {
     if (Array.isArray(images)) {
       setValue(
@@ -213,6 +229,9 @@ export function ProductControl<T extends FormValues>({
 
   const quantitySelector = quantityValue ?? '1'
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string]
+
+  const modifierList = convertToTypeaheadOptions(modifiersSetList)
+
   return (
     <>
       <Row>
@@ -355,6 +374,22 @@ export function ProductControl<T extends FormValues>({
           </Form.Group>
         </Col>
       </Row>
+      <Row>
+        <Col>
+          <Form.Group className='mb-3'>
+            <Form.Label>{t('Design:addModifierSet')}</Form.Label>
+            <Typeahead
+              name='modifierList'
+              options={modifierList}
+              {...register(`${fieldNamePrefix}.modifiersSet` as Path<T>)}
+              isMultipleChoise
+              isCouponForm
+              placeholder={t('Design:choose')}
+              noOptionsMessage={t('Design:noSelectedModifier')}
+            />
+          </Form.Group>
+        </Col>
+      </Row>
 
       <Row className='my-4 mx-0 d-flex flex-column'>
         {isZoneCategory && (

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -86,6 +86,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -129,6 +130,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -50,6 +50,7 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -91,6 +91,7 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
+                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -127,6 +128,7 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -59,6 +59,7 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
+                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,6 +111,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -165,6 +166,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,6 +85,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -143,6 +144,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,6 +69,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -221,6 +221,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -293,6 +294,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -353,6 +355,7 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
+                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -543,6 +546,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import { Col, Form, Row } from 'react-bootstrap'
 import {
   ArrayPath,

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

@@ -1,5 +1,7 @@
 import { EmailTemplate } from '@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper'
 import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper'
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
+import { convertToTypeaheadOptions } from 'src/sales/coupon/utils'
 import { TFunction } from 'react-i18next'
 import { UseFormSetError } from 'react-hook-form'
 import { checkIfZoneCategory } from '@licklist/plugins'
@@ -7,6 +9,7 @@ import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDat
 import { TemplateItem } from '../control/ProductSetControl'
 import { ProductSetFormValues } from '../form/ProductSetForm'
 
+
 interface CheckAvailableTimesErrors {
   values: ProductSetFormValues
   setError: UseFormSetError<ProductSetFormValues>
@@ -58,6 +61,22 @@ export const getFilteredTemplates = (
     }))
 }
 
+export  const updateModifiersSetAtProductSetForm = (data: ProductSetFormValues) => ({
+  ...data,
+  steps: data.steps.map(step => ({
+      ...step,
+      productCategories: step.productCategories.map(category => ({
+          ...category,
+          products: category.products.map(product => ({
+              ...product,
+              modifiersSet: product?.modifiersSet
+                  ? convertToTypeaheadOptions(product.modifiersSet as ModifierSet[])
+                  : [],
+          })),
+      })),
+  })),
+});
+
 export const checkAvailableTimesErrors = ({
   values,
   setError,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,6 +109,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/recurrence-input/RecurrenceInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DateTime } from 'luxon'
-import { useEffect, useReducer } from 'react'
+import { useEffect, useReducer, useState } from 'react'
 import RRule, { Frequency, Weekday } from 'rrule'
 import RecurrenceEndInput, { defaultOccurrences } from './RecurrenceEndInput'
 import RecurrenceIntervalAndFrequencyInput from './RecurrenceIntervalAndFrequencyInput'
@@ -39,10 +39,13 @@ export function RecurrenceInput({
     // TODO: unhardcode timezone
     () =>
       onChange(
-        RRule.optionsToString({ ...state, tzid: 'Europe/London' }).replace(
-          'RRULE:',
-          '',
-        ),
+        RRule.optionsToString({
+          freq: state.freq,
+          count: state.count,
+          interval: state.interval,
+          byweekday: state.byweekday,
+          tzid: 'Europe/London',
+        }).replace('RRULE:', ''),
       ),
     [state],
   )
@@ -54,8 +57,8 @@ export function RecurrenceInput({
         frequency={state.freq}
         onChange={({ interval, frequency }) => {
           updateState({
-            interval,
             freq: frequency,
+            interval,
             byweekday:
               frequency === state.freq
                 ? state.byweekday

package/src/recurring-date-picker-input/RecurrenceEndInput.tsx

@@ -91,6 +91,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/resource/form/components/CapacityControl.tsx

@@ -27,6 +27,7 @@ export const CapacityControl = ({ isLoading }: CapacityControlProps) => {
           required: true,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:capacity')}
         isInvalid={Boolean(errors.capacity)}
         disabled={isLoading}

package/src/resource/form/components/SortControl.tsx

@@ -27,6 +27,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}

package/src/sales/booking/results/components/ResultCard.tsx

@@ -20,8 +20,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void
 }
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,