@licklist/design 0.55.1 → 0.57.0

package/dist/events/edit-event-modal/IntervalInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntervalInput.d.ts","sourceRoot":"","sources":["../../../src/events/edit-event-modal/IntervalInput.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAC;AAIzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,EAAE,kBAAkB,eAqJpB"}
+{"version":3,"file":"IntervalInput.d.ts","sourceRoot":"","sources":["../../../src/events/edit-event-modal/IntervalInput.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAC;AAIzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,EAAE,kBAAkB,eAqJpB"}

package/dist/events/edit-event-modal/IntervalInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,a=require("react-i18next"),o=require("react-bootstrap"),i=require("react-hook-form"),l=require("@react-aria/utils"),u=require("../../static/WarningMessage.js"),d=require("luxon");require("../../static/index.js");var s=require("react-intl"),c=require("../../recurrence-input/RecurrenceInput.js");var m=function(){var e=i.useFormContext().watch,n=e("start"),a=e("end"),o=s.useIntl(),l=o.formatList,u=o.formatNumber;return r.useMemo((function(){var e=d.Interval.fromDateTimes(d.DateTime.fromISO(n),d.DateTime.fromISO(a)).toDuration(["days","hours","minutes"]);if(e.isValid){var r=function(e,t){return u(e,{style:"unit",unit:t,unitDisplay:"long"})},o=[[e.days,"day"],[e.hours,"hour"],[e.minutes,"minute"]].filter((function(e){return t.__read(e,1)[0]}));return l(o.map((function(e){return r.apply(void 0,t.__spreadArray([],t.__read(e),!1))})),{style:"long",type:"unit"})}}),[n,a])},f=function(){var e=i.useFormContext().watch,t=a.useTranslation(["Design","Validation"]).t,n=e("start"),o=e("end");return{start:r.useMemo((function(){return{required:t("Validation:fieldRequired",{attribute:t("start")}),validate:function(e){return d.DateTime.fromISO(e).diffNow().toMillis()>0||t("Validation:fieldValidEventStart")}}}),[]),end:r.useMemo((function(){return{validate:function(e){return!e||(d.DateTime.fromISO(e).diff(d.DateTime.fromISO(n)).toMillis()>0||t("Validation:fieldValidEventEnd"))}}}),[n,o])}};exports.IntervalInput=function(e){var s,v,p=e.disabled,g=void 0!==p&&p,E=e.editedProductSet,I=e.productSetId,F=e.productSets,y=a.useTranslation(["Design","Validation"]).t,C=i.useFormContext(),h=C.register,b=C.formState.errors,_=C.watch,D=C.control,S=C.trigger,q=C.setValue,T=m(),M=f(),k=_("rrule"),x=_("start"),O=_("end"),V=t.__read(r.useState(Boolean(k)),2),w=V[0],R=V[1],B=t.__read(r.useState(!1),2),j=B[0],G=B[1],P=l.useId(),L=r.useRef(null),N=r.useRef(null);return r.useEffect((function(){E&&R(!1)}),[E]),r.useEffect((function(){if(F){var e=F.find((function(e){return E&&(null==e?void 0:e.id)===(null==E?void 0:E.id)||Boolean(null==e?void 0:e.parentMenuId)&&(null==e?void 0:e.id)===I}));G(Boolean(e))}}),[F,I,G,E]),n.createElement(n.Fragment,null,n.createElement(o.Form.Row,{className:"interval-container"},n.createElement(o.Form.Group,{as:o.Col,controlId:"start"},n.createElement(o.Form.Label,null,y("start")),n.createElement(o.Form.Control,t.__assign({type:"datetime-local"},h("start",M.start),{value:x,name:"start",required:!0,isInvalid:Boolean(b.start),onChange:function(e){var t=e.target.value;R(!1),q("start",t),d.DateTime.fromISO(O).diff(d.DateTime.fromISO(t)).toMillis()<0&&q("end",t)},onClick:function(){var e;return null===(e=null==L?void 0:L.current)||void 0===e?void 0:e.showPicker()},ref:L,disabled:g})),n.createElement(o.Form.Control.Feedback,{type:"invalid"},null===(s=b.start)||void 0===s?void 0:s.message)),n.createElement(o.Form.Group,{as:o.Col,controlId:"end"},n.createElement(o.Form.Label,null,y("end")),n.createElement(o.Form.Control,t.__assign({type:"datetime-local"},h("end",M.end),{value:O,name:"end",onChange:function(e){return function(e){q("end",e),S("end")}(e.target.value)},min:x,isInvalid:Boolean(b.end),onClick:function(){var e;return null===(e=null==N?void 0:N.current)||void 0===e?void 0:e.showPicker()},ref:N,disabled:g})),n.createElement(o.Form.Control.Feedback,{type:"invalid"},null===(v=b.end)||void 0===v?void 0:v.message),n.createElement(o.Form.Text,{muted:!0},T&&"lasts ".concat(T)))),x&&n.createElement(o.Form.Group,{controlId:P},n.createElement(o.Form.Check,{label:"Recurrent",custom:!0,checked:w,onChange:function(e){var t=e.target.checked;R(t)},disabled:g||Boolean(E)}),!w&&n.createElement(o.Form.Text,{muted:!0},y("reccurentDescription",{item:y("event")}))),j&&n.createElement(u.default,{message:y("recurrentOverridesWarining")}),w&&x&&n.createElement(o.Form.Group,null,n.createElement(i.Controller,{control:D,name:"rrule",render:function(e){var t=e.field,r=t.value,a=t.onChange;return n.createElement(c.RecurrenceInput,{value:r,onChange:a,date:x,minDate:d.DateTime.fromISO(x).plus({day:1}).toFormat("yyyy-MM-dd"),disabled:g})}})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,a=require("react-i18next"),o=require("react-bootstrap"),l=require("react-hook-form"),i=require("@react-aria/utils"),u=require("../../static/WarningMessage.js"),c=require("luxon");require("../../static/index.js");var d=require("../../recurrence-input/RecurrenceInput.js"),s=require("./hooks/useFormattedDuration.js"),m=require("./hooks/useValidationOptions.js");exports.IntervalInput=function(e){var v,f,p=e.disabled,g=void 0!==p&&p,F=e.editedProductSet,E=e.productSetId,h=e.productSets,C=a.useTranslation(["Design","Validation"]).t,I=l.useFormContext(),b=I.register,q=I.formState.errors,k=I.control,y=I.trigger,_=I.setValue,S=s.useFormattedDuration(),x=m.useValidationOptions(),D=l.useWatch({control:k,name:"rrule"}),j=l.useWatch({control:k,name:"start"}),O=l.useWatch({control:k,name:"end"}),B=t.__read(r.useState(Boolean(D)),2),M=B[0],R=B[1],T=t.__read(r.useState(!1),2),W=T[0],G=T[1],P=i.useId(),V=r.useRef(null),w=r.useRef(null);return r.useEffect((function(){F&&R(!1)}),[F]),r.useEffect((function(){if(h){var e=h.find((function(e){return F&&(null==e?void 0:e.id)===(null==F?void 0:F.id)||Boolean(null==e?void 0:e.parentMenuId)&&(null==e?void 0:e.id)===E}));G(Boolean(e))}}),[h,E,G,F]),n.createElement(n.Fragment,null,n.createElement(o.Form.Row,{className:"interval-container"},n.createElement(o.Form.Group,{as:o.Col,controlId:"start"},n.createElement(o.Form.Label,null,C("start")),n.createElement(o.Form.Control,t.__assign({type:"datetime-local"},b("start",x.start),{value:j,name:"start",required:!0,isInvalid:Boolean(q.start),onChange:function(e){var t=e.target.value;R(!1),_("start",t),c.DateTime.fromISO(O).diff(c.DateTime.fromISO(t)).toMillis()<0&&_("end",t)},onClick:function(){var e;return null===(e=null==V?void 0:V.current)||void 0===e?void 0:e.showPicker()},ref:V,disabled:g})),n.createElement(o.Form.Control.Feedback,{type:"invalid"},null===(v=q.start)||void 0===v?void 0:v.message)),n.createElement(o.Form.Group,{as:o.Col,controlId:"end"},n.createElement(o.Form.Label,null,C("end")),n.createElement(o.Form.Control,t.__assign({type:"datetime-local"},b("end",x.end),{value:O,name:"end",onChange:function(e){return function(e){_("end",e),y("end")}(e.target.value)},min:j,required:!0,isInvalid:Boolean(q.end),onClick:function(){var e;return null===(e=null==w?void 0:w.current)||void 0===e?void 0:e.showPicker()},ref:w,disabled:g})),n.createElement(o.Form.Control.Feedback,{type:"invalid"},null===(f=q.end)||void 0===f?void 0:f.message),n.createElement(o.Form.Text,{muted:!0},S&&"lasts ".concat(S)))),j&&n.createElement(o.Form.Group,{controlId:P},n.createElement(o.Form.Check,{label:"Recurrent",custom:!0,checked:M,onChange:function(e){var t=e.target.checked;R(t)},disabled:g||Boolean(F)}),!M&&n.createElement(o.Form.Text,{muted:!0},C("reccurentDescription",{item:C("event")}))),W&&n.createElement(u.default,{message:C("recurrentOverridesWarining")}),M&&j&&n.createElement(o.Form.Group,null,n.createElement(l.Controller,{control:k,name:"rrule",render:function(e){var t=e.field,r=t.value,a=t.onChange;return n.createElement(d.RecurrenceInput,{value:r,onChange:a,date:j,minDate:c.DateTime.fromISO(j).plus({day:1}).toFormat("yyyy-MM-dd"),disabled:g})}})))};

package/dist/events/edit-event-modal/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useFormattedDuration";
+export * from "./useValidationOptions";
+//# sourceMappingURL=index.d.ts.map

package/dist/events/edit-event-modal/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC"}

package/dist/events/edit-event-modal/hooks/useFormattedDuration.d.ts

@@ -0,0 +1,2 @@
+export declare const useFormattedDuration: () => string;
+//# sourceMappingURL=useFormattedDuration.d.ts.map

package/dist/events/edit-event-modal/hooks/useFormattedDuration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormattedDuration.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/useFormattedDuration.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,cAiChC,CAAC"}

package/dist/events/edit-event-modal/hooks/useFormattedDuration.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),u=((e=r)&&"object"==typeof e&&"default"in e&&e.default,require("react-hook-form")),n=require("luxon"),o=require("react-intl");exports.useFormattedDuration=function(){var e=u.useFormContext().control,a=u.useWatch({control:e,name:"start"}),i=u.useWatch({control:e,name:"end"}),s=o.useIntl(),l=s.formatList,m=s.formatNumber,f=r.useMemo((function(){var e=n.Interval.fromDateTimes(n.DateTime.fromISO(a),n.DateTime.fromISO(i)).toDuration(["days","hours","minutes"]);if(e.isValid){var r=function(e,t){return m(e,{style:"unit",unit:t,unitDisplay:"long"})},u=[[e.days,"day"],[e.hours,"hour"],[e.minutes,"minute"]].filter((function(e){return t.__read(e,1)[0]}));return l(u.map((function(e){return r.apply(void 0,t.__spreadArray([],t.__read(e),!1))})),{style:"long",type:"unit"})}}),[a,i]);return f};

package/dist/events/edit-event-modal/hooks/useValidationOptions.d.ts

@@ -0,0 +1,11 @@
+export declare const useValidationOptions: () => {
+    start: {
+        required: string;
+        validate: (value: any) => string | true;
+    };
+    end: {
+        required: string;
+        validate: (value: any) => string | true;
+    };
+};
+//# sourceMappingURL=useValidationOptions.d.ts.map

package/dist/events/edit-event-modal/hooks/useValidationOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidationOptions.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/useValidationOptions.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB;;;;;;;;;CA+BhC,CAAC"}

package/dist/events/edit-event-modal/hooks/useValidationOptions.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-i18next"),t=require("react-hook-form"),i=require("luxon");exports.useValidationOptions=function(){var r=t.useFormContext().control,a=e.useTranslation(["Design","Validation"]).t,n=t.useWatch({control:r,name:"start"});return{start:{required:a("Validation:fieldRequired",{attribute:a("start")}),validate:function(e){return i.DateTime.fromISO(e).diffNow().toMillis()>0||a("Validation:fieldValidEventStart")}},end:{required:a("Validation:fieldRequired",{attribute:a("end")}),validate:function(e){return!e||(i.DateTime.fromISO(e).diff(i.DateTime.fromISO(n)).toMillis()>0||a("Validation:fieldValidEventEnd"))}}}};

package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,2FAqEvB,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,2FA4EvB,CAAC"}

package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.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("react"),n=e(t),r=require("react-bootstrap"),a=e(require("clsx")),u=t.forwardRef((function(e,t){var u=e.className,o=void 0===u?"":u,l=e.value,i=e.onChange,d=e.onArrowDown,m=e.onArrowUp,c=e.min,p=e.max,b=e.placeholder,s=e.defaultValue,f=e.disabled,v=a("payment-number-input",o);return n.createElement("div",{className:v},n.createElement("button",{type:"button",onClick:function(){void 0!==c&&l>c&&d(l-1),void 0===c&&m(l-1)},className:"payment-number-input__btn-down",disabled:f},"−"),n.createElement(r.FormControl,{type:"number",onChange:function(e){return i(Number(e.target.value))},value:l,min:c,max:p,defaultValue:s,placeholder:b,height:"5rem",disabled:f,ref:t}),n.createElement("button",{type:"button",onClick:function(){void 0!==p&&l<p&&m(l+1),void 0===p&&m(l+1)},className:"payment-number-input__btn-up",disabled:f},"+"))}));u.displayName="NumberInput",exports.NumberInput=u;
+"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("react"),n=e(t),a=require("react-bootstrap"),r=e(require("clsx")),u=t.forwardRef((function(e,t){var u=e.className,o=void 0===u?"":u,i=e.value,l=e.onChange,d=e.onArrowDown,c=e.onArrowUp,m=e.min,b=e.max,p=e.placeholder,s=e.defaultValue,f=e.disabled,v=!i,y=void 0!==b&&i===b,N=r("payment-number-input",o);return n.createElement("div",{className:N},n.createElement("button",{type:"button",onClick:function(){void 0!==m&&i>m&&d(i-1),void 0===m&&c(i-1)},className:"payment-number-input__btn-down ".concat(v&&"disabled-number-input-button"),disabled:f},"−"),n.createElement(a.FormControl,{type:"number",onChange:function(e){return l(Number(e.target.value))},value:i,min:m,max:b,defaultValue:s,placeholder:p,height:"5rem",disabled:f,ref:t}),n.createElement("button",{type:"button",onClick:function(){void 0!==b&&(i||0)<b&&c(i+1),void 0===b&&c(i+1)},className:"payment-number-input__btn-up ".concat(y&&"disabled-number-input-button"),disabled:f},"+"))}));u.displayName="NumberInput",exports.NumberInput=u;

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductQuantityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAC9E,OAAO,EACL,OAAO,EACP,eAAe,EAChB,MAAM,qDAAqD,CAAC;AAG7D,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,gGAQ9B,yBAAyB,gBAiE3B,CAAC"}
+{"version":3,"file":"ProductQuantityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAC9E,OAAO,EACL,OAAO,EACP,eAAe,EAChB,MAAM,qDAAqD,CAAC;AAG7D,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,gGAQ9B,yBAAyB,gBAsE3B,CAAC"}

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.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=e(require("react")),n=require("react-i18next"),o=require("react-bootstrap"),r=e(require("clsx")),i=require("../NumberInput/NumberInput.js");exports.ProductQuantityInput=function(e){var u=e.product,a=e.category,l=e.onChange,c=e.clearErrors,d=e.refCallback,s=e.productInfo,p=e.invalid,v=n.useTranslation("Design").t,f=function(e){var t;l({id:u.id,name:u.name,deposit:null==u?void 0:u.deposit,hasDeposit:a.allowDeposits,price:u.price,productCategoryId:a.id,zoneId:null===(t=a.zone)||void 0===t?void 0:t.id,quantity:e,capacity:null==u?void 0:u.capacity})};return u.isSoldOut?t.createElement("div",{className:"iframe-event__sold-out-wrapper"},v("Design:soldOut")):1===(null==u?void 0:u.maxAmount)?t.createElement(o.Button,{ref:d,disabled:u.isSoldOut,className:r("iframe-event__".concat((null==s?void 0:s.quantity)?"unselect-product":"select-product"),p&&"error"),onClick:function(){return f((null==s?void 0:s.quantity)?0:1)}},v("Design:".concat((null==s?void 0:s.quantity)?"unselect":"select"))):t.createElement(i.NumberInput,{ref:d,onChange:function(e){f(e||null),c("".concat(u.id))},onArrowDown:function(){f((null==s?void 0:s.quantity)-1||0),c("".concat(u.id))},onArrowUp:function(){var e;f((null!==(e=null==s?void 0:s.quantity)&&void 0!==e?e:0)+1),c("".concat(u.id))},min:0,placeholder:"0",disabled:u.isSoldOut,value:null==s?void 0:s.quantity,className:r(p&&"error")})};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),n=require("react-i18next"),o=require("react-bootstrap"),u=e(require("clsx")),i=require("../NumberInput/NumberInput.js");exports.ProductQuantityInput=function(e){var r=e.product,l=e.category,a=e.onChange,c=e.clearErrors,d=e.refCallback,s=e.productInfo,m=e.invalid,v=n.useTranslation("Design").t,p=function(e){var t,n=e;(null==r?void 0:r.maxAmount)&&e>(null==r?void 0:r.maxAmount)&&(n=null==r?void 0:r.maxAmount),a({id:r.id,name:r.name,deposit:null==r?void 0:r.deposit,hasDeposit:l.allowDeposits,price:r.price,productCategoryId:l.id,zoneId:null===(t=l.zone)||void 0===t?void 0:t.id,quantity:n,capacity:null==r?void 0:r.capacity})};return r.isSoldOut?t.createElement("div",{className:"iframe-event__sold-out-wrapper"},v("Design:soldOut")):1===(null==r?void 0:r.maxAmount)?t.createElement(o.Button,{ref:d,disabled:r.isSoldOut,className:u("iframe-event__".concat((null==s?void 0:s.quantity)?"unselect-product":"select-product"),m&&"error"),onClick:function(){return p((null==s?void 0:s.quantity)?0:1)}},v("Design:".concat((null==s?void 0:s.quantity)?"unselect":"select"))):t.createElement(i.NumberInput,{ref:d,onChange:function(e){p(e||null),c("".concat(r.id))},onArrowDown:function(){p((null==s?void 0:s.quantity)-1||0),c("".concat(r.id))},onArrowUp:function(){var e;p((null!==(e=null==s?void 0:s.quantity)&&void 0!==e?e:0)+1),c("".concat(r.id))},min:0,max:(null==r?void 0:r.maxAmount)?Number(null==r?void 0:r.maxAmount):void 0,placeholder:"0",disabled:r.isSoldOut,value:null==s?void 0:s.quantity,className:u(m&&"error")})};

package/dist/styles/snippet-templates/SnippetTemplate.scss

@@ -59,7 +59,8 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width
+            $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -72,14 +73,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: .7;
+          opacity: 0.7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -90,7 +91,7 @@
   }
 
   &__label {
-    font-size: .8rem;
+    font-size: 0.8rem;
     margin-top: 1rem;
     margin-bottom: 0.2rem;
   }
@@ -103,8 +104,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin-right: .5rem;
-    margin-top: .5rem;
+    margin-right: 0.5rem;
+    margin-top: 0.5rem;
   }
 
   .form-label {
@@ -181,7 +182,8 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width
+            $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -194,14 +196,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity:  .7;
+          opacity: 0.7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -336,7 +338,8 @@
       }
     }
 
-    .bottom-wrapper, .snippet-template__form {
+    .bottom-wrapper,
+    .snippet-template__form {
       .btn {
         border-radius: 0.25rem;
         width: 100%;
@@ -381,6 +384,10 @@
   }
 }
 
+.disabled-number-input-button {
+  background-color: $snippet-calendar-disabled-button-font-color !important;
+  border-color: $snippet-calendar-disabled-button-font-color !important;
+}
 .color-picker {
   &__color {
     position: absolute;
@@ -442,7 +449,6 @@
       }
     }
   }
-    
 }
 
 @include media-breakpoint-down(xs) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.55.1",
+  "version": "0.57.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

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

@@ -1,9 +1,8 @@
-import React, { useMemo, useState, useRef, useEffect } from "react";
-import { DateTime, Interval } from "luxon";
+import React, { useState, useRef, useEffect } from "react";
+import { DateTime } from "luxon";
 import { Col, Form } from "react-bootstrap";
-import { Controller, RegisterOptions, useFormContext } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 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";
@@ -11,6 +10,7 @@ import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
 import { RecurrenceInput } from "../../recurrence-input";
 import { WarningMessage } from "../../static";
 import { ProductSetFormValues } from "../../product-set/form";
+import { useFormattedDuration, useValidationOptions } from "./hooks";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
@@ -35,7 +35,6 @@ export function IntervalInput({
   const {
     register,
     formState: { errors },
-    watch,
     control,
     trigger,
     setValue,
@@ -44,9 +43,9 @@ export function IntervalInput({
   const formattedDuration = useFormattedDuration();
   const validationOptions = useValidationOptions();
 
-  const rrule = watch("rrule");
-  const start = watch("start");
-  const end = watch("end");
+  const rrule = useWatch({ control, name: "rrule" });
+  const start = useWatch({ control, name: "start" });
+  const end = useWatch({ control, name: "end" });
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
   const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
@@ -123,6 +122,7 @@ export function IntervalInput({
               onChangeEndDate(nextEndtDate)
             }
             min={start}
+            required
             isInvalid={Boolean(errors.end)}
             onClick={() => endDateInput?.current?.showPicker()}
             ref={endDateInput}
@@ -180,75 +180,3 @@ export function IntervalInput({
     </>
   );
 }
-
-const useFormattedDuration = () => {
-  const { watch } = useFormContext<IntervalInputValues>();
-  const start = watch("start");
-  const end = watch("end");
-  const { formatList, formatNumber } = useIntl();
-
-  return useMemo(() => {
-    const interval = Interval.fromDateTimes(
-      DateTime.fromISO(start),
-      DateTime.fromISO(end)
-    ).toDuration(["days", "hours", "minutes"]);
-
-    if (!interval.isValid) return undefined;
-
-    const formatUnit = (value: number, unit: string) =>
-      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
-
-    const units = (
-      [
-        [interval.days, "day"],
-        [interval.hours, "hour"],
-        [interval.minutes, "minute"],
-      ] as Parameters<typeof formatUnit>[]
-    ).filter(([value]) => value);
-
-    return formatList(
-      units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" }
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [start, end]);
-};
-
-const useValidationOptions = () => {
-  const { watch } = useFormContext();
-  const { t } = useTranslation(["Design", "Validation"]);
-  const start = watch("start");
-  const end = watch("end");
-
-  return {
-    start: useMemo<RegisterOptions>(
-      () => ({
-        required: t("Validation:fieldRequired", {
-          attribute: t("start"),
-        }) as string,
-        // TODO: uncomment when event splitting is implemented
-        // and extract into plugins
-        validate: (value) =>
-          DateTime.fromISO(value).diffNow().toMillis() > 0 ||
-          (t("Validation:fieldValidEventStart") as string),
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      []
-    ),
-
-    end: useMemo<RegisterOptions>(
-      () => ({
-        // TODO: uncomment when event splitting is implemented
-        // and extract into plugins
-        validate: (value) =>
-          // endAt not required
-          value
-            ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
-                0 || (t("Validation:fieldValidEventEnd") as string)
-            : true,
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [start, end]
-    ),
-  };
-};

package/src/events/edit-event-modal/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useFormattedDuration";
+export * from "./useValidationOptions";

package/src/events/edit-event-modal/hooks/useFormattedDuration.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { DateTime, Interval } from "luxon";
+import { IntervalInputValues } from "../IntervalInput";
+
+export const useFormattedDuration = () => {
+  const { control } = useFormContext<IntervalInputValues>();
+  const start = useWatch({ control, name: "start" });
+  const end = useWatch({ control, name: "end" });
+  const { formatList, formatNumber } = useIntl();
+
+  const duration = useMemo(() => {
+    const interval = Interval.fromDateTimes(
+      DateTime.fromISO(start),
+      DateTime.fromISO(end)
+    ).toDuration(["days", "hours", "minutes"]);
+
+    if (!interval.isValid) return undefined;
+
+    const formatUnit = (value: number, unit: string) =>
+      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
+
+    const units = (
+      [
+        [interval.days, "day"],
+        [interval.hours, "hour"],
+        [interval.minutes, "minute"],
+      ] as Parameters<typeof formatUnit>[]
+    ).filter(([value]) => value);
+
+    return formatList(
+      units.map((args) => formatUnit(...args)),
+      { style: "long", type: "unit" }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [start, end]);
+
+  return duration;
+};

package/src/events/edit-event-modal/hooks/useValidationOptions.tsx

@@ -0,0 +1,36 @@
+import { DateTime } from "luxon";
+import { useFormContext, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+export const useValidationOptions = () => {
+  const { control } = useFormContext();
+  const { t } = useTranslation(["Design", "Validation"]);
+  const start = useWatch({ control, name: "start" });
+
+  return {
+    start: {
+      required: t("Validation:fieldRequired", {
+        attribute: t("start"),
+      }) as string,
+      // TODO: uncomment when event splitting is implemented
+      // and extract into plugins
+      validate: (value) =>
+        DateTime.fromISO(value).diffNow().toMillis() > 0 ||
+        (t("Validation:fieldValidEventStart") as string),
+    },
+
+    end: {
+      required: t("Validation:fieldRequired", {
+        attribute: t("end"),
+      }) as string,
+      // TODO: uncomment when event splitting is implemented
+      // and extract into plugins
+      validate: (value) =>
+        // endAt not required
+        value
+          ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
+              0 || (t("Validation:fieldValidEventEnd") as string)
+          : true,
+    },
+  };
+};

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -31,8 +31,11 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     },
     ref
   ) => {
+    const minusButtonGreyedOut = !value;
+    const plusButtonGreyedOut = max !== undefined && value === max;
+
     const handleArrowUpClick = () => {
-      if (max !== undefined && value < max) {
+      if (max !== undefined && (value || 0) < max) {
         onArrowUp(value + 1);
       }
       if (max === undefined) {
@@ -56,7 +59,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type="button"
           onClick={handleArrowDownClick}
-          className="payment-number-input__btn-down"
+          className={`payment-number-input__btn-down ${
+            minusButtonGreyedOut && "disabled-number-input-button"
+          }`}
           disabled={disabled}
         >
           &minus;
@@ -76,7 +81,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type="button"
           onClick={handleArrowUpClick}
-          className="payment-number-input__btn-up"
+          className={`payment-number-input__btn-up ${
+            plusButtonGreyedOut && "disabled-number-input-button"
+          }`}
           disabled={disabled}
         >
           &#43;

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -45,6 +45,10 @@ export const ProductQuantityInput = ({
   const { t } = useTranslation("Design");
 
   const onChange = (quantity: number | null) => {
+    let productQuantity = quantity;
+    if (product?.maxAmount && quantity > product?.maxAmount) {
+      productQuantity = product?.maxAmount;
+    }
     _onChange({
       id: product.id,
       name: product.name,
@@ -53,7 +57,7 @@ export const ProductQuantityInput = ({
       price: product.price,
       productCategoryId: category.id,
       zoneId: category.zone?.id,
-      quantity,
+      quantity: productQuantity,
       capacity: product?.capacity,
     });
   };
@@ -100,6 +104,7 @@ export const ProductQuantityInput = ({
         clearErrors(`${product.id}` as const);
       }}
       min={0}
+      max={product?.maxAmount ? Number(product?.maxAmount) : undefined}
       placeholder="0"
       disabled={product.isSoldOut}
       value={productInfo?.quantity}

package/src/styles/snippet-templates/SnippetTemplate.scss

@@ -59,7 +59,8 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width
+            $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -72,14 +73,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: .7;
+          opacity: 0.7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -90,7 +91,7 @@
   }
 
   &__label {
-    font-size: .8rem;
+    font-size: 0.8rem;
     margin-top: 1rem;
     margin-bottom: 0.2rem;
   }
@@ -103,8 +104,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin-right: .5rem;
-    margin-top: .5rem;
+    margin-right: 0.5rem;
+    margin-top: 0.5rem;
   }
 
   .form-label {
@@ -181,7 +182,8 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width
+            $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -194,14 +196,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity:  .7;
+          opacity: 0.7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -336,7 +338,8 @@
       }
     }
 
-    .bottom-wrapper, .snippet-template__form {
+    .bottom-wrapper,
+    .snippet-template__form {
       .btn {
         border-radius: 0.25rem;
         width: 100%;
@@ -381,6 +384,10 @@
   }
 }
 
+.disabled-number-input-button {
+  background-color: $snippet-calendar-disabled-button-font-color !important;
+  border-color: $snippet-calendar-disabled-button-font-color !important;
+}
 .color-picker {
   &__color {
     position: absolute;
@@ -442,7 +449,6 @@
       }
     }
   }
-    
 }
 
 @include media-breakpoint-down(xs) {