@licklist/design 0.44.486-dev.71 → 0.44.486-dev.73

package/dist/availability-indicator/AvailabilityIndicator.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 type AvailabilityIndicatorProps = {
-    booked: number;
-    total: number;
-    notAvailable?: boolean;
+    resources: ZoneResourcesAvailability;
+    isUnavailable?: boolean;
+    isSoldOut?: boolean;
 };
-export declare const AvailabilityIndicator: ({ booked, total, notAvailable, }: AvailabilityIndicatorProps) => JSX.Element;
+export declare const AvailabilityIndicator: ({ resources, isUnavailable, isSoldOut, }: AvailabilityIndicatorProps) => JSX.Element;
 export {};
 //# sourceMappingURL=AvailabilityIndicator.d.ts.map

package/dist/availability-indicator/AvailabilityIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvailabilityIndicator.d.ts","sourceRoot":"","sources":["../../src/availability-indicator/AvailabilityIndicator.tsx"],"names":[],"mappings":";AA6BA,KAAK,0BAA0B,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,qCAI/B,0BAA0B,gBAmB5B,CAAC"}
+{"version":3,"file":"AvailabilityIndicator.d.ts","sourceRoot":"","sources":["../../src/availability-indicator/AvailabilityIndicator.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAC;AAiCrH,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,yBAAyB,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,qBAAqB,6CAI/B,0BAA0B,gBAc5B,CAAC"}

package/dist/availability-indicator/AvailabilityIndicator.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("react"),t=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,l=require("react-i18next"),i=require("../assets/iframe/available.svg.js"),o=require("../assets/iframe/limited.svg.js"),n=require("../assets/iframe/soldOut.svg.js");exports.AvailabilityIndicator=function(e){var a=e.booked,s=e.total,r=e.notAvailable,c=l.useTranslation("Design").t,m=function(e,a){return e===a?{label:"soldOut",icon:t.createElement(n.ReactComponent,{className:"logo"})}:e/a<=.2?{label:"lotsOfSpace",icon:t.createElement(i.ReactComponent,{className:"logo"})}:e/a>=.8?{label:"limited",icon:t.createElement(o.ReactComponent,{className:"logo"})}:{label:"available",icon:t.createElement(i.ReactComponent,{className:"logo"})}}(a,s),u=m.icon,v=m.label;return r?t.createElement("div",{className:"availability-indicator"},t.createElement(n.ReactComponent,{className:"logo"}),t.createElement("div",null,c("notAvailable"))):t.createElement("div",{className:"availability-indicator"},u,t.createElement("div",null,c(v)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("react-i18next"),i=require("../assets/iframe/available.svg.js"),n=require("../assets/iframe/limited.svg.js"),r=require("../assets/iframe/soldOut.svg.js"),o=function(e){var t=e.icon,l=e.label;return a.createElement("div",{className:"availability-indicator"},t,a.createElement("div",null,l))};exports.AvailabilityIndicator=function(e){var t=e.resources,s=e.isUnavailable,c=e.isSoldOut,u=l.useTranslation("Design").t;if(s)return a.createElement(o,{icon:r.ReactComponent,label:u("notAvailable")});if(c)return a.createElement(o,{icon:r.ReactComponent,label:u("soldOut")});var b=function(e){var t=e.bookedResources,a=e.totalResources;return t===a?{label:"soldOut",icon:r.ReactComponent}:t/a<=.2?{label:"lotsOfSpace",icon:i.ReactComponent}:t/a>=.8?{label:"limited",icon:n.ReactComponent}:{label:"available",icon:i.ReactComponent}}(t),m=b.icon,v=b.label;return a.createElement(o,{icon:m,label:u(v)})};

package/dist/calendar/Calendar.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch, ReactElement, SetStateAction } from "react";
 import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 export declare const defaultStartDay: DateTime;
 export type CalendarProps = {
     currentDate: DateTime;
@@ -11,10 +12,7 @@ export type CalendarProps = {
     fromPrice?: string | ReactElement | null;
     isLoading?: boolean;
     initialDate?: DateTime;
-    getAvailability?: (date: DateTime) => {
-        booked: number;
-        total: number;
-    } | undefined;
+    getAvailability?: (date: DateTime) => ZoneResourcesAvailability | null;
     includeAvailability?: boolean;
 };
 export declare const Calendar: ({ disabledDates, initialDate, ...props }: CalendarProps) => JSX.Element;

package/dist/calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,eAAO,MAAM,eAAe,UAK1B,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,QAAQ,KACX;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,QAAQ,6CAIlB,aAAa,gBAaf,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAC;AAIrH,eAAO,MAAM,eAAe,UAK1B,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAC;IACtB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnD,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,yBAAyB,GAAG,IAAI,CAAC;IACvE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,QAAQ,6CAIlB,aAAa,gBAaf,CAAC"}

package/dist/date-time-button/DateTimeButton.d.ts

@@ -1,18 +1,17 @@
 import { ReactElement } from "react";
 import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 export type DateTimeButtonProps<T = DateTime | string> = {
     date: T;
     isSelected?: boolean;
     isDisabled?: boolean;
+    isSoldOut?: boolean;
     onSelect: (date: T) => void;
     isOnlyTimeContainer?: boolean;
     price?: string | number | ReactElement | null;
-    resources?: {
-        booked: number;
-        total: number;
-    };
+    resources?: ZoneResourcesAvailability | null;
     calendarView?: boolean;
     showResources?: boolean;
 };
-export declare const DateTimeButton: <T extends string | DateTime>({ date, isDisabled: _isDisabled, isSelected, onSelect, isOnlyTimeContainer, price, resources, calendarView, showResources, }: DateTimeButtonProps<T>) => JSX.Element;
+export declare const DateTimeButton: <T extends string | DateTime>({ date, isDisabled: _isDisabled, isSelected, isSoldOut, onSelect, isOnlyTimeContainer, price, resources, calendarView, showResources, }: DateTimeButtonProps<T>) => JSX.Element;
 //# sourceMappingURL=DateTimeButton.d.ts.map

package/dist/date-time-button/DateTimeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,QAAQ,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE;QACV,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,cAAc,oMAgD1B,CAAC"}
+{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAC;AAIrH,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,QAAQ,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,cAAc,+MAsD1B,CAAC"}

package/dist/date-time-button/DateTimeButton.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),i=e(require("react")),a=e(require("clsx")),r=require("../availability-indicator/AvailabilityIndicator.js"),n=require("./DateContent.js");exports.DateTimeButton=function(e){var l=e.date,o=e.isDisabled,s=e.isSelected,c=e.onSelect,d=e.isOnlyTimeContainer,u=e.price,b=e.resources,m=e.calendarView,y=e.showResources,v="string"==typeof l,f=o||b&&b.booked===b.total;return i.createElement("button",{type:"button",onClick:function(){return c(l)},disabled:f,className:a("date-time-button",f&&"disabled",s&&"selected",v&&"time-button",d&&"only-time-container",!v&&"today",m&&"calendar-view")},v?l:i.createElement(n.DateContent,{date:l,isDisabled:f,isSelected:s}),u&&!f&&i.createElement("div",{className:"price"},u),y&&b&&i.createElement(r.AvailabilityIndicator,t.__assign({},b,{notAvailable:o})))};
+"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")),i=e(require("clsx")),a=require("../availability-indicator/AvailabilityIndicator.js"),r=require("./DateContent.js");exports.DateTimeButton=function(e){var n=e.date,o=e.isDisabled,s=e.isSelected,l=e.isSoldOut,c=e.onSelect,u=e.isOnlyTimeContainer,d=e.price,b=e.resources,m=e.calendarView,y=e.showResources,v="string"==typeof n,f=o||b&&b.bookedResources===b.totalResources;return t.createElement("button",{type:"button",onClick:function(){return c(n)},disabled:f,className:i("date-time-button",f&&"disabled",s&&"selected",v&&"time-button",u&&"only-time-container",!v&&"today",m&&"calendar-view")},v?n:t.createElement(r.DateContent,{date:n,isDisabled:f,isSelected:s}),d&&!f&&t.createElement("div",{className:"price"},d),y&&b&&t.createElement(a.AvailabilityIndicator,{resources:b,isUnavailable:o,isSoldOut:l}))};

package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C;IACE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,cAAc,CAAC,cAAc,CAAC,CACnC,CAAC;AAEF,eAAO,MAAM,SAAS,+EAOnB,cAAc,gBA2BhB,CAAC"}
+{"version":3,"file":"LeftBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C;IACE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,cAAc,CAAC,cAAc,CAAC,CACnC,CAAC;AAEF,eAAO,MAAM,SAAS,+EAOnB,cAAc,gBA6BhB,CAAC"}

package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),s=e(require("react")),l=e(require("clsx")),a=require("@licklist/plugins/dist/context/page/PageContext"),i=require("../../constants.js"),r=require("../../hooks/useResizePageBody.js");exports.LeftBlock=function(e){var n=e.pageTitle,c=e.children,o=e.className,u=e.component,d=e.childrenClassName,m=t.__rest(e,["pageTitle","children","className","component","childrenClassName"]),f=r.useResizePageBody(),g=f.leftBlockStyles,p=f.leftBlockContainerSizes;return s.createElement("div",t.__assign({className:l("left-block",o)},m),n&&s.createElement("div",{className:"navigation"},"string"==typeof n?s.createElement("div",{className:"title"},n):n,u),s.createElement("div",{className:l("left-block-container",d),style:g,id:i.PAGE_LEFT_BLOCK_CONTAINER_ID},s.createElement(a.PageContextProvider,{leftBlockContainerSizes:p},c)))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),l=e(require("react")),a=e(require("clsx")),s=require("@licklist/plugins/dist/context/page/PageContext"),r=require("../../constants.js"),i=require("../../hooks/useResizePageBody.js");exports.LeftBlock=function(e){var n=e.pageTitle,c=e.children,o=e.className,u=e.component,d=e.childrenClassName,m=t.__rest(e,["pageTitle","children","className","component","childrenClassName"]),f=i.useResizePageBody(),g=f.leftBlockStyles,p=f.leftBlockContainerSizes;return l.createElement("div",t.__assign({className:a("left-block",o)},m),l.createElement("div",{className:"navigation"},n&&l.createElement(l.Fragment,null,"string"==typeof n?l.createElement("div",{className:"title"},n):n),u),l.createElement("div",{className:a("left-block-container",d),style:g,id:r.PAGE_LEFT_BLOCK_CONTAINER_ID},l.createElement(s.PageContextProvider,{leftBlockContainerSizes:p},c)))};

package/dist/product-set/control/DateAndRecurrenceInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateAndRecurrenceInput.d.ts","sourceRoot":"","sources":["../../../src/product-set/control/DateAndRecurrenceInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAO1C,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAuB7G,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;CACnD;AAED,UAAU,2BAA2B;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,4BAA4B,EAAE,OAAO,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,mFAKhC,2BAA2B,gBA8Q7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAC5C,WAAW,EACX,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsBxB,CAAC"}
+{"version":3,"file":"DateAndRecurrenceInput.d.ts","sourceRoot":"","sources":["../../../src/product-set/control/DateAndRecurrenceInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAO1C,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uEAAuE,CAAC;AAuB7G,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;CACnD;AAED,UAAU,2BAA2B;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,4BAA4B,EAAE,OAAO,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,mFAKhC,2BAA2B,gBA4Q7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAC5C,WAAW,EACX,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsBxB,CAAC"}

package/dist/product-set/control/DateAndRecurrenceInput.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"),s=require("react-use"),c=require("luxon");require("../../static/index.js");var d=require("@dnd-kit/core"),m=require("@dnd-kit/modifiers"),v=require("@dnd-kit/sortable"),f=require("../../modals/confirmation/ConfirmModal.js"),g=require("@licklist/core/dist/Config/Date"),p=require("../../recurring-date-picker-input/RecurringDatePickerInput.js"),T=require("./ProductSetRecurrenceControl.js"),b=require("../../zone/form/components/AvailableTimesControl.js"),x={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.DateAndRecurrenceInput=function(e){var E,_,R,h,q,D=e.isEventEditProductSet,S=e.providerHasBookingManagement,C=e.workHours,y=e.isLoading,k=u.useFormContext(),I=k.control,M=k.register,w=k.formState.errors,A=k.getValues,O=k.setValue,F=k.clearErrors,N=r.__read(t.useState([]),2),j=N[0],P=N[1],V=t.useRef(),L=u.useFieldArray({name:"menuRecurrences",control:I,keyName:"_id"}),W=L.fields,B=L.append,H=L.update,z=L.move,G=r.__read(t.useState(!1),2),K=G[0],J=G[1],Q=r.__read(t.useState({index:null,values:null}),2),U=Q[0],X=Q[1],Y=function(){return X({index:null,values:null})},Z=t.useRef();s.useClickAway(Z,(function(e){var r,t,n;f.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)||(J(!1),Y())}));var $=l.useId(),ee=i.useTranslation("Design").t,re=function(){Y(),J((function(e){return!e}))};return t.useEffect((function(){W.length&&F("menuRecurrences")}),[W,F]),n.createElement(a.Form.Group,null,n.createElement(a.Form.Label,null,ee(D?"whenOverridesAvailable":"productSetAvailable")),n.createElement(a.OverlayTrigger,{show:K,overlay:n.createElement(a.Popover,{id:$,className:"rounded"},n.createElement(a.Popover.Content,{className:"shadow-lg rounded",ref:Z},n.createElement(p.RecurringDatePickerInput,{defaultValues:U.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i,a,o,u,l;return r.__generator(this,(function(s){switch(s.label){case 0:return[4,null===(o=V.current)||void 0===o?void 0:o.trigger()];case 1:return s.sent()?!(null==e?void 0:e.startTime)||!(null==e?void 0:e.endTime)||(t=c.DateTime.fromISO(e.startTime),n=c.DateTime.fromISO(e.endTime),i=V.current.getValues().availableTimes,i.every((function(e){var r=c.DateTime.fromFormat(e,g.TIME_FORMAT);return r.diff(t,"minutes").minutes>=0&&r.diff(n,"minutes").minutes<=0})))?(a=r.__assign({rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},V.current.getValues()),(null===(u=U.values)||void 0===u?void 0:u.id)&&(a.id=null===(l=U.values)||void 0===l?void 0:l.id),null!==U.index?H(U.index,a):B(a),J((function(){return!1})),Y(),[2]):(V.current.setError("availableTimes",{message:ee("Validation:fieldTimeBetween",{attribute:ee("Design:startTimesSmall"),min:t.toFormat(g.TIME_FORMAT),max:n.toFormat(g.TIME_FORMAT)})}),[2]):[2]}}))}))},onDelete:function(){var e=U.index;J(!1),Y(),setTimeout((function(){var r=A().menuRecurrences;O("menuRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)}},S&&n.createElement(b.AvailableTimesControl,{workHours:C,isLoading:y,defaultValues:j,ref:V,errorMessage:null===(R=null===(_=null===(E=null==w?void 0:w.menuRecurrences)||void 0===E?void 0:E["".concat(null==U?void 0:U.index)])||void 0===_?void 0:_.availableTimes)||void 0===R?void 0:R.message,clearErrorMessage:function(){return F("menuRecurrences.".concat(null==U?void 0:U.index,".availableTimes"))}})))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[x]}},n.createElement("div",{className:"product-set-recurrences"},n.createElement(d.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=W.findIndex((function(e){return String(e._id)===t.id})),i=W.findIndex((function(e){return String(e._id)===r.id}));z(n,i)}},modifiers:[m.restrictToVerticalAxis]},n.createElement(v.SortableContext,{items:null!==(h=null==W?void 0:W.map((function(e){return String(e._id)})))&&void 0!==h?h:[],strategy:v.verticalListSortingStrategy},W.map((function(e,r){var t,i,a;return n.createElement(T.ProductSetRecurrenceControl,{key:e._id,menuRecurrence:e,onEdit:function(){return function(e,r){Y(),setTimeout((function(){X({index:r,values:e}),P(e.availableTimes||[]),J((function(){return!0}))}),100)}(e,r)},errorMessage:null===(a=null===(i=null===(t=null==w?void 0:w.menuRecurrences)||void 0===t?void 0:t["".concat(r)])||void 0===i?void 0:i.availableTimes)||void 0===a?void 0:a.message})})))),(!D||(null==W?void 0:W.length)<1)&&n.createElement("div",{className:"product-set-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:re,onKeyDown:re},n.createElement(o.default,{type:"plus-circle",height:"1rem",className:"product-set-recurrence-icon-add mr-2"}),ee("addDates")),n.createElement(a.Form.Control,r.__assign({type:"hidden"},M("menuRecurrences",{required:{value:!0,message:ee("Validation:fieldMinNumber",{attribute:ee("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(q=w.menuRecurrences)||void 0===q?void 0:q.message))))},exports.sameWidthPopperModifier=x;
+"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"),s=require("react-use"),d=require("luxon");require("../../static/index.js");var c=require("@dnd-kit/core"),m=require("@dnd-kit/modifiers"),v=require("@dnd-kit/sortable"),f=require("../../modals/confirmation/ConfirmModal.js"),g=require("@licklist/core/dist/Config/Date"),p=require("../../recurring-date-picker-input/RecurringDatePickerInput.js"),T=require("./ProductSetRecurrenceControl.js"),b=require("../../zone/form/components/AvailableTimesControl.js"),x={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.DateAndRecurrenceInput=function(e){var E,_,R,h,q,D=e.isEventEditProductSet,S=e.providerHasBookingManagement,C=e.workHours,y=e.isLoading,k=u.useFormContext(),I=k.control,M=k.register,w=k.formState.errors,A=k.getValues,O=k.setValue,F=k.clearErrors,N=r.__read(t.useState([]),2),j=N[0],P=N[1],V=t.useRef(),L=u.useFieldArray({name:"menuRecurrences",control:I,keyName:"_id"}),W=L.fields,B=L.append,H=L.update,z=L.move,G=r.__read(t.useState(!1),2),K=G[0],J=G[1],Q=r.__read(t.useState({index:null,values:null}),2),U=Q[0],X=Q[1],Y=function(){return X({index:null,values:null})},Z=t.useRef();s.useClickAway(Z,(function(e){var r,t,n;f.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)||(J(!1),Y())}));var $=l.useId(),ee=i.useTranslation("Design").t,re=function(){Y(),J((function(e){return!e}))};return t.useEffect((function(){W.length&&F("menuRecurrences")}),[W,F]),n.createElement(a.Form.Group,null,n.createElement(a.Form.Label,null,ee(D?"whenOverridesAvailable":"productSetAvailable")),n.createElement(a.OverlayTrigger,{show:K,overlay:n.createElement(a.Popover,{id:$,className:"rounded"},n.createElement(a.Popover.Content,{className:"shadow-lg rounded",ref:Z},n.createElement(p.RecurringDatePickerInput,{defaultValues:U.values,onChange:function(e){return r.__awaiter(void 0,void 0,void 0,(function(){var t,n,i,a,o,u,l,s,c;return r.__generator(this,(function(m){switch(m.label){case 0:return[4,null===(u=V.current)||void 0===u?void 0:u.trigger()];case 1:return t=m.sent(),(null==e?void 0:e.startTime)&&(null==e?void 0:e.endTime)&&t&&(n=d.DateTime.fromISO(e.startTime),i=d.DateTime.fromISO(e.endTime),a=V.current.getValues().availableTimes,!a.every((function(e){var r=d.DateTime.fromFormat(e,g.TIME_FORMAT);return r.diff(n,"minutes").minutes>=0&&r.diff(i,"minutes").minutes<=0})))?(V.current.setError("availableTimes",{message:ee("Validation:fieldTimeBetween",{attribute:ee("Design:startTimesSmall"),min:n.toFormat(g.TIME_FORMAT),max:i.toFormat(g.TIME_FORMAT)})}),[2]):(o=r.__assign({rrule:e.rrule,startDate:e.startDate,endDate:e.endDate,startTime:e.startTime,endTime:e.endTime},null===(l=null==V?void 0:V.current)||void 0===l?void 0:l.getValues()),(null===(s=U.values)||void 0===s?void 0:s.id)&&(o.id=null===(c=U.values)||void 0===c?void 0:c.id),null!==U.index?H(U.index,o):B(o),J((function(){return!1})),Y(),[2])}}))}))},onDelete:function(){var e=U.index;J(!1),Y(),setTimeout((function(){var r=A().menuRecurrences;O("menuRecurrences",(void 0===r?[]:r).filter((function(r,t){return t!==e})))}),100)}},S&&n.createElement(b.AvailableTimesControl,{workHours:C,isLoading:y,defaultValues:j,ref:V,errorMessage:null===(R=null===(_=null===(E=null==w?void 0:w.menuRecurrences)||void 0===E?void 0:E["".concat(null==U?void 0:U.index)])||void 0===_?void 0:_.availableTimes)||void 0===R?void 0:R.message,clearErrorMessage:function(){return F("menuRecurrences.".concat(null==U?void 0:U.index,".availableTimes"))}})))),trigger:"click",placement:"bottom",popperConfig:{modifiers:[x]}},n.createElement("div",{className:"product-set-recurrences"},n.createElement(c.DndContext,{onDragEnd:function(e){var r=e.over,t=e.active;if(r.id!==t.id){var n=W.findIndex((function(e){return String(e._id)===t.id})),i=W.findIndex((function(e){return String(e._id)===r.id}));z(n,i)}},modifiers:[m.restrictToVerticalAxis]},n.createElement(v.SortableContext,{items:null!==(h=null==W?void 0:W.map((function(e){return String(e._id)})))&&void 0!==h?h:[],strategy:v.verticalListSortingStrategy},W.map((function(e,r){var t,i,a;return n.createElement(T.ProductSetRecurrenceControl,{key:e._id,menuRecurrence:e,onEdit:function(){return function(e,r){Y(),setTimeout((function(){X({index:r,values:e}),P(e.availableTimes||[]),J((function(){return!0}))}),100)}(e,r)},errorMessage:null===(a=null===(i=null===(t=null==w?void 0:w.menuRecurrences)||void 0===t?void 0:t["".concat(r)])||void 0===i?void 0:i.availableTimes)||void 0===a?void 0:a.message})})))),(!D||(null==W?void 0:W.length)<1)&&n.createElement("div",{className:"product-set-recurrence-icon-wrapper",role:"button",tabIndex:0,onClick:re,onKeyDown:re},n.createElement(o.default,{type:"plus-circle",height:"1rem",className:"product-set-recurrence-icon-add mr-2"}),ee("addDates")),n.createElement(a.Form.Control,r.__assign({type:"hidden"},M("menuRecurrences",{required:{value:!0,message:ee("Validation:fieldMinNumber",{attribute:ee("dates"),min:1})}}))),n.createElement("div",{className:"manual-form-error"},null===(q=w.menuRecurrences)||void 0===q?void 0:q.message))))},exports.sameWidthPopperModifier=x;

package/package.json

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

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -1,5 +1,6 @@
-import React, { ReactElement } from "react";
+import React, { FunctionComponent, SVGProps } from "react";
 import { useTranslation } from "react-i18next";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { ReactComponent as AvailableIcon } from "../assets/iframe/available.svg";
 import { ReactComponent as LimitedIcon } from "../assets/iframe/limited.svg";
 import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
@@ -7,53 +8,60 @@ import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
 const LOTS_OF_SPACE_LIMIT = 0.2;
 const LIMITED_LIMIT = 0.8;
 
-const getIconsAndLabels = (
-  booked: number,
-  total: number
-): { label: string; icon: ReactElement } => {
-  if (booked === total) {
-    return { label: "soldOut", icon: <SoldOutIcon className="logo" /> };
+type Config = {
+  label: string;
+  icon: FunctionComponent<SVGProps<SVGSVGElement>>;
+};
+
+const getIconsAndLabels = ({
+  bookedResources,
+  totalResources,
+}: ZoneResourcesAvailability): Config => {
+  if (bookedResources === totalResources) {
+    return { label: "soldOut", icon: SoldOutIcon };
   }
 
   // lots of space if less than 80% booked
-  if (booked / total <= LOTS_OF_SPACE_LIMIT) {
-    return { label: "lotsOfSpace", icon: <AvailableIcon className="logo" /> };
+  if (bookedResources / totalResources <= LOTS_OF_SPACE_LIMIT) {
+    return { label: "lotsOfSpace", icon: AvailableIcon };
   }
 
-  if (booked / total >= LIMITED_LIMIT) {
-    return { label: "limited", icon: <LimitedIcon className="logo" /> };
+  if (bookedResources / totalResources >= LIMITED_LIMIT) {
+    return { label: "limited", icon: LimitedIcon };
   }
 
-  return { label: "available", icon: <AvailableIcon className="logo" /> };
+  return { label: "available", icon: AvailableIcon };
 };
 
 type AvailabilityIndicatorProps = {
-  booked: number;
-  total: number;
-  notAvailable?: boolean;
+  resources: ZoneResourcesAvailability;
+  isUnavailable?: boolean;
+  isSoldOut?: boolean;
 };
 
 export const AvailabilityIndicator = ({
-  booked,
-  total,
-  notAvailable,
+  resources,
+  isUnavailable,
+  isSoldOut,
 }: AvailabilityIndicatorProps) => {
   const { t } = useTranslation("Design");
-  const { icon, label } = getIconsAndLabels(booked, total);
-
-  if (notAvailable) {
-    return (
-      <div className="availability-indicator">
-        <SoldOutIcon className="logo" />
-        <div>{t("notAvailable")}</div>
-      </div>
-    );
+
+  if (isUnavailable) {
+    return <Indicator icon={SoldOutIcon} label={t("notAvailable")} />;
   }
 
-  return (
-    <div className="availability-indicator">
-      {icon}
-      <div>{t(label)}</div>
-    </div>
-  );
+  if (isSoldOut) {
+    return <Indicator icon={SoldOutIcon} label={t("soldOut")} />;
+  }
+
+  const { icon, label } = getIconsAndLabels(resources);
+
+  return <Indicator icon={icon} label={t(label)} />;
 };
+
+const Indicator = ({ icon, label }: Config) => (
+  <div className="availability-indicator">
+    {icon}
+    <div>{label}</div>
+  </div>
+);

package/src/calendar/Calendar.tsx

@@ -1,5 +1,6 @@
 import React, { Dispatch, ReactElement, SetStateAction } from "react";
 import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 
@@ -20,9 +21,7 @@ export type CalendarProps = {
   fromPrice?: string | ReactElement | null;
   isLoading?: boolean;
   initialDate?: DateTime;
-  getAvailability?: (
-    date: DateTime
-  ) => { booked: number; total: number } | undefined;
+  getAvailability?: (date: DateTime) => ZoneResourcesAvailability | null;
   includeAvailability?: boolean;
 };
 

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

@@ -1,6 +1,7 @@
 import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
@@ -8,13 +9,11 @@ export type DateTimeButtonProps<T = DateTime | string> = {
   date: T;
   isSelected?: boolean;
   isDisabled?: boolean;
+  isSoldOut?: boolean;
   onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
-  resources?: {
-    booked: number;
-    total: number;
-  };
+  resources?: ZoneResourcesAvailability | null;
   calendarView?: boolean;
   showResources?: boolean;
 };
@@ -23,6 +22,7 @@ export const DateTimeButton = <T extends DateTime | string>({
   date,
   isDisabled: _isDisabled,
   isSelected,
+  isSoldOut,
   onSelect,
   isOnlyTimeContainer,
   price,
@@ -33,7 +33,8 @@ export const DateTimeButton = <T extends DateTime | string>({
   const isTimeVariant = typeof date === "string";
 
   const isDisabled =
-    _isDisabled || (resources && resources.booked === resources.total);
+    _isDisabled ||
+    (resources && resources.bookedResources === resources.totalResources);
 
   return (
     <button
@@ -63,7 +64,11 @@ export const DateTimeButton = <T extends DateTime | string>({
       {price && !isDisabled && <div className="price">{price}</div>}
 
       {showResources && resources && (
-        <AvailabilityIndicator {...resources} notAvailable={_isDisabled} />
+        <AvailabilityIndicator
+          resources={resources}
+          isUnavailable={_isDisabled}
+          isSoldOut={isSoldOut}
+        />
       )}
     </button>
   );

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

@@ -24,17 +24,19 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx("left-block", className)} {...props}>
-      {pageTitle && (
-        <div className="navigation">
-          {typeof pageTitle === "string" ? (
-            <div className="title">{pageTitle}</div>
-          ) : (
-            pageTitle
-          )}
+      <div className="navigation">
+        {pageTitle && (
+          <>
+            {typeof pageTitle === "string" ? (
+              <div className="title">{pageTitle}</div>
+            ) : (
+              pageTitle
+            )}
+          </>
+        )}
 
-          {component}
-        </div>
-      )}
+        {component}
+      </div>
       <div
         className={clsx("left-block-container", childrenClassName)}
         style={leftBlockStyles}

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

@@ -100,10 +100,8 @@ export const DateAndRecurrenceInput = ({
   ) => {
     const isAvailableTimesFormValid =
       await availableTimesFormRef.current?.trigger();
-    if (!isAvailableTimesFormValid) {
-      return;
-    }
-    if (next?.startTime && next?.endTime) {
+
+    if (next?.startTime && next?.endTime && isAvailableTimesFormValid) {
       const startTime = DateTime.fromISO(next.startTime);
       const endTime = DateTime.fromISO(next.endTime);
       const { availableTimes } = availableTimesFormRef.current.getValues();
@@ -134,7 +132,7 @@ export const DateAndRecurrenceInput = ({
       endDate: next.endDate,
       startTime: next.startTime,
       endTime: next.endTime,
-      ...availableTimesFormRef.current.getValues(),
+      ...availableTimesFormRef?.current?.getValues(),
     } as Partial<ProductSetRecurrence>;
 
     if (editState.values?.id) {