@licklist/design 0.44.486-dev.70 → 0.44.486-dev.72

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/events/event-card/EventCard.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"),a=require("react"),n=e(a),r=require("@licklist/core/dist/Config"),l=require("react-i18next"),c=require("react-bootstrap"),i=require("../../static/Icon.js"),s=e(require("clsx")),m=require("react-intl"),o=require("../../tiptap-editor/TipTapEditor.js"),u=require("./utils.js"),d=require("../../assets/dashboard/chartBar.svg.js");exports.EventCard=function(e){var E=e.name,v=e.description,p=e.date,y=e.imageUrl,f=e.sales,b=e.onPreview,N=e.onEdit,C=e.onCopy,k=e.onRemove,g=e.hasPermission,x=void 0===g||g,q=e.onStatistic,w=e.eventStatistic,h=e.titleId,T=e.descriptionId,j=l.useTranslation("Design").t,I=m.useIntl(),P=I.formatNumber,_=I.formatDate,B=u.getStatisticInfo(w),S=B.totalViews,D=t.__rest(B,["totalViews"]),M=a.useMemo((function(){return u.formatContentWithoutTags(v,u.EVENT_DESCRIPTION_SIZE)}),[v]);return n.createElement(c.Card,{className:"d-flex flex-column event-card h-100"},n.createElement("div",{className:s("event-card-image-container",!y&&"no-image")},y&&n.createElement(c.Card.Img,{variant:"top",src:y}),n.createElement(c.Badge,{className:"event-card-date",as:"time",dateTime:p,variant:"primary"},_(new Date(p),{weekday:"short",day:"numeric",month:"short",year:"numeric",hour:"numeric",minute:"numeric"}))),n.createElement(c.Card.Body,null,n.createElement(c.Card.Title,{id:h},E),n.createElement("div",{className:"flex-grow-1"},n.createElement(o.TipTapEditor,{viewMode:!0,disabled:!0,className:s("event-description",!y&&"no-image"),content:M,id:T}),n.createElement("div",{className:"mt-2 ml-2"},Object.keys(D).map((function(e){return n.createElement("div",{className:"event-card-sale",key:e},n.createElement("span",{className:"event-card-sale-name"},j(e),":"," ","totalAmount"===e?P(D[e],{style:"currency",currency:r.Currency.GBP}):D[e]))}))),f&&f.map((function(e){return n.createElement("div",{className:"event-card-sale",key:e.id},n.createElement("div",{className:"event-card-sale-text"},n.createElement("span",{className:"event-card-sale-name"},e.name)," ",n.createElement("span",{className:"event-card-sale-quantity"},[e.current,e.max].map((function(e){return P(e)})).join(" / "))),n.createElement(c.ProgressBar,{now:e.current,max:e.max}))})))),n.createElement(c.Card.Footer,null,n.createElement("div",{className:"d-flex w-100 justify-content-between"},n.createElement("div",{className:"d-flex"},n.createElement("button",{type:"button",className:"event-card-link-button ml-3 mr-4",onClick:q},n.createElement(d.ReactComponent,null)),n.createElement("div",{className:"event-card-views"},n.createElement(i.default,{type:"eye"}),n.createElement("span",null,P(S)))),n.createElement("div",null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:b},n.createElement(i.default,{type:"external-link-alt"})),x&&n.createElement(n.Fragment,null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:N},n.createElement(i.default,{type:"edit"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:C},n.createElement(i.default,{type:"copy"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:k},n.createElement(i.default,{type:"trash-alt"})))))))};
+"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"),a=require("react"),n=e(a),r=require("@licklist/core/dist/Config"),l=require("react-i18next"),c=require("react-bootstrap"),i=require("../../static/Icon.js"),s=e(require("clsx")),m=require("react-intl"),o=require("../../tiptap-editor/TipTapEditor.js"),u=require("./utils.js"),d=require("../../assets/dashboard/chartBar.svg.js");exports.EventCard=function(e){var E=e.name,v=e.description,p=e.date,y=e.imageUrl,f=e.sales,b=e.onPreview,N=e.onEdit,C=e.onCopy,k=e.onRemove,g=e.hasPermission,x=void 0===g||g,q=e.onStatistic,w=e.eventStatistic,h=e.titleId,T=e.descriptionId,j=l.useTranslation("Design").t,I=m.useIntl(),P=I.formatNumber,_=I.formatDate,B=u.getStatisticInfo(w,p),S=B.totalViews,D=t.__rest(B,["totalViews"]),M=a.useMemo((function(){return u.formatContentWithoutTags(v,u.EVENT_DESCRIPTION_SIZE)}),[v]);return n.createElement(c.Card,{className:"d-flex flex-column event-card h-100"},n.createElement("div",{className:s("event-card-image-container",!y&&"no-image")},y&&n.createElement(c.Card.Img,{variant:"top",src:y}),n.createElement(c.Badge,{className:"event-card-date",as:"time",dateTime:p,variant:"primary"},_(new Date(p),{weekday:"short",day:"numeric",month:"short",year:"numeric",hour:"numeric",minute:"numeric"}))),n.createElement(c.Card.Body,null,n.createElement(c.Card.Title,{id:h},E),n.createElement("div",{className:"flex-grow-1"},n.createElement(o.TipTapEditor,{viewMode:!0,disabled:!0,className:s("event-description",!y&&"no-image"),content:M,id:T}),n.createElement("div",{className:"mt-2 ml-2"},Object.keys(D).map((function(e){return n.createElement("div",{className:"event-card-sale",key:e},n.createElement("span",{className:"event-card-sale-name"},j(e),":"," ","totalAmount"===e?P(D[e],{style:"currency",currency:r.Currency.GBP}):D[e]))}))),f&&f.map((function(e){return n.createElement("div",{className:"event-card-sale",key:e.id},n.createElement("div",{className:"event-card-sale-text"},n.createElement("span",{className:"event-card-sale-name"},e.name)," ",n.createElement("span",{className:"event-card-sale-quantity"},[e.current,e.max].map((function(e){return P(e)})).join(" / "))),n.createElement(c.ProgressBar,{now:e.current,max:e.max}))})))),n.createElement(c.Card.Footer,null,n.createElement("div",{className:"d-flex w-100 justify-content-between"},n.createElement("div",{className:"d-flex"},n.createElement("button",{type:"button",className:"event-card-link-button ml-3 mr-4",onClick:q},n.createElement(d.ReactComponent,null)),n.createElement("div",{className:"event-card-views"},n.createElement(i.default,{type:"eye"}),n.createElement("span",null,P(S)))),n.createElement("div",null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:b},n.createElement(i.default,{type:"external-link-alt"})),x&&n.createElement(n.Fragment,null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:N},n.createElement(i.default,{type:"edit"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:C},n.createElement(i.default,{type:"copy"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:k},n.createElement(i.default,{type:"trash-alt"})))))))};

package/dist/events/event-card/utils.d.ts

@@ -2,7 +2,34 @@ import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventSta
 export declare function formatContent(content: any, maxSymbols: any): any;
 export declare const formatContentWithoutTags: (content: any, maxLength?: number) => any;
 export declare const EVENT_DESCRIPTION_SIZE = 300;
-export declare const getStatisticInfo: (eventStatistic: EventStatistic | null) => {
+/**
+ * Calculate the total number of views from the given dates and event statistic.
+ *
+ * @param {string[]} dates - An array of dates.
+ * @param {EventStatistic} eventStatistic - The event statistic object.
+ * @returns {number} - The total number of views.
+ */
+export declare const calculateTotalViews: (dates: string[], eventStatistic: EventStatistic) => number;
+/**
+ * Calculates the total number of products sold and the total amount sold
+ * based on the provided dates and event statistics.
+ *
+ * @param {string[]} dates - An array of dates.
+ * @param {EventStatistic} eventStatistic - Object containing event statistics.
+ * @returns {number[]} An array representing the total number of products sold and total amount sold.
+ */
+export declare const calculateTotalSoldAndAmount: (dates: string[], eventStatistic: EventStatistic) => [number, number];
+/**
+ * Get statistic information for a given event and date.
+ * @param {EventStatistic | null} eventStatistic - The event statistic object.
+ * @param {string} date - The date in ISO format.
+ * @returns {{
+ *    totalViews: number;
+ *    totalSold: number;
+ *    totalAmount: number;
+ * }} The statistic information object.
+ */
+export declare const getStatisticInfo: (eventStatistic: EventStatistic | null, date: string) => {
     totalViews: number;
     totalSold: number;
     totalAmount: number;

package/dist/events/event-card/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAElG,wBAAgB,aAAa,CAAC,OAAO,KAAA,EAAE,UAAU,KAAA,OAIhD;AAED,eAAO,MAAM,wBAAwB,2CAepC,CAAC;AAEF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,gBAAgB,mBAAoB,cAAc,GAAG,IAAI;;;;CAwBrE,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAGlG,wBAAgB,aAAa,CAAC,OAAO,KAAA,EAAE,UAAU,KAAA,OAIhD;AAED,eAAO,MAAM,wBAAwB,2CAepC,CAAC;AAEF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,UACvB,MAAM,EAAE,kBACC,cAAc,KAC7B,MAUF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,UAC/B,MAAM,EAAE,kBACC,cAAc,KAC7B,CAAC,MAAM,EAAE,MAAM,CAejB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,mBACX,cAAc,GAAG,IAAI,QAC/B,MAAM;gBAEA,MAAM;eACP,MAAM;iBACJ,MAAM;CAuBpB,CAAC"}

package/dist/events/event-card/utils.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=300;exports.EVENT_DESCRIPTION_SIZE=t,exports.formatContent=function(t,e){return t?t.length>e?"".concat(t.slice(0,e),"..."):t:""},exports.formatContentWithoutTags=function(e,r){if(void 0===r&&(r=t),!e)return"";if(e<r)return e;var o=e.replace(/<[^>]*>/g,"").trim().replace(/&nbsp;|[^a-zA-Z0-9\s]/g,"").replace(/\s\s+/g," ").slice(0,r).split(" "),n=String(e).indexOf(o[o.length-2]);return e.slice(0,n).concat("...")},exports.getStatisticInfo=function(t){var e,r=0,o=0;return t?(e=Object.values(t.views).reduce((function(t,e){return t+(e.pageViews||0)}),0),Object.values(t.productCategorySummary).forEach((function(t){return t.forEach((function(t){var e=t.totalPerCategory,n=t.productsSummary,a=void 0===n?[]:n;o+=e||0,null==a||a.forEach((function(t){var e=t.productsSold;r+=e}))}))})),{totalViews:e,totalSold:r,totalAmount:o}):{totalViews:0,totalSold:0,totalAmount:0}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("@licklist/core/dist/Config"),e=require("luxon");var o=300,a=function(t,r){return t.reduce((function(t,e){var o;return t+Object.values(null!==(o=r.views[e])&&void 0!==o?o:{}).reduce((function(t,r){return t+(r.pageViews||0)}),0)}),0)},n=function(t,r){var e=0,o=0;return t.forEach((function(t){var a;return Object.values(null!==(a=r.productCategorySummary[t])&&void 0!==a?a:{}).forEach((function(t){var r,a=t.totalPerCategory,n=t.productsSummary;o+=a||0,e+=null!==(r=null==n?void 0:n.reduce((function(t,r){return t+r.productsSold}),0))&&void 0!==r?r:0}))})),[e,o]};exports.EVENT_DESCRIPTION_SIZE=o,exports.calculateTotalSoldAndAmount=n,exports.calculateTotalViews=a,exports.formatContent=function(t,r){return t?t.length>r?"".concat(t.slice(0,r),"..."):t:""},exports.formatContentWithoutTags=function(t,r){if(void 0===r&&(r=o),!t)return"";if(t<r)return t;var e=t.replace(/<[^>]*>/g,"").trim().replace(/&nbsp;|[^a-zA-Z0-9\s]/g,"").replace(/\s\s+/g," ").slice(0,r).split(" "),a=String(t).indexOf(e[e.length-2]);return t.slice(0,a).concat("...")},exports.getStatisticInfo=function(o,u){var i;if(!o)return{totalViews:0,totalSold:0,totalAmount:0};var l=e.DateTime.fromISO(u).toUTC().toFormat(r.DATE_FORMAT),c=e.DateTime.fromISO(u).toUTC().toFormat(r.DATE_TIME_FULL_FORMAT),s=Object.values(null!==(i=o.relativeDays)&&void 0!==i?i:{}),d=a(t.__spreadArray([l],t.__read(s),!1),o),f=t.__read(n(t.__spreadArray([c],t.__read(s),!1),o),2);return{totalViews:d,totalSold:f[0],totalAmount:f[1]}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.486-dev.70",
+  "version": "0.44.486-dev.72",
   "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/events/event-card/EventCard.tsx

@@ -50,7 +50,7 @@ export function EventCard({
 }: EventCardProps) {
   const { t } = useTranslation("Design");
   const { formatNumber, formatDate } = useIntl();
-  const { totalViews, ...statistics } = getStatisticInfo(eventStatistic);
+  const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date);
   const memoedContent = useMemo(
     () => formatContentWithoutTags(description, EVENT_DESCRIPTION_SIZE),
     [description]

package/src/events/event-card/utils.ts

@@ -1,4 +1,6 @@
+import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { DateTime } from "luxon";
 
 export function formatContent(content, maxSymbols) {
   if (!content) return "";
@@ -25,27 +27,92 @@ export const formatContentWithoutTags = (
 
 export const EVENT_DESCRIPTION_SIZE = 300;
 
-export const getStatisticInfo = (eventStatistic: EventStatistic | null) => {
-  let totalViews = 0;
+/**
+ * Calculate the total number of views from the given dates and event statistic.
+ *
+ * @param {string[]} dates - An array of dates.
+ * @param {EventStatistic} eventStatistic - The event statistic object.
+ * @returns {number} - The total number of views.
+ */
+export const calculateTotalViews = (
+  dates: string[],
+  eventStatistic: EventStatistic
+): number => {
+  return dates.reduce(
+    (rootAcc, date) =>
+      rootAcc +
+      Object.values(eventStatistic.views[date] ?? {}).reduce(
+        (acc, view) => acc + (view.pageViews || 0),
+        0
+      ),
+    0
+  );
+};
+
+/**
+ * Calculates the total number of products sold and the total amount sold
+ * based on the provided dates and event statistics.
+ *
+ * @param {string[]} dates - An array of dates.
+ * @param {EventStatistic} eventStatistic - Object containing event statistics.
+ * @returns {number[]} An array representing the total number of products sold and total amount sold.
+ */
+export const calculateTotalSoldAndAmount = (
+  dates: string[],
+  eventStatistic: EventStatistic
+): [number, number] => {
   let totalSold = 0;
   let totalAmount = 0;
+  dates.forEach((date) =>
+    Object.values(eventStatistic.productCategorySummary[date] ?? {}).forEach(
+      ({ totalPerCategory, productsSummary }) => {
+        totalAmount += totalPerCategory || 0;
+        totalSold +=
+          productsSummary?.reduce((acc, curr) => acc + curr.productsSold, 0) ??
+          0;
+      }
+    )
+  );
 
-  if (!eventStatistic) return { totalViews: 0, totalSold: 0, totalAmount: 0 };
+  return [totalSold, totalAmount];
+};
 
-  totalViews = Object.values(eventStatistic.views).reduce(
-    (accumulator, currentValue) => {
-      return accumulator + (currentValue.pageViews || 0);
-    },
-    0
+/**
+ * Get statistic information for a given event and date.
+ * @param {EventStatistic | null} eventStatistic - The event statistic object.
+ * @param {string} date - The date in ISO format.
+ * @returns {{
+ *    totalViews: number;
+ *    totalSold: number;
+ *    totalAmount: number;
+ * }} The statistic information object.
+ */
+export const getStatisticInfo = (
+  eventStatistic: EventStatistic | null,
+  date: string
+): {
+  totalViews: number;
+  totalSold: number;
+  totalAmount: number;
+} => {
+  const defaultValues = { totalViews: 0, totalSold: 0, totalAmount: 0 };
+  if (!eventStatistic) return defaultValues;
+
+  const viewsFormattedDate = DateTime.fromISO(date)
+    .toUTC()
+    .toFormat(DATE_FORMAT);
+  const summaryFormattedDate = DateTime.fromISO(date)
+    .toUTC()
+    .toFormat(DATE_TIME_FULL_FORMAT);
+  const relatedDays = Object.values(eventStatistic.relativeDays ?? {});
+
+  const totalViews = calculateTotalViews(
+    [viewsFormattedDate, ...relatedDays],
+    eventStatistic
   );
-  Object.values(eventStatistic.productCategorySummary).forEach((summaries) =>
-    summaries.forEach(({ totalPerCategory, productsSummary = [] }) => {
-      totalAmount += totalPerCategory || 0;
-
-      productsSummary?.forEach(({ productsSold }) => {
-        totalSold += productsSold;
-      });
-    })
+  const [totalSold, totalAmount] = calculateTotalSoldAndAmount(
+    [summaryFormattedDate, ...relatedDays],
+    eventStatistic
   );
 
   return { totalViews, totalSold, totalAmount };