@licklist/design 0.44.485-dev.9 → 0.44.485-dev.90

package/dist/zone/form/components/AvailableTimesControl.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-export declare type AvailableTimesControlRef = {
+export type AvailableTimesControlRef = {
     trigger: () => Promise<boolean>;
     getValues: () => {
         availableTimes: string[];
     };
 };
-declare type AvailableTimesControlProps = {
+type AvailableTimesControlProps = {
     isLoading: boolean;
     workHours?: WorkHour[];
     defaultValues?: string[];

package/dist/zone/form/components/AvailableTimesControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvailableTimesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/AvailableTimesControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAGtF,oBAAY,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CAC/C,CAAC;AAEF,aAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,qBAAqB,6GAwFhC,CAAC"}
+{"version":3,"file":"AvailableTimesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/AvailableTimesControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAMtF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CAC/C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,qBAAqB,6GA4FhC,CAAC"}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),a=require("react"),t=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),l=require("react-bootstrap"),n=require("react-hook-form"),s=require("@react-aria/utils"),o=require("../utils/dates.js"),u=a.forwardRef((function(e,u){var c,m=e.isLoading,d=e.workHours,f=e.defaultValues,b=void 0===f?[]:f,v=s.useId(),g=i.useTranslation(["Design","Validation"]).t,p=n.useForm({mode:"onChange"}),h=p.register,k=p.formState.errors,T=p.reset,_=p.trigger,E=p.getValues,q=p.setValue,y=(0,p.watch)("availableTimes")||[],C=a.useMemo((function(){return o.getCheckboxesByWorkHours(d)}),[d]);a.useImperativeHandle(u,(function(){return{trigger:_,getValues:E}}));return a.useEffect((function(){b&&T({availableTimes:b})}),[b]),t.createElement(l.Form.Group,{controlId:v},t.createElement(l.Form.Label,null,g("Design:startTimes")),t.createElement("div",{className:"zone-available-times"},C.map((function(e){return t.createElement(l.Form.Check,{key:e,inline:!0,custom:!0,id:e},t.createElement(l.Form.Check.Input,{type:"checkbox",value:e,checked:y.includes(e),onChange:function(){return function(e){y.includes(e)?q("availableTimes",y.filter((function(r){return r!==e}))):q("availableTimes",r.__spreadArray(r.__spreadArray([],r.__read(y),!1),[e],!1))}(e)},disabled:m}),t.createElement(l.Form.Check.Label,null,e))}))),t.createElement(l.Form.Control,r.__assign({type:"hidden"},h("availableTimes",{required:{value:!0,message:g("Validation:fieldMinNumber",{attribute:g("startTimes"),min:1})}}))),t.createElement("div",{className:"manual-form-error"},null===(c=k.availableTimes)||void 0===c?void 0:c.message))}));exports.AvailableTimesControl=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),a=require("react"),t=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),l=require("react-bootstrap"),n=require("react-hook-form"),s=require("@react-aria/utils"),o=require("../utils/dates.js"),u=a.forwardRef((function(e,u){var c,m=e.isLoading,d=e.workHours,f=e.defaultValues,v=void 0===f?[]:f,b=s.useId(),g=i.useTranslation(["Design","Validation"]).t,h=n.useForm({mode:"onChange"}),p=h.register,T=h.formState.errors,k=h.reset,_=h.trigger,E=h.getValues,q=h.setValue,y=(0,h.watch)("availableTimes")||[],C=a.useMemo((function(){return o.getCheckboxesByWorkHours(d)}),[d]);a.useImperativeHandle(u,(function(){return{trigger:_,getValues:E}}));return a.useEffect((function(){v&&k({availableTimes:v})}),[v]),t.createElement(l.Form.Group,{controlId:b},t.createElement(l.Form.Label,null,g("Design:startTimes")),t.createElement("div",{className:"zone-available-times"},C.map((function(e){return t.createElement(l.Form.Check,{key:e,inline:!0,custom:!0,id:e},t.createElement(l.Form.Check.Input,{type:"checkbox",value:e,checked:y.includes(o.calculateTimeWithOffset(e)),onChange:function(){return function(e){var a=o.calculateTimeWithOffset(e);y.includes(a)?q("availableTimes",y.filter((function(e){return e!==a}))):q("availableTimes",r.__spreadArray(r.__spreadArray([],r.__read(y),!1),[a],!1))}(e)},disabled:m}),t.createElement(l.Form.Check.Label,null,e))}))),t.createElement(l.Form.Control,r.__assign({type:"hidden"},p("availableTimes",{required:{value:!0,message:g("Validation:fieldMinNumber",{attribute:g("startTimes"),min:1})}}))),t.createElement("div",{className:"manual-form-error"},null===(c=T.availableTimes)||void 0===c?void 0:c.message))}));exports.AvailableTimesControl=u;

package/dist/zone/form/components/DescriptionControl.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type DescriptionControlProps = {
+type DescriptionControlProps = {
     isLoading: boolean;
 };
 export declare const DescriptionControl: ({ isLoading }: DescriptionControlProps) => JSX.Element;

package/dist/zone/form/components/DescriptionControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/DescriptionControl.tsx"],"names":[],"mappings":";AAUA,aAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,kBAAmB,uBAAuB,gBAoCxE,CAAC"}
+{"version":3,"file":"DescriptionControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/DescriptionControl.tsx"],"names":[],"mappings":";AAUA,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,kBAAmB,uBAAuB,gBAoCxE,CAAC"}

package/dist/zone/form/components/NameControl.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type NameControlProps = {
+type NameControlProps = {
     isLoading: boolean;
 };
 export declare const NameControl: ({ isLoading }: NameControlProps) => JSX.Element;

package/dist/zone/form/components/NameControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NameControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/NameControl.tsx"],"names":[],"mappings":";AAQA,aAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,gBAkC1D,CAAC"}
+{"version":3,"file":"NameControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/NameControl.tsx"],"names":[],"mappings":";AAQA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,gBAkC1D,CAAC"}

package/dist/zone/form/components/SortControl.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type SortControlProps = {
+type SortControlProps = {
     isLoading: boolean;
 };
 export declare const SortControl: ({ isLoading }: SortControlProps) => JSX.Element;

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":";AAQA,aAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,gBAmC1D,CAAC"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":";AAQA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,gBAmC1D,CAAC"}

package/dist/zone/form/components/ZoneControl.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-export declare type ZoneControlProps = {
+export type ZoneControlProps = {
     isLoading: boolean;
     workHours?: WorkHour[];
 };

package/dist/zone/form/components/ZoneControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneControl.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAQtF,oBAAY,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,8BAGrB,gBAAgB,gBAyBlB,CAAC"}
+{"version":3,"file":"ZoneControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneControl.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAQtF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,8BAGrB,gBAAgB,gBAyBlB,CAAC"}

package/dist/zone/form/components/ZoneImageControl.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type ZoneImageControlProps = {
+type ZoneImageControlProps = {
     isLoading?: boolean;
 };
 export declare const ZoneImageControl: ({ isLoading, }: ZoneImageControlProps) => JSX.Element;

package/dist/zone/form/components/ZoneImageControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneImageControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneImageControl.tsx"],"names":[],"mappings":";AAWA,aAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mBAE1B,qBAAqB,gBAqFvB,CAAC"}
+{"version":3,"file":"ZoneImageControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneImageControl.tsx"],"names":[],"mappings":";AAWA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mBAE1B,qBAAqB,gBAqFvB,CAAC"}

package/dist/zone/form/components/ZoneRecurrencesControl.d.ts

@@ -4,7 +4,7 @@ import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMa
 export interface DateAndRecurrenceInputValues {
     zoneRecurrences?: Partial<ZoneRecurrence>[];
 }
-export declare type ZoneRecurrenceControlProps = {
+export type ZoneRecurrenceControlProps = {
     workHours?: WorkHour[];
     isLoading?: boolean;
 };

package/dist/zone/form/components/ZoneRecurrencesControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneRecurrencesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneRecurrencesControl.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAMlG,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAatF,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;CAC7C;AAED,oBAAY,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,8BAGhC,0BAA0B,gBA4N5B,CAAC"}
+{"version":3,"file":"ZoneRecurrencesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneRecurrencesControl.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAMlG,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AActF,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;CAC7C;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,8BAGhC,0BAA0B,gBA4N5B,CAAC"}

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"),a=require("react-bootstrap"),o=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var s=require("@dnd-kit/core"),d=require("@dnd-kit/sortable"),m=require("../../../modals/confirmation/ConfirmModal.js"),f=require("../../../recurring-date-picker-input/RecurringDatePickerInput.js"),v=require("./ZoneRecurrenceControl.js"),g=require("./AvailableTimesControl.js"),p={name:"sameWidth",enabled:!0,phase:"beforeWrite",requires:["computeStyles"],fn:function(e){var r=e.state,t={width:"".concat(r.rects.reference.width+4,"px"),marginLeft:"-2px",maxWidth:"unset"};Object.assign(r.styles.popper,t)},effect:function(e){var r=e.state,t=r.elements.reference.getBoundingClientRect().width,n={width:"".concat(t,"px"),maxWidth:"unset"};Object.assign(r.elements.popper.style,n)}};exports.ZoneRecurrencesControl=function(e){var _,b,x=e.workHours,E=e.isLoading,h=void 0!==E&&E,C=u.useFormContext(),q=C.control,y=C.register,R=C.formState.errors,D=C.getValues,S=C.setValue,k=C.clearErrors,w=u.useFieldArray({name:"zoneRecurrences",control:q,keyName:"_id"}),T=w.fields,z=w.append,I=w.update,N=w.move,j=r.__read(t.useState(!1),2),A=j[0],O=j[1],F=r.__read(t.useState({index:null,values:null}),2),L=F[0],V=F[1],M=function(){return V({index:null,values:null})},P=r.__read(t.useState([]),2),W=P[0],Z=P[1],H=t.useRef(),B=t.useRef();c.useClickAway(H,(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)||(O(!1),M())}));var G=l.useId(),K=i.useTranslation("Design").t,J=function(){M(),O((function(e){return!e}))};return t.useEffect((function(){T.length&&k("zoneRecurrences")}),[T,k]),n.createElement(a.Form.Group,null,n.createElement(a.Form.Label,null,K("zoneAvailable")),n.createElement(a.OverlayTrigger,{show:A,overlay:n.createElement(a.Popover,{id:G,className:"rounded"},n.createElement(a.Popover.Content,{className:"shadow-lg rounded",ref:H},n.createElement(f.RecurringDatePickerInput,{defaultValues:L.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i,a;return r.__generator(this,(function(o){switch(o.label){case 0:return[4,null===(n=B.current)||void 0===n?void 0:n.trigger()];case 1:return o.sent()?(t=r.__assign({rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},B.current.getValues()),(null===(i=L.values)||void 0===i?void 0:i.id)&&(t.id=null===(a=L.values)||void 0===a?void 0:a.id),null!==L.index?I(L.index,t):z(t),O((function(){return!1})),M(),[2]):[2]}}))}))},onDelete:function(){var e=L.index;O(!1),M(),setTimeout((function(){var r=D().zoneRecurrences;S("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0},n.createElement(g.AvailableTimesControl,{workHours:x,isLoading:h,defaultValues:W,ref:B})))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[p]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(s.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=T.findIndex((function(e){return String(e._id)===t.id})),i=T.findIndex((function(e){return String(e._id)===r.id}));N(n,i)}}},n.createElement(d.SortableContext,{items:null!==(_=null==T?void 0:T.map((function(e){return String(e._id)})))&&void 0!==_?_:[],strategy:d.verticalListSortingStrategy},T.map((function(e,r){return n.createElement(v.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){M(),setTimeout((function(){V({index:r,values:e}),Z(e.availableTimes||[]),O((function(){return!0}))}),100)}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:J,onKeyDown:J},n.createElement(o.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),K("addDates")),n.createElement(a.Form.Control,r.__assign({type:"hidden"},y("zoneRecurrences",{required:{value:!0,message:K("Validation:fieldMinNumber",{attribute:K("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(b=R.zoneRecurrences)||void 0===b?void 0:b.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"),a=require("react-bootstrap"),o=require("../../../static/Icon.js"),u=require("react-hook-form"),l=require("@react-aria/utils"),c=require("react-use");require("../../../static/index.js");var s=require("@dnd-kit/core"),d=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"),g=require("./ZoneRecurrenceControl.js"),p=require("./AvailableTimesControl.js");exports.ZoneRecurrencesControl=function(e){var _,E,b=e.workHours,q=e.isLoading,C=void 0!==q&&q,x=u.useFormContext(),R=x.control,D=x.register,k=x.formState.errors,y=x.getValues,S=x.setValue,I=x.clearErrors,T=u.useFieldArray({name:"zoneRecurrences",control:R,keyName:"_id"}),h=T.fields,z=T.append,N=T.update,j=T.move,w=r.__read(t.useState(!1),2),A=w[0],F=w[1],M=r.__read(t.useState({index:null,values:null}),2),P=M[0],V=M[1],L=function(){return V({index:null,values:null})},O=r.__read(t.useState([]),2),Z=O[0],H=O[1],G=t.useRef(),K=t.useRef();c.useClickAway(G,(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)||(F(!1),L())}));var W=l.useId(),B=i.useTranslation("Design").t,J=function(){L(),F((function(e){return!e}))};return t.useEffect((function(){h.length&&I("zoneRecurrences")}),[h,I]),n.createElement(a.Form.Group,null,n.createElement(a.Form.Label,null,B("zoneAvailable")),n.createElement(a.OverlayTrigger,{show:A,overlay:n.createElement(a.Popover,{id:W,className:"rounded"},n.createElement(a.Popover.Content,{className:"shadow-lg rounded",ref:G},n.createElement(v.RecurringDatePickerInput,{defaultValues:P.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i,a;return r.__generator(this,(function(o){switch(o.label){case 0:return[4,null===(n=K.current)||void 0===n?void 0:n.trigger()];case 1:return o.sent()?(t=r.__assign({rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},K.current.getValues()),(null===(i=P.values)||void 0===i?void 0:i.id)&&(t.id=null===(a=P.values)||void 0===a?void 0:a.id),null!==P.index?N(P.index,t):z(t),F((function(){return!1})),L(),[2]):[2]}}))}))},onDelete:function(){var e=P.index;F(!1),L(),setTimeout((function(){var r=y().zoneRecurrences;S("zoneRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)},setInitialStartDateAfterSelect:!0},n.createElement(p.AvailableTimesControl,{workHours:b,isLoading:C,defaultValues:Z,ref:K})))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[f.sameWidthPopperModifier]}},n.createElement("div",{className:"zone-recurrences"},n.createElement(s.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=h.findIndex((function(e){return String(e._id)===t.id})),i=h.findIndex((function(e){return String(e._id)===r.id}));j(n,i)}}},n.createElement(d.SortableContext,{items:null!==(_=null==h?void 0:h.map((function(e){return String(e._id)})))&&void 0!==_?_:[],strategy:d.verticalListSortingStrategy},null==h?void 0:h.map((function(e,r){return n.createElement(g.ZoneRecurrenceControl,{key:e._id,zoneRecurrence:e,onEdit:function(){return function(e,r){L(),setTimeout((function(){V({index:r,values:e}),H(e.availableTimes||[]),F((function(){return!0}))}),100)}(e,r)}})})))),n.createElement("div",{className:"zone-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:J,onKeyDown:J},n.createElement(o.default,{type:"plus-circle",height:"1rem",className:"zone-recurrence-icon-add mr-2"}),B("addDates")),n.createElement(a.Form.Control,r.__assign({type:"hidden"},D("zoneRecurrences",{required:{value:!0,message:B("Validation:fieldMinNumber",{attribute:B("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(E=k.zoneRecurrences)||void 0===E?void 0:E.message))))};

package/dist/zone/form/components/ZoneTypeControl.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type ZoneTypeControlProps = {
+type ZoneTypeControlProps = {
     isLoading: boolean;
 };
 export declare const ZoneTypeControl: ({ isLoading }: ZoneTypeControlProps) => JSX.Element;

package/dist/zone/form/components/ZoneTypeControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneTypeControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneTypeControl.tsx"],"names":[],"mappings":";AAWA,aAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,kBAAmB,oBAAoB,gBAqClE,CAAC"}
+{"version":3,"file":"ZoneTypeControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneTypeControl.tsx"],"names":[],"mappings":";AAWA,KAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,kBAAmB,oBAAoB,gBAqClE,CAAC"}

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

@@ -1,4 +1,5 @@
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 export declare const getTimeCheckboxRanges: (startTime: string, endTime: string, range?: number) => string[];
 export declare const getCheckboxesByWorkHours: (workHours?: WorkHour[]) => string[];
+export declare const calculateTimeWithOffset: (time: string) => string;
 //# sourceMappingURL=dates.d.ts.map

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;AAKtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BA8ChB,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;AAKtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BA8ChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aA0C9D,CAAC;AAGF,eAAO,MAAM,uBAAuB,SAAU,MAAM,KAAG,MAStD,CAAC"}

package/dist/zone/form/utils/dates.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("@licklist/core/dist/Services/Date"),t="00:00",a="23:59",n=function(t,a,n){void 0===n&&(n=5);for(var i=new Date,u=e.__read(t.split(r.TIME_SEPARATOR),2),o=u[0],s=u[1],_=e.__read(a.split(r.TIME_SEPARATOR),2),l=_[0],d=_[1],c=r.datetime(i.getFullYear(),i.getMonth()+1,i.getDate(),Number(o),Number(s)),g=r.datetime(i.getFullYear(),i.getMonth()+1,i.getDate(),Number(l),Number(d)),p={},f=0;g>=c;)c=new Date(c.getTime()+60*n*1e3),p[f]=c,f+=1;var v=Object.keys(p).map((function(t){var a=p[t];if(a<g){var n=e.__read(a.toISOString().split("T"),2)[1],i=e.__read(n.split(r.TIME_SEPARATOR),2);return[i[0],i[1]].join(r.TIME_SEPARATOR)}return null})).filter(Boolean);return v};exports.getCheckboxesByWorkHours=function(r){if(!r||!r.length)return n(t,a);var i=r.reduce((function(r,t){var a=t.start,n=t.end;return a&&n?e.__spreadArray(e.__spreadArray([],e.__read(r),!1),[{start:a,end:n}],!1):r}),[]);if(7!==i.length)return n(t,a);var u=i.reduce((function(r,t){var a=t.start,n=t.end;return e.__spreadArray(e.__spreadArray([],e.__read(r),!1),[a,n],!1)}),[]).sort((function(e,r){return e.localeCompare(r)}));return n(u[0]||t,u[u.length-1]||a)},exports.getTimeCheckboxRanges=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("@licklist/core/dist/Services/Date"),t="00:00",a="23:59",n=function(t,a,n){void 0===n&&(n=5);for(var i=new Date,u=e.__read(t.split(r.TIME_SEPARATOR),2),o=u[0],s=u[1],_=e.__read(a.split(r.TIME_SEPARATOR),2),c=_[0],l=_[1],d=r.datetime(i.getFullYear(),i.getMonth()+1,i.getDate(),Number(o),Number(s)),f=r.datetime(i.getFullYear(),i.getMonth()+1,i.getDate(),Number(c),Number(l)),p={},g=0;f>=d;)d=new Date(d.getTime()+60*n*1e3),p[g]=d,g+=1;var v=Object.keys(p).map((function(t){var a=p[t];if(a<f){var n=e.__read(a.toISOString().split("T"),2)[1],i=e.__read(n.split(r.TIME_SEPARATOR),2);return[i[0],i[1]].join(r.TIME_SEPARATOR)}return null})).filter(Boolean);return v},i=function(e){var r=e+(new Date).getTimezoneOffset()/60;return r>24?r-24:r<0?r+24:r};exports.calculateTimeWithOffset=function(r){var t=e.__read(r.split(":"),2),a=t[0],n=t[1],u=i(+a).toString().padStart(2,"0");return"".concat(u,":").concat(n)},exports.getCheckboxesByWorkHours=function(r){if(!r||!r.length)return n(t,a);var i=r.reduce((function(r,t){var a=t.start,n=t.end;return a&&n?e.__spreadArray(e.__spreadArray([],e.__read(r),!1),[{start:a,end:n}],!1):r}),[]);if(7!==i.length)return n(t,a);var u=i.reduce((function(r,t){var a=t.start,n=t.end;return e.__spreadArray(e.__spreadArray([],e.__read(r),!1),[a,n],!1)}),[]).sort((function(e,r){return e.localeCompare(r)}));return n(u[0]||t,u[u.length-1]||a)},exports.getTimeCheckboxRanges=n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.9",
+  "version": "0.44.485-dev.90",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,10 +53,11 @@
     "@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.15.x",
+    "@licklist/core": ">=0.15.28-dev.0 < 0.15.28",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": "0.20.x",
+    "@licklist/plugins": ">=0.20.133-dev.5 < 0.20.133",
     "@mdx-js/react": "1.6.22",
+    "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
     "@rollup/plugin-image": "2.0.6",
     "@rollup/plugin-json": "4.1.0",
@@ -187,7 +188,7 @@
     "style-loader": "2.0.0",
     "ts-jest": "26.5.2",
     "twemoji-parser": "14.0.0",
-    "typescript": "4.5.5",
+    "typescript": "4.9.5",
     "url-loader": "4.1.1",
     "use-debounce": "7.0.1"
   },

package/src/assets/iframe/dateInfo/available.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/limited.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.2406" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="1.2406" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+<rect x="1.2406" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/soldOut.svg

@@ -0,0 +1,6 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="5.94013" height="10" transform="translate(0.497131)" fill="white"/>
+<rect x="0.591156" y="0.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="3.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="6.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+</svg>

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { DateTime } from "luxon";
+import { DateTimeButton, DateTimeButtonProps } from "./DateTimeButton";
+
+export default {
+  title: "DateTimeButton",
+  component: DateTimeButton,
+} as Meta;
+
+const date = DateTime.fromISO("2023-12-28T10:10:10.000Z");
+
+export const Default: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Default.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Selected: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Selected.args = {
+  date,
+  isSelected: true,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Disabled: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Disabled.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+};
+
+export const Time: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Time.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+  isTimeButton: true,
+};
+
+export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+OnlyTime.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+  isOnlyTimeContainer: true,
+};

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

@@ -0,0 +1,106 @@
+import React from "react";
+import clsx from "clsx";
+import { DateTime } from "luxon";
+import { DAY_NUMBER_WITH_MONTH, DAY_OF_WEEK } from "@licklist/core/dist/Config";
+import { useTranslation } from "react-i18next";
+import { isToday, isTomorrow } from "date-fns";
+
+export type DateTimeButtonProps = {
+  date?: DateTime;
+  time?: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  onSelect: (date: DateTime | string) => void;
+  isOnlyTimeContainer?: boolean;
+};
+
+export const DateTimeButton = ({
+  date,
+  isDisabled,
+  time,
+  isSelected,
+  onSelect,
+  isOnlyTimeContainer,
+}: DateTimeButtonProps) => {
+  const onClick = () => {
+    if (isDisabled) return;
+    onSelect(date || time);
+  };
+
+  // const infoLogo = useMemo(() => {
+  //   if (info?.logo === infoLogoType.LIMIT) {
+  //     return <LimitedSvg />;
+  //   }
+  //   if (info?.logo === infoLogoType.AVAILABLE) {
+  //     return <AvailableSvg />;
+  //   }
+  //   if (info?.logo === infoLogoType.SOLD_OUT) {
+  //     return <SoldOutSvg />;
+  //   }
+  //   return null;
+  // }, [info]);
+
+  return (
+    <div
+      role="button"
+      onClick={onClick}
+      onKeyPress={onClick}
+      className={clsx(
+        "date-time-button",
+        isDisabled && "disabled",
+        isSelected && "selected",
+        time && "time-button",
+        isOnlyTimeContainer && "only-time-container"
+      )}
+      tabIndex={0}
+    >
+      {date ? (
+        <DateContent
+          date={date}
+          isDisabled={isDisabled}
+          isSelected={isSelected}
+        />
+      ) : (
+        time
+      )}
+
+      {/* TODO fix info props */}
+      {/* {info && (
+        <div className="info">
+          {info.logo && <Logo className="logo" logo={infoLogo} />}
+          <div>{info.description}</div>
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+const DateContent = ({
+  date,
+  isDisabled,
+  isSelected,
+}: Pick<DateTimeButtonProps, "date" | "isDisabled" | "isSelected">) => {
+  const { t } = useTranslation("Design");
+
+  const getDate = () => {
+    if (isToday(date.toJSDate())) return t("today");
+    if (isTomorrow(date.toJSDate())) return t("tomorrow");
+    return date.toFormat(DAY_OF_WEEK);
+  };
+
+  return (
+    <>
+      {getDate()}
+      <div
+        className={clsx(
+          "descriptions",
+          isSelected && "selected",
+          isDisabled && "disabled"
+        )}
+      >
+        {/* TODO add ordinal to date format */}
+        {date.toFormat(DAY_NUMBER_WITH_MONTH)}
+      </div>
+    </>
+  );
+};

package/src/date-time-button/index.ts

@@ -0,0 +1 @@
+export * from "./DateTimeButton";

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

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
 import { useId } from "@react-aria/utils";
+import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
 import { RecurrenceInput } from "../../recurrence-input";
 import { WarningMessage } from "../../static";
@@ -13,6 +14,8 @@ import { ProductSetFormValues } from "../../product-set/form";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
+  productSets?: ProductSet[];
+  productSetId?: number;
   disabled?: boolean;
 }
 
@@ -25,6 +28,8 @@ export interface IntervalInputValues {
 export function IntervalInput({
   disabled = false,
   editedProductSet,
+  productSetId,
+  productSets,
 }: IntervalInputProps) {
   const { t } = useTranslation(["Design", "Validation"]);
   const {
@@ -32,6 +37,7 @@ export function IntervalInput({
     formState: { errors },
     watch,
     control,
+    trigger,
     setValue,
   } = useFormContext<IntervalInputValues>();
 
@@ -42,6 +48,7 @@ export function IntervalInput({
   const start = watch("start");
   const end = watch("end");
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
+  const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
 
   const startDateInput = useRef<HTMLInputDateElement | null>(null);
@@ -66,6 +73,23 @@ export function IntervalInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editedProductSet]);
 
+  useEffect(() => {
+    if (!productSets) return;
+
+    const isOverridenProductSet = productSets.find(
+      (productSet) =>
+        (editedProductSet && productSet?.id === editedProductSet?.id) ||
+        (Boolean(productSet?.parentMenuId) && productSet?.id === productSetId)
+    );
+
+    setIsOverriden(Boolean(isOverridenProductSet));
+  }, [productSets, productSetId, setIsOverriden, editedProductSet]);
+
+  const onChangeEndDate = (nextEndtDate: string) => {
+    setValue("end", nextEndtDate);
+    trigger("end");
+  };
+
   return (
     <>
       <Form.Row className="interval-container">
@@ -96,7 +120,7 @@ export function IntervalInput({
             value={end}
             name="end"
             onChange={({ target: { value: nextEndtDate } }) =>
-              setValue("end", nextEndtDate)
+              onChangeEndDate(nextEndtDate)
             }
             min={start}
             isInvalid={Boolean(errors.end)}
@@ -129,9 +153,11 @@ export function IntervalInput({
               {t("reccurentDescription", { item: t("event") })}
             </Form.Text>
           )}
-          <WarningMessage message={t("recurrentOverridesWarining")} />
         </Form.Group>
       )}
+      {isOverriden && (
+        <WarningMessage message={t("recurrentOverridesWarining")} />
+      )}
       {recurrent && start && (
         <Form.Group>
           <Controller

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

@@ -121,6 +121,7 @@ export const EditEventForm = ({
 
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
+  const productSetId = watch("productSetId");
 
   const {
     images,
@@ -267,6 +268,8 @@ export const EditEventForm = ({
           <IntervalInput
             key={watch("rrule")}
             disabled={disabled}
+            productSetId={productSetId}
+            productSets={productSets}
             editedProductSet={editedProductSet}
           />
           {categories.length !== 0 && (

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

@@ -11,6 +11,7 @@ import { ProductSetControl } from "../../../../../product-set";
 import { ProductSetContextProvider } from "../../../../../product-set/form/context";
 import { getDefaultValues } from "../../../utils/getDefaultProductSet";
 import { EditEventFormValues } from "../../EditEventForm";
+import { getFilteredTemplates } from "../../../../../product-set/utils/index";
 
 export const DEFAULT_FEE = 5;
 
@@ -109,8 +110,16 @@ export const EditEventProductSet = ({
       <FormProvider {...form}>
         <Form className="mt-6">
           <ProductSetControl
-            emailTemplates={emailTemplates}
-            smsTemplates={smsTemplates}
+            smsTemplates={getFilteredTemplates(
+              smsTemplates,
+              formValues?.smsTemplates
+            )}
+            emailTemplates={getFilteredTemplates(
+              emailTemplates,
+              formValues?.emailTemplates
+            )}
+            showEmailTemplate={!!emailTemplates}
+            showSmsTemplate={!!smsTemplates}
             fieldSets={fieldSetsData}
             isLoading={isLoading}
             companyName={selectedCompany?.title}

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

@@ -3,6 +3,7 @@ import {
   DEFAULT_PRODUCT_SET_TYPE,
   ProductSet,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { getFilteredTemplates } from "../../../product-set/utils/index";
 import { ProductSetFormValues } from "../../../product-set/form/ProductSetForm";
 
 export const getDefaultValues = (
@@ -14,15 +15,16 @@ export const getDefaultValues = (
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? "",
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
+  thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
   isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
-  emailTemplateId:
+  emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
-      ? productSet?.mailTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
-  smsTemplateId:
+  smsTemplates:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? productSet?.smsTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -55,7 +55,7 @@ export const EventStatisticModal = ({
                 { key: "total", label: "" },
               ]}
               data={data}
-              className="event-statistic-table"
+              className="striped-static-table"
             />
           </>
         ) : (

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -3,6 +3,7 @@ import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/Even
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { VenueMap, VenueMapRef } from "./components/VenueMap";
 import { useCanvasSize } from "./hooks/useCanvasSize";
 
@@ -24,6 +25,7 @@ export type EventVenueMapProps = {
   products?: Partial<Product>[];
   pointProducts?: Partial<PointProduct>[];
   onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
+  soldOutProducts?: QuantityCheckProductInfo[];
 } & EventVenueMapIframeProps;
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
@@ -43,6 +45,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
+      soldOutProducts,
     },
     ref
   ) => {
@@ -66,6 +69,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
           ref={ref}
           choosedProductUuids={choosedProductUuids}
           errorOnChoosedProductUuids={errorOnChoosedProductUuids}
+          soldOutProducts={soldOutProducts}
         />
       </EventVenueMapProvider>
     );