@licklist/design 0.44.485-dev.94 → 0.44.485-dev.96

package/dist/iframe/event/event-calendar/components/CalendarDate/CalendarDate.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")),a=require("react-bootstrap"),r=e(require("clsx"));exports.CalendarDate=function(e){var i=e.initialDate,d=e.currentDate,n=e.selectedDate,l=e.setSelectedDate,c=e.isDisabled,s=void 0!==c&&c,u=d<i||s;return t.createElement(a.Button,{variant:"link",disabled:u,className:r("calendar-date",n&&+d==+n&&"selected-date",u&&"disabled-date"),onClick:function(){s||l(d)}},d.day)};
+"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")),a=require("react-bootstrap"),r=e(require("clsx"));exports.CalendarDate=function(e){var d=e.initialDate,i=e.currentDate,l=e.selectedDate,n=e.setSelectedDate,c=e.isDisabled,s=void 0!==c&&c,u=i<d||s;return t.createElement(a.Button,{variant:"link",disabled:u,className:r("calendar-date",(null==l?void 0:l.hasSame(i,"day"))&&"selected-date",u&&"disabled-date"),onClick:function(){s||n(i)}},i.day)};

package/dist/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.d.ts

@@ -2,7 +2,11 @@
 interface RecurrenceIntervalAndFrequencyInputProps {
     disabled?: boolean;
     minDate?: string;
+    startDateLabel?: string;
+    startTimeLabel?: string;
+    endDateLabel?: string;
+    endTimeLabel?: string;
 }
-declare function RecurrenceIntervalAndFrequencyInput({ disabled, minDate, }: RecurrenceIntervalAndFrequencyInputProps): JSX.Element;
+declare function RecurrenceIntervalAndFrequencyInput({ disabled, minDate, startDateLabel, startTimeLabel, endDateLabel, endTimeLabel, }: RecurrenceIntervalAndFrequencyInputProps): JSX.Element;
 export default RecurrenceIntervalAndFrequencyInput;
 //# sourceMappingURL=RecurrenceIntervalAndFrequencyInput.d.ts.map

package/dist/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecurrenceIntervalAndFrequencyInput.d.ts","sourceRoot":"","sources":["../../src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx"],"names":[],"mappings":";AAMA,UAAU,wCAAwC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,iBAAS,mCAAmC,CAAC,EAC3C,QAAgB,EAChB,OAAO,GACR,EAAE,wCAAwC,eAkG1C;AAED,eAAe,mCAAmC,CAAC"}
+{"version":3,"file":"RecurrenceIntervalAndFrequencyInput.d.ts","sourceRoot":"","sources":["../../src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx"],"names":[],"mappings":";AAMA,UAAU,wCAAwC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,mCAAmC,CAAC,EAC3C,QAAgB,EAChB,OAAO,EACP,cAAc,EACd,cAAc,EACd,YAAY,EACZ,YAAY,GACb,EAAE,wCAAwC,eA8F1C;AAED,eAAe,mCAAmC,CAAC"}

package/dist/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,l=require("react-i18next"),n=require("react-bootstrap"),o=require("react-hook-form");exports.default=function(e){var a,i,m=e.disabled,s=void 0!==m&&m,u=e.minDate,d=l.useTranslation(["Design","Notification","App"]).t,c=o.useFormContext(),v=c.getValues,g=c.setValue,p=c.formState.errors,E=c.register,F=v("startDate"),f=v("endDate"),D=v("startTime"),b=v("endTime");return r.createElement(r.Fragment,null,r.createElement(n.Row,{className:"align-items-center"},r.createElement(n.Col,{xs:12,sm:6},r.createElement(n.Form.Group,null,r.createElement(n.Form.Label,null,d("Design:fromDate")),r.createElement(n.Form.Control,t.__assign({type:"date"},E("startDate",{required:!0}),{defaultValue:F,className:F&&"date-input-with-value",disabled:s,onChange:function(e){var t=e.target.value;g("startDate",t)},min:u,isInvalid:Boolean(p.startDate)})),r.createElement(n.Form.Control.Feedback,{type:"invalid"},null===(a=p.startDate)||void 0===a?void 0:a.message))),r.createElement(n.Col,{xs:12,sm:6},r.createElement(n.Form.Group,null,r.createElement(n.Form.Label,null,d("Design:toDate")),r.createElement(n.Form.Control,t.__assign({type:"date"},E("endDate",{required:!0}),{defaultValue:f,className:f&&"date-input-with-value",disabled:s,onChange:function(e){var t=e.target.value;g("endDate",t)},min:F||void 0,isInvalid:Boolean(p.endDate)})),r.createElement(n.Form.Control.Feedback,{type:"invalid"},null===(i=p.endDate)||void 0===i?void 0:i.message)))),r.createElement(n.Row,{className:"align-items-center"},r.createElement(n.Col,{xs:12,sm:6},r.createElement(n.Form.Group,null,r.createElement(n.Form.Label,null,d("Design:availableFrom")),r.createElement(n.Form.Control,t.__assign({type:"time"},E("startTime",{required:!1}),{placeholder:"hh:mm",defaultValue:D,disabled:s,onChange:function(e){var t=e.target.value;g("startTime","".concat(t,":00"))},isInvalid:Boolean(p.startTime)})))),r.createElement(n.Col,{xs:12,sm:6},r.createElement(n.Form.Group,null,r.createElement(n.Form.Label,null,d("Design:availableTo")),r.createElement(n.Form.Control,t.__assign({type:"time"},E("endTime",{required:!1}),{placeholder:"hh:mm",defaultValue:b,disabled:s,onChange:function(e){var t=e.target.value;g("endTime","".concat(t,":59"))},isInvalid:Boolean(p.endTime)}))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),l=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-i18next"),n=require("react-bootstrap"),o=require("react-hook-form");exports.default=function(e){var a,i,m=e.disabled,s=void 0!==m&&m,u=e.minDate,d=e.startDateLabel,c=e.startTimeLabel,v=e.endDateLabel,b=e.endTimeLabel,p=r.useTranslation(["Design","Notification","App"]).t,E=o.useFormContext(),g=E.getValues,D=E.setValue,F=E.formState.errors,f=E.register,C=g("startDate"),h=g("endDate"),T=g("startTime"),_=g("endTime");return l.createElement(l.Fragment,null,l.createElement(n.Row,{className:"align-items-center"},l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=d?d:p("Design:fromDate")),l.createElement(n.Form.Control,t.__assign({type:"date"},f("startDate",{required:!0}),{defaultValue:C,className:C&&"date-input-with-value",disabled:s,onChange:function(e){var t=e.target.value;D("startDate",t)},min:u,isInvalid:Boolean(F.startDate)})),l.createElement(n.Form.Control.Feedback,{type:"invalid"},null===(a=F.startDate)||void 0===a?void 0:a.message))),l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=v?v:p("Design:toDate")),l.createElement(n.Form.Control,t.__assign({type:"date"},f("endDate",{required:!0}),{defaultValue:h,className:h&&"date-input-with-value",disabled:s,onChange:function(e){var t=e.target.value;D("endDate",t)},min:C||void 0,isInvalid:Boolean(F.endDate)})),l.createElement(n.Form.Control.Feedback,{type:"invalid"},null===(i=F.endDate)||void 0===i?void 0:i.message)))),l.createElement(n.Row,{className:"align-items-center"},l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=c?c:p("Design:availableFrom")),l.createElement(n.Form.Control,t.__assign({type:"time"},f("startTime",{required:!1}),{placeholder:"hh:mm",defaultValue:T,disabled:s,isInvalid:Boolean(F.startTime)})))),l.createElement(n.Col,{xs:12,sm:6},l.createElement(n.Form.Group,null,l.createElement(n.Form.Label,null,null!=b?b:p("Design:availableTo")),l.createElement(n.Form.Control,t.__assign({type:"time"},f("endTime",{required:!1}),{placeholder:"hh:mm",defaultValue:_,disabled:s,isInvalid:Boolean(F.endTime)}))))))};

package/dist/styles/resources-blocking/_index.scss

@@ -7,6 +7,37 @@
     overflow: auto;
   }
 
+  .reccurrence-interval-container {
+    .form-group {
+      margin-bottom: 0.5rem;
+      .form-control {
+        height: 1.5rem;
+        font-size: 0.625rem;
+        border: 2px solid #dcdcdc;
+        border-radius: 0.5rem;
+      }
+    }
+  }
+
+  .custom-checkbox .custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.5rem;
+    border: 2px solid #0e8ce2;
+    margin-top: -0.3rem;
+  }
+  .custom-checkbox .custom-control-label::after {
+    width: 1.5rem;
+    height: 1.5rem;
+    top: 0;
+  }
+
+  .custom-control-label {
+    padding-left: 0.5rem;
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+
   label,
   header,
   button {
@@ -14,6 +45,10 @@
     font-size: 0.875rem;
   }
 
+  .title {
+    margin-left: 0.25rem;
+  }
+
   header {
     display: flex;
     justify-content: space-between;
@@ -46,6 +81,7 @@
     display: flex;
     align-items: center;
     gap: 1rem;
+    margin-bottom: 1rem;
 
     span {
       font-weight: 600;
@@ -58,6 +94,7 @@
     justify-content: space-between;
     align-items: center;
     gap: 0.25rem;
+    margin-bottom: 0.5rem;
   }
 
   .text-input.form-group {
@@ -90,7 +127,7 @@
       font-weight: 600;
     }
 
-    .lane {
+    .resource {
       margin-bottom: 0.25rem;
     }
   }

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

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

@@ -1,5 +1,4 @@
 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;AAGF,eAAO,MAAM,uBAAuB,SAAU,MAAM,KAAG,MAStD,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"}

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),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;
+"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;

package/package.json

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

package/src/iframe/back-button/index.ts

@@ -1,2 +1 @@
 export * from "./BackButton";
-

package/src/iframe/event/event-calendar/components/CalendarDate/CalendarDate.tsx

@@ -32,7 +32,7 @@ export const CalendarDate = ({
       disabled={disabled}
       className={clsx(
         "calendar-date",
-        selectedDate && +currentDate === +selectedDate && "selected-date",
+        selectedDate?.hasSame(currentDate, "day") && "selected-date",
         disabled && "disabled-date"
       )}
       onClick={onClick}

package/src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -7,11 +7,19 @@ import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 interface RecurrenceIntervalAndFrequencyInputProps {
   disabled?: boolean;
   minDate?: string;
+  startDateLabel?: string;
+  startTimeLabel?: string;
+  endDateLabel?: string;
+  endTimeLabel?: string;
 }
 
 function RecurrenceIntervalAndFrequencyInput({
   disabled = false,
   minDate,
+  startDateLabel,
+  startTimeLabel,
+  endDateLabel,
+  endTimeLabel,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
@@ -32,7 +40,7 @@ function RecurrenceIntervalAndFrequencyInput({
       <Row className="align-items-center">
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:fromDate")}</Form.Label>
+            <Form.Label>{startDateLabel ?? t("Design:fromDate")}</Form.Label>
             <Form.Control
               type="date"
               {...register("startDate", { required: true })}
@@ -53,7 +61,7 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:toDate")}</Form.Label>
+            <Form.Label>{endDateLabel ?? t("Design:toDate")}</Form.Label>
             <Form.Control
               type="date"
               {...register("endDate", { required: true })}
@@ -76,16 +84,15 @@ function RecurrenceIntervalAndFrequencyInput({
       <Row className="align-items-center">
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:availableFrom")}</Form.Label>
+            <Form.Label>
+              {startTimeLabel ?? t("Design:availableFrom")}
+            </Form.Label>
             <Form.Control
               type="time"
               {...register("startTime", { required: false })}
               placeholder="hh:mm"
               defaultValue={startTime}
               disabled={disabled}
-              onChange={({ target: { value } }) => {
-                setValue("startTime", `${value}:00`);
-              }}
               isInvalid={Boolean(errors.startTime)}
             />
           </Form.Group>
@@ -93,16 +100,13 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:availableTo")}</Form.Label>
+            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
             <Form.Control
               type="time"
               {...register("endTime", { required: false })}
               placeholder="hh:mm"
               defaultValue={endTime}
               disabled={disabled}
-              onChange={({ target: { value } }) => {
-                setValue("endTime", `${value}:59`);
-              }}
               isInvalid={Boolean(errors.endTime)}
             />
           </Form.Group>

package/src/styles/resources-blocking/_index.scss

@@ -7,6 +7,37 @@
     overflow: auto;
   }
 
+  .reccurrence-interval-container {
+    .form-group {
+      margin-bottom: 0.5rem;
+      .form-control {
+        height: 1.5rem;
+        font-size: 0.625rem;
+        border: 2px solid #dcdcdc;
+        border-radius: 0.5rem;
+      }
+    }
+  }
+
+  .custom-checkbox .custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.5rem;
+    border: 2px solid #0e8ce2;
+    margin-top: -0.3rem;
+  }
+  .custom-checkbox .custom-control-label::after {
+    width: 1.5rem;
+    height: 1.5rem;
+    top: 0;
+  }
+
+  .custom-control-label {
+    padding-left: 0.5rem;
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+
   label,
   header,
   button {
@@ -14,6 +45,10 @@
     font-size: 0.875rem;
   }
 
+  .title {
+    margin-left: 0.25rem;
+  }
+
   header {
     display: flex;
     justify-content: space-between;
@@ -46,6 +81,7 @@
     display: flex;
     align-items: center;
     gap: 1rem;
+    margin-bottom: 1rem;
 
     span {
       font-weight: 600;
@@ -58,6 +94,7 @@
     justify-content: space-between;
     align-items: center;
     gap: 0.25rem;
+    margin-bottom: 0.5rem;
   }
 
   .text-input.form-group {
@@ -90,7 +127,7 @@
       font-weight: 600;
     }
 
-    .lane {
+    .resource {
       margin-bottom: 0.25rem;
     }
   }

package/src/zone/form/components/AvailableTimesControl.tsx

@@ -9,10 +9,8 @@ import { Form } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { useId } from "@react-aria/utils";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import {
-  calculateTimeWithOffset,
-  getCheckboxesByWorkHours,
-} from "../utils/dates";
+import { calculateTimeWithOffset } from "@licklist/plugins/dist/utils/time";
+import { getCheckboxesByWorkHours } from "../utils/dates";
 
 export type AvailableTimesControlRef = {
   trigger: () => Promise<boolean>;

package/src/zone/form/utils/dates.ts

@@ -97,27 +97,3 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
       DEFAULT_END_DAY_TIME
   );
 };
-
-// adds time zone offset to times selected by user
-export const calculateTimeWithOffset = (time: string): string => {
-  // time has format "HH:mm"
-  const [hours, minutes] = time.split(":");
-
-  const hoursWithOffset = addOffsetToHours(+hours);
-
-  const hoursWithPadding = hoursWithOffset.toString().padStart(2, "0");
-
-  return `${hoursWithPadding}:${minutes}`;
-};
-
-const addOffsetToHours = (hours: number): number => {
-  const timeZoneOffset = new Date().getTimezoneOffset() / 60;
-
-  const hoursWithOffset = hours + timeZoneOffset;
-
-  if (hoursWithOffset > 24) return hoursWithOffset - 24;
-
-  if (hoursWithOffset < 0) return hoursWithOffset + 24;
-
-  return hoursWithOffset;
-};

package/dist/provider/resources-blocking-modal/ResourcesBlockingModal.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-export type ResourcesBlockingModalProps = {
-    show: boolean;
-    zones: Zone[];
-    lanes: {
-        zoneId: Zone["id"];
-        lanes: string[];
-    }[];
-};
-export declare const ResourcesBlockingModal: ({ show, zones, lanes, }: ResourcesBlockingModalProps) => JSX.Element;
-//# sourceMappingURL=ResourcesBlockingModal.d.ts.map

package/dist/provider/resources-blocking-modal/ResourcesBlockingModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ResourcesBlockingModal.d.ts","sourceRoot":"","sources":["../../../src/provider/resources-blocking-modal/ResourcesBlockingModal.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,wDAAwD,CAAC;AAc9E,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE;QAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,sBAAsB,4BAIhC,2BAA2B,gBAwE7B,CAAC"}

package/dist/provider/resources-blocking-modal/index.d.ts

@@ -1,2 +0,0 @@
-export { ResourcesBlockingModal } from "./ResourcesBlockingModal";
-//# sourceMappingURL=index.d.ts.map

package/dist/provider/resources-blocking-modal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/provider/resources-blocking-modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/src/provider/resources-blocking-modal/ResourcesBlockingModal.stories.tsx

@@ -1,51 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-import {
-  ResourcesBlockingModal,
-  ResourcesBlockingModalProps,
-} from "./ResourcesBlockingModal";
-
-export default {
-  title: "Provider/ResourcesBlockingModal",
-  component: ResourcesBlockingModal,
-} as Meta;
-
-export const Default: Story<ResourcesBlockingModalProps> = (props) => {
-  return <ResourcesBlockingModal {...props} />;
-};
-
-Default.args = {
-  show: true,
-  zones: [
-    {
-      id: 1,
-      name: "Zone 1",
-      providerId: 1,
-      type: "standard",
-      sort: null,
-      description: "description",
-      createdAt: "2021-09-01T12:00:00.000Z",
-      updatedAt: null,
-      deletedAt: null,
-      zoneRecurrences: null,
-      image: null,
-    },
-    {
-      id: 2,
-      name: "Zone 2",
-      providerId: 1,
-      type: "standard",
-      sort: null,
-      description: "description",
-      createdAt: "2021-09-01T12:00:00.000Z",
-      updatedAt: null,
-      deletedAt: null,
-      zoneRecurrences: null,
-      image: null,
-    },
-  ],
-  lanes: [
-    { zoneId: 1, lanes: ["Lane 1", "Lane 2", "Lane 3", "Lane 4"] },
-    { zoneId: 2, lanes: ["Lane 5", "Lane 6", "Lane 7", "Lane 8"] },
-  ],
-};

package/src/provider/resources-blocking-modal/ResourcesBlockingModal.tsx

@@ -1,134 +0,0 @@
-import { Button, Form, Modal } from "react-bootstrap";
-import React from "react";
-import { useId } from "@react-aria/utils";
-import { useTranslation } from "react-i18next";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-import Image from "../../static/Image";
-import src from "../../assets/dashboard/blockingClock.png";
-
-const WEEKDAYS = [
-  "mondayShort",
-  "tuesdayShort",
-  "wednesdayShort",
-  "thursdayShort",
-  "fridayShort",
-  "saturdayShort",
-  "sundayShort",
-];
-
-export type ResourcesBlockingModalProps = {
-  show: boolean;
-  zones: Zone[];
-  lanes: { zoneId: Zone["id"]; lanes: string[] }[];
-};
-
-export const ResourcesBlockingModal = ({
-  show,
-  zones,
-  lanes,
-}: ResourcesBlockingModalProps) => {
-  const { t } = useTranslation("Design");
-  const allId = useId();
-  const resourcesId = useId();
-
-  return (
-    <Modal centered show={show} className="resources-blocking-modal">
-      <header>
-        <span>{t("resourcesBlocking")}</span>
-        <Image src={src} />
-      </header>
-
-      <Modal.Body>
-        <div className="checkbox-with-description">
-          <span>{t("dayOfTheWeek")}</span>
-          <Form.Group className="custom-checkbox">
-            <Form.Check custom type="checkbox" id={allId}>
-              <Form.Check.Input type="checkbox" />
-              <Form.Check.Label>{t("all")}</Form.Check.Label>
-            </Form.Check>
-          </Form.Group>
-        </div>
-
-        <Form.Group className="custom-checkbox days-list">
-          {WEEKDAYS.map((weekday) => (
-            <Checkbox key={weekday} label={t(weekday)} />
-          ))}
-        </Form.Group>
-
-        <div className="date-time-inputs">
-          <Input label={t("from")} placeholder="DD.MM.YYYY" />
-          <Input label={t("until")} placeholder="DD.MM.YYYY" />
-
-          <Input label={t("startTime")} placeholder="00:00" />
-          <Input label={t("endTime")} placeholder="00:00" />
-        </div>
-
-        <Form.Group className="text-input">
-          <Form.Label>{t("textLabel")}</Form.Label>
-          <Form.Control />
-        </Form.Group>
-
-        <div className="checkbox-with-description">
-          <span>{t("resources")}</span>
-          <Form.Group className="custom-checkbox">
-            <Form.Check custom type="checkbox" id={resourcesId}>
-              <Form.Check.Input type="checkbox" />
-              <Form.Check.Label>{t("all")}</Form.Check.Label>
-            </Form.Check>
-          </Form.Group>
-        </div>
-
-        {zones.map((zone) => (
-          <Form.Group key={zone.id} className="zone-wrapper custom-checkbox">
-            <div className="zone-name">{zone.name}</div>
-
-            {lanes
-              .find((lane) => lane.zoneId === zone.id)
-              .lanes.map((lane) => (
-                <Checkbox key={lane} label={lane} className="lane" />
-              ))}
-          </Form.Group>
-        ))}
-
-        <footer>
-          <Button>Save</Button>
-          <Button variant="secondary">Close</Button>
-          <Button variant="danger">Delete</Button>
-        </footer>
-      </Modal.Body>
-    </Modal>
-  );
-};
-
-const Checkbox = ({
-  label,
-  className = "",
-}: {
-  label: string;
-  className?: string;
-}) => {
-  const id = useId();
-
-  return (
-    <Form.Check custom type="checkbox" className={className} id={id}>
-      <Form.Check.Input type="checkbox" />
-      <Form.Check.Label>{label}</Form.Check.Label>
-    </Form.Check>
-  );
-};
-
-const Input = ({
-  label,
-  placeholder,
-}: {
-  label: string;
-  placeholder: string;
-}) => {
-  return (
-    <Form.Group className="text-input">
-      <Form.Label>{label}</Form.Label>
-
-      <Form.Control placeholder={placeholder} />
-    </Form.Group>
-  );
-};

package/src/provider/resources-blocking-modal/index.ts

@@ -1 +0,0 @@
-export { ResourcesBlockingModal } from "./ResourcesBlockingModal";