@licklist/design 0.67.3-dev.1 → 0.67.3-dev.3

package/dist/product-set/control/ProductSetControl.js

@@ -1,12 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useEffect } from 'react';
 import { Row, Col, Form } from 'react-bootstrap';
 import { useFormContext, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { DateTime } from 'luxon';
 import { OPERATIONAL_COST_PROVIDER, OPERATIONAL_COST_CUSTOMER, RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY, RELY_ON_PEOPLE_PRODUCT_QUANTITY, RELY_ON_PEOPLE_QUANTITY, OPERATIONAL_COST_TYPES, RELY_ON_PEOPLE_TYPES } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper';
-import { DATE_MONTH_LOCALE_FORMAT } from '@licklist/core/dist/Config';
 import { useId } from '@react-aria/utils';
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService';
 import { ruleForUrlWithProtocol } from '@licklist/plugins/dist/validation/Rules/urlRule';
@@ -76,16 +73,15 @@ var OPERATIONAL_COST_TITLES = (_obj = {}, _define_property(_obj, OPERATIONAL_COS
 var _obj1;
 var RELY_ON_PEOPLE_TYPE_TITLES = (_obj1 = {}, _define_property(_obj1, RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY, "peopleProductCapacityQuantity"), _define_property(_obj1, RELY_ON_PEOPLE_PRODUCT_QUANTITY, "peopleProductQuantity"), _define_property(_obj1, RELY_ON_PEOPLE_QUANTITY, "peopleQuantity"), _obj1);
 function ProductSetControl(param) {
-    var companyName = param.companyName, isLoading = param.isLoading, _param_fee = param.fee, fee = _param_fee === void 0 ? "5%" : _param_fee, _param_fieldSets = param.fieldSets, fieldSets = _param_fieldSets === void 0 ? [] : _param_fieldSets, _param_emailTemplates = param.emailTemplates, emailTemplates = _param_emailTemplates === void 0 ? [] : _param_emailTemplates, _param_smsTemplates = param.smsTemplates, smsTemplates = _param_smsTemplates === void 0 ? [] : _param_smsTemplates, isEventEditProductSet = param.isEventEditProductSet, isCreateAction = param.isCreateAction, showEmailTemplate = param.showEmailTemplate, showSmsTemplate = param.showSmsTemplate, workHours = param.workHours, _param_providerHasBookingManagement = param.providerHasBookingManagement, providerHasBookingManagement = _param_providerHasBookingManagement === void 0 ? false : _param_providerHasBookingManagement, _param_isOverrides = param.isOverrides, isOverrides = _param_isOverrides === void 0 ? false : _param_isOverrides, occurrenceStartAtDate = param.occurrenceStartAtDate, _param_isCreateNewOverrides = param.isCreateNewOverrides, isCreateNewOverrides = _param_isCreateNewOverrides === void 0 ? false : _param_isCreateNewOverrides, timeZone = param.timeZone;
+    var companyName = param.companyName, isLoading = param.isLoading, _param_fee = param.fee, fee = _param_fee === void 0 ? "5%" : _param_fee, _param_fieldSets = param.fieldSets, fieldSets = _param_fieldSets === void 0 ? [] : _param_fieldSets, _param_emailTemplates = param.emailTemplates, emailTemplates = _param_emailTemplates === void 0 ? [] : _param_emailTemplates, _param_smsTemplates = param.smsTemplates, smsTemplates = _param_smsTemplates === void 0 ? [] : _param_smsTemplates, isEventEditProductSet = param.isEventEditProductSet, isCreateAction = param.isCreateAction, showEmailTemplate = param.showEmailTemplate, showSmsTemplate = param.showSmsTemplate, workHours = param.workHours, _param_providerHasBookingManagement = param.providerHasBookingManagement, providerHasBookingManagement = _param_providerHasBookingManagement === void 0 ? false : _param_providerHasBookingManagement, _param_isOverrides = param.isOverrides, isOverrides = _param_isOverrides === void 0 ? false : _param_isOverrides, _param_isCreateNewOverrides = param.isCreateNewOverrides, isCreateNewOverrides = _param_isCreateNewOverrides === void 0 ? false : _param_isCreateNewOverrides, timeZone = param.timeZone;
     var _errors_name;
     var t = useTranslation([
         "Design",
         "Validation",
         "Notification"
     ]).t;
-    var _useFormContext = useFormContext(), register = _useFormContext.register, control = _useFormContext.control, errors = _useFormContext.formState.errors, watch = _useFormContext.watch, setError = _useFormContext.setError, setValue = _useFormContext.setValue, clearErrors = _useFormContext.clearErrors;
+    var _useFormContext = useFormContext(), register = _useFormContext.register, control = _useFormContext.control, errors = _useFormContext.formState.errors, watch = _useFormContext.watch, setError = _useFormContext.setError, clearErrors = _useFormContext.clearErrors;
     var steps = watch("steps");
-    var productSetName = watch("name");
     var nameId = useId();
     var termsAndConditionsId = useId();
     var relyOnPeopleTypeId = useId();
@@ -98,16 +94,6 @@ function ProductSetControl(param) {
             return checkIfZoneCategory(category === null || category === void 0 ? void 0 : category.type);
         });
     });
-    useEffect(function() {
-        if (!occurrenceStartAtDate) return;
-        var eventStartDate = DateTime.fromISO(occurrenceStartAtDate);
-        var eventStart = eventStartDate.toFormat(DATE_MONTH_LOCALE_FORMAT);
-        setValue("name", "".concat(productSetName, " (").concat(eventStart, ")"));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        setValue,
-        occurrenceStartAtDate
-    ]);
     return /*#__PURE__*/ jsxs(Row, {
         className: "product-set-form ".concat(isEventEditProductSet && "event-edit-product-set"),
         children: [

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,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,4CAeA,CAAC"}

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,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC"}

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,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,mEAAmE,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,UAAU,yBAAyB;IACjC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAChD,CAAC,EAAE,SAAS,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAC1B,CAAC,EAAE,aACC,MAAM,aACN,MAAM,QAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,CAAC,EAAE;;IAE7C,CAAC;AAEF,eAAO,MAAM,oBAAoB,eACnB,aAAa,EAAE,GAAG,WAAW,EAAE,kBAC3B,YAAY,EAAE,KAC7B,YAAY,EAAE,GAAG,SAmBnB,CAAC;AAEF,eAAO,MAAM,yBAAyB,6BAInC,yBAAyB,YA0B3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product-set/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,mEAAmE,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAC;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,UAAU,yBAAyB;IACjC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAChD,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AACD,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAC1B,CAAC,EAAE,aACC,MAAM,aACN,MAAM,QAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,CAAC,EAAE;;IAE7C,CAAC;AAEF,eAAO,MAAM,oBAAoB,eACnB,aAAa,EAAE,GAAG,WAAW,EAAE,kBAC3B,YAAY,EAAE,KAC7B,YAAY,EAAE,GAAG,SAmBnB,CAAC;AAEF,eAAO,MAAM,yBAAyB,6BAInC,yBAAyB,YA0B3B,CAAC;AAEF,eAAO,MAAM,yBAAyB,WAC5B,CAAC,UAAU,GAAG,oBAAoB,CAAC,EAAE,KAC5C,gBAAgB,EACwD,CAAC"}

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,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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,CAAC"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACnD;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,CAAC"}

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.67.3-dev.1",
+  "version": "0.67.3-dev.3",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -201,4 +201,4 @@
     "yarn": "4.4.0"
   },
   "stableVersion": "0.66.7-dev.5"
-}
+}

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

@@ -124,7 +124,6 @@ export const EditEventForm = ({
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
   const productSetId = watch("productSetId");
-  const occurrenceStartAtDate = watch("start");
 
   const {
     images,
@@ -406,7 +405,6 @@ export const EditEventForm = ({
             setEditProductSetId={setEditProductSetId}
             setShowEditProductSet={setShowEditProductSet}
             showEditProductSet={showEditProductSet}
-            occurrenceStartAtDate={occurrenceStartAtDate}
             timeZone={timeZone}
           />
 

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[];
@@ -15,7 +17,6 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setShowEditProductSet: (value: boolean) => void;
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
-  occurrenceStartAtDate: string;
   timeZone: string;
 }
 
@@ -25,7 +26,6 @@ export const SelectEventProductSet = ({
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
-  occurrenceStartAtDate,
   timeZone,
 }: SelectEventProductSetProps) => {
   const { t } = useTranslation(["Design"]);
@@ -44,6 +44,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));
@@ -97,6 +112,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);
   };
 
@@ -112,49 +128,29 @@ export const SelectEventProductSet = ({
           <Controller
             control={control}
             name="productSetId"
-            render={({ field }) => {
-              const fieldValue = String(field.value);
+            render={() => {
               return (
                 <>
                   <div className="d-flex align-items-center flex-row w-100">
                     <ConfirmModal>
                       {(confirm) => {
                         return (
-                          <Form.Control
-                            as="select"
-                            onChange={(e) =>
+                          <Typeahead
+                            name="productSetId"
+                            value={selectedProductSetTypeheadValue}
+                            containerStyles={{ width: "100%" }}
+                            onChangeValue={(typeheadValue) => {
                               onChangeProductSet(
-                                Number(e.target.value),
+                                Number(typeheadValue.id),
                                 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>
+                            }}
+                            options={typeheadValues}
+                            placeholder={t("Design:choose")}
+                            noOptionsMessage={t(
+                              "Design:noAvailableProductSets",
+                            )}
+                          />
                         );
                       }}
                     </ConfirmModal>
@@ -213,7 +209,6 @@ export const SelectEventProductSet = ({
       {showEditProductSet && productSetId && (
         <EditEventProductSet
           onSubmit={onSubmit}
-          occurrenceStartAtDate={occurrenceStartAtDate}
           defaultValues={
             productSetId === editedProductSet?.id && editedProductSet
           }

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

@@ -22,14 +22,12 @@ export interface EventDates {
 interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues["editedProductSet"]) => void;
   defaultValues?: EditEventFormValues["editedProductSet"];
-  occurrenceStartAtDate: string;
   timeZone: string;
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
-  occurrenceStartAtDate,
   timeZone,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
@@ -129,7 +127,6 @@ export const EditEventProductSet = ({
             fee={feeInPercent}
             isEventEditProductSet
             isOverrides
-            occurrenceStartAtDate={occurrenceStartAtDate}
             workHours={undefined}
             timeZone={timeZone}
           />

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

package/src/product-set/card/ProductSetCard.tsx

@@ -9,15 +9,20 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
 import { MenuButton } from "../../table/MenuButton";
+import { ProductSetNameControl } from "../form/ProductSetNameControl";
 
 export interface ProductSetCardProps extends HasPermissionProp {
   name: string;
   rrule?: string;
   href: string;
-  onCopy: () => void;
+  duplicateProductSetName: string;
+  onChangeDuplicateProductSetName: (value: string) => void;
+  onCopy: () => Promise<boolean | undefined>;
   onRemove: () => void;
+  isLoading?: boolean;
   className?: string;
   override?: number;
+  duplicateProductSetError?: string;
 }
 
 export function ProductSetCard({
@@ -26,6 +31,10 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
+  onChangeDuplicateProductSetName,
+  duplicateProductSetName,
+  duplicateProductSetError,
+  isLoading,
   className = "",
   hasPermission = true,
   override = 0,
@@ -35,19 +44,23 @@ export function ProductSetCard({
   const productSetCardClasses = `product-set-card ${className}`;
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false);
 
+  const onCardClick = () => {
+    RouteService.redirectTo(href);
+  };
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       role="button"
       tabIndex={0}
       className="border-0 product-set-card-wrapper w-100 pb-0"
-      onClick={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={onCardClick}
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
           <div className="d-flex flex-column">
             <div>
-              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
+              {name}
+              {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
             {!!override && (
               <div className="h6 bold ml-1">
@@ -79,14 +92,33 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item action as="div">
+                      <ListGroup.Item
+                        action
+                        as="div"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onCopy) && (
-                          <ConfirmModal>
+                          <ConfirmModal
+                            // confirm function  memoize the callback function and it leads to bugs
+                            confirmationHandler={onCopy}
+                            disabledButtons={isLoading}
+                            content={
+                              <ProductSetNameControl
+                                value={duplicateProductSetName}
+                                onChange={onChangeDuplicateProductSetName}
+                                error={duplicateProductSetError}
+                              />
+                            }
+                          >
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false);
-                                  confirm(onCopy);
+                                  onChangeDuplicateProductSetName(name);
+                                  // confirm function  memoize the callback function and it leads to bugs
+                                  confirm(() => {});
                                 }}
                                 name={t("duplicate")}
                                 className="product-set-card-menu-item-text"
@@ -95,7 +127,14 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item action className="text-danger" as="div">
+                      <ListGroup.Item
+                        action
+                        className="text-danger"
+                        as="div"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

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

@@ -1,9 +1,7 @@
-import { useEffect } from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { DateTime } from "luxon";
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
@@ -16,7 +14,6 @@ import {
   RELY_ON_PEOPLE_TYPES,
   RelyOnPeopleType,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { DATE_MONTH_LOCALE_FORMAT } from "@licklist/core/dist/Config";
 import { useId } from "@react-aria/utils";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
@@ -91,7 +88,6 @@ export interface ProductSetControlProps {
   workHours: WorkHour[] | undefined;
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
-  occurrenceStartAtDate?: string;
   isCreateNewOverrides?: boolean;
   timeZone: string;
 }
@@ -110,7 +106,6 @@ export function ProductSetControl({
   workHours,
   providerHasBookingManagement = false,
   isOverrides = false,
-  occurrenceStartAtDate,
   isCreateNewOverrides = false,
   timeZone,
 }: ProductSetControlProps) {
@@ -121,12 +116,10 @@ export function ProductSetControl({
     formState: { errors },
     watch,
     setError,
-    setValue,
     clearErrors,
   } = useFormContext<ProductSetControlValues>();
 
   const steps = watch("steps");
-  const productSetName = watch("name");
 
   const nameId = useId();
   const termsAndConditionsId = useId();
@@ -140,14 +133,6 @@ export function ProductSetControl({
     productCategories?.some((category) => checkIfZoneCategory(category?.type)),
   );
 
-  useEffect(() => {
-    if (!occurrenceStartAtDate) return;
-    const eventStartDate = DateTime.fromISO(occurrenceStartAtDate);
-    const eventStart = eventStartDate.toFormat(DATE_MONTH_LOCALE_FORMAT);
-    setValue("name", `${productSetName} (${eventStart})`);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setValue, occurrenceStartAtDate]);
-
   return (
     <Row
       className={`product-set-form ${