@licklist/design 0.70.0-dev.3 → 0.70.0-dev.5

package/dist/assets/iframe/available.svg

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

package/dist/assets/iframe/available.svg.js

@@ -4,33 +4,31 @@ var _rect, _rect2, _rect3;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SvgAvailable = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 7,
-  height: 11,
-  fill: "none"
+  fill: "none",
+  viewBox: "auto"
 }, props), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
-  width: 5.252,
-  height: 3.049,
-  x: 0.944,
-  y: 1.037,
+  width: "63%",
+  height: "29%",
+  x: "14%",
   fill: "#4CF973",
   stroke: "#fff",
-  rx: 1.5
+  rx: "15%"
 })), _rect2 || (_rect2 = /*#__PURE__*/React.createElement("rect", {
-  width: 5.252,
-  height: 3.049,
-  x: 0.944,
-  y: 4.11,
+  width: "63%",
+  height: "29%",
+  x: "14%",
+  y: "33%",
   fill: "#4CF973",
   stroke: "#fff",
-  rx: 1.5
+  rx: "15%"
 })), _rect3 || (_rect3 = /*#__PURE__*/React.createElement("rect", {
-  width: 5.252,
-  height: 3.049,
-  x: 0.944,
-  y: 7.183,
+  width: "63%",
+  height: "29%",
+  x: "14%",
+  y: "66%",
   fill: "#4CF973",
   stroke: "#fff",
-  rx: 1.5
+  rx: "15%"
 })));
 
 export { SvgAvailable as ReactComponent };

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

@@ -1,9 +1,11 @@
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 type AvailabilityIndicatorProps = {
     resources: ZoneResourcesAvailability;
     isUnavailable?: boolean;
     isSoldOut?: boolean;
+    availabilityFormat?: AvailabilityFormat | null;
 };
-export declare const AvailabilityIndicator: ({ resources, isUnavailable, isSoldOut, }: AvailabilityIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AvailabilityIndicator: ({ resources, isUnavailable, isSoldOut: _isSoldOut, availabilityFormat, }: AvailabilityIndicatorProps) => import("react/jsx-runtime").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":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AAiCpH,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,yBAAyB,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,qBAAqB,6CAI/B,0BAA0B,4CAc5B,CAAA"}
+{"version":3,"file":"AvailabilityIndicator.d.ts","sourceRoot":"","sources":["../../src/availability-indicator/AvailabilityIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAEL,kBAAkB,EACnB,MAAM,2DAA2D,CAAA;AAuFlE,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,yBAAyB,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,qBAAqB,6EAK/B,0BAA0B,4CAwB5B,CAAA"}

package/dist/availability-indicator/AvailabilityIndicator.js

@@ -1,40 +1,117 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
+import { AVAILABILITY_FORMAT_NUMBER } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
+import { useWindowDimensions } from '@licklist/plugins';
 import { ReactComponent as SvgAvailable } from '../assets/iframe/available.svg.js';
 import { ReactComponent as SvgLimited } from '../assets/iframe/limited.svg.js';
 import { ReactComponent as SvgSoldOut } from '../assets/iframe/soldOut.svg.js';
+import { TAB_WIDTH } from '../iframe/page/components/PageBody/constants.js';
 
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 var LOTS_OF_SPACE_LIMIT = 0.2;
 var LIMITED_LIMIT = 0.8;
-var getIconsAndLabels = function(param) {
-    var bookedResources = param.bookedResources, totalResources = param.totalResources;
-    if (bookedResources === totalResources) {
+var getLabelsWithArgument = function(param) {
+    var bookedResources = param.bookedResources, totalResources = param.totalResources, availabilityFormat = param.availabilityFormat, label = param.label;
+    var availableResources = totalResources - bookedResources;
+    if (availabilityFormat !== AVAILABILITY_FORMAT_NUMBER) {
         return {
-            label: 'soldOut',
-            Icon: SvgSoldOut
+            label: label
         };
     }
+    return availableResources === 1 ? {
+        label: 'availableSingleResource'
+    } : {
+        label: 'availableMultipleResources',
+        argument: availableResources
+    };
+};
+var getIconsAndLabelsWithArgument = function(param) {
+    var bookedResources = param.bookedResources, totalResources = param.totalResources, availabilityFormat = param.availabilityFormat;
     // lots of space if less than 80% booked
     if (bookedResources / totalResources <= LOTS_OF_SPACE_LIMIT) {
-        return {
-            label: 'lotsOfSpace',
+        return _object_spread_props(_object_spread({}, getLabelsWithArgument({
+            bookedResources: bookedResources,
+            totalResources: totalResources,
+            availabilityFormat: availabilityFormat,
+            label: 'lotsOfSpace'
+        })), {
             Icon: SvgAvailable
-        };
+        });
     }
     if (bookedResources / totalResources >= LIMITED_LIMIT) {
-        return {
-            label: 'limited',
+        return _object_spread_props(_object_spread({}, getLabelsWithArgument({
+            bookedResources: bookedResources,
+            totalResources: totalResources,
+            availabilityFormat: availabilityFormat,
+            label: 'limited'
+        })), {
             Icon: SvgLimited
-        };
+        });
     }
-    return {
-        label: 'available',
+    return _object_spread_props(_object_spread({}, getLabelsWithArgument({
+        bookedResources: bookedResources,
+        totalResources: totalResources,
+        availabilityFormat: availabilityFormat,
+        label: 'available'
+    })), {
         Icon: SvgAvailable
-    };
+    });
 };
 var AvailabilityIndicator = function(param) {
-    var resources = param.resources, isUnavailable = param.isUnavailable, isSoldOut = param.isSoldOut;
+    var resources = param.resources, isUnavailable = param.isUnavailable, _isSoldOut = param.isSoldOut, availabilityFormat = param.availabilityFormat;
     var t = useTranslation('Design').t;
+    var isSoldOut = _isSoldOut || resources.bookedResources === resources.totalResources;
     if (isUnavailable) {
         return /*#__PURE__*/ jsx(Indicator, {
             Icon: SvgSoldOut,
@@ -47,19 +124,36 @@ var AvailabilityIndicator = function(param) {
             label: t('soldOut')
         });
     }
-    var _getIconsAndLabels = getIconsAndLabels(resources), Icon = _getIconsAndLabels.Icon, label = _getIconsAndLabels.label;
+    var _getIconsAndLabelsWithArgument = getIconsAndLabelsWithArgument(_object_spread_props(_object_spread({}, resources), {
+        availabilityFormat: availabilityFormat
+    })), Icon = _getIconsAndLabelsWithArgument.Icon, label = _getIconsAndLabelsWithArgument.label, argument = _getIconsAndLabelsWithArgument.argument;
     return /*#__PURE__*/ jsx(Indicator, {
         Icon: Icon,
-        label: t(label)
+        label: t(label, argument ? {
+            argument: argument
+        } : undefined)
     });
 };
 var Indicator = function(param) {
     var Icon = param.Icon, label = param.label;
+    var width = useWindowDimensions().width;
+    var iconSizes = width > TAB_WIDTH ? {
+        height: 15,
+        width: 11
+    } : {
+        height: 11,
+        width: 7
+    };
     return /*#__PURE__*/ jsxs("div", {
         className: "availability-indicator",
         children: [
-            /*#__PURE__*/ jsx(Icon, {}),
+            /*#__PURE__*/ jsx(Icon, {
+                height: iconSizes.height,
+                width: iconSizes.width,
+                viewBox: "auto"
+            }),
             /*#__PURE__*/ jsx("div", {
+                className: "indicator-label",
                 children: label
             })
         ]

package/dist/calendar/Calendar.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { DateTime } from 'luxon';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 import { DateTimeButtonProps } from 'src/date-time-button';
 export declare const defaultStartDay: DateTime<true>;
 export type CalendarProps = {
@@ -11,6 +12,7 @@ export type CalendarProps = {
     fromPrice?: string | ReactElement | null;
     isLoading?: boolean;
     initialDate?: DateTime;
+    availabilityFormat?: AvailabilityFormat | null;
     getDateTimeButtonProps: (date: DateTime) => Pick<DateTimeButtonProps, 'resources' | 'showResources' | 'isDisabled'>;
 };
 export declare const Calendar: (props: CalendarProps) => import("react/jsx-runtime").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,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAK1D,eAAO,MAAM,eAAe,gBAK1B,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAA;IAClD,aAAa,EAAE,QAAQ,EAAE,CAAA;IACzB,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC7B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAA;IAC1D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,sBAAsB,EAAE,CACtB,IAAI,EAAE,QAAQ,KACX,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,eAAe,GAAG,YAAY,CAAC,CAAA;CAC7E,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,aAAa,4CAW5C,CAAA"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAC9F,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAK1D,eAAO,MAAM,eAAe,gBAK1B,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,QAAQ,CAAA;IACrB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAA;IAClD,aAAa,EAAE,QAAQ,EAAE,CAAA;IACzB,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC7B,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAA;IAC1D,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC9C,sBAAsB,EAAE,CACtB,IAAI,EAAE,QAAQ,KACX,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,eAAe,GAAG,YAAY,CAAC,CAAA;CAC7E,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,aAAa,4CAW5C,CAAA"}

package/dist/calendar/components/CalendarDates/CalendarDates.d.ts

@@ -1,4 +1,4 @@
 import { CalendarProps } from '../../Calendar';
-export type CalendarDatesProps = Pick<CalendarProps, 'calendarDates' | 'selectedDate' | 'setSelectedDate' | 'fromPrice' | 'getDateTimeButtonProps'>;
-export declare const CalendarDates: ({ calendarDates, selectedDate, setSelectedDate, fromPrice, getDateTimeButtonProps, }: CalendarDatesProps) => import("react/jsx-runtime").JSX.Element;
+export type CalendarDatesProps = Pick<CalendarProps, 'calendarDates' | 'selectedDate' | 'setSelectedDate' | 'fromPrice' | 'getDateTimeButtonProps' | 'availabilityFormat'>;
+export declare const CalendarDates: ({ calendarDates, selectedDate, setSelectedDate, fromPrice, availabilityFormat, getDateTimeButtonProps, }: CalendarDatesProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CalendarDates.d.ts.map

package/dist/calendar/components/CalendarDates/CalendarDates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDates.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/CalendarDates/CalendarDates.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACX,eAAe,GACf,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,wBAAwB,CAC3B,CAAA;AAED,eAAO,MAAM,aAAa,yFAMvB,kBAAkB,4CA4CpB,CAAA"}
+{"version":3,"file":"CalendarDates.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/CalendarDates/CalendarDates.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACX,eAAe,GACf,cAAc,GACd,iBAAiB,GACjB,WAAW,GACX,wBAAwB,GACxB,oBAAoB,CACvB,CAAA;AAED,eAAO,MAAM,aAAa,6GAOvB,kBAAkB,4CA6CpB,CAAA"}

package/dist/calendar/components/CalendarDates/CalendarDates.js

@@ -57,7 +57,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var CalendarDates = function(param) {
-    var calendarDates = param.calendarDates, selectedDate = param.selectedDate, setSelectedDate = param.setSelectedDate, fromPrice = param.fromPrice, getDateTimeButtonProps = param.getDateTimeButtonProps;
+    var calendarDates = param.calendarDates, selectedDate = param.selectedDate, setSelectedDate = param.setSelectedDate, fromPrice = param.fromPrice, availabilityFormat = param.availabilityFormat, getDateTimeButtonProps = param.getDateTimeButtonProps;
     var fillCalendarDates = useMemo(function() {
         var _calendarDates_;
         var _calendarDates__weekday;
@@ -90,7 +90,8 @@ var CalendarDates = function(param) {
                             return setSelectedDate(date);
                         },
                         price: fromPrice,
-                        variant: Variant.month
+                        variant: Variant.month,
+                        availabilityFormat: availabilityFormat
                     }, props), +date);
                 })
             })

package/dist/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomFieldSet.d.ts","sourceRoot":"","sources":["../../../../../src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AAEtF,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAG3E,OAAO,EAGL,YAAY,EACb,MAAM,2BAA2B,CAAA;AAKlC,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAW9E,KAAK,mBAAmB,GAAG,iBAAiB,GAAG;IAC7C,YAAY,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAA;IAClD,IAAI,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IACpC,WAAW,EAAE,gBAAgB,EAAE,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAA;IAC1D,gBAAgB,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAA;IAC1D,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,cAAc,2HASxB,mBAAmB,4CAkMrB,CAAA"}
+{"version":3,"file":"CustomFieldSet.d.ts","sourceRoot":"","sources":["../../../../../src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AAEtF,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAI3E,OAAO,EAGL,YAAY,EACb,MAAM,2BAA2B,CAAA;AAKlC,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAW9E,KAAK,mBAAmB,GAAG,iBAAiB,GAAG;IAC7C,YAAY,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAA;IAClD,IAAI,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IACpC,WAAW,EAAE,gBAAgB,EAAE,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAA;IAC1D,gBAAgB,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAA;IAC1D,YAAY,CAAC,EAAE,WAAW,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,cAAc,2HASxB,mBAAmB,4CAgNrB,CAAA"}

package/dist/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.js

@@ -7,6 +7,7 @@ import { isEqual } from 'lodash';
 import { CUSTOM_FIELD_TYPE_INPUT, CUSTOM_FIELD_TYPE_DROPDOWN } from '@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper';
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService';
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService';
+import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification';
 import { CreateSortableListItem } from '../../../../sortable-list/CreateSortableListItem.js';
 import { SORTABLE_ID_KEY } from '../../../../sortable-list/SortableList.js';
 import { SortableTreeItem } from '../../../../sortable-tree/SortableTreeItem.js';
@@ -270,6 +271,7 @@ var CustomFieldSet = function(param) {
         serverErrors,
         setError
     ]);
+    var notification = useNotification();
     var _useFieldArray = useFieldArray({
         control: control,
         name: CUSTOM_FIELDS
@@ -293,6 +295,12 @@ var CustomFieldSet = function(param) {
                         if (!response) return [
                             2
                         ];
+                        notification.success({
+                            title: t('App:success'),
+                            message: t('Notification:createSuccessfully', {
+                                argument: t('customField')
+                            })
+                        });
                         setFieldSets(function(prevFieldSets) {
                             var nextFieldSets = _to_consumable_array(prevFieldSets);
                             var nextFieldSetFormProps = _object_spread({}, formValues, response);
@@ -325,6 +333,12 @@ var CustomFieldSet = function(param) {
                         ];
                     case 1:
                         _state.sent();
+                        notification.success({
+                            title: t('App:success'),
+                            message: t('Notification:theRemovedSuccessfully', {
+                                argument: t('customField')
+                            })
+                        });
                         _state.label = 2;
                     case 2:
                         setFieldSets(sortedItems.filter(function(sortedItem) {

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { DateTime } from 'luxon';
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 export declare enum Variant {
     week = "week",
     month = "month",
@@ -16,6 +17,7 @@ export type DateTimeButtonProps = {
     resources?: ZoneResourcesAvailability | null;
     showResources?: boolean;
     variant: Variant;
+    availabilityFormat?: AvailabilityFormat | null;
 };
-export declare const DateTimeButton: ({ date, isDisabled: _isDisabled, isSelected, isSoldOut: _isSoldOut, onSelect, price, resources, showResources, variant, }: DateTimeButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeButton: ({ date, isDisabled: _isDisabled, isSelected, isSoldOut: _isSoldOut, onSelect, price, resources, showResources, variant, availabilityFormat, }: DateTimeButtonProps) => import("react/jsx-runtime").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,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AAIpH,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,cAAc,8HAUxB,mBAAmB,4CA2CrB,CAAA"}
+{"version":3,"file":"DateTimeButton.d.ts","sourceRoot":"","sources":["../../src/date-time-button/DateTimeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAI9F,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,QAAQ,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,cAAc,kJAWxB,mBAAmB,4CA4CrB,CAAA"}

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

@@ -11,7 +11,7 @@ var Variant;
     Variant["time"] = "time";
 })(Variant || (Variant = {}));
 var DateTimeButton = function(param) {
-    var date = param.date, _isDisabled = param.isDisabled, isSelected = param.isSelected, _isSoldOut = param.isSoldOut, onSelect = param.onSelect, price = param.price, resources = param.resources, showResources = param.showResources, _param_variant = param.variant, variant = _param_variant === void 0 ? "week" : _param_variant;
+    var date = param.date, _isDisabled = param.isDisabled, isSelected = param.isSelected, _isSoldOut = param.isSoldOut, onSelect = param.onSelect, price = param.price, resources = param.resources, showResources = param.showResources, _param_variant = param.variant, variant = _param_variant === void 0 ? "week" : _param_variant, availabilityFormat = param.availabilityFormat;
     var isSoldOut = _isSoldOut || resources && resources.bookedResources >= resources.totalResources;
     var isTimeVariant = variant === "time";
     var isPast = variant === "time" ? isPastTime(date) : isPastDate(date);
@@ -36,6 +36,7 @@ var DateTimeButton = function(param) {
                 children: price
             }),
             showResources && resources && /*#__PURE__*/ jsx(AvailabilityIndicator, {
+                availabilityFormat: availabilityFormat,
                 resources: resources,
                 isUnavailable: _isDisabled || isPast,
                 isSoldOut: isSoldOut

package/dist/iframe/activity-card/ActivityCard.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper';
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper';
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper';
 export declare const LAYOUT_GRID = "grid";
 export declare const LAYOUT_LIST = "list";
 export type ActivityCardProps = {
@@ -14,6 +15,7 @@ export type ActivityCardProps = {
     availableTimes?: string | null;
     image?: Image | null;
     resources?: ZoneResourcesAvailability;
+    availabilityFormat?: AvailabilityFormat | null;
 };
-export declare const ActivityCard: ({ title, duration, price, description, availableTimes, image, onSelect, isSelected, layout, resources, }: ActivityCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActivityCard: ({ title, duration, price, description, availableTimes, image, onSelect, isSelected, layout, availabilityFormat, resources, }: ActivityCardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ActivityCard.d.ts.map

package/dist/iframe/activity-card/ActivityCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityCard.d.ts","sourceRoot":"","sources":["../../../src/iframe/activity-card/ActivityCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AAGpH,eAAO,MAAM,WAAW,SAAS,CAAA;AACjC,eAAO,MAAM,WAAW,SAAS,CAAA;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,WAAW,GAAG,OAAO,WAAW,CAAA;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,yBAAyB,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,YAAY,6GAWtB,iBAAiB,4CAmDnB,CAAA"}
+{"version":3,"file":"ActivityCard.d.ts","sourceRoot":"","sources":["../../../src/iframe/activity-card/ActivityCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,0EAA0E,CAAA;AACpH,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AAG9F,eAAO,MAAM,WAAW,SAAS,CAAA;AACjC,eAAO,MAAM,WAAW,SAAS,CAAA;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,WAAW,GAAG,OAAO,WAAW,CAAA;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,yBAAyB,CAAA;IACrC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,YAAY,iIAYtB,iBAAiB,4CA6DnB,CAAA"}

package/dist/iframe/activity-card/ActivityCard.js

@@ -5,7 +5,7 @@ import { AvailabilityIndicator } from '../../availability-indicator/Availability
 var LAYOUT_GRID = 'grid';
 var LAYOUT_LIST = 'list';
 var ActivityCard = function(param) {
-    var title = param.title, duration = param.duration, price = param.price, description = param.description, availableTimes = param.availableTimes, image = param.image, onSelect = param.onSelect, isSelected = param.isSelected, _param_layout = param.layout, layout = _param_layout === void 0 ? LAYOUT_GRID : _param_layout, resources = param.resources;
+    var title = param.title, duration = param.duration, price = param.price, description = param.description, availableTimes = param.availableTimes, image = param.image, onSelect = param.onSelect, isSelected = param.isSelected, _param_layout = param.layout, layout = _param_layout === void 0 ? LAYOUT_GRID : _param_layout, availabilityFormat = param.availabilityFormat, resources = param.resources;
     if (layout === LAYOUT_GRID) {
         return /*#__PURE__*/ jsxs("button", {
             type: "button",
@@ -35,7 +35,8 @@ var ActivityCard = function(param) {
                             children: description
                         }),
                         resources && /*#__PURE__*/ jsx(AvailabilityIndicator, {
-                            resources: resources
+                            resources: resources,
+                            availabilityFormat: availabilityFormat
                         })
                     ]
                 })
@@ -74,7 +75,8 @@ var ActivityCard = function(param) {
                         children: description
                     }),
                     resources && /*#__PURE__*/ jsx(AvailabilityIndicator, {
-                        resources: resources
+                        resources: resources,
+                        availabilityFormat: availabilityFormat
                     })
                 ]
             }),

package/dist/snippet/snippet-template/preview/Preview.js

@@ -56,6 +56,7 @@ import 'react-bootstrap/ModalTitle';
 import 'react-bootstrap/ModalBody';
 import 'react-bootstrap/Modal';
 import '../../../iframe/payment/payment-status-page/PaymentStatusPage.js';
+import '@licklist/plugins';
 import '@licklist/plugins/dist/services/Form/HookFormService';
 import 'luxon';
 import '../../../static/manual-date-picker/constants/index.js';

package/dist/styles/availability-indicator/AvailabilityIndicator.scss

@@ -4,6 +4,15 @@
   align-items: center;
   gap: 0.5rem;
   font-weight: 300;
+  width: 100%;
+
+
+  .indicator-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex-shrink: 2;
+  }
 
   @include media-breakpoint-down(sm) {
     div {

package/dist/styles/date-time-button/DateTimeButton.scss

@@ -79,7 +79,7 @@
 
   &.only-time-container {
     min-width: 5.3rem;
-    max-width: 5.3rem;
+    max-width: 8.3rem;
     min-height: 2.75rem;
     border: 2px solid $snippet-calendar-disabled-button-border-color;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.70.0-dev.3",
+  "version": "0.70.0-dev.5",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.0-dev.0",
+    "@licklist/core": "0.31.1-dev.2",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.34.0-dev.4",
     "lodash": "4.17.21",
@@ -61,7 +61,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.31.0-dev.0",
+    "@licklist/core": "0.31.1-dev.2",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.34.0-dev.4",
     "@mantine/core": "6.0.22",

package/src/assets/iframe/available.svg

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