@licklist/design 0.68.2-dev.3 → 0.68.4

package/dist/sortable-tree/SortableTreeItem.js

@@ -240,7 +240,7 @@ var ProductSetModalClasses = {
     productZones: 'edit-product-zone'
 };
 function SortableTreeItem(param) {
-    var id = param.id, title = param.title, badge = param.badge, subTitle = param.subTitle, body = param.body, children = param.children, preItem = param.preItem, postItem = param.postItem, sortableItems = param.sortableItems, _param_isExpanded = param.isExpanded, isExpanded = _param_isExpanded === void 0 ? false : _param_isExpanded, _param_shouldExpand = param.shouldExpand, shouldExpand = _param_shouldExpand === void 0 ? true : _param_shouldExpand, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isIconInHeader = param.isIconInHeader, isIconInHeader = _param_isIconInHeader === void 0 ? true : _param_isIconInHeader, _param_treeLineIconColor = param.treeLineIconColor, treeLineIconColor = _param_treeLineIconColor === void 0 ? '' : _param_treeLineIconColor, _param_modalLabel = param.modalLabel, modalLabel = _param_modalLabel === void 0 ? '' : _param_modalLabel, modalClass = param.modalClass, _param_isNewAdded = param.isNewAdded, isNewAdded = _param_isNewAdded === void 0 ? false : _param_isNewAdded, onDelete = param.onDelete, validate = param.validate, cancelChanges = param.cancelChanges, saveValidField = param.saveValidField, edit = param.edit, secondaryBadge = param.secondaryBadge, setIsExpanded = param.setIsExpanded, isOverride = param.isOverride, itemButton = param.itemButton;
+    var id = param.id, title = param.title, badge = param.badge, subTitle = param.subTitle, body = param.body, children = param.children, preItem = param.preItem, postItem = param.postItem, sortableItems = param.sortableItems, _param_isExpanded = param.isExpanded, isExpanded = _param_isExpanded === void 0 ? false : _param_isExpanded, _param_shouldExpand = param.shouldExpand, shouldExpand = _param_shouldExpand === void 0 ? true : _param_shouldExpand, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isIconInHeader = param.isIconInHeader, isIconInHeader = _param_isIconInHeader === void 0 ? true : _param_isIconInHeader, _param_treeLineIconColor = param.treeLineIconColor, treeLineIconColor = _param_treeLineIconColor === void 0 ? '' : _param_treeLineIconColor, _param_modalLabel = param.modalLabel, modalLabel = _param_modalLabel === void 0 ? '' : _param_modalLabel, modalClass = param.modalClass, _param_isNewAdded = param.isNewAdded, isNewAdded = _param_isNewAdded === void 0 ? false : _param_isNewAdded, onDelete = param.onDelete, validate = param.validate, cancelChanges = param.cancelChanges, saveValidField = param.saveValidField, edit = param.edit, secondaryBadge = param.secondaryBadge, setIsExpanded = param.setIsExpanded, isOverride = param.isOverride;
     var _useState = _sliced_to_array(useState(isExpanded), 2), expanded = _useState[0], setExpanded = _useState[1];
     var _useState1 = _sliced_to_array(useState(isNewAdded), 2), isModalVisible = _useState1[0], setIsModalVisible = _useState1[1];
     var t = useTranslation('Design').t;
@@ -433,15 +433,9 @@ function SortableTreeItem(param) {
                                                 /*#__PURE__*/ jsxs("div", {
                                                     className: clsx(modalLabel ? 'sortable-tree-product-set-title-container' : 'sortable-tree-title-container'),
                                                     children: [
-                                                        /*#__PURE__*/ jsxs("span", {
-                                                            className: clsx('sortable-tree-item-title', modalLabel && 'sortable-tree-product-set-element-title', 'd-flex justify-content-between'),
-                                                            children: [
-                                                                title,
-                                                                /*#__PURE__*/ jsx("div", {
-                                                                    className: "sortable-tree-item-subtitle",
-                                                                    children: itemButton
-                                                                })
-                                                            ]
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: clsx('sortable-tree-item-title', modalLabel && 'sortable-tree-product-set-element-title'),
+                                                            children: title
                                                         }),
                                                         !expanded && /*#__PURE__*/ jsx("span", {
                                                             className: "sortable-tree-item-subtitle",

package/dist/styles/iframe-events/Calendar.scss

@@ -48,6 +48,7 @@
         height: 2.25rem;
         width: 14.125rem;
         justify-content: space-between;
+        border: 1px solid $snippet-dropdown-border-color;
         border-radius: $iframe-border-radius;
         transition: $color-transition;
 

package/dist/styles/iframe-external-modal/IframeExternalModal.scss

@@ -15,7 +15,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 2147483646;
+  z-index: 1000000;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
 }
@@ -24,7 +24,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 2147483647;
+  z-index: 1000001;
   display: none;
   width: 100%;
   height: 100%;

package/dist/styles/product-set/ProductSetForm.scss

@@ -15,12 +15,10 @@
     height: 2.5rem;
     border-width: 2px;
     padding: 2px;
-
     label,
     .btn-switch-indicator {
       border-radius: 0.375rem !important;
     }
-
     label {
       height: 2rem;
     }
@@ -36,7 +34,6 @@
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
     }
-
     @include media-breakpoint-down(sm) {
       padding: 1.5rem 1rem;
       margin-top: 0.5rem;
@@ -62,21 +59,10 @@
     background-color: #ffdbdb;
     color: #d52902;
   }
-
   .category-badge {
     background-color: #e8f4f6;
     color: #1a93aa;
   }
-
-  .item-icon {
-    display: flex;
-    justify-items: center;
-    align-items: center;
-    font-size: 0.65rem;
-    padding: 0.2rem;
-    margin-right: 1rem;
-  }
-
   .product-badge {
     background-color: #e9f5ea;
     color: #269b36;
@@ -89,12 +75,10 @@
 
 .product-set-mobile-modal {
   margin: 0;
-
   .modal-content {
     border-radius: 1rem 1rem 0 0;
     border-width: 0;
     margin: 0;
-
     .modal-body {
       padding: 1rem 0;
     }
@@ -116,22 +100,18 @@
     font-weight: 600;
     font-size: 0.625rem;
   }
-
   .product-set-subtitle-dot {
     margin-right: 0.375rem;
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 3px;
   }
-
   .product-set-subtitle-category-dot {
     background-color: #269b36;
   }
-
   .product-set-subtitle-step-dot {
     background-color: #1a93aa;
   }
-
   .product-set-subtitle-product-dot {
     background-color: #269b36;
   }
@@ -176,7 +156,6 @@
     justify-self: flex-end;
     align-items: flex-end;
   }
-
   .small-badge {
     font-size: 0.5rem;
     height: 1rem;
@@ -184,7 +163,6 @@
     padding: 0 0.2rem;
     margin-bottom: 0.2rem;
   }
-
   .product-set-save-btn-wrapper {
     padding-left: 0 !important;
     display: flex;

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/dist/tiptap-editor/TipTapMenu/extensions/utils.d.ts

@@ -1,5 +1,5 @@
 declare function parseTwemoji(emoji: string): {
-    src: string;
+    src: any;
     alt: any;
     class: string;
     draggable: string;

package/dist/tiptap-editor/TipTapMenu/extensions/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/tiptap-editor/TipTapMenu/extensions/utils.ts"],"names":[],"mappings":"AAGA,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM;;;;;EAWlC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/tiptap-editor/TipTapMenu/extensions/utils.ts"],"names":[],"mappings":"AAEA,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM;;;;;EASlC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/tiptap-editor/TipTapMenu/extensions/utils.js

@@ -1,5 +1,4 @@
 import { parse } from 'twemoji-parser';
-import { EMOJI_URL } from './constants.js';
 
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -49,9 +48,8 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 function parseTwemoji(emoji) {
     var _parse = _sliced_to_array(parse(emoji), 1), twemoji = _parse[0];
-    var emojiPathUrl = EMOJI_URL.concat(twemoji.url.split("/").slice(-1));
     return {
-        src: emojiPathUrl,
+        src: twemoji.url,
         alt: twemoji.text,
         class: 'emoji',
         draggable: 'false'

package/dist/typeahead/Typeahead.d.ts

@@ -1,4 +1,3 @@
-import { CSSObjectWithLabel } from 'react-select';
 export type TypeaheadOptions = {
     id: number | string;
     value: any;
@@ -9,14 +8,11 @@ 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, value, onChangeValue, containerStyles, isCouponForm, noOptionsMessage, isInvalid, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, 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":"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"}
+{"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"}

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, 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 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 control = useFormContext().control;
     var getStyle = function() {
         var couponFormStyle = isCouponForm ? {
@@ -53,21 +53,14 @@ function Typeahead(param) {
                 var field = param.field;
                 return /*#__PURE__*/ jsx(Select, {
                     placeholder: placeholder,
-                    value: value !== null && value !== void 0 ? value : field.value,
+                    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.68.2-dev.3",
+  "version": "0.68.4",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.30.0-dev.0",
+    "@licklist/core": "0.30.1",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.0-dev.0",
+    "@licklist/plugins": "0.33.1",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.30.0-dev.0",
+    "@licklist/core": "0.30.1",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.0-dev.0",
+    "@licklist/plugins": "0.33.1",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -193,10 +193,8 @@
       "yarn tsc"
     ]
   },
-  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  },
-  "stableVersion": "0.66.7-dev.5"
-}
+  }
+}

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,7 +76,6 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
-
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error?.response?.data?.message || error.message,
+      message: error.message,
     })
   }
 

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { range } from 'lodash'
-import { DateTime } from 'luxon'
+import { ReactComponent as SelectArrow } from '../../../assets/iframe/selectArrow.svg'
 import { CalendarSelect } from '../CalendarSelect'
 import { CalendarProps } from '../../Calendar'
 
@@ -26,21 +26,15 @@ export const CalendarButtons = ({
 }: CalendarButtonsProps) => {
   const { t } = useTranslation('Design')
 
-  const onSelectMonth = useCallback(
-    (value: string) => {
-      const selectedMonth = Number(value)
-      const nextDateTime = currentDate.set({ month: selectedMonth })
-
-      if (nextDateTime <= initialDate) {
-        setCurrentDate(initialDate)
-        return
-      }
+  const onSelectNextMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-      setCurrentDate(nextDateTime)
-    },
+  const onSelectPreviousMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setCurrentDate, currentDate],
-  )
+  }, [])
 
   const yearOptions = useMemo(
     () =>
@@ -51,16 +45,10 @@ export const CalendarButtons = ({
     [initialDate],
   )
 
-  const monthOptions = useMemo(() => {
-    const initialMonth =
-      currentDate.year > initialDate.year ? 1 : initialDate.month
-    return range(initialMonth, 13).map((monthNumber) => ({
-      label: DateTime.fromObject({ month: monthNumber }).toLocaleString({
-        month: 'long',
-      }),
-      value: monthNumber,
-    }))
-  }, [initialDate, currentDate])
+  const canMoveBack = useMemo(
+    () => currentDate > initialDate,
+    [currentDate, initialDate],
+  )
 
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value)
@@ -122,11 +110,22 @@ export const CalendarButtons = ({
       <hr />
       <div className="calendar-buttons">
         <div className="buttons-wrapper">
-          <CalendarSelect
-            options={monthOptions}
-            onChange={onSelectMonth}
-            value={currentDate.month}
-          />
+          <Button
+            className="calendar-button left-button"
+            onClick={onSelectPreviousMonth}
+            disabled={!canMoveBack}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
+          <div className="month-title">{currentDate.toFormat('MMMM')}</div>
+          <Button
+            className="calendar-button"
+            onClick={onSelectNextMonth}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
         </div>
         <CalendarSelect
           options={yearOptions}

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -89,13 +89,6 @@ export function IntervalInput({
     trigger('end')
   }
 
-  const onChangeRecurrent = (checked: boolean) => {
-    setRecurrent(checked)
-    if (!checked) {
-      setValue('rrule', null)
-    }
-  }
-
   return (
     <>
       <Form.Row className="interval-container">
@@ -151,7 +144,7 @@ export function IntervalInput({
             custom
             checked={recurrent}
             onChange={({ target: { checked } }) => {
-              onChangeRecurrent(checked)
+              setRecurrent(checked)
             }}
             disabled={disabled || Boolean(editedProductSet)}
           />

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

@@ -256,6 +256,7 @@ export const EditEventForm = ({
             <Controller
               render={({ field }) => (
                 <TipTapEditor
+                  withEmoji={false}
                   viewMode={false}
                   onUpdate={field.onChange}
                   content={field.value}

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

@@ -5,11 +5,9 @@ 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[]
@@ -44,21 +42,6 @@ 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))
@@ -112,7 +95,6 @@ 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)
   }
 
@@ -128,72 +110,93 @@ export const SelectEventProductSet = ({
           <Controller
             control={control}
             name="productSetId"
-            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)
-                        }}
-                        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>
-                    )}
+            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>
                   </div>
-                </div>
 
-                <Form.Control.Feedback type="invalid">
-                  {errors?.productSetId?.message}
-                </Form.Control.Feedback>
-              </>
-            )}
+                  <Form.Control.Feedback type="invalid">
+                    {errors?.productSetId?.message}
+                  </Form.Control.Feedback>
+                </>
+              )
+            }}
           />
         </Form.Group>
       </div>

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -37,6 +37,7 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
+                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,