@licklist/design 0.65.0 → 0.66.0-dev.0

package/dist/zone/form/components/ZoneRecurrencesControl.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),o=require("react-bootstrap"),a=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var d=require("@dnd-kit/core"),s=require("@dnd-kit/sortable"),m=require("../../../modals/confirmation/ConfirmModal.js"),v=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),f=require("../../../product-set/control/DateAndRecurrenceInput.js"),p=require("./ZoneRecurrenceControl.js");exports.ZoneRecurrencesControl=function(){var e,g,_=u.useFormContext(),E=_.control,q=_.register,x=_.formState.errors,C=_.getValues,D=_.setValue,R=_.clearErrors,b=u.useFieldArray({name:"zoneRecurrences",control:E,keyName:"_id"}),y=b.fields,I=b.append,S=b.update,k=b.move,z=r.__read(t.useState(!1),2),N=z[0],h=z[1],j=r.__read(t.useState({index:null,values:null}),2),T=j[0],A=j[1],w=function(){return A({index:null,values:null})},F=t.useRef();c.useClickAway(F,(function(e){var r,t,n;m.CONFIRM_MODAL_ACTIONS.includes(null===(n=null===(t=null===(r=e.target)||void 0===r?void 0:r.attributes)||void 0===t?void 0:t.getNamedItem("data-id"))||void 0===n?void 0:n.value)||(h(!1),w())}));var M=l.useId(),P=i.useTranslation(["Design","Validation"]).t,O=function(){w(),h((function(e){return!e}))};return t.useEffect((function(){y.length&&R("zoneRecurrences")}),[y,R]),n.createElement(o.Form.Group,null,n.createElement(o.Form.Label,null,P("zoneAvailable")),n.createElement(o.OverlayTrigger,{show:N,overlay:n.createElement(o.Popover,{id:M,className:"rounded"},n.createElement(o.Popover.Content,{className:"shadow-lg rounded",ref:F},n.createElement(v.RecurringDatePickerInput,{defaultValues:T.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i;return r.__generator(this,(function(r){return t={rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},(null===(n=T.values)||void 0===n?void 0:n.id)&&(t.id=null===(i=T.values)||void 0===i?void 0:i.id),null!==T.index?S(T.index,t):I(t),h((function(){return!1})),w(),[2]}))}))},onDelete:function(){var e=T.index;h(!1),w(),setTimeout((function(){var r=C().zoneRecurrences;D("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0}))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[f.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(d.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=y.findIndex((function(e){return String(e._id)===t.id})),i=y.findIndex((function(e){return String(e._id)===r.id}));k(n,i)}}},n.createElement(s.SortableContext,{items:null!==(e=null==y?void 0:y.map((function(e){return String(e._id)})))&&void 0!==e?e:[],strategy:s.verticalListSortingStrategy},null==y?void 0:y.map((function(e,r){return n.createElement(p.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){w(),A({index:r,values:e}),h((function(){return!0}))}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:O,onKeyDown:O},n.createElement(a.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),P("addDates")),n.createElement(o.Form.Control,r.__assign({type:"hidden"},q("zoneRecurrences",{required:{value:!0,message:P("Validation:fieldMinNumber",{attribute:P("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(g=x.zoneRecurrences)||void 0===g?void 0:g.message))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),o=require("react-bootstrap"),a=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var d=require("@dnd-kit/core"),s=require("@dnd-kit/sortable"),m=require("../../../modals/confirmation/ConfirmModal.js"),v=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),f=require("../../../product-set/control/DateAndRecurrenceInput.js"),p=require("./ZoneRecurrenceControl.js");exports.ZoneRecurrencesControl=function(e){var g,_,E=e.workHours,q=u.useFormContext(),x=q.control,C=q.register,D=q.formState.errors,R=q.getValues,b=q.setValue,k=q.clearErrors,y=u.useFieldArray({name:"zoneRecurrences",control:x,keyName:"_id"}),I=y.fields,S=y.append,z=y.update,N=y.move,h=r.__read(t.useState(!1),2),j=h[0],w=h[1],T=r.__read(t.useState({index:null,values:null}),2),A=T[0],F=T[1],M=function(){return F({index:null,values:null})},P=t.useRef();c.useClickAway(P,(function(e){var r,t,n;m.CONFIRM_MODAL_ACTIONS.includes(null===(n=null===(t=null===(r=e.target)||void 0===r?void 0:r.attributes)||void 0===t?void 0:t.getNamedItem("data-id"))||void 0===n?void 0:n.value)||(w(!1),M())}));var O=l.useId(),V=i.useTranslation(["Design","Validation"]).t,L=function(){M(),w((function(e){return!e}))};return t.useEffect((function(){I.length&&k("zoneRecurrences")}),[I,k]),n.createElement(o.Form.Group,null,n.createElement(o.Form.Label,null,V("zoneAvailable")),n.createElement(o.OverlayTrigger,{show:j,overlay:n.createElement(o.Popover,{id:O,className:"rounded"},n.createElement(o.Popover.Content,{className:"shadow-lg rounded",ref:P},n.createElement(v.RecurringDatePickerInput,{defaultValues:A.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i;return r.__generator(this,(function(r){return t={rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},(null===(n=A.values)||void 0===n?void 0:n.id)&&(t.id=null===(i=A.values)||void 0===i?void 0:i.id),null!==A.index?z(A.index,t):S(t),w((function(){return!1})),M(),[2]}))}))},onDelete:function(){var e=A.index;w(!1),M(),setTimeout((function(){var r=R().zoneRecurrences;b("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0,workHours:E}))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[f.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(d.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=I.findIndex((function(e){return String(e._id)===t.id})),i=I.findIndex((function(e){return String(e._id)===r.id}));N(n,i)}}},n.createElement(s.SortableContext,{items:null!==(g=null==I?void 0:I.map((function(e){return String(e._id)})))&&void 0!==g?g:[],strategy:s.verticalListSortingStrategy},null==I?void 0:I.map((function(e,r){return n.createElement(p.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){M(),F({index:r,values:e}),w((function(){return!0}))}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:L,onKeyDown:L},n.createElement(a.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),V("addDates")),n.createElement(o.Form.Control,r.__assign({type:"hidden"},C("zoneRecurrences",{required:{value:!0,message:V("Validation:fieldMinNumber",{attribute:V("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(_=D.zoneRecurrences)||void 0===_?void 0:_.message))))};

package/dist/zone/form/utils/dates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAOtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BAuChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aA0C9D,CAAC"}
+{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAOtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BAuChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aAyC9D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.65.0",
+  "version": "0.66.0-dev.0",
   "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.25.3",
+    "@licklist/core": ">=0.28.0-dev.0 < 0.28.0",
     "@licklist/eslint-config": "0.4.5",
-    "@licklist/plugins": "^0.27.2",
+    "@licklist/plugins": ">=0.30.0-dev.1 < 0.30.0",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -116,7 +116,6 @@
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
     "emojibase-regex": "6.0.1",
-    "enzyme": "3.11.0",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "8.3.0",
@@ -188,7 +187,6 @@
   "devDependencies": {
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "identity-obj-proxy": "^3.0.0"
   },
   "volta": {

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -8,7 +8,7 @@ export default {
   component: DateTimeButton,
 } as Meta;
 
-const date = DateTime.now();
+const date = DateTime.now().plus({ hour: 1 });
 
 export const Default: Story<DateTimeButtonProps> = (args) => {
   return <DateTimeButton {...args} />;
@@ -19,6 +19,7 @@ Default.args = {
   isSelected: false,
   isDisabled: false,
   onSelect: () => null,
+  shouldCalculateResources: false,
 };
 
 export const Selected: Story<DateTimeButtonProps> = (args) => {

package/src/date-time-button/DateTimeButton.tsx

@@ -46,7 +46,7 @@ export const DateTimeButton = ({
 
   const isTimeVariant = variant === Variant.time;
 
-  const isTimeInPast = isTimeVariant && isDateInPast(date);
+  const isPast = variant === Variant.time ? isPastTime(date) : isPastDate(date);
 
   const noResources =
     shouldCalculateResources &&
@@ -55,7 +55,7 @@ export const DateTimeButton = ({
       !has(resources, "bookedResources") ||
       !has(resources, "totalResources"));
 
-  const isDisabled = _isDisabled || isSoldOut || isTimeInPast || noResources;
+  const isDisabled = _isDisabled || isSoldOut || isPast || noResources;
 
   return (
     <button
@@ -85,7 +85,7 @@ export const DateTimeButton = ({
       {showResources && resources && (
         <AvailabilityIndicator
           resources={resources}
-          isUnavailable={_isDisabled || isTimeInPast}
+          isUnavailable={_isDisabled || isPast}
           isSoldOut={isSoldOut}
         />
       )}
@@ -93,5 +93,7 @@ export const DateTimeButton = ({
   );
 };
 
-const isDateInPast = (date: DateTime): boolean =>
-  date.toUTC() <= DateTime.now().toUTC();
+const isPastTime = (date: DateTime): boolean => DateTime.now() > date;
+
+const isPastDate = (date: DateTime): boolean =>
+  DateTime.now() > date.set({ hour: 23, minute: 59, second: 59 });

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 "
@@ -199,14 +206,12 @@ export const SelectEventProductSet = ({
         </Form.Group>
       </div>
       {showEditProductSet && productSetId && (
-        <>
-          <EditEventProductSet
-            onSubmit={onSubmit}
-            defaultValues={
-              productSetId === editedProductSet?.id && editedProductSet
-            }
-          />
-        </>
+        <EditEventProductSet
+          onSubmit={onSubmit}
+          defaultValues={
+            productSetId === editedProductSet?.id && editedProductSet
+          }
+        />
       )}
     </>
   );

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

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

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

@@ -63,6 +63,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -36,6 +36,9 @@ export interface RyftPaymentFormProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   accountId: any;
   isCreateLoading: boolean;
+  isAppUsingInIframe?: boolean;
+  onApplePayButtonClick?: () => void;
+  applePayButtonDisabled?: boolean;
   initRyft: (
     onSuccess: () => void,
     onFailure: (error?: string) => void
@@ -48,15 +51,19 @@ export interface RyftPaymentFormProps {
 export const RyftPaymentForm = ({
   accountId,
   isCreateLoading,
+  isAppUsingInIframe,
   providerPaymentSettings,
+  onApplePayButtonClick,
   initRyft,
   resetReferrer,
   onSubmit,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(["Design", "Validation", "Ryft"]);
   const formRef = useRef<HTMLFormElement | null>(null);
+  const showApplePayButton =
+    isAppUsingInIframe &&
+    providerPaymentSettings?.additionalPaymentMethodsEnabled;
   const history = useHistory();
-
   const [isValid, setIsValid] = useState(false);
   const [isBtnDisabled, setIsBtnDisabled] = useState(false);
   const [ryftInitFailure, setRyftInitFailure] = useState<boolean>(false);
@@ -133,12 +140,14 @@ export const RyftPaymentForm = ({
       }
       injectComponentsInRyftForm({
         t,
+        isAppUsingInIframe,
+        onApplePayButtonClick,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length]
+    [formRef.current?.childNodes?.length, showApplePayButton]
   );
 
   useEffect(() => {

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

@@ -1,12 +1,21 @@
 import { TFunction } from "react-i18next";
+import { RyftPaymentFormProps } from "../RyftPaymentForm";
+
+interface InjectComponentsInRyftForm
+  extends Pick<
+    RyftPaymentFormProps,
+    "onApplePayButtonClick" | "isAppUsingInIframe"
+  > {
+  t: TFunction<string[]>;
+  additionalPaymentMethodsEnabled?: boolean;
+}
 
 export const injectComponentsInRyftForm = ({
   t,
   additionalPaymentMethodsEnabled,
-}: {
-  t: TFunction<string[]>;
-  additionalPaymentMethodsEnabled?: boolean;
-}) => {
+  isAppUsingInIframe,
+  onApplePayButtonClick,
+}: InjectComponentsInRyftForm) => {
   const cardContainer = document.getElementById("ryft-pay-iframe");
 
   if (!cardContainer) {
@@ -34,6 +43,7 @@ export const injectComponentsInRyftForm = ({
   // Removing of the old mobile  title container  and divider container
   document.getElementById("mobile-pay-title")?.remove();
   document.getElementById("mobile-pay-divider-container")?.remove();
+  document.getElementById("apple-pay")?.remove();
 
   // Adding title and divider for apple and google pay button
   const mobilePayTitle = document.createElement("div");
@@ -48,6 +58,15 @@ export const injectComponentsInRyftForm = ({
   divider.id = "mobile-pay-divider";
   container.id = "mobile-pay-divider-container";
   container.append(dividerText, divider);
+  if (isAppUsingInIframe) {
+    const applePayButton = document.createElement("button");
+    applePayButton.id = "apple-pay";
+    applePayButton.type = "button";
+    applePayButton.className = "bg-dark btn btn-primary apple-pay-button";
+    applePayButton.textContent = t("Events:payWithApple");
+    applePayButton.onclick = onApplePayButtonClick;
+    payGrid.append(applePayButton);
+  }
   payGrid.before(mobilePayTitle);
   payGrid.after(container);
 };

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

@@ -28,15 +28,13 @@ import {
   AvailableTimesControlRef,
 } from "../../zone/form/components/AvailableTimesControl";
 
-// eslint-disable-next-line max-len
-
 export interface DateAndRecurrenceInputValues {
   menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
   providerHasBookingManagement: boolean;
   isLoading?: boolean;
 }
@@ -90,7 +88,7 @@ export const DateAndRecurrenceInput = ({
     clearEditState();
   });
 
-  const popoverId = useId()!;
+  const popoverId = useId();
 
   const { t } = useTranslation("Design");
 
@@ -228,6 +226,7 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
+                workHours={workHours}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

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

@@ -5,7 +5,7 @@ import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
-import { TIMEZONE, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
+import { UTC_TIMEZONE, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 import { DateTime } from "luxon";
 import RRule, { Frequency } from "rrule";
@@ -136,7 +136,7 @@ export const DateInput = ({
       until: (start as DateTime).toJSDate(),
       byweekday: [],
       freq: Frequency.DAILY,
-      tzid: TIMEZONE,
+      tzid: UTC_TIMEZONE,
       interval: 1,
     }).replace("RRULE:", "");
 

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

@@ -85,9 +85,10 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
   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,6 +125,11 @@ export function ProductSetControl({
 
   const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
   const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
+  const showDateSelector = !isEventEditProductSet && isOverrides;
+
+  const isZoneAdded = steps.some(({ productCategories }) =>
+    productCategories.some(({ zoneId }) => zoneId)
+  );
 
   return (
     <Row
@@ -165,9 +172,9 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        {isOverrides ? (
+        {showDateSelector ? (
           <DateInput
-            workHours={workHours}
+            workHours={isZoneAdded ? workHours : undefined}
             isLoading={isLoading}
             providerHasBookingManagement={providerHasBookingManagement}
           />
@@ -176,7 +183,7 @@ export function ProductSetControl({
             {isCreateAction && (
               <DateAndRecurrenceInput
                 isEventEditProductSet={isEventEditProductSet}
-                workHours={workHours}
+                workHours={isZoneAdded ? workHours : undefined}
                 isLoading={isLoading}
                 providerHasBookingManagement={providerHasBookingManagement}
               />
@@ -188,7 +195,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

@@ -26,12 +26,16 @@ import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 export interface WithIsLoading {
   isLoading: boolean;
 }
+export interface WithIdOptional {
+  id?: number;
+}
+
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;
@@ -53,6 +57,7 @@ export interface ProductSetFormProps
   isCreateAction?: boolean;
   isOverrides?: boolean;
   workHours?: WorkHour[];
+  isCreateNewOverrides?: boolean;
 }
 
 export function ProductSetForm({
@@ -70,6 +75,7 @@ export function ProductSetForm({
   isCreateAction,
   workHours,
   isOverrides,
+  isCreateNewOverrides,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -115,7 +121,11 @@ export function ProductSetForm({
   }, [serverErrors, setError]);
 
   useEffect(() => {
-    window.history.pushState(null, "", window.location.pathname);
+    window.history.pushState(
+      null,
+      "",
+      window.location.pathname + window.location.search
+    );
     window.addEventListener("beforeunload", onBeforeUnload);
     window.addEventListener("popstate", onPopState);
 
@@ -166,6 +176,7 @@ export function ProductSetForm({
                     workHours={workHours}
                     providerHasBookingManagement={providerHasBookingManagement}
                     isOverrides={isOverrides}
+                    isCreateNewOverrides={isCreateNewOverrides}
                   />
                   <Row>
                     <Col md={6} sm={12} />