@licklist/design 0.71.21 → 0.71.23

package/dist/events/event-statistic-modal/utils/index.js

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config';
+import { DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config';
 import { maxBy } from 'lodash';
 
 function _array_like_to_array(arr, len) {
@@ -39,10 +39,10 @@ var convertEventStatisticToTableData = function(date, eventStatistic) {
     if (!eventStatistic) {
         return [];
     }
-    var summaryFormattedDate = DateTime.fromISO(date).toUTC().toFormat(DATE_FORMAT);
+    var summaryFormattedDate = DateTime.fromISO(date).toFormat(DATE_TIME_FULL_FORMAT);
     var _Object_keys_filter;
     var summaryDays = (_Object_keys_filter = (_Object_keys = Object.keys(eventStatistic === null || eventStatistic === void 0 ? void 0 : eventStatistic.productCategorySummary)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.filter(function(date) {
-        return DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(DATE_FORMAT) === summaryFormattedDate;
+        return DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(DATE_TIME_FULL_FORMAT) === summaryFormattedDate;
     })) !== null && _Object_keys_filter !== void 0 ? _Object_keys_filter : [];
     var summaryMap = new Map();
     summaryDays.map(function(day) {

package/dist/product-set/form/ProductCategoriesControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCategoriesControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/ProductCategoriesControl.tsx"],"names":[],"mappings":"AAYA,OAAO,EAKL,YAAY,EACb,MAAM,kEAAkE,CAAA;AAQzE,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAStE,UAAU,6BAA8B,SAAQ,aAAa;IAC3D,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AA2BD,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,WAAW,EACX,qBAAqB,EACrB,oBAAoB,GACrB,EAAE,6BAA6B,2CAoT/B;AAED,eAAO,MAAM,cAAc,iBACX,YAAY,SACnB,MAAM,KACZ;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,GAAG,IAczC,CAAA"}
+{"version":3,"file":"ProductCategoriesControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/ProductCategoriesControl.tsx"],"names":[],"mappings":"AAaA,OAAO,EAKL,YAAY,EACb,MAAM,kEAAkE,CAAA;AAQzE,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAoCtE,UAAU,6BAA8B,SAAQ,aAAa;IAC3D,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AA2BD,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,SAAS,EACT,WAAW,EACX,qBAAqB,EACrB,oBAAoB,GACrB,EAAE,6BAA6B,2CA4T/B;AAED,eAAO,MAAM,cAAc,iBACX,YAAY,SACnB,MAAM,KACZ;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,GAAG,IAczC,CAAA"}

package/dist/product-set/form/ProductCategoriesControl.js

@@ -1,9 +1,10 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useContext, useState, useEffect } from 'react';
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService';
 import { uniqueId } from 'lodash';
 import { Badge } from 'react-bootstrap';
 import { useFormContext, useFieldArray, useWatch, Controller } from 'react-hook-form';
+import { FaTicketAlt, FaCalendar, FaBars, FaBowlingBall } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
 import { useSensor, MouseSensor } from '@dnd-kit/core';
 import { CATEGORY_TYPE_GAME, CATEGORY_TYPE_FIXED_DURATION, QUANTITY_TYPE_STANDARD, CATEGORY_TYPE_TICKETS } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper';
@@ -13,7 +14,7 @@ import { ProductSetModalClasses } from '../../sortable-tree/SortableTreeItem.js'
 import { CreateProductSetItem } from '../item/CreateProductSetItem.js';
 import { ProductCategoryControl } from '../product-category/ProductCategoryControl.js';
 import { ProductsControl } from './ProductsControl.js';
-import { SelectCategoryModal } from './SelectCategoryModal.js';
+import { CATEGORY_TYPES_NAMES, SelectCategoryModal } from './SelectCategoryModal.js';
 import { ProductSetLoadingContext } from './context.js';
 import { VenueMapSetModal } from './VenueMapSetModal.js';
 import { sortArrayByIndex, moveArrayElements } from '../utils/index.js';
@@ -117,6 +118,40 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+var _obj;
+// @TODO not for first release
+// import Popover from "./ProductSetFormPopover";
+var CATEGORIES_TYPE = (_obj = {}, _define_property(_obj, CATEGORY_TYPES_NAMES.tickets, {
+    label: 'tickets',
+    icon: /*#__PURE__*/ jsx(FaTicketAlt, {
+        color: "#0e8ce2",
+        size: 10
+    })
+}), _define_property(_obj, CATEGORY_TYPES_NAMES.bookings, {
+    label: 'bookings',
+    icon: /*#__PURE__*/ jsx(FaCalendar, {
+        color: "#0e8ce2",
+        size: 10
+    })
+}), _define_property(_obj, CATEGORY_TYPES_NAMES.menuItems, {
+    label: 'menuItems',
+    icon: /*#__PURE__*/ jsx(FaBars, {
+        color: "#0e8ce2",
+        size: 10
+    })
+}), _define_property(_obj, CATEGORY_TYPES_NAMES.game, {
+    label: 'game',
+    icon: /*#__PURE__*/ jsx(FaBowlingBall, {
+        color: "#0e8ce2",
+        size: 10
+    })
+}), _define_property(_obj, CATEGORY_TYPES_NAMES.fixedDuration, {
+    label: 'fixedDuration',
+    icon: /*#__PURE__*/ jsx(FaCalendar, {
+        color: "#0e8ce2",
+        size: 10
+    })
+}), _obj);
 var getCategoryDefaultValue = function(categoryType, sort) {
     return {
         id: null,
@@ -251,6 +286,7 @@ function ProductCategoriesControl(param) {
                     var onSetIsExpanded = function() {
                         setIsExpanded(productCategoryId);
                     };
+                    var categoryType = CATEGORIES_TYPE[productCategory.type];
                     return /*#__PURE__*/ jsx(Controller, {
                         name: "".concat(productCategoriesFieldName, ".").concat(index, ".name"),
                         control: control,
@@ -300,6 +336,16 @@ function ProductCategoriesControl(param) {
                                 secondaryBadge: getBadgeConfig(productCategory.type, t(productCategory.type)),
                                 modalClass: ProductSetModalClasses.category,
                                 isNewAdded: showCategoryModal,
+                                itemButton: /*#__PURE__*/ jsxs("div", {
+                                    className: "btn-outline-primary item-icon sm border border-primary rounded-sm",
+                                    children: [
+                                        categoryType.icon,
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "ml-2",
+                                            children: t(categoryType.label)
+                                        })
+                                    ]
+                                }),
                                 body: /*#__PURE__*/ jsx(ProductCategoryControl, {
                                     isLoading: isLoading,
                                     onCategoryNameChange: onChange,

package/dist/product-set/form/SelectCategoryModal.d.ts

@@ -1,4 +1,16 @@
+import { ReactElement } from 'react';
 import { CategoryType } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper';
+export declare const CATEGORY_TYPES_NAMES: {
+    readonly menuItems: "menuItems";
+    readonly tickets: "tickets";
+    readonly bookings: "bookings";
+    readonly game: "game";
+    readonly fixedDuration: "fixedDuration";
+};
+export type CategoryConfig = {
+    label: string;
+    icon: ReactElement;
+};
 export interface SelectCategoryModalProps {
     isVisible: boolean;
     onHide: () => void;

package/dist/product-set/form/SelectCategoryModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCategoryModal.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/SelectCategoryModal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAML,YAAY,EACb,MAAM,kEAAkE,CAAA;AAoDzE,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;CACnD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,MAAM,EACN,gBAAgB,GACjB,EAAE,wBAAwB,2CAyH1B"}
+{"version":3,"file":"SelectCategoryModal.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/SelectCategoryModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAA;AAG1D,OAAO,EAML,YAAY,EACb,MAAM,kEAAkE,CAAA;AAgBzE,eAAO,MAAM,oBAAoB;;;;;;CAMvB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,YAAY,CAAA;CAAE,CAAA;AA4BlE,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;CACnD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,MAAM,EACN,gBAAgB,GACjB,EAAE,wBAAwB,2CAyH1B"}

package/dist/product-set/form/SelectCategoryModal.js

@@ -242,4 +242,4 @@ function SelectCategoryModal(param) {
     });
 }
 
-export { SelectCategoryModal };
+export { CATEGORY_TYPES_NAMES, SelectCategoryModal };

package/dist/sortable-tree/SortableTreeItem.d.ts

@@ -14,6 +14,7 @@ export interface SortableTreeItemProps {
     body: ReactNode;
     children?: ReactNode;
     preItem?: ReactNode;
+    itemButton?: ReactNode;
     postItem?: ReactNode;
     sortableItems?: string[];
     isExpanded?: boolean;
@@ -36,5 +37,5 @@ export interface SortableTreeItemProps {
     setIsExpanded?: () => void;
     isOverride?: boolean;
 }
-export declare function SortableTreeItem({ id, title, badge, subTitle, body, children, preItem, postItem, sortableItems, isExpanded, shouldExpand, isInvalid, isIconInHeader, treeLineIconColor, modalLabel, modalClass, isNewAdded, onDelete, validate, cancelChanges, saveValidField, edit, secondaryBadge, setIsExpanded, isOverride, }: SortableTreeItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableTreeItem({ id, title, badge, subTitle, body, children, preItem, postItem, sortableItems, isExpanded, shouldExpand, isInvalid, isIconInHeader, treeLineIconColor, modalLabel, modalClass, isNewAdded, onDelete, validate, cancelChanges, saveValidField, edit, secondaryBadge, setIsExpanded, isOverride, itemButton, }: SortableTreeItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SortableTreeItem.d.ts.map

package/dist/sortable-tree/SortableTreeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableTreeItem.d.ts","sourceRoot":"","sources":["../../src/sortable-tree/SortableTreeItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAA;AAiBnE,eAAO,MAAM,sBAAsB;;;;;CAKzB,CAAA;AAEV,MAAM,MAAM,0BAA0B,GACpC,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,OAAO,sBAAsB,CAAC,CAAA;AAEtE,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,UAAU,CAAC,EAAE,0BAA0B,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAA;IACjC,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,aAAa,EACb,UAAkB,EAClB,YAAmB,EACnB,SAAiB,EACjB,cAAqB,EACrB,iBAAsB,EACtB,UAAe,EACf,UAAU,EACV,UAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,cAAc,EACd,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,GACX,EAAE,qBAAqB,2CA2TvB"}
+{"version":3,"file":"SortableTreeItem.d.ts","sourceRoot":"","sources":["../../src/sortable-tree/SortableTreeItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAIV,MAAM,OAAO,CAAA;AAiBd,eAAO,MAAM,sBAAsB;;;;;CAKzB,CAAA;AAEV,MAAM,MAAM,0BAA0B,GACpC,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,OAAO,sBAAsB,CAAC,CAAA;AAEtE,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,UAAU,CAAC,EAAE,0BAA0B,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAA;IACjC,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,aAAa,EACb,UAAkB,EAClB,YAAmB,EACnB,SAAiB,EACjB,cAAqB,EACrB,iBAAsB,EACtB,UAAe,EACf,UAAU,EACV,UAAkB,EAClB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,cAAc,EACd,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,UAAU,GACX,EAAE,qBAAqB,2CA+TvB"}

package/dist/sortable-tree/SortableTreeItem.js

@@ -240,7 +240,7 @@ var ProductSetModalClasses = {
     productZones: 'edit-product-zone'
 };
 function SortableTreeItem(param) {
-    var id = param.id, title = param.title, badge = param.badge, subTitle = param.subTitle, body = param.body, children = param.children, preItem = param.preItem, postItem = param.postItem, sortableItems = param.sortableItems, _param_isExpanded = param.isExpanded, isExpanded = _param_isExpanded === void 0 ? false : _param_isExpanded, _param_shouldExpand = param.shouldExpand, shouldExpand = _param_shouldExpand === void 0 ? true : _param_shouldExpand, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isIconInHeader = param.isIconInHeader, isIconInHeader = _param_isIconInHeader === void 0 ? true : _param_isIconInHeader, _param_treeLineIconColor = param.treeLineIconColor, treeLineIconColor = _param_treeLineIconColor === void 0 ? '' : _param_treeLineIconColor, _param_modalLabel = param.modalLabel, modalLabel = _param_modalLabel === void 0 ? '' : _param_modalLabel, modalClass = param.modalClass, _param_isNewAdded = param.isNewAdded, isNewAdded = _param_isNewAdded === void 0 ? false : _param_isNewAdded, onDelete = param.onDelete, validate = param.validate, cancelChanges = param.cancelChanges, saveValidField = param.saveValidField, edit = param.edit, secondaryBadge = param.secondaryBadge, setIsExpanded = param.setIsExpanded, isOverride = param.isOverride;
+    var id = param.id, title = param.title, badge = param.badge, subTitle = param.subTitle, body = param.body, children = param.children, preItem = param.preItem, postItem = param.postItem, sortableItems = param.sortableItems, _param_isExpanded = param.isExpanded, isExpanded = _param_isExpanded === void 0 ? false : _param_isExpanded, _param_shouldExpand = param.shouldExpand, shouldExpand = _param_shouldExpand === void 0 ? true : _param_shouldExpand, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isIconInHeader = param.isIconInHeader, isIconInHeader = _param_isIconInHeader === void 0 ? true : _param_isIconInHeader, _param_treeLineIconColor = param.treeLineIconColor, treeLineIconColor = _param_treeLineIconColor === void 0 ? '' : _param_treeLineIconColor, _param_modalLabel = param.modalLabel, modalLabel = _param_modalLabel === void 0 ? '' : _param_modalLabel, modalClass = param.modalClass, _param_isNewAdded = param.isNewAdded, isNewAdded = _param_isNewAdded === void 0 ? false : _param_isNewAdded, onDelete = param.onDelete, validate = param.validate, cancelChanges = param.cancelChanges, saveValidField = param.saveValidField, edit = param.edit, secondaryBadge = param.secondaryBadge, setIsExpanded = param.setIsExpanded, isOverride = param.isOverride, itemButton = param.itemButton;
     var _useState = _sliced_to_array(useState(isExpanded), 2), expanded = _useState[0], setExpanded = _useState[1];
     var _useState1 = _sliced_to_array(useState(isNewAdded), 2), isModalVisible = _useState1[0], setIsModalVisible = _useState1[1];
     var t = useTranslation('Design').t;
@@ -433,9 +433,15 @@ function SortableTreeItem(param) {
                                                 /*#__PURE__*/ jsxs("div", {
                                                     className: clsx(modalLabel ? 'sortable-tree-product-set-title-container' : 'sortable-tree-title-container'),
                                                     children: [
-                                                        /*#__PURE__*/ jsx("span", {
-                                                            className: clsx('sortable-tree-item-title', modalLabel && 'sortable-tree-product-set-element-title'),
-                                                            children: title
+                                                        /*#__PURE__*/ jsxs("span", {
+                                                            className: clsx('sortable-tree-item-title', modalLabel && 'sortable-tree-product-set-element-title', 'd-flex justify-content-between'),
+                                                            children: [
+                                                                title,
+                                                                /*#__PURE__*/ jsx("div", {
+                                                                    className: "sortable-tree-item-subtitle",
+                                                                    children: itemButton
+                                                                })
+                                                            ]
                                                         }),
                                                         !expanded && /*#__PURE__*/ jsx("span", {
                                                             className: "sortable-tree-item-subtitle",

package/dist/styles/product-set/ProductSetForm.scss

@@ -1,4 +1,5 @@
 .product-set-form {
+
   input,
   textarea,
   select,
@@ -15,10 +16,12 @@
     height: 2.5rem;
     border-width: 2px;
     padding: 2px;
+
     label,
     .btn-switch-indicator {
       border-radius: 0.375rem !important;
     }
+
     label {
       height: 2rem;
     }
@@ -34,6 +37,7 @@
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
     }
+
     @include media-breakpoint-down(sm) {
       padding: 1.5rem 1rem;
       margin-top: 0.5rem;
@@ -59,10 +63,21 @@
     background-color: #ffdbdb;
     color: #d52902;
   }
+
   .category-badge {
     background-color: #e8f4f6;
     color: #1a93aa;
   }
+
+  .item-icon {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    font-size: 0.65rem;
+    padding: 0.2rem;
+    margin-right: 1rem;
+  }
+
   .product-badge {
     background-color: #e9f5ea;
     color: #269b36;
@@ -75,10 +90,12 @@
 
 .product-set-mobile-modal {
   margin: 0;
+
   .modal-content {
     border-radius: 1rem 1rem 0 0;
     border-width: 0;
     margin: 0;
+
     .modal-body {
       padding: 1rem 0;
     }
@@ -100,18 +117,22 @@
     font-weight: 600;
     font-size: 0.625rem;
   }
+
   .product-set-subtitle-dot {
     margin-right: 0.375rem;
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 3px;
   }
+
   .product-set-subtitle-category-dot {
     background-color: #269b36;
   }
+
   .product-set-subtitle-step-dot {
     background-color: #1a93aa;
   }
+
   .product-set-subtitle-product-dot {
     background-color: #269b36;
   }
@@ -156,6 +177,7 @@
     justify-self: flex-end;
     align-items: flex-end;
   }
+
   .small-badge {
     font-size: 0.5rem;
     height: 1rem;
@@ -163,6 +185,7 @@
     padding: 0 0.2rem;
     margin-bottom: 0.2rem;
   }
+
   .product-set-save-btn-wrapper {
     padding-left: 0 !important;
     display: flex;
@@ -177,8 +200,8 @@
 
 .sortable-tree-item-toggle {
   .product-zone-badge {
-    background-color: #efe9f5;
-    color: #84269b;
+    background-color: #EFE9F5;
+    color: #84269B;
     font-size: 0.875rem;
     font-weight: 600;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.21",
+  "version": "0.71.23",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -206,4 +206,4 @@
     "node": "20.9.0",
     "yarn": "4.4.0"
   }
-}
+}

package/src/events/event-statistic-modal/utils/index.ts

@@ -33,15 +33,15 @@ export const convertEventStatisticToTableData = (
     return []
   }
 
-  const summaryFormattedDate = DateTime.fromISO(date)
-    .toUTC()
-    .toFormat(DATE_FORMAT)
+  const summaryFormattedDate = DateTime.fromISO(date).toFormat(
+    DATE_TIME_FULL_FORMAT,
+  )
 
   const summaryDays =
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
       (date) =>
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
-          DATE_FORMAT,
+          DATE_TIME_FULL_FORMAT,
         ) === summaryFormattedDate,
     ) ?? []
 

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -8,6 +8,7 @@ import {
   useFormContext,
   useWatch,
 } from 'react-hook-form'
+import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from 'react-icons/fa'
 import { useTranslation } from 'react-i18next'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import {
@@ -25,7 +26,11 @@ import { ProductCategoryControl } from '../product-category'
 import { ProductCategory } from '../types'
 import { ProductsControl } from './ProductsControl'
 import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import { SelectCategoryModal } from './SelectCategoryModal'
+import {
+  SelectCategoryModal,
+  CATEGORY_TYPES_NAMES,
+  CategoryConfig,
+} from './SelectCategoryModal'
 import { ProductSetLoadingContext } from './context'
 import { VenueMapSetModal } from './VenueMapSetModal'
 import { moveArrayElements, sortArrayByIndex } from '../utils'
@@ -33,6 +38,29 @@ import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
+const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
+  [CATEGORY_TYPES_NAMES.tickets]: {
+    label: 'tickets',
+    icon: <FaTicketAlt color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.bookings]: {
+    label: 'bookings',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.menuItems]: {
+    label: 'menuItems',
+    icon: <FaBars color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.game]: {
+    label: 'game',
+    icon: <FaBowlingBall color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.fixedDuration]: {
+    label: 'fixedDuration',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+}
+
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number
   isOverrides?: boolean
@@ -229,6 +257,8 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
+          const categoryType = CATEGORIES_TYPE[productCategory.type]
+
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -273,6 +303,12 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
+                  itemButton={
+                    <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
+                      {categoryType.icon}
+                      <span className='ml-2'>{t(categoryType.label)}</span>
+                    </div>
+                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}

package/src/product-set/form/SelectCategoryModal.tsx

@@ -25,7 +25,7 @@ import {
 } from 'react-icons/fa'
 import { ProductSetLoadingContext } from './context'
 
-const CATEGORY_TYPES_NAMES = {
+export const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const
 
-type CategoryConfig = { label: string; icon: ReactElement }
+export type CategoryConfig = { label: string; icon: ReactElement }
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,4 +1,9 @@
-import { ReactNode, useCallback, useEffect, useState } from 'react'
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 import { DndContext, useDraggable } from '@dnd-kit/core'
 import {
   SortableContext,
@@ -33,6 +38,7 @@ export interface SortableTreeItemProps {
   body: ReactNode
   children?: ReactNode
   preItem?: ReactNode
+  itemButton?: ReactNode
   postItem?: ReactNode
   sortableItems?: string[]
   isExpanded?: boolean
@@ -82,6 +88,7 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
+  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded)
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded)
@@ -287,9 +294,13 @@ export function SortableTreeItem({
                     className={clsx(
                       'sortable-tree-item-title',
                       modalLabel && 'sortable-tree-product-set-element-title',
+                      'd-flex justify-content-between',
                     )}
                   >
                     {title}
+                    <div className='sortable-tree-item-subtitle'>
+                      {itemButton}
+                    </div>
                   </span>
                   {!expanded && (
                     <span className='sortable-tree-item-subtitle'>

package/src/styles/product-set/ProductSetForm.scss

@@ -1,4 +1,5 @@
 .product-set-form {
+
   input,
   textarea,
   select,
@@ -15,10 +16,12 @@
     height: 2.5rem;
     border-width: 2px;
     padding: 2px;
+
     label,
     .btn-switch-indicator {
       border-radius: 0.375rem !important;
     }
+
     label {
       height: 2rem;
     }
@@ -34,6 +37,7 @@
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
     }
+
     @include media-breakpoint-down(sm) {
       padding: 1.5rem 1rem;
       margin-top: 0.5rem;
@@ -59,10 +63,21 @@
     background-color: #ffdbdb;
     color: #d52902;
   }
+
   .category-badge {
     background-color: #e8f4f6;
     color: #1a93aa;
   }
+
+  .item-icon {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    font-size: 0.65rem;
+    padding: 0.2rem;
+    margin-right: 1rem;
+  }
+
   .product-badge {
     background-color: #e9f5ea;
     color: #269b36;
@@ -75,10 +90,12 @@
 
 .product-set-mobile-modal {
   margin: 0;
+
   .modal-content {
     border-radius: 1rem 1rem 0 0;
     border-width: 0;
     margin: 0;
+
     .modal-body {
       padding: 1rem 0;
     }
@@ -100,18 +117,22 @@
     font-weight: 600;
     font-size: 0.625rem;
   }
+
   .product-set-subtitle-dot {
     margin-right: 0.375rem;
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 3px;
   }
+
   .product-set-subtitle-category-dot {
     background-color: #269b36;
   }
+
   .product-set-subtitle-step-dot {
     background-color: #1a93aa;
   }
+
   .product-set-subtitle-product-dot {
     background-color: #269b36;
   }
@@ -156,6 +177,7 @@
     justify-self: flex-end;
     align-items: flex-end;
   }
+
   .small-badge {
     font-size: 0.5rem;
     height: 1rem;
@@ -163,6 +185,7 @@
     padding: 0 0.2rem;
     margin-bottom: 0.2rem;
   }
+
   .product-set-save-btn-wrapper {
     padding-left: 0 !important;
     display: flex;
@@ -177,8 +200,8 @@
 
 .sortable-tree-item-toggle {
   .product-zone-badge {
-    background-color: #efe9f5;
-    color: #84269b;
+    background-color: #EFE9F5;
+    color: #84269B;
     font-size: 0.875rem;
     font-weight: 600;
   }