@licklist/design 0.71.18-dev.3 → 0.71.18-dev.4

package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts

@@ -1,8 +1,12 @@
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct';
 import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock';
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems';
 export declare const cartSumByOrderProducts: ({ orderProducts, isTotalSum, }: {
     orderProducts?: OrderItem[];
     isTotalSum?: boolean;
 }) => number;
+export declare const getModifierName: (modifier: OrderModifierByProduct, isManualBooking: boolean) => string;
+export declare const calculateTotalModifiersPrice: (orderModifiersSets: OrderModifierByProduct[]) => number;
+export declare const getOrderProductModifiersPrice: (modifierFromProduct: OrderModifierByProduct) => number;
 export declare const getProductError: (productsWithErrors: QuantityCheckProductInfo[], productId: OrderItem["id"]) => string | undefined;
 //# sourceMappingURL=index.d.ts.map

package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAA;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAA;AAElF,eAAO,MAAM,sBAAsB,mCAGhC;IACD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,WAeA,CAAA;AAED,eAAO,MAAM,eAAe,uBACN,wBAAwB,EAAE,aACnC,SAAS,CAAC,IAAI,CAAC,KACzB,MAAM,GAAG,SAGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,sBAAsB,EACvB,MAAM,8DAA8D,CAAA;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAA;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAA;AAElF,eAAO,MAAM,sBAAsB,mCAGhC;IACD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,WAmBA,CAAA;AAED,eAAO,MAAM,eAAe,aAChB,sBAAsB,mBACf,OAAO,WAMzB,CAAA;AAED,eAAO,MAAM,4BAA4B,uBACnB,sBAAsB,EAAE,WAUO,CAAA;AAErD,eAAO,MAAM,6BAA6B,wBACnB,sBAAsB,WAU5C,CAAA;AAED,eAAO,MAAM,eAAe,uBACN,wBAAwB,EAAE,aACnC,SAAS,CAAC,IAAI,CAAC,KACzB,MAAM,GAAG,SAGA,CAAA"}

package/dist/iframe/order-process/components/BookingSummary/utils/index.js

@@ -5,10 +5,35 @@ var cartSumByOrderProducts = function(param) {
     }
     return orderProducts.reduce(function(prevSumValue, product) {
         if (!product) return 0;
+        var modifiersPrice = calculateTotalModifiersPrice(product === null || product === void 0 ? void 0 : product.orderModifiersSets);
         var price = isTotalSum ? product === null || product === void 0 ? void 0 : product.price : product.hasDeposit ? product === null || product === void 0 ? void 0 : product.deposit : product === null || product === void 0 ? void 0 : product.price;
-        return prevSumValue + price * product.quantity;
+        return prevSumValue + price * product.quantity + modifiersPrice;
     }, 0);
 };
+var getModifierName = function(modifier, isManualBooking) {
+    var modifierName = function(orderModifier) {
+        return !isManualBooking ? orderModifier === null || orderModifier === void 0 ? void 0 : orderModifier.name : orderModifier.modifier.name;
+    };
+    return "".concat(modifier.modifiers.map(function(item) {
+        return (item === null || item === void 0 ? void 0 : item.quantity) > 1 ? "".concat(item === null || item === void 0 ? void 0 : item.quantity, "x - ").concat(modifierName(item)) : modifierName(item);
+    }).join(', '));
+};
+var calculateTotalModifiersPrice = function(orderModifiersSets) {
+    return orderModifiersSets === null || orderModifiersSets === void 0 ? void 0 : orderModifiersSets.map(function(set) {
+        return set.modifiers.reduce(function(sum, modifier) {
+            return sum + modifier.price * modifier.quantity * set.productQuantity;
+        }, 0);
+    }).reduce(function(total, setTotal) {
+        return total + setTotal;
+    }, 0);
+};
+var getOrderProductModifiersPrice = function(modifierFromProduct) {
+    var modifiers = modifierFromProduct.modifiers, productQuantity = modifierFromProduct.productQuantity;
+    var modifiersPrices = modifiers.reduce(function(prevSumModifier, modifier) {
+        return prevSumModifier + modifier.price * modifier.quantity;
+    }, 0);
+    return modifiersPrices * productQuantity;
+};
 var getProductError = function(productsWithErrors, productId) {
     var _productsWithErrors_find;
     return (_productsWithErrors_find = productsWithErrors.find(function(productWithError) {
@@ -16,4 +41,4 @@ var getProductError = function(productsWithErrors, productId) {
     })) === null || _productsWithErrors_find === void 0 ? void 0 : _productsWithErrors_find.message;
 };
 
-export { cartSumByOrderProducts, getProductError };
+export { calculateTotalModifiersPrice, cartSumByOrderProducts, getModifierName, getOrderProductModifiersPrice, getProductError };

package/dist/iframe/order-process/components/CategoryProduct/CategoryProduct.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryProduct.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAA;AACvF,OAAO,EACL,OAAO,EACP,eAAe,EAChB,MAAM,qDAAqD,CAAA;AAI5D,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,eAAe,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,wBAAwB,EAAE,CAAA;IAC/C,eAAe,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAC7C;AAED,eAAO,MAAM,eAAe,sFAMzB,oBAAoB,4CA0KtB,CAAA"}
+{"version":3,"file":"CategoryProduct.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAA;AACvF,OAAO,EACL,OAAO,EACP,eAAe,EAChB,MAAM,qDAAqD,CAAA;AAU5D,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,eAAe,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,wBAAwB,EAAE,CAAA;IAC/C,eAAe,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAC7C;AAED,eAAO,MAAM,eAAe,sFAMzB,oBAAoB,4CAoPtB,CAAA"}

package/dist/iframe/order-process/components/CategoryProduct/CategoryProduct.js

@@ -1,14 +1,24 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { useIntl } from 'react-intl';
 import * as Config from '@licklist/core/dist/Config';
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService';
+import { ProductWithModifierSetModal } from '../../../ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.js';
 import { TicketDescription } from '../../../event/ticket-description/TicketDescription.js';
 import { ProductQuantityInput } from './components/ProductQuantityInput/ProductQuantityInput.js';
+import { ProductWithModifier } from './components/ProductWithModifier/ProductWithModifier.js';
 
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -22,6 +32,33 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -61,6 +98,17 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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 CategoryProduct = function(param) {
     var product = param.product, category = param.category, _param_canExpandDescription = param.canExpandDescription, canExpandDescription = _param_canExpandDescription === void 0 ? true : _param_canExpandDescription, productsWithErrors = param.productsWithErrors, soldOutProducts = param.soldOutProducts;
     var formatNumber = useIntl().formatNumber;
@@ -69,6 +117,8 @@ var CategoryProduct = function(param) {
         'Validation'
     ]).t;
     var _useFormContext = useFormContext(), control = _useFormContext.control, clearErrors = _useFormContext.clearErrors, setError = _useFormContext.setError;
+    var _useState = _sliced_to_array(useState(undefined), 2), editOrderModifierIndex = _useState[0], setEditOrderModifierIndex = _useState[1];
+    var _useState1 = _sliced_to_array(useState(undefined), 2), modifierIndex = _useState1[0], setModifierIndex = _useState1[1];
     var hasDeposits = category.allowDeposits && (product === null || product === void 0 ? void 0 : product.deposit) < product.price;
     var productQuantityError = useMemo(function() {
         if (!productsWithErrors) {
@@ -143,6 +193,40 @@ var CategoryProduct = function(param) {
         },
         render: function(param) {
             var _param_field = param.field, onChange = _param_field.onChange, tmp = _param_field.value, productInfo = tmp === void 0 ? {} : tmp, ref = _param_field.ref, _param_fieldState = param.fieldState, invalid = _param_fieldState.invalid, error = _param_fieldState.error;
+            var _productInfo_orderModifiersSets;
+            var deleteOrderModifier = function(orderModifierIndex) {
+                var _productInfo_orderModifiersSets;
+                var removedOrderModifierIndex = (_productInfo_orderModifiersSets = productInfo.orderModifiersSets) === null || _productInfo_orderModifiersSets === void 0 ? void 0 : _productInfo_orderModifiersSets.filter(function(_, index) {
+                    return index !== orderModifierIndex;
+                });
+                var productInfoWithRemove = _object_spread_props(_object_spread({}, productInfo), {
+                    orderModifiersSets: removedOrderModifierIndex,
+                    quantity: removedOrderModifierIndex.reduce(function(acc, product) {
+                        return product.productQuantity + acc;
+                    }, 0)
+                });
+                onChange(productInfoWithRemove);
+            };
+            var editOrderModifierSet = function(orderModifierIndex) {
+                var editOrderModifierIndex = productInfo.orderModifiersSets.find(function(_, index) {
+                    setModifierIndex(index);
+                    return index === orderModifierIndex;
+                });
+                setEditOrderModifierIndex(editOrderModifierIndex);
+            };
+            var onChangeWithModifierSets = function(value) {
+                var _productInfo_orderModifiersSets;
+                var editedOrderModifiersSets = (_productInfo_orderModifiersSets = productInfo.orderModifiersSets) === null || _productInfo_orderModifiersSets === void 0 ? void 0 : _productInfo_orderModifiersSets.filter(function(_, index) {
+                    return index !== modifierIndex;
+                }).concat(value.orderModifiersSets);
+                onChange(_object_spread_props(_object_spread({}, value), {
+                    orderModifiersSets: editedOrderModifiersSets,
+                    quantity: editedOrderModifiersSets.reduce(function(acc, product) {
+                        return product.productQuantity + acc;
+                    }, 0)
+                }));
+                setEditOrderModifierIndex(undefined);
+            };
             return /*#__PURE__*/ jsxs("div", {
                 id: String(product.id),
                 className: "iframe-event__category-product",
@@ -194,6 +278,16 @@ var CategoryProduct = function(param) {
                             })
                         })
                     }),
+                    ((_productInfo_orderModifiersSets = productInfo.orderModifiersSets) === null || _productInfo_orderModifiersSets === void 0 ? void 0 : _productInfo_orderModifiersSets.length) > 0 && /*#__PURE__*/ jsx(Fragment, {
+                        children: productInfo.orderModifiersSets.map(function(modifier, index) {
+                            return /*#__PURE__*/ jsx(ProductWithModifier, {
+                                modifier: modifier,
+                                modifierKey: index,
+                                editOrderModifierSet: editOrderModifierSet,
+                                deleteOrderModifier: deleteOrderModifier
+                            }, modifier.productQuantity.toString());
+                        })
+                    }),
                     hasDeposits && (category === null || category === void 0 ? void 0 : category.remainderExpireAfter) > 0 && /*#__PURE__*/ jsx("div", {
                         className: "mt-4",
                         children: t('Design:payNowAndReminderDays', {
@@ -221,6 +315,16 @@ var CategoryProduct = function(param) {
                                 HookFormService.hasError(error, 'validate') && error.message
                             ]
                         })
+                    }),
+                    /*#__PURE__*/ jsx(ProductWithModifierSetModal, {
+                        show: !!editOrderModifierIndex,
+                        onHide: function() {
+                            return setEditOrderModifierIndex(undefined);
+                        },
+                        editOrderModifier: editOrderModifierIndex,
+                        onChange: onChangeWithModifierSets,
+                        product: product,
+                        category: category
                     })
                 ]
             });

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts

@@ -1,6 +1,7 @@
 import { FieldValues, RefCallBack, UseFormClearErrors } from 'react-hook-form';
 import { Product, ProductCategory } from '@licklist/plugins/dist/types/context/sale/menuSteps';
-interface FormOrderItem {
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct';
+export interface FormOrderItem {
     id: number;
     name: string;
     price: number;
@@ -9,6 +10,7 @@ interface FormOrderItem {
     deposit?: number | null;
     quantity: number;
     capacity?: number | null;
+    orderModifiersSets?: OrderModifierByProduct[] | null;
 }
 interface ProductQuantityInputProps {
     product: Product;

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductQuantityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAC9E,OAAO,EACL,OAAO,EACP,eAAe,EAChB,MAAM,qDAAqD,CAAA;AAG5D,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,iBAAiB,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACzB;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,eAAe,CAAA;IACzB,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,WAAW,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,aAAa,CAAA;CAC3B;AAED,eAAO,MAAM,oBAAoB,gGAQ9B,yBAAyB,4CAiE3B,CAAA"}
+{"version":3,"file":"ProductQuantityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAC9E,OAAO,EACL,OAAO,EACP,eAAe,EAChB,MAAM,qDAAqD,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAA;AAKrG,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,iBAAiB,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAA;CACrD;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,eAAe,CAAA;IACzB,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,WAAW,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,aAAa,CAAA;CAC3B;AAED,eAAO,MAAM,oBAAoB,gGAQ9B,yBAAyB,4CAoH3B,CAAA"}

package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.js

@@ -1,12 +1,62 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
 import clsx from 'clsx';
 import { Button } from 'react-bootstrap';
+import { isEmpty } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { NumberInput } from '../NumberInput/NumberInput.js';
+import { ProductWithModifierSetModal } from '../../../../../ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.js';
 
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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 ProductQuantityInput = function(param) {
     var product = param.product, category = param.category, _onChange = param.onChange, clearErrors = param.clearErrors, refCallback = param.refCallback, productInfo = param.productInfo, invalid = param.invalid;
     var t = useTranslation('Design').t;
+    var _useState = _sliced_to_array(useState(false), 2), open = _useState[0], handleOpenModal = _useState[1];
     var onChange = function(quantity) {
         _onChange({
             id: product.id,
@@ -14,17 +64,61 @@ var ProductQuantityInput = function(param) {
             deposit: product === null || product === void 0 ? void 0 : product.deposit,
             hasDeposit: category.allowDeposits && (product === null || product === void 0 ? void 0 : product.deposit) < product.price,
             price: product.price,
+            orderModifiersSets: [],
             productCategoryId: category.id,
             quantity: quantity,
             capacity: product === null || product === void 0 ? void 0 : product.capacity
         });
     };
+    var onChangeWithModifierSets = function(productOrder) {
+        var _productInfo_orderModifiersSets;
+        if (isEmpty(productInfo)) {
+            _onChange(productOrder);
+            return handleOpenModal(false);
+        }
+        _onChange({
+            id: productInfo.id,
+            name: productInfo.name,
+            deposit: productInfo === null || productInfo === void 0 ? void 0 : productInfo.deposit,
+            hasDeposit: productInfo.hasDeposit,
+            price: productInfo.price,
+            orderModifiersSets: (_productInfo_orderModifiersSets = productInfo.orderModifiersSets) === null || _productInfo_orderModifiersSets === void 0 ? void 0 : _productInfo_orderModifiersSets.concat(productOrder.orderModifiersSets),
+            productCategoryId: category.id,
+            quantity: productInfo.quantity + productOrder.quantity,
+            capacity: productInfo === null || productInfo === void 0 ? void 0 : productInfo.capacity
+        });
+        return handleOpenModal(false);
+    };
     if (product.isSoldOut) {
         return /*#__PURE__*/ jsx("div", {
             className: "iframe-event__sold-out-wrapper",
             children: t('Design:soldOut')
         });
     }
+    if (product.modifiersSet.length) {
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Button, {
+                    ref: refCallback,
+                    disabled: product.isSoldOut,
+                    className: clsx("iframe-event__".concat((productInfo === null || productInfo === void 0 ? void 0 : productInfo.quantity) ? 'unselect-product' : 'select-product'), invalid && 'error'),
+                    onClick: function() {
+                        return handleOpenModal(true);
+                    },
+                    children: "+"
+                }),
+                /*#__PURE__*/ jsx(ProductWithModifierSetModal, {
+                    show: open,
+                    onHide: function() {
+                        return handleOpenModal(false);
+                    },
+                    onChange: onChangeWithModifierSets,
+                    product: product,
+                    category: category
+                })
+            ]
+        });
+    }
     if ((product === null || product === void 0 ? void 0 : product.maxAmount) === 1) {
         return /*#__PURE__*/ jsx(Button, {
             ref: refCallback,

package/dist/iframe/order-process/components/CategoryProduct/components/ProductWithModifier/ProductWithModifier.d.ts

@@ -0,0 +1,22 @@
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct';
+export interface FormOrderItem {
+    id: number;
+    name: string;
+    price: number;
+    productCategoryId: number;
+    hasDeposit?: boolean;
+    deposit?: number | null;
+    quantity: number;
+    capacity?: number | null;
+    orderModifiersSets?: OrderModifierByProduct[] | null;
+}
+interface ProductQuantityInputProps {
+    modifier: OrderModifierByProduct;
+    modifierKey: number;
+    isManualBooking?: boolean;
+    deleteOrderModifier?: (order: number) => void;
+    editOrderModifierSet?: (order: number) => void;
+}
+export declare const ProductWithModifier: ({ modifier, modifierKey, isManualBooking, deleteOrderModifier, editOrderModifierSet, }: ProductQuantityInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProductWithModifier.d.ts.map

package/dist/iframe/order-process/components/CategoryProduct/components/ProductWithModifier/ProductWithModifier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductWithModifier.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductWithModifier/ProductWithModifier.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAA;AAMrG,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,iBAAiB,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAA;CACrD;AAED,UAAU,yBAAyB;IACjC,QAAQ,EAAE,sBAAsB,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C;AAED,eAAO,MAAM,mBAAmB,2FAM7B,yBAAyB,4CA8C3B,CAAA"}

package/dist/iframe/order-process/components/CategoryProduct/components/ProductWithModifier/ProductWithModifier.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { FaTrashAlt } from 'react-icons/fa';
+import { Config } from '@licklist/core';
+import { useIntl } from 'react-intl';
+import { getModifierName, getOrderProductModifiersPrice } from '../../../BookingSummary/utils/index.js';
+
+var ProductWithModifier = function(param) {
+    var modifier = param.modifier, modifierKey = param.modifierKey, _param_isManualBooking = param.isManualBooking, isManualBooking = _param_isManualBooking === void 0 ? false : _param_isManualBooking, deleteOrderModifier = param.deleteOrderModifier, editOrderModifierSet = param.editOrderModifierSet;
+    var t = useTranslation('Design').t;
+    var formatNumber = useIntl().formatNumber;
+    var modifierName = getModifierName(modifier, isManualBooking);
+    var orderModifierDescription = "".concat(modifier.productQuantity);
+    var modifierPrice = getOrderProductModifiersPrice(modifier);
+    var fullModifiersPrice = formatNumber(modifierPrice, {
+        style: 'currency',
+        currency: Config.Currency.GBP
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "d-flex p-2 justify-content-between align-items-center",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "d-flex",
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        className: "font-weight-bold pr-4",
+                        children: "".concat(orderModifierDescription, " x")
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        children: modifierName ? " ".concat(modifierName) : t('withoutModifier')
+                    })
+                ]
+            }),
+            isManualBooking ? /*#__PURE__*/ jsx("p", {
+                className: "price",
+                children: fullModifiersPrice
+            }) : /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        className: "ml-2",
+                        variant: "link",
+                        onClick: function() {
+                            return editOrderModifierSet(modifierKey);
+                        },
+                        children: t('customise')
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        className: "ml-2",
+                        variant: "link",
+                        onClick: function() {
+                            return deleteOrderModifier(modifierKey);
+                        },
+                        children: /*#__PURE__*/ jsx(FaTrashAlt, {})
+                    })
+                ]
+            })
+        ]
+    }, modifierKey);
+};
+
+export { ProductWithModifier };

package/dist/iframe/order-process/components/CategoryProduct/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_PRODUCT_NUMBER = 100000;
+//# sourceMappingURL=constants.d.ts.map

package/dist/iframe/order-process/components/CategoryProduct/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/CategoryProduct/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,SAAS,CAAA"}

package/dist/iframe/order-process/components/CategoryProduct/constants.js

@@ -0,0 +1,4 @@
+var MAX_PRODUCT_NUMBER = 100000 // max number
+;
+
+export { MAX_PRODUCT_NUMBER };

package/dist/iframe/order-process/components/utils/useOnWindowUnmount.d.ts

@@ -0,0 +1,6 @@
+export type UseOnWindowUnmountProps = {
+    onBeforeUnload: (event: Event) => void;
+    onPopState: (event: Event) => void;
+};
+export declare const useOnWindowUnmount: ({ onBeforeUnload, onPopState, }: UseOnWindowUnmountProps) => any;
+//# sourceMappingURL=useOnWindowUnmount.d.ts.map

package/dist/iframe/order-process/components/utils/useOnWindowUnmount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnWindowUnmount.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/utils/useOnWindowUnmount.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,uBAAuB,GAAG;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACtC,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,kBAAkB,oCAG5B,uBAAuB,QAczB,CAAA"}

package/dist/iframe/order-process/components/utils/useOnWindowUnmount.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+var useOnWindowUnmount = function(param) {
+    var onBeforeUnload = param.onBeforeUnload, onPopState = param.onPopState;
+    useEffect(function() {
+        window.history.pushState(null, '', window.location.pathname);
+        window.addEventListener('beforeunload', onBeforeUnload);
+        window.addEventListener('popstate', onPopState);
+        return function() {
+            window.removeEventListener('beforeunload', onBeforeUnload);
+            window.removeEventListener('popstate', onPopState);
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+};
+
+export { useOnWindowUnmount };

package/dist/iframe/payment/order-items-table/hooks/useTableData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableData.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/payment/order-items-table/hooks/useTableData.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,oBAAoB,EAAe,MAAM,UAAU,CAAA;AAI5D,eAAO,MAAM,2BAA2B;;;;CAIvC,CAAA;AAED,eAAO,MAAM,YAAY,oEAKtB,oBAAoB;;;;;;;;;;IA8GtB,CAAA"}
+{"version":3,"file":"useTableData.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/payment/order-items-table/hooks/useTableData.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,oBAAoB,EAAe,MAAM,UAAU,CAAA;AAQ5D,eAAO,MAAM,2BAA2B;;;;CAIvC,CAAA;AAED,eAAO,MAAM,YAAY,oEAKtB,oBAAoB;;;;;;;;;;IA+KtB,CAAA"}