@licklist/design 0.69.4 → 0.69.5

package/dist/product-set/form/ProductSetForm.js

@@ -5,6 +5,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService';
 import { isEqual } from 'lodash';
+import { transformErrorToMessage } from '@licklist/plugins';
 import { Dialog } from '../../modals/dialog/Dialog.js';
 import { useDialogContext } from '../../modals/dialog/DialogContext.js';
 import { ProductSetControl } from '../control/ProductSetControl.js';
@@ -142,6 +143,13 @@ function ProductSetForm(_param) {
         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,

package/dist/product-set/form/ProductSetNameControl.d.ts

@@ -0,0 +1,6 @@
+export declare const ProductSetNameControl: ({ value, onChange, error, }: {
+    value: string;
+    onChange: (value: string) => void;
+    error?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductSetNameControl.d.ts.map

package/dist/product-set/form/ProductSetNameControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSetNameControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/ProductSetNameControl.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,gCAI/B;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,4CAeA,CAAA"}

package/dist/product-set/form/ProductSetNameControl.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+var ProductSetNameControl = function(param) {
+    var value = param.value, onChange = param.onChange, error = param.error;
+    var t = useTranslation([
+        'Design'
+    ]).t;
+    return /*#__PURE__*/ jsxs(Form.Group, {
+        children: [
+            /*#__PURE__*/ jsxs(Form.Label, {
+                children: [
+                    t('Design:ProductSetName'),
+                    "*"
+                ]
+            }),
+            /*#__PURE__*/ jsx(Form.Control, {
+                value: value,
+                maxLength: 255,
+                onChange: function(e) {
+                    return onChange(e.target.value);
+                },
+                placeholder: t('Design:placeholderProductSetName'),
+                isInvalid: Boolean(error)
+            }),
+            /*#__PURE__*/ jsx(Form.Control.Feedback, {
+                type: "invalid",
+                children: error
+            })
+        ]
+    });
+};
+
+export { ProductSetNameControl };

package/dist/product-set/form/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ProductSetForm';
+export * from './ProductSetNameControl';
 //# sourceMappingURL=index.d.ts.map

package/dist/product-set/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA"}

package/dist/product-set/utils/index.d.ts

@@ -2,6 +2,7 @@ import { EmailTemplate } from '@licklist/core/dist/DataMapper/Notification/Email
 import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper';
 import { TFunction } from 'react-i18next';
 import { UseFormSetError } from 'react-hook-form';
+import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper';
 import { TemplateItem } from '../control/ProductSetControl';
 import { ProductSetFormValues } from '../form/ProductSetForm';
 interface CheckAvailableTimesErrors {
@@ -9,11 +10,17 @@ interface CheckAvailableTimesErrors {
     setError: UseFormSetError<ProductSetFormValues>;
     t: TFunction;
 }
+export interface MenuTypeheadItem {
+    id: number;
+    label: string;
+    value: number;
+}
 export declare const moveArrayElements: <T>(array: T[], prevIndex: number, nextIndex: number) => T[];
 export declare const sortArrayByIndex: <T>(array: T[]) => (T & {
     sort: number;
 })[];
 export declare const getFilteredTemplates: (templates?: EmailTemplate[] | SmsTemplate[], formTemplates?: TemplateItem[]) => TemplateItem[] | undefined;
 export declare const checkAvailableTimesErrors: ({ values, setError, t, }: CheckAvailableTimesErrors) => boolean;
+export declare const getTypeHeadItemsFromMenus: (menus?: (ProductSet | ProductSetFormValues)[]) => MenuTypeheadItem[];
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/product-set/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,mEAAmE,CAAA;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,UAAU,yBAAyB;IACjC,MAAM,EAAE,oBAAoB,CAAA;IAC5B,QAAQ,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAA;IAC/C,CAAC,EAAE,SAAS,CAAA;CACb;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAC1B,CAAC,EAAE,aACC,MAAM,aACN,MAAM,QAQlB,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,CAAC,EAAE;;IACmB,CAAA;AAEjE,eAAO,MAAM,oBAAoB,eACnB,aAAa,EAAE,GAAG,WAAW,EAAE,kBAC3B,YAAY,EAAE,KAC7B,YAAY,EAAE,GAAG,SAmBnB,CAAA;AAED,eAAO,MAAM,yBAAyB,6BAInC,yBAAyB,YA0B3B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,mEAAmE,CAAA;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAA;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,UAAU,yBAAyB;IACjC,MAAM,EAAE,oBAAoB,CAAA;IAC5B,QAAQ,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAA;IAC/C,CAAC,EAAE,SAAS,CAAA;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AACD,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAC1B,CAAC,EAAE,aACC,MAAM,aACN,MAAM,QAQlB,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,CAAC,EAAE;;IACmB,CAAA;AAEjE,eAAO,MAAM,oBAAoB,eACnB,aAAa,EAAE,GAAG,WAAW,EAAE,kBAC3B,YAAY,EAAE,KAC7B,YAAY,EAAE,GAAG,SAmBnB,CAAA;AAED,eAAO,MAAM,yBAAyB,6BAInC,yBAAyB,YA0B3B,CAAA;AAED,eAAO,MAAM,yBAAyB,WAC5B,CAAC,UAAU,GAAG,oBAAoB,CAAC,EAAE,KAC5C,gBAAgB,EACwD,CAAA"}

package/dist/product-set/utils/index.js

@@ -136,5 +136,14 @@ var checkAvailableTimesErrors = function(param) {
     });
     return hasError;
 };
+var getTypeHeadItemsFromMenus = function(menus) {
+    return menus === null || menus === void 0 ? void 0 : menus.map(function(menu) {
+        return {
+            id: menu.id,
+            value: menu.id,
+            label: menu.name
+        };
+    });
+};
 
-export { checkAvailableTimesErrors, getFilteredTemplates, moveArrayElements, sortArrayByIndex };
+export { checkAvailableTimesErrors, getFilteredTemplates, getTypeHeadItemsFromMenus, moveArrayElements, sortArrayByIndex };

package/dist/typeahead/Typeahead.d.ts

@@ -1,3 +1,4 @@
+import { CSSObjectWithLabel } from 'react-select';
 export type TypeaheadOptions = {
     id: number | string;
     value: any;
@@ -8,11 +9,14 @@ export interface TypeaheadProps {
     placeholder: string;
     isRequired?: boolean;
     name: string;
+    value?: TypeaheadOptions;
     isMultipleChoise?: boolean;
     noOptionsMessage: string;
     isInvalid?: boolean;
     isCouponForm?: boolean;
+    containerStyles?: CSSObjectWithLabel;
+    onChangeValue?: (value: TypeaheadOptions) => void;
 }
-declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, isCouponForm, noOptionsMessage, isInvalid, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, value, onChangeValue, containerStyles, isCouponForm, noOptionsMessage, isInvalid, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
 export { Typeahead };
 //# sourceMappingURL=Typeahead.d.ts.map

package/dist/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,YAAoB,EACpB,gBAAqB,EACrB,SAAS,GACV,EAAE,cAAc,2CA4ChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAGzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,gBAAgB,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,kBAAkB,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAClD;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,KAAK,EACL,aAAa,EACb,eAAe,EACf,YAAoB,EACpB,gBAAqB,EACrB,SAAS,GACV,EAAE,cAAc,2CAoDhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/typeahead/Typeahead.js

@@ -31,7 +31,7 @@ function _object_spread(target) {
     return target;
 }
 function Typeahead(param) {
-    var options = param.options, placeholder = param.placeholder, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, isMultipleChoise = param.isMultipleChoise, _param_name = param.name, name = _param_name === void 0 ? '' : _param_name, _param_isCouponForm = param.isCouponForm, isCouponForm = _param_isCouponForm === void 0 ? false : _param_isCouponForm, _param_noOptionsMessage = param.noOptionsMessage, noOptionsMessage = _param_noOptionsMessage === void 0 ? '' : _param_noOptionsMessage, isInvalid = param.isInvalid;
+    var options = param.options, placeholder = param.placeholder, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, isMultipleChoise = param.isMultipleChoise, _param_name = param.name, name = _param_name === void 0 ? '' : _param_name, value = param.value, onChangeValue = param.onChangeValue, containerStyles = param.containerStyles, _param_isCouponForm = param.isCouponForm, isCouponForm = _param_isCouponForm === void 0 ? false : _param_isCouponForm, _param_noOptionsMessage = param.noOptionsMessage, noOptionsMessage = _param_noOptionsMessage === void 0 ? '' : _param_noOptionsMessage, isInvalid = param.isInvalid;
     var control = useFormContext().control;
     var getStyle = function() {
         var couponFormStyle = isCouponForm ? {
@@ -53,14 +53,21 @@ function Typeahead(param) {
                 var field = param.field;
                 return /*#__PURE__*/ jsx(Select, {
                     placeholder: placeholder,
-                    value: field.value,
+                    value: value !== null && value !== void 0 ? value : field.value,
                     isMulti: isMultipleChoise,
                     styles: {
+                        container: function(base) {
+                            return _object_spread({}, base, containerStyles);
+                        },
                         control: function(base) {
                             return _object_spread({}, base, getStyle());
                         }
                     },
                     onChange: function(value) {
+                        if (onChangeValue) {
+                            onChangeValue(value);
+                            return;
+                        }
                         field.onChange(value);
                     },
                     options: options,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.69.4",
+  "version": "0.69.5",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -44,7 +44,7 @@
   "peerDependencies": {
     "@licklist/core": "0.30.3",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.1",
+    "@licklist/plugins": "0.33.4",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -63,7 +63,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@licklist/core": "0.30.3",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.1",
+    "@licklist/plugins": "0.33.4",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -206,4 +206,4 @@
     "node": "20.9.0",
     "yarn": "4.4.0"
   }
-}
+}

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -64,6 +64,7 @@ export interface EditEventFormProps extends HasPermissionProp {
   isExternalPaymentLinkEnabled?: boolean
   timeZone: string
   eventProductSet?: ProductSet
+  overrideNameError?: string
 }
 
 const eventImageTypes = {
@@ -85,6 +86,7 @@ export const EditEventForm = ({
   isExternalPaymentLinkEnabled,
   timeZone,
   eventProductSet,
+  overrideNameError,
 }: EditEventFormProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
 
@@ -406,6 +408,7 @@ export const EditEventForm = ({
             showEditProductSet={showEditProductSet}
             timeZone={timeZone}
             eventProductSet={eventProductSet}
+            overrideNameError={overrideNameError}
           />
 
           {hasPermission && !showEditProductSet && (

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -5,9 +5,11 @@ import { useId } from '@react-aria/utils'
 import { Controller, useFormContext } from 'react-hook-form'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
+import { getTypeHeadItemsFromMenus } from '../../../../product-set/utils'
 import { ConfirmModal } from '../../../../modals/confirmation/ConfirmModal'
 import { EditEventFormValues } from '../EditEventForm/EditEventForm'
 import { EditEventProductSet } from './component/EditEventProductSet'
+import { Typeahead } from '../../../../typeahead'
 
 interface SelectEventProductSetProps extends HasPermissionProp {
   productSets?: ProductSet[]
@@ -17,6 +19,7 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setEditProductSetId: (value: string) => void
   timeZone: string
   eventProductSet?: ProductSet
+  overrideNameError?: string
 }
 
 export const SelectEventProductSet = ({
@@ -27,6 +30,7 @@ export const SelectEventProductSet = ({
   setShowEditProductSet,
   timeZone,
   eventProductSet,
+  overrideNameError,
 }: SelectEventProductSetProps) => {
   const productSets = eventProductSet
     ? [..._productSets, eventProductSet]
@@ -48,6 +52,21 @@ export const SelectEventProductSet = ({
   const productSetId = watch('productSetId')
   const editedProductSet = watch('editedProductSet')
 
+  const typeheadValues = getTypeHeadItemsFromMenus(
+    editedProductSet
+      ? productSets.map((productSet) => {
+          if (productSet.id === editedProductSet.id) {
+            return editedProductSet
+          }
+
+          return productSet
+        })
+      : productSets,
+  )
+  const selectedProductSetTypeheadValue = productSetId
+    ? typeheadValues?.find((typeheadValue) => typeheadValue.id === productSetId)
+    : undefined
+
   const onEditProductSet = useCallback(
     () => {
       setEditProductSetId(String(productSetId))
@@ -101,6 +120,7 @@ export const SelectEventProductSet = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onSubmit = (value: EditEventFormValues['editedProductSet']) => {
     setShowEditProductSet(false)
+    setValue('productSetId', value.id)
     setValue('editedProductSet', value)
   }
 
@@ -116,93 +136,73 @@ export const SelectEventProductSet = ({
           <Controller
             control={control}
             name='productSetId'
-            render={({ field }) => {
-              const fieldValue = String(field.value)
-              return (
-                <>
-                  <div className='d-flex align-items-center flex-row w-100'>
-                    <ConfirmModal>
-                      {(confirm) => (
-                        <Form.Control
-                          as='select'
-                          onChange={(e) =>
-                            onChangeProductSet(Number(e.target.value), confirm)
-                          }
-                          isInvalid={Boolean(errors.productSetId)}
-                          value={fieldValue}
-                        >
-                          <option value='' hidden>
-                            {t('Design:chooseProductSet')}
-                          </option>
-                          {productSets?.map((productSet) => {
-                            const isCurrentEditedProductSet =
-                              editedProductSet &&
-                              editedProductSet?.id === productSet?.id
-                            return (
-                              <option key={productSet.id} value={productSet.id}>
-                                {isCurrentEditedProductSet ||
-                                productSet.isOverride
-                                  ? `[${t('edited')}] ${
-                                      isCurrentEditedProductSet
-                                        ? editedProductSet?.name
-                                        : productSet.name
-                                    }`
-                                  : productSet.name}
-                              </option>
-                            )
-                          })}
-                        </Form.Control>
-                      )}
-                    </ConfirmModal>
-
-                    <div className='buttons-container'>
-                      {!showEditProductSet && !editedProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button mr-4'
-                          onClick={handleCreateProductSet}
-                        >
-                          {t('addNewProductSet')}
-                        </Button>
-                      )}
-                      {showOverrideProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button'
-                          onClick={onEditProductSet}
-                        >
-                          {isOverrideProductSet
-                            ? t('editOverrides')
-                            : t('editProductSet')}
-                        </Button>
-                      )}
-                      {showEditProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button'
-                          onClick={revertEditProductSet}
-                        >
-                          {t('cancelAndRevert')}
-                        </Button>
-                      )}
-                      {!showEditProductSet && editedProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button ml-4 text-danger'
-                          onClick={revertEditProductSet}
-                        >
-                          {t('undoChanges')}
-                        </Button>
-                      )}
-                    </div>
+            render={() => (
+              <>
+                <div className='d-flex align-items-center flex-row w-100'>
+                  <ConfirmModal>
+                    {(confirm) => (
+                      <Typeahead
+                        name='productSetId'
+                        value={selectedProductSetTypeheadValue}
+                        containerStyles={{ width: '100%' }}
+                        onChangeValue={(typeheadValue) => {
+                          onChangeProductSet(Number(typeheadValue.id), confirm)
+                        }}
+                        isInvalid={!!overrideNameError}
+                        options={typeheadValues}
+                        placeholder={t('Design:choose')}
+                        noOptionsMessage={t('Design:noAvailableProductSets')}
+                      />
+                    )}
+                  </ConfirmModal>
+
+                  <div className='buttons-container'>
+                    {!showEditProductSet && !editedProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button mr-4'
+                        onClick={handleCreateProductSet}
+                      >
+                        {t('addNewProductSet')}
+                      </Button>
+                    )}
+                    {showOverrideProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button'
+                        onClick={onEditProductSet}
+                      >
+                        {isOverrideProductSet
+                          ? t('editOverrides')
+                          : t('editProductSet')}
+                      </Button>
+                    )}
+                    {showEditProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button'
+                        onClick={revertEditProductSet}
+                      >
+                        {t('cancelAndRevert')}
+                      </Button>
+                    )}
+                    {!showEditProductSet && editedProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button ml-4 text-danger'
+                        onClick={revertEditProductSet}
+                      >
+                        {t('undoChanges')}
+                      </Button>
+                    )}
                   </div>
+                </div>
 
-                  <Form.Control.Feedback type='invalid'>
-                    {errors?.productSetId?.message}
-                  </Form.Control.Feedback>
-                </>
-              )
-            }}
+                <div className='manual-form-error'>
+                  {errors?.productSetId?.message || overrideNameError}
+                </div>
+              </>
+            )}
           />
         </Form.Group>
       </div>
@@ -213,6 +213,7 @@ export const SelectEventProductSet = ({
             productSetId === editedProductSet?.id && editedProductSet
           }
           timeZone={timeZone}
+          overrideNameError={overrideNameError}
         />
       )}
     </>

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -23,12 +23,14 @@ interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues['editedProductSet']) => void
   defaultValues?: EditEventFormValues['editedProductSet']
   timeZone: string
+  overrideNameError?: string
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
   timeZone,
+  overrideNameError,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
     companyId: string
@@ -64,7 +66,15 @@ export const EditEventProductSet = ({
     mode: 'onChange',
   })
 
-  const { reset, handleSubmit, watch } = form
+  const { reset, handleSubmit, watch, setError } = form
+
+  useEffect(() => {
+    if (!overrideNameError) {
+      return
+    }
+    setError('name', { message: overrideNameError })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overrideNameError])
 
   const formValues = watch()
 

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,6 +20,9 @@ export type ConfirmModalTypes =
 export interface ConfirmModalProps {
   type?: ConfirmModalTypes
   children?: (confirm: (action: ConfirmAction) => void) => ReactNode
+  // confirm function  memoize the callback function. It's an alternative function
+  confirmationHandler?: () => Promise<boolean | undefined>
+  disabledButtons?: boolean
   title?: string
   content?: string | ReactNode
   onClose?: () => void
@@ -37,7 +40,9 @@ export function ConfirmModal({
   type = 'default',
   children,
   onClose,
+  confirmationHandler,
   title,
+  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -52,10 +57,16 @@ export function ConfirmModal({
     setIsOpen(() => true)
   }
 
-  const handleConfirmation = (e) => {
+  const handleConfirmation = async (e) => {
     e.stopPropagation()
-    if (!actionRef.current) return
-
+    if (!actionRef.current && !confirmationHandler) return
+    if (confirmationHandler) {
+      const res = await confirmationHandler()
+      if (res) {
+        setIsOpen(() => false)
+      }
+      return
+    }
     actionRef.current()
     setIsOpen(() => false)
   }
@@ -88,6 +99,7 @@ export function ConfirmModal({
           <Button
             variant='danger'
             className='btn-sm rounded'
+            disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
@@ -105,12 +117,14 @@ export function ConfirmModal({
                   variant='outline'
                   className='cancel-button'
                   onClick={handleClose}
+                  disabled={disabledButtons}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('cancel')}
                 </Button>
                 <Button
                   variant='danger'
+                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -121,6 +135,7 @@ export function ConfirmModal({
               <>
                 <Button
                   variant='danger'
+                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
@@ -128,6 +143,7 @@ export function ConfirmModal({
                 </Button>
                 <Button
                   variant='success'
+                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >