@licklist/design 0.71.18-dev.9 → 0.71.18

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -23,7 +23,7 @@ const paymentNotProcessedSummary = ({
     ? getExternalPaymentDetail(paymentDetail)
     : undefined
 
-  const total = order?.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
+  const total = calculateTotalPrice(order, externalPaymentDetail)
 
   const summaryItems: SummaryItem[] = [
     {
@@ -58,10 +58,9 @@ const processedPaymentSummary = ({
           price: getPaymentValueByType(order.payments, key),
         }))
 
-  const total = order.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
+  const total = calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
-
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -59,19 +59,20 @@ export const PaymentStatusPage = ({
 
   if (isLoading) return <LoaderIndicator isLoaded={false} />
 
-  const orderCartAmountByFormValues = cartSumByOrderProducts({
-    orderProducts:
-      bookingSummaryProps?.formValues &&
-      Object.values(bookingSummaryProps?.formValues),
-  })
-  const orderTotalAmountByFormValues = cartSumByOrderProducts({
-    orderProducts:
-      bookingSummaryProps?.formValues &&
-      Object.values(bookingSummaryProps?.formValues),
-    isTotalSum: true,
-  })
-  const hasRemaingToPay =
-    orderTotalAmountByFormValues > orderCartAmountByFormValues
+
+const orderCartAmountByFormValues = cartSumByOrderProducts({
+  orderProducts:
+    bookingSummaryProps?.formValues &&
+    Object.values(bookingSummaryProps?.formValues),
+});
+const orderTotalAmountByFormValues = cartSumByOrderProducts({
+  orderProducts:
+    bookingSummaryProps?.formValues &&
+    Object.values(bookingSummaryProps?.formValues),
+  isTotalSum: true,
+});
+const hasRemaingToPay =
+  orderTotalAmountByFormValues > orderCartAmountByFormValues;
 
   // User can fill promocode only in iframe appcliation.
   // It didn't possible via payment link. This check will
@@ -80,9 +81,9 @@ export const PaymentStatusPage = ({
   // For payment status page booking summary props can be empty
   // so we should also check for them
   const isCalculatedAmountGreaterThanOrderAmount =
-    !hasRemaingToPay &&
-    bookingSummaryProps &&
-    orderCartAmountByFormValues > totalAmount
+  !hasRemaingToPay &&
+  bookingSummaryProps &&
+  orderCartAmountByFormValues > totalAmount;
 
   return (
     <Page
@@ -139,7 +140,7 @@ export const PaymentStatusPage = ({
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                          label={t(hasRemaingToPay ? 'payNow' : 'total')}
+                        label={t(hasRemaingToPay ? "payNow" : "total")}
                           amount={
                             orderCartAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
@@ -158,9 +159,9 @@ export const PaymentStatusPage = ({
                           (bookingSummaryProps?.transactionFee || 0)
                         }
                       />
-                      {hasRemaingToPay && (
+                          {hasRemaingToPay && (
                         <SummaryTotalBlock
-                          label={t('remaining')}
+                          label={t("remaining")}
                           amount={
                             orderTotalAmountByFormValues -
                             orderCartAmountByFormValues

package/src/iframe/ryft/utils/ryft-form.ts

@@ -61,22 +61,20 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
-  const payIframe = document.getElementById('ryft-pay-iframe')
+  const payIframe = document.getElementById("ryft-pay-iframe");
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? 'block' : 'none'
+      formBox.style.display = isDisableButton ? "block" : "none"
     }
 
     const googleButton = document.getElementById(
       'gpay-button-online-api-id',
     ) as HTMLButtonElement
-    const appleButton = document.getElementById(
-      'ryft-pay-apple-pay-button',
-    ) as HTMLButtonElement
+    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -88,6 +86,7 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
+    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -35,8 +35,6 @@ export function EmailTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
-        {/* TODO fix issue react router types
-      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,7 +434,6 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
-                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -33,8 +33,6 @@ export function SmsTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
-        {/* TODO fix issue react router types
-      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal

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

@@ -198,8 +198,7 @@ export const DateAndRecurrenceInput = ({
     move(prevIndex, nextIndex)
   }
 
-  const errorMessage =
-    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
+  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
 
   useEffect(() => {
     if (fields.length) {
@@ -309,7 +308,9 @@ export const DateAndRecurrenceInput = ({
             })}
           />
 
-          <div className='manual-form-error'>{errorMessage}</div>
+          <div className='manual-form-error'>
+            {errorMessage}
+          </div>
         </div>
       </OverlayTrigger>
     </Form.Group>

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

@@ -195,8 +195,7 @@ export const DateInput = ({
     }, 100)
   }
 
-  const errorMessage =
-    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
+  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
 
   return (
     <Form.Group>
@@ -285,7 +284,9 @@ export const DateInput = ({
             })}
           />
 
-          <div className='manual-form-error'>{errorMessage}</div>
+          <div className='manual-form-error'>
+            {errorMessage}
+          </div>
         </div>
       </OverlayTrigger>
     </Form.Group>

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
@@ -257,8 +229,6 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type]
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -303,12 +273,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}

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

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

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,

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

@@ -49,8 +49,6 @@ const getDefaultProductValue = (sort: number): Product => ({
   maxQuantity: null,
   totalQuantity: 0,
   isAvailable: true,
-  modifiersSet: [],
-  modifiersSetsId: [],
   isSoldOut: false,
   isRequired: false,
   isUnlimited: false,
@@ -141,16 +139,6 @@ export function ProductsControl({
     ],
   })
 
-  const modifierSets = useWatch({
-    control,
-    name: [
-      ...fields.map(
-        (_, index) =>
-          `${productControlFieldName}.${index}.modifiersSet` as const,
-      ),
-    ],
-  })
-
   const categoryProductErrors =
     errors?.steps?.[stepIndex]?.productCategories?.[productCategoryIndex]
       ?.products
@@ -211,7 +199,6 @@ export function ProductsControl({
             : isOverrides && !!product.originalProductId
 
           const isNewProductOverrides = isCreateNewOverrides && !!product.id
-          const modifiersSets = modifierSets[index]?.length || 0
 
           return (
             <Controller
@@ -239,26 +226,21 @@ export function ProductsControl({
                   edit={() => edit(index)}
                   secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
                   subTitle={
-                    <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 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>
                   }
                   modalLabel={t('addNewProduct')}

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,7 +33,7 @@ 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]: {

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

@@ -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/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,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}

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

@@ -7,18 +7,15 @@ 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']
@@ -46,7 +43,6 @@ type ProductSetContextProviderProps = PropsWithChildren<
 export function ProductSetContextProvider({
   children,
   productGroupList = [],
-  modifiersSetList =[],
   providerHasMap = false,
   venueMapSets = [],
   providerHasBookingManagement,
@@ -66,7 +62,6 @@ export function ProductSetContextProvider({
         isLoading: loading,
         setLoading,
         productGroupList,
-        modifiersSetList,
         providerHasMap,
         venueMapSets,
         providerHasBookingManagement,

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

@@ -34,13 +34,12 @@ 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'
@@ -67,14 +66,6 @@ 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
@@ -98,8 +89,6 @@ export interface ProductControlValues
   hasSpecialNotes: boolean
   minSpend?: number | null
   type?: ProductType
-  modifiersSetsId?: Array<ModifiersSet>
-  modifiersSet?: Array<ModifiersSet>
   weight?: number
   tierId?: number
   images: Image[] | null
@@ -123,7 +112,6 @@ export interface ProductControlProps<T>
   hasTicket?: boolean
   categoryType?: CategoryType
   isOverrides?: boolean
-
 }
 
 export function ProductControl<T extends FormValues>({
@@ -139,7 +127,6 @@ export function ProductControl<T extends FormValues>({
   categoryType,
   isOverrides = false,
 }: ProductControlProps<T>) {
-
   const {
     register,
     control,
@@ -149,16 +136,14 @@ export function ProductControl<T extends FormValues>({
     watch,
   } = useFormContext<T>()
 
-  const { setLoading, modifiersSetList } = useContext(ProductSetLoadingContext)
+  const { setLoading } = 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()
 
@@ -216,7 +201,6 @@ export function ProductControl<T extends FormValues>({
     setInitialImages(formImages as Image[])
   }, [getValues, setInitialImages, fieldNamePrefix])
 
-
   useEffect(() => {
     if (Array.isArray(images)) {
       setValue(
@@ -229,9 +213,6 @@ 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>
@@ -374,22 +355,6 @@ 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 { useContext } from 'react'
+import React, { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'