@licklist/design 0.66.4 → 0.66.6

package/dist/sortable-tree/SortableTreeItem.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("react-i18next"),l=require("react-bootstrap"),s=require("../static/Icon.js"),o=e(require("clsx")),i=require("@dnd-kit/core"),c=require("@dnd-kit/sortable"),d=require("@dnd-kit/utilities"),m=require("../modals/confirmation/ConfirmModal.js");require("../modals/dialog/Dialog.js"),require("../modals/dialog/DialogContext.js");var u=require("../product-set/elements/DeleteFieldButton.js"),p={step:"edit-product-step",category:"edit-product-category",product:"edit-product"};exports.ProductSetModalClasses=p,exports.SortableTreeItem=function(e){var b=this,g=e.id,v=e.title,E=e.badge,f=e.subTitle,N=e.body,y=e.children,h=e.preItem,C=e.postItem,w=e.sortableItems,_=e.isExpanded,x=void 0!==_&&_,D=e.isInvalid,S=void 0!==D&&D,q=e.isIconInHeader,M=void 0===q||q,k=e.treeLineIconColor,I=void 0===k?"":k,B=e.modalLabel,j=void 0===B?"":B,P=e.modalClass,T=e.isNewAdded,X=void 0!==T&&T,Y=e.onDelete,A=e.validate,F=e.cancelChanges,L=e.saveValidField,R=e.edit,U=e.secondaryBadge,V=e.setIsExpanded,z=e.isOverride,H=e.isProduct,K=void 0!==H&&H,O=t.__read(a.useState(x),2),G=O[0],J=O[1],Q=t.__read(a.useState(X),2),W=Q[0],Z=Q[1],$=r.useTranslation("Design").t,ee=c.useSortable({id:g}),te=ee.attributes,ae=ee.listeners,ne=ee.setNodeRef,re=ee.transform,le=ee.transition,se=t.__read(a.useState({pageX:0,pageY:0}),2),oe=se[0],ie=se[1],ce=i.useDraggable({id:g,disabled:z}),de=ce.isDragging,me=ce.attributes,ue=ce.listeners,pe=ce.setNodeRef,be=ce.transform,ge=a.useCallback((function(e){var t=e.pageX-oe.pageX,a=e.pageY-oe.pageY;Math.sqrt(t*t+a*a)>5||(V?V():J((function(e){return!e})))}),[oe,V]),ve=Boolean(Y)&&!z,Ee=a.useCallback((function(e){ie({pageX:e.pageX,pageY:e.pageY})}),[]),fe=function(){return t.__awaiter(b,void 0,void 0,(function(){return t.__generator(this,(function(e){switch(e.label){case 0:return A||Z(!1),[4,null==A?void 0:A()];case 1:return e.sent()&&(L&&L(),Z(!1)),[2]}}))}))};return a.useEffect((function(){J(x)}),[x]),n.createElement("div",t.__assign({className:"sortable-tree-root",style:{transform:d.CSS.Translate.toString(re),transition:le}},me,ue,{ref:ne}),n.createElement("div",t.__assign({className:"sortable-tree-wrapper",ref:pe},me,ue,{onKeyDown:function(e){return e.stopPropagation()},onMouseDown:function(e){W&&e.stopPropagation()},onMouseUp:function(e){W&&e.stopPropagation()},role:"button",tabIndex:0,style:P===p.step?{transform:d.CSS.Translate.toString(be),opacity:de?.7:1}:null}),n.createElement("div",{className:"sortable-tree-line"},n.createElement(l.Button,{variant:"link",size:"sm",onMouseDown:Ee,onMouseUp:ge},G?n.createElement(s.default,{type:"minus",width:".7rem"}):n.createElement("div",{className:"expand-icon-container"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null))),G&&n.createElement("svg",{className:"sortable-tree-line-icon",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"},n.createElement("g",null,n.createElement("path",{className:o("sortable-tree-line-icon-path",I&&"sortable-tree-line-product-element"),style:{stroke:I},d:"M 50 0 V 100"})))),n.createElement("div",{className:"sortable-tree-item-wrapper"},n.createElement("div",{className:o("sortable-tree-item",S?"invalid":"")},n.createElement("div",{className:"sortable-tree-item-header"},M&&n.createElement(l.Button,t.__assign({variant:"link",className:"sortable-tree-item-handle"},te,ae),n.createElement(s.default,{type:"grip-vertical"})),n.createElement(l.Button,{className:"sortable-tree-item-toggle",variant:"link",onMouseDown:Ee,onMouseUp:ge},E&&n.createElement("span",{className:"sortable-tree-item-badge"},E),n.createElement("div",{className:o(j?"sortable-tree-product-set-title-container":"sortable-tree-title-container")},n.createElement("span",{className:o("sortable-tree-item-title",j&&"sortable-tree-product-set-element-title")},v),!G&&n.createElement("span",{className:"sortable-tree-item-subtitle"},f)),n.createElement("div",{className:"border-0 open-edit-right-modal-button",role:"button",tabIndex:0,onClick:function(e){return function(e){z&&!K||(e.stopPropagation(),R&&!W&&R(),Z(!0))}(e)},onKeyDown:function(e){return e.stopPropagation()}},n.createElement(s.default,{type:"ellipsis-h",color:"#0E8CE2",height:"1rem"})))),M?n.createElement(l.Collapse,{in:G},n.createElement("div",null,n.createElement("div",{className:"sortable-tree-item-body"},N))):n.createElement(l.Modal,{size:"lg",show:W,className:o("m-0 edit-product-set-element-modal edit-right-form-modal h-100",P),dialogClassName:"edit-event-dialog edit-step-dialog",onHide:fe},n.createElement("div",{className:"edit-step-modal-header"},n.createElement("button",{className:"p-0 cancel-add-step-btn border-0",type:"button",onClick:function(){F?(F(),Z(!1)):fe()}},n.createElement("span",null,$("Design:cancel"))),U&&n.createElement("div",{className:"secondary-badge ".concat(null==U?void 0:U.className)},null==U?void 0:U.label)),n.createElement(l.Modal.Body,{as:"form",noValidate:!0},n.createElement("div",{className:"top-label-container"},n.createElement("span",null,j)),N,n.createElement("div",{className:"d-flex product-set-element-control-btns justify-content-between"},n.createElement(l.Button,{className:"step-save-btn mt-4",type:"button",onClick:fe},$("saveAndAdd")),ve&&n.createElement("div",{className:"d-flex justify-content-end mt-4 delete-btn"},n.createElement(m.ConfirmModal,null,(function(e){return n.createElement(u.DeleteFieldButton,{onDelete:function(){return e(Y)}})}))))))),w&&n.createElement("div",{className:"sortable-tree-subitems"},h,n.createElement(i.DndContext,null,n.createElement(c.SortableContext,{items:w,strategy:c.verticalListSortingStrategy},n.createElement(l.Collapse,{in:G},n.createElement("div",{className:"ml-0"},y)))),C))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("react-i18next"),l=require("react-bootstrap"),s=require("../static/Icon.js"),o=e(require("clsx")),i=require("@dnd-kit/core"),c=require("@dnd-kit/sortable"),d=require("@dnd-kit/utilities"),m=require("../modals/confirmation/ConfirmModal.js");require("../modals/dialog/Dialog.js"),require("../modals/dialog/DialogContext.js");var u=require("../product-set/elements/DeleteFieldButton.js"),p={step:"edit-product-step",category:"edit-product-category",product:"edit-product"};exports.ProductSetModalClasses=p,exports.SortableTreeItem=function(e){var b=this,g=e.id,v=e.title,E=e.badge,f=e.subTitle,N=e.body,y=e.children,h=e.preItem,C=e.postItem,w=e.sortableItems,_=e.isExpanded,x=void 0!==_&&_,D=e.isInvalid,S=void 0!==D&&D,q=e.isIconInHeader,M=void 0===q||q,k=e.treeLineIconColor,I=void 0===k?"":k,B=e.modalLabel,j=void 0===B?"":B,P=e.modalClass,T=e.isNewAdded,X=void 0!==T&&T,Y=e.onDelete,A=e.validate,F=e.cancelChanges,L=e.saveValidField,R=e.edit,U=e.secondaryBadge,V=e.setIsExpanded,z=e.isOverride,H=t.__read(a.useState(x),2),K=H[0],O=H[1],G=t.__read(a.useState(X),2),J=G[0],Q=G[1],W=r.useTranslation("Design").t,Z=c.useSortable({id:g}),$=Z.attributes,ee=Z.listeners,te=Z.setNodeRef,ae=Z.transform,ne=Z.transition,re=t.__read(a.useState({pageX:0,pageY:0}),2),le=re[0],se=re[1],oe=i.useDraggable({id:g,disabled:z}),ie=oe.isDragging,ce=oe.attributes,de=oe.listeners,me=oe.setNodeRef,ue=oe.transform,pe=a.useCallback((function(e){var t=e.pageX-le.pageX,a=e.pageY-le.pageY;Math.sqrt(t*t+a*a)>5||(V?V():O((function(e){return!e})))}),[le,V]),be=Boolean(Y)&&!z,ge=a.useCallback((function(e){se({pageX:e.pageX,pageY:e.pageY})}),[]),ve=function(){return t.__awaiter(b,void 0,void 0,(function(){return t.__generator(this,(function(e){switch(e.label){case 0:return A||Q(!1),[4,null==A?void 0:A()];case 1:return e.sent()&&(L&&L(),Q(!1)),[2]}}))}))};return a.useEffect((function(){O(x)}),[x]),n.createElement("div",t.__assign({className:"sortable-tree-root",style:{transform:d.CSS.Translate.toString(ae),transition:ne}},ce,de,{ref:te}),n.createElement("div",t.__assign({className:"sortable-tree-wrapper",ref:me},ce,de,{onKeyDown:function(e){return e.stopPropagation()},onMouseDown:function(e){J&&e.stopPropagation()},onMouseUp:function(e){J&&e.stopPropagation()},role:"button",tabIndex:0,style:P===p.step?{transform:d.CSS.Translate.toString(ue),opacity:ie?.7:1}:null}),n.createElement("div",{className:"sortable-tree-line"},n.createElement(l.Button,{variant:"link",size:"sm",onMouseDown:ge,onMouseUp:pe},K?n.createElement(s.default,{type:"minus",width:".7rem"}):n.createElement("div",{className:"expand-icon-container"},n.createElement("div",null),n.createElement("div",null),n.createElement("div",null))),K&&n.createElement("svg",{className:"sortable-tree-line-icon",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 100 100",preserveAspectRatio:"none"},n.createElement("g",null,n.createElement("path",{className:o("sortable-tree-line-icon-path",I&&"sortable-tree-line-product-element"),style:{stroke:I},d:"M 50 0 V 100"})))),n.createElement("div",{className:"sortable-tree-item-wrapper"},n.createElement("div",{className:o("sortable-tree-item",S?"invalid":"")},n.createElement("div",{className:"sortable-tree-item-header"},M&&n.createElement(l.Button,t.__assign({variant:"link",className:"sortable-tree-item-handle"},$,ee),n.createElement(s.default,{type:"grip-vertical"})),n.createElement(l.Button,{className:"sortable-tree-item-toggle",variant:"link",onMouseDown:ge,onMouseUp:pe},E&&n.createElement("span",{className:"sortable-tree-item-badge"},E),n.createElement("div",{className:o(j?"sortable-tree-product-set-title-container":"sortable-tree-title-container")},n.createElement("span",{className:o("sortable-tree-item-title",j&&"sortable-tree-product-set-element-title")},v),!K&&n.createElement("span",{className:"sortable-tree-item-subtitle"},f)),n.createElement("div",{className:"border-0 open-edit-right-modal-button",role:"button",tabIndex:0,onClick:function(e){return function(e){e.stopPropagation(),R&&!J&&R(),Q(!0)}(e)},onKeyDown:function(e){return e.stopPropagation()}},n.createElement(s.default,{type:"ellipsis-h",color:"#0E8CE2",height:"1rem"})))),M?n.createElement(l.Collapse,{in:K},n.createElement("div",null,n.createElement("div",{className:"sortable-tree-item-body"},N))):n.createElement(l.Modal,{size:"lg",show:J,className:o("m-0 edit-product-set-element-modal edit-right-form-modal h-100",P),dialogClassName:"edit-event-dialog edit-step-dialog",onHide:ve},n.createElement("div",{className:"edit-step-modal-header"},n.createElement("button",{className:"p-0 cancel-add-step-btn border-0",type:"button",onClick:function(){F?(F(),Q(!1)):ve()}},n.createElement("span",null,W("Design:cancel"))),U&&n.createElement("div",{className:"secondary-badge ".concat(null==U?void 0:U.className)},null==U?void 0:U.label)),n.createElement(l.Modal.Body,{as:"form",noValidate:!0},n.createElement("div",{className:"top-label-container"},n.createElement("span",null,j)),N,n.createElement("div",{className:"d-flex product-set-element-control-btns justify-content-between"},n.createElement(l.Button,{className:"step-save-btn mt-4",type:"button",onClick:ve},W("saveAndAdd")),be&&n.createElement("div",{className:"d-flex justify-content-end mt-4 delete-btn"},n.createElement(m.ConfirmModal,null,(function(e){return n.createElement(u.DeleteFieldButton,{onDelete:function(){return e(Y)}})}))))))),w&&n.createElement("div",{className:"sortable-tree-subitems"},h,n.createElement(i.DndContext,null,n.createElement(c.SortableContext,{items:w,strategy:c.verticalListSortingStrategy},n.createElement(l.Collapse,{in:K},n.createElement("div",{className:"ml-0"},y)))),C))))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.66.4",
+  "version": "0.66.6",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -50,9 +50,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": "0.28.1",
+    "@licklist/core": "0.28.2",
     "@licklist/eslint-config": "0.4.5",
-    "@licklist/plugins": "0.30.1",
+    "@licklist/plugins": "0.30.3",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -177,7 +177,8 @@
   },
   "resolutions": {
     "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2"
+    "@types/react-dom": "17.0.2",
+    "cheerio": "0.22.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

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

@@ -40,6 +40,10 @@ export const SelectEventProductSet = ({
   const productSetId = watch("productSetId");
   const editedProductSet = watch("editedProductSet");
 
+  const selectedProductSet = productSets.find(
+    (productSet) => productSet.id === productSetId
+  )?.parentMenuId;
+
   const onEditProductSet = useCallback(
     () => {
       setEditProductSetId(String(productSetId));
@@ -84,6 +88,9 @@ export const SelectEventProductSet = ({
     setValue("productSetId", value);
   };
 
+  const showOverrideProductSet =
+    !showEditProductSet && productSetId && !selectedProductSet;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onSubmit = (value: EditEventFormValues["editedProductSet"]) => {
     setShowEditProductSet(false);
@@ -159,7 +166,7 @@ export const SelectEventProductSet = ({
                           {t("addNewProductSet")}
                         </Button>
                       )}
-                      {!showEditProductSet && productSetId && (
+                      {showOverrideProductSet && (
                         <Button
                           variant=""
                           className="btn product-set-button "

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

@@ -124,6 +124,7 @@ export const EditEventProductSet = ({
             companyName={selectedCompany?.title}
             fee={feeInPercent}
             isEventEditProductSet
+            isOverrides
           />
           <Button
             disabled={isLoading}

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

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

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -9,6 +9,7 @@ export type LeftBlockProps = PropsWithChildren<
     pageTitle?: ReactNode;
     component?: ReactNode;
     childrenClassName?: string;
+    hasScroll?: boolean;
   } & HTMLAttributes<HTMLDivElement>
 >;
 
@@ -17,6 +18,7 @@ export const LeftBlock = ({
   children,
   className,
   component,
+  hasScroll = true,
   childrenClassName,
   ...props
 }: LeftBlockProps) => {
@@ -41,10 +43,14 @@ export const LeftBlock = ({
       </div>
       <div
         className={clsx("left-block-container", childrenClassName)}
-        style={leftBlockStyles}
+        style={hasScroll ? leftBlockStyles : undefined}
         id={PAGE_LEFT_BLOCK_CONTAINER_ID}
       >
-        <PageContextProvider leftBlockContainerSizes={leftBlockContainerSizes}>
+        <PageContextProvider
+          leftBlockContainerSizes={
+            hasScroll ? leftBlockContainerSizes : undefined
+          }
+        >
           {children}
         </PageContextProvider>
       </div>

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

@@ -88,6 +88,7 @@ export interface ProductSetControlProps {
   workHours?: WorkHour[];
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
+  isCreateNewOverrides?: boolean;
 }
 
 export function ProductSetControl({
@@ -104,6 +105,7 @@ export function ProductSetControl({
   workHours,
   providerHasBookingManagement = false,
   isOverrides = false,
+  isCreateNewOverrides = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -123,7 +125,7 @@ export function ProductSetControl({
 
   const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
   const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
-
+  const showDateSelector = !isEventEditProductSet && isOverrides;
   return (
     <Row
       className={`product-set-form ${
@@ -165,7 +167,7 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        {isOverrides ? (
+        {showDateSelector ? (
           <DateInput
             workHours={workHours}
             isLoading={isLoading}
@@ -188,7 +190,12 @@ export function ProductSetControl({
 
         <TutorialGifCard isOverrides={isOverrides} />
 
-        <StepsControl isLoading={isLoading} isOverrides={isOverrides} />
+        <StepsControl
+          isLoading={isLoading}
+          isEventEditProductSet={isEventEditProductSet}
+          isOverrides={isOverrides}
+          isCreateNewOverrides={isCreateNewOverrides}
+        />
       </Col>
       <Col md={6} sm={12}>
         <div className="second-column">

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

@@ -36,6 +36,8 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
+  isCreateNewOverrides?: boolean;
 }
 
 const getCategoryDefaultValue = (
@@ -67,6 +69,8 @@ export function ProductCategoriesControl({
   isLoading,
   stepIndex,
   isOverrides,
+  isEventEditProductSet,
+  isCreateNewOverrides,
 }: ProductCategoriesControlProps) {
   const { t } = useTranslation("Design");
   const {
@@ -214,6 +218,11 @@ export function ProductCategoriesControl({
             ? String(productCategory.id)
             : productCategory.uniqueId;
 
+          const isOverridesCategory = productCategory.products.some((product) =>
+            isEventEditProductSet ? !!product.id : !!product.originalProductId
+          );
+          const isNewOverridesCategory =
+            isCreateNewOverrides && !!productCategory.id;
           const onSetIsExpanded = () => {
             setIsExpanded(productCategoryId);
           };
@@ -269,7 +278,10 @@ export function ProductCategoriesControl({
                       categoryName={value}
                       stepIndex={stepIndex}
                       productCategoryIndex={index}
-                      isOverride={isOverrides}
+                      isOverride={
+                        isNewOverridesCategory ||
+                        (isOverrides && isOverridesCategory)
+                      }
                     />
                   }
                   isOverride={isOverrides}
@@ -296,6 +308,8 @@ export function ProductCategoriesControl({
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                     isOverrides={isOverrides}
+                    isEventEditProductSet={isEventEditProductSet}
+                    isCreateNewOverrides={isCreateNewOverrides}
                   />
                 </SortableTree.Item>
               )}
@@ -305,9 +319,7 @@ export function ProductCategoriesControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addCategory")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />
@@ -316,7 +328,6 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
-          if (isOverrides) return;
           append(getCategoryDefaultValue(categoryType, fields.length));
           setShowCategoryModal(true);
           if (

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

@@ -53,6 +53,7 @@ export interface ProductSetFormProps
   isCreateAction?: boolean;
   isOverrides?: boolean;
   workHours?: WorkHour[];
+  isCreateNewOverrides?: boolean;
 }
 
 export function ProductSetForm({
@@ -70,6 +71,7 @@ export function ProductSetForm({
   isCreateAction,
   workHours,
   isOverrides,
+  isCreateNewOverrides,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -166,6 +168,7 @@ export function ProductSetForm({
                     workHours={workHours}
                     providerHasBookingManagement={providerHasBookingManagement}
                     isOverrides={isOverrides}
+                    isCreateNewOverrides={isCreateNewOverrides}
                   />
                   <Row>
                     <Col md={6} sm={12} />

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

@@ -35,6 +35,8 @@ interface ProductsControlProps extends WithIsLoading {
   categoryType: CategoryType;
   zones?: Zone[];
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
+  isCreateNewOverrides?: boolean;
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -57,6 +59,7 @@ const getDefaultProductValue = (sort: number): Product => ({
   quantitySelector: 1,
   hasSpecialNotes: false,
   weight: 0,
+  originalProductId: null,
   type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
   zoneId: null,
@@ -79,6 +82,8 @@ export function ProductsControl({
   categoryType,
   zones,
   isOverrides,
+  isEventEditProductSet,
+  isCreateNewOverrides,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -203,90 +208,101 @@ export function ProductsControl({
         onDragEnd={handleDragEnd}
         sensors={[mouseSensor]}
       >
-        {fields.map((product, index) => (
-          <Controller
-            key={product._id}
-            control={control}
-            name={`${productControlFieldName}.${index}.name` as const}
-            rules={{
-              required: t("Validation:fieldRequired", {
-                attribute: t("name"),
-              }) as string,
-            }}
-            render={({ field: { value, onChange } }) => (
-              <SortableTree.Item
-                key={`product-${product._id}`}
-                id={String(product._id)}
-                isExpanded={isFirstProductAdded}
-                isInvalid={!!categoryProductErrors}
-                title={value}
-                isOverride={isOverrides}
-                badge={<Badge className="product-badge">{t("product")}</Badge>}
-                isIconInHeader={false}
-                cancelChanges={() => cancelChanges(index)}
-                edit={() => edit(index)}
-                isProduct
-                secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
-                subTitle={
-                  <div className="product-set-badges-container">
-                    <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
-                    <span>
-                      {`£${prices[index]} ${t("each")} - ${t("qty")}:${
-                        !isUnlimitedQuantities[index]
-                          ? ` ${quantities[index]}`
-                          : t(" unlimited")
-                      } ${
-                        !isUnlimitedQuantities[index]
-                          ? ` - ${t("possibleRevenue")} £${
-                              prices[index] * quantities[index]
-                            }`
-                          : ""
-                      } `}
-                    </span>
-                  </div>
-                }
-                modalLabel={t("addNewProduct")}
-                modalClass={ProductSetModalClasses.product}
-                isNewAdded={showProductModal}
-                body={
-                  <ProductControl<ProductSetFormValues>
+        {fields.map((product, index) => {
+          const isOverridesProductSet = isEventEditProductSet
+            ? !!product.id
+            : isOverrides && !!product.originalProductId;
+
+          const isNewProductOverrides = isCreateNewOverrides && !!product.id;
+
+          return (
+            <Controller
+              key={product._id}
+              control={control}
+              name={`${productControlFieldName}.${index}.name` as const}
+              rules={{
+                required: t("Validation:fieldRequired", {
+                  attribute: t("name"),
+                }) as string,
+              }}
+              render={({ field: { value, onChange } }) => (
+                <SortableTree.Item
+                  key={`product-${product._id}`}
+                  id={String(product._id)}
+                  isExpanded={isFirstProductAdded}
+                  isInvalid={!!categoryProductErrors}
+                  title={value}
+                  isOverride={isOverrides}
+                  badge={
+                    <Badge className="product-badge">{t("product")}</Badge>
+                  }
+                  isIconInHeader={false}
+                  cancelChanges={() => cancelChanges(index)}
+                  edit={() => edit(index)}
+                  secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
+                  subTitle={
+                    <div className="product-set-badges-container">
+                      <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                      <span>
+                        {`£${prices[index]} ${t("each")} - ${t("qty")}:${
+                          !isUnlimitedQuantities[index]
+                            ? ` ${quantities[index]}`
+                            : t(" unlimited")
+                        } ${
+                          !isUnlimitedQuantities[index]
+                            ? ` - ${t("possibleRevenue")} £${
+                                prices[index] * quantities[index]
+                              }`
+                            : ""
+                        } `}
+                      </span>
+                    </div>
+                  }
+                  modalLabel={t("addNewProduct")}
+                  modalClass={ProductSetModalClasses.product}
+                  isNewAdded={showProductModal}
+                  body={
+                    <ProductControl<ProductSetFormValues>
+                      isLoading={isLoading}
+                      quantityType={quantityType}
+                      allowDeposits={allowDeposits}
+                      hasBookingManagement={false}
+                      fieldNamePrefix={
+                        `${productControlFieldName}.${index}` as const
+                      }
+                      productName={value}
+                      onProductNameChange={onChange}
+                      hasTicket={hasTicket}
+                      categoryType={categoryType}
+                      zoneDuration={catergoryZone?.defaultDuration}
+                      isOverrides={
+                        isNewProductOverrides || isOverridesProductSet
+                      }
+                    />
+                  }
+                  onDelete={() => onProductRemove(index)}
+                  validate={() =>
+                    trigger(`${productControlFieldName}.${index}`)
+                  }
+                  saveValidField={saveValidField}
+                  // preItem={<Popover className="d-none d-sm-block" />}
+                >
+                  <SubProductsControl
                     isLoading={isLoading}
                     quantityType={quantityType}
-                    allowDeposits={allowDeposits}
-                    hasBookingManagement={false}
-                    fieldNamePrefix={
-                      `${productControlFieldName}.${index}` as const
-                    }
-                    productName={value}
-                    onProductNameChange={onChange}
-                    hasTicket={hasTicket}
-                    categoryType={categoryType}
-                    zoneDuration={catergoryZone?.defaultDuration}
-                    isOverrides={isOverrides}
+                    stepIndex={stepIndex}
+                    productCategoryIndex={productCategoryIndex}
+                    productIndex={index}
                   />
-                }
-                onDelete={() => onProductRemove(index)}
-                validate={() => trigger(`${productControlFieldName}.${index}`)}
-                saveValidField={saveValidField}
-                // preItem={<Popover className="d-none d-sm-block" />}
-              >
-                <SubProductsControl
-                  isLoading={isLoading}
-                  quantityType={quantityType}
-                  stepIndex={stepIndex}
-                  productCategoryIndex={productCategoryIndex}
-                  productIndex={index}
-                />
-              </SortableTree.Item>
-            )}
-          />
-        ))}
+                </SortableTree.Item>
+              )}
+            />
+          );
+        })}
       </SortableTree>
       <CreateProductSetItem
         title={t("addProduct")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           append(getDefaultProductValue(fields.length));
           setShowProductModal(true);
 

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

@@ -19,9 +19,16 @@ import { ProductSetFormValues } from "./ProductSetForm";
 interface StepsControlProps {
   isLoading: boolean;
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
+  isCreateNewOverrides?: boolean;
 }
 
-export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
+export function StepsControl({
+  isLoading,
+  isOverrides,
+  isEventEditProductSet,
+  isCreateNewOverrides,
+}: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -68,9 +75,9 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
     <>
       {fields.map((step, index) => {
         const stepFieldName = `steps.${index}` as const;
-
         const stepData = getValues(stepFieldName);
-
+        const isOverrideStep =
+          (isOverrides || isCreateNewOverrides) && !!step.id;
         return (
           <Controller
             key={`step-${step._id}`}
@@ -92,9 +99,9 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => !isOverrides && edit(index)}
+                edit={() => edit(index)}
                 cancelChanges={() => cancelChanges(index)}
-                isOverride={isOverrides}
+                isOverride={isOverrideStep}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -110,6 +117,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                     stepIndex={index}
                     stepName={value}
                     onStepNameChange={onChange}
+                    isOverrides={isOverrideStep}
                   />
                 }
                 onDelete={() => remove(index)}
@@ -140,6 +148,8 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                   isLoading={isLoading}
                   stepIndex={index}
                   isOverrides={isOverrides}
+                  isCreateNewOverrides={isCreateNewOverrides}
+                  isEventEditProductSet={isEventEditProductSet}
                 />
               </SortableTree.Item>
             )}
@@ -149,9 +159,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
 
       <CreateProductSetItem
         title={t("addStep")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           append(getDefaultStepsValues());
           setShowStepModal(true);
           if (errors.steps?.type === HookFormService.manualErrorType) {

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

@@ -89,6 +89,7 @@ export interface ProductControlValues
   totalQuantity: number;
   isAvailable: boolean;
   isSoldOut: boolean;
+  originalProductId: number | null;
   isUnlimited: boolean;
   isRequired: boolean;
   quantitySelector: number;
@@ -159,7 +160,6 @@ export function ProductControl<T extends FormValues>({
   );
   const capacity = watch(`${fieldNamePrefix}.capacity` as Path<T>);
   const disabledDuration = capacity === "0" || !capacity;
-
   const advancedId = useId();
   const nameId = useId();
 
@@ -413,7 +413,7 @@ export function ProductControl<T extends FormValues>({
                 `${fieldNamePrefix}.productGroupId` as Path<T>,
                 errors
               )}
-              disabled={isLoading}
+              disabled={isLoading || isOverrides}
               defaultValue=""
             >
               <option value="">{t("Design:selectProductGroup")}</option>

package/src/product-set/step/StepControl.tsx

@@ -26,6 +26,7 @@ export interface StepControlProps extends IsDeletableEvent {
   stepIndex: number;
   stepName: string;
   onStepNameChange: (args: any) => void;
+  isOverrides?: boolean;
 }
 
 export function StepControl({
@@ -33,6 +34,7 @@ export function StepControl({
   stepIndex,
   stepName,
   onStepNameChange,
+  isOverrides = false,
 }: StepControlProps) {
   const { providerHasMap } = useContext(ProductSetLoadingContext);
   const {
@@ -42,7 +44,6 @@ export function StepControl({
     watch,
   } = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
-
   const fieldName = `steps.${stepIndex}.name` as const;
   const productCategoriesFieldName =
     `steps.${stepIndex}.productCategories` as const;
@@ -71,7 +72,7 @@ export function StepControl({
                     fieldName,
                     errors
                   )}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               control={control}
@@ -114,7 +115,7 @@ export function StepControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverrides}
                         />
                       )}
                       control={control}

package/src/sortable-tree/SortableTreeItem.tsx

@@ -53,7 +53,6 @@ export interface SortableTreeItemProps {
   };
   setIsExpanded?: () => void;
   isOverride?: boolean;
-  isProduct?: boolean;
 }
 
 export function SortableTreeItem({
@@ -81,7 +80,6 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
-  isProduct = false,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -152,7 +150,6 @@ export function SortableTreeItem({
   };
 
   const onEdit = (e) => {
-    if (isOverride && !isProduct) return;
     e.stopPropagation();
     if (edit && !isModalVisible) edit();
     setIsModalVisible(true);