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

package/dist/iframe/ProductWithModifierModal/ModifierSetModal/controll/ModifierSetControll.js

@@ -0,0 +1,447 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Col, Form } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { useMemo, useEffect } from 'react';
+import { useId } from '@mantine/hooks';
+import { useFormContext, Controller } from 'react-hook-form';
+import { xor, uniqBy } from 'lodash';
+import clsx from 'clsx';
+import { Currency } from '@licklist/core/dist/Config';
+import { useIntl } from 'react-intl';
+import { MAX_PRODUCT_NUMBER } from '../../../order-process/components/CategoryProduct/constants.js';
+import 'recharts';
+import 'react-loader';
+import '@licklist/plugins/dist/hooks/Media/useWindowDimensions';
+import 'moment';
+import '@react-aria/utils';
+import 'react-date-range';
+import 'react-use';
+import 'react-icons/fa';
+import 'luxon';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+import '@licklist/core/dist/DataMapper/User/UserDetailDataMapper';
+import 'react-bootstrap/Col';
+import 'react-bootstrap/Row';
+import '@licklist/plugins/dist/services/Media/MediaService';
+import '@licklist/plugins/dist/services/Form/FormErrorService';
+import '@licklist/core/dist/DataMapper/Product/CouponDataMapper';
+import '@licklist/plugins/dist/validation/Rules/couponCodeRules';
+import 'react-select';
+import 'rrule';
+import '@licklist/core/dist/Services';
+import { NumberInputHorizontal } from '../../../../sales/manual-booking/number-input-horizontal/NumberInputHorizontal.js';
+import '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper';
+import '@licklist/plugins/dist/utils/relyOnPeople';
+import 'react-highlighter';
+import '@licklist/plugins/dist';
+import '@licklist/core/dist/Config/DefaultUser';
+import '../../../../typeahead-helper/TypeaheadHelperComponent.js';
+import 'react-bootstrap/ModalHeader';
+import 'react-bootstrap/ModalTitle';
+import '../../../../sales/constants.js';
+import '../../../../static/CurrencyNumberInput.js';
+import '@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper';
+import '@licklist/plugins/dist/context/sale/SalePaymentFormContext';
+import '@licklist/core/dist/Services/Date';
+import 'react-router-dom';
+import '../../../../static/index.js';
+import '@licklist/core/dist/DataMapper/Order/OrderDataMapper';
+import '@licklist/plugins/dist/utils/formatDate';
+import '@licklist/plugins/dist/utils/sourceTitle';
+import 'react-bootstrap/ModalBody';
+import 'react-bootstrap/ModalFooter';
+import 'react-bootstrap/Modal';
+import 'react-bootstrap/PageItem';
+import '@licklist/plugins/dist/services/Table/PaginationService';
+import '@licklist/plugins/dist/services/Table/TableService';
+import '@licklist/plugins/dist/hooks/Query/useQuery';
+import '@licklist/plugins/dist/services/Route/RouteService';
+import '../../../../table/utils/index.js';
+import '@tanstack/react-table';
+
+var ModifiersSetControl = function(param) {
+    var modifierSet = param.modifierSet, modifiers = param.modifiers, modifiersSetWithErrors = param.modifiersSetWithErrors, productId = param.productId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isEditMode = param.isEditMode, isEditMode = _param_isEditMode === void 0 ? false : _param_isEditMode, orderProductModifierSets = param.orderProductModifierSets;
+    var _useFormContext = useFormContext(), control = _useFormContext.control, watch = _useFormContext.watch, setValue = _useFormContext.setValue, trigger = _useFormContext.trigger;
+    var t = useTranslation('App').t;
+    var filteredOrderModifierSets = function(modifiersSet) {
+        if (!modifiersSet) return [];
+        var orderModifier = modifiersSet.flat().filter(function(modifier) {
+            return !!(modifier === null || modifier === void 0 ? void 0 : modifier.quantity);
+        });
+        return uniqBy(orderModifier, function(item) {
+            return "".concat(item.modifierId, "-").concat(item.modifierSetId);
+        });
+    };
+    var orderModifiersSets = watch("".concat(productId, ".orderProductModifiers"));
+    var formatNumber = useIntl().formatNumber;
+    var formatToCurrency = function(value) {
+        return formatNumber(value, {
+            style: 'currency',
+            currency: Currency.GBP
+        });
+    };
+    var orderProductModifiersQuantity = function(orderModifiersSets) {
+        var filteredOrderModifier = filteredOrderModifierSets(orderModifiersSets);
+        return filteredOrderModifier.flat().filter(function(item) {
+            return item && item.modifierSetId === modifierSet.id;
+        }).length;
+    };
+    var orderProductModifiersMaxQuantity = orderProductModifiersQuantity(orderModifiersSets);
+    var currentOrderModifiersSets = useMemo(function() {
+        return (orderProductModifierSets === null || orderProductModifierSets === void 0 ? void 0 : orderProductModifierSets.filter(function(modifier) {
+            return modifier.modifierSetId === modifierSet.id;
+        })) || [];
+    }, [
+        orderProductModifierSets,
+        modifierSet.id
+    ]);
+    var onChangeModifiers = function(e, type, quantity) {
+        var _orderModifiersSets_find;
+        if (!modifiers) return;
+        var selectedModifier = modifiers === null || modifiers === void 0 ? void 0 : modifiers.find(function(item) {
+            return item.id === Number(e.target.defaultValue || e.target.id);
+        });
+        var checkSelectedModifier = (orderModifiersSets === null || orderModifiersSets === void 0 ? void 0 : (_orderModifiersSets_find = orderModifiersSets.find(function(modifier) {
+            return (modifier === null || modifier === void 0 ? void 0 : modifier.modifierId) === (selectedModifier === null || selectedModifier === void 0 ? void 0 : selectedModifier.id);
+        })) === null || _orderModifiersSets_find === void 0 ? void 0 : _orderModifiersSets_find.quantity) === 1;
+        if (selectedModifier && type === 'radio') {
+            modifiers.forEach(function(modifier) {
+                var isSelected = modifier.id === selectedModifier.id;
+                var orderModifiers = {
+                    modifierId: modifier.id,
+                    price: modifier.price,
+                    productId: productId,
+                    name: modifier.name,
+                    quantity: isSelected ? 1 : 0,
+                    modifierSetId: modifierSet.id
+                };
+                setValue("".concat(productId, ".orderProductModifiers.").concat(modifierSet.id), orderModifiers);
+            });
+        }
+        if (selectedModifier && type === 'checkbox') {
+            var orderModifiers = {
+                modifierId: selectedModifier.id,
+                price: selectedModifier.price,
+                productId: productId,
+                name: selectedModifier.name,
+                quantity: checkSelectedModifier ? 0 : 1,
+                modifierSetId: modifierSet.id
+            };
+            setValue("".concat(productId, ".orderProductModifiers.").concat(modifierSet.id, ".").concat(selectedModifier.id), orderModifiers);
+        }
+        if (selectedModifier && type === 'selector' && quantity) {
+            var orderModifiers1 = {
+                modifierId: selectedModifier.id,
+                price: selectedModifier.price,
+                productId: productId,
+                quantity: quantity,
+                name: selectedModifier.name,
+                modifierSetId: modifierSet.id
+            };
+            setValue("".concat(productId, ".orderProductModifiers.").concat(modifierSet.id, ".").concat(selectedModifier.id), orderModifiers1);
+        }
+    };
+    useEffect(function() {
+        if (!(orderProductModifierSets === null || orderProductModifierSets === void 0 ? void 0 : orderProductModifierSets.length)) return;
+        orderProductModifierSets.forEach(function(orderModifier) {
+            return setValue("".concat(productId, ".orderProductModifiers.").concat(orderModifier.modifierSetId, ".").concat(orderModifier.modifierId), orderModifier);
+        });
+    }, [
+        isEditMode
+    ]);
+    var modifiersErrors = modifiersSetWithErrors === null || modifiersSetWithErrors === void 0 ? void 0 : modifiersSetWithErrors.modifiers;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: (modifierSet === null || modifierSet === void 0 ? void 0 : modifierSet.maxItems) === 1 && modifiers.every(function(modifier) {
+            return modifier.maxItems === 1;
+        }) && !(currentOrderModifiersSets === null || currentOrderModifiersSets === void 0 ? void 0 : currentOrderModifiersSets.find(function(modifier) {
+            return !!(modifier === null || modifier === void 0 ? void 0 : modifier.quantity);
+        })) ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Controller, {
+                    name: "".concat(modifierSet.id),
+                    "data-testid": "modifierSet-values-select",
+                    control: control,
+                    rules: {
+                        required: !!modifierSet.minItems
+                    },
+                    render: function(param) {
+                        var field = param.field;
+                        var onChange = function(e) {
+                            onChangeModifiers(e, 'radio');
+                            field.onChange(e.target.id);
+                        };
+                        return /*#__PURE__*/ jsx(Fragment, {
+                            children: modifiers === null || modifiers === void 0 ? void 0 : modifiers.map(function(modifier) {
+                                var _currentOrderModifiersSets_find_modifierId, _currentOrderModifiersSets_find;
+                                var selectedOrderModifierId = currentOrderModifiersSets === null || currentOrderModifiersSets === void 0 ? void 0 : (_currentOrderModifiersSets_find = currentOrderModifiersSets.find(function(orderModifier) {
+                                    return orderModifier.modifierId === modifier.id;
+                                })) === null || _currentOrderModifiersSets_find === void 0 ? void 0 : (_currentOrderModifiersSets_find_modifierId = _currentOrderModifiersSets_find.modifierId) === null || _currentOrderModifiersSets_find_modifierId === void 0 ? void 0 : _currentOrderModifiersSets_find_modifierId.toString();
+                                return /*#__PURE__*/ jsx(Col, {
+                                    children: /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "modifier-container d-flex justify-content-between align-items-center p-2",
+                                                children: /*#__PURE__*/ jsx(Form.Check, {
+                                                    className: "custom-radio",
+                                                    inline: true,
+                                                    id: modifier.id.toString(),
+                                                    defaultChecked: !!selectedOrderModifierId,
+                                                    defaultValue: modifier.id.toString(),
+                                                    checked: field.value === modifier.id.toString(),
+                                                    onChange: onChange,
+                                                    type: "radio",
+                                                    label: modifier.name,
+                                                    name: modifier.name
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "mt-3 w-100 pl-2",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        children: modifier.description
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        className: "price",
+                                                        children: [
+                                                            "+ ",
+                                                            formatToCurrency(modifier.price)
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }, modifier.id.toString());
+                            })
+                        });
+                    }
+                }),
+                (modifiersErrors === null || modifiersErrors === void 0 ? void 0 : modifiersErrors.message) && /*#__PURE__*/ jsx(Col, {
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: "invalid-feedback field-values-error",
+                        children: modifiersSetWithErrors.message || 'test'
+                    })
+                })
+            ]
+        }) : /*#__PURE__*/ jsx(Fragment, {
+            children: modifiers === null || modifiers === void 0 ? void 0 : modifiers.map(function(modifier, index) {
+                var _currentOrderModifiersSets_find, _modifiersErrors_find;
+                var selectedOrderModifier = currentOrderModifiersSets === null || currentOrderModifiersSets === void 0 ? void 0 : (_currentOrderModifiersSets_find = currentOrderModifiersSets.find(function(orderModifier) {
+                    return orderModifier.modifierId === modifier.id;
+                })) === null || _currentOrderModifiersSets_find === void 0 ? void 0 : _currentOrderModifiersSets_find.quantity;
+                var requiredModifierSet = (modifierSet === null || modifierSet === void 0 ? void 0 : modifierSet.minItems) > currentOrderModifiersSets.length;
+                var errorMessage = modifiersErrors === null || modifiersErrors === void 0 ? void 0 : (_modifiersErrors_find = modifiersErrors.find(function(modifier) {
+                    return modifier.ref && modifier.ref.name === "modifiers[".concat(index, "]");
+                })) === null || _modifiersErrors_find === void 0 ? void 0 : _modifiersErrors_find.message;
+                return /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        modifier.maxItems === 1 ? /*#__PURE__*/ jsx(Fragment, {
+                            children: /*#__PURE__*/ jsx(Controller, {
+                                name: "modifiers[".concat(index, "]"),
+                                control: control,
+                                rules: {
+                                    required: !!modifier.minItems || requiredModifierSet,
+                                    validate: function(value) {
+                                        if (!value) return true;
+                                        var maxModifierSet = modifierSet.maxItems, minModifierSet = modifierSet.minItems;
+                                        if (orderProductModifiersMaxQuantity < minModifierSet) {
+                                            return t('Validation:quantityMinNumberModifier', {
+                                                min: minModifierSet
+                                            });
+                                        }
+                                        if (orderProductModifiersMaxQuantity > maxModifierSet) {
+                                            return t('Validation:quantityMaxNumberModifier', {
+                                                max: maxModifierSet
+                                            });
+                                        }
+                                        var maxItems = modifier.maxItems, minItems = modifier.minItems;
+                                        if ((value === null || value === void 0 ? void 0 : value.length) > maxItems) {
+                                            return t('Validation:quantityMaxNumberModifier', {
+                                                max: maxItems
+                                            });
+                                        }
+                                        if ((value === null || value === void 0 ? void 0 : value.length) < minItems) {
+                                            return t('Validation:quantityMinNumberModifier', {
+                                                min: minItems
+                                            });
+                                        }
+                                        return true;
+                                    }
+                                },
+                                render: function(param) {
+                                    var field = param.field;
+                                    var onChange = function(e) {
+                                        onChangeModifiers(e, 'checkbox');
+                                        field.onChange(xor(field.value, [
+                                            Number(e.target.value)
+                                        ]));
+                                    };
+                                    return /*#__PURE__*/ jsxs(Col, {
+                                        className: "modifier-container pl-6",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "d-flex justify-content-between align-items-center",
+                                                children: /*#__PURE__*/ jsx(Checkbox, {
+                                                    value: modifier.id,
+                                                    onChange: onChange,
+                                                    label: modifier.name,
+                                                    defaultChecked: !!selectedOrderModifier
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "mt-3 w-100 pl-2",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("p", {
+                                                        children: modifier.description
+                                                    }),
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        className: "price",
+                                                        children: [
+                                                            "+ ",
+                                                            formatToCurrency(modifier.price)
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            errorMessage && /*#__PURE__*/ jsx("div", {
+                                                className: "invalid-feedback d-flex",
+                                                children: errorMessage
+                                            })
+                                        ]
+                                    }, modifier.id.toString());
+                                }
+                            })
+                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "modifier-header m-0",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: "title",
+                                        children: modifier.name
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Controller, {
+                                    control: control,
+                                    name: "".concat(productId, ".").concat(modifierSet.id, ".modifiers[").concat(index, "].quantity"),
+                                    rules: {
+                                        required: !!modifier.minItems || requiredModifierSet,
+                                        validate: function(value) {
+                                            // if (!value) return true
+                                            var maxModifierSet = modifierSet.maxItems, minModifierSet = modifierSet.minItems;
+                                            if (orderProductModifiersMaxQuantity < minModifierSet) {
+                                                return t('Validation:quantityMinNumberModifier', {
+                                                    min: minModifierSet
+                                                });
+                                            }
+                                            if (orderProductModifiersMaxQuantity > maxModifierSet) {
+                                                return t('Validation:quantityMaxNumberModifier', {
+                                                    max: maxModifierSet
+                                                });
+                                            }
+                                            var maxItems = modifier.maxItems, minItems = modifier.minItems;
+                                            if (value > maxItems) {
+                                                return t('Validation:quantityMaxNumberModifier', {
+                                                    max: maxItems
+                                                });
+                                            }
+                                            if (value < minItems) {
+                                                return t('Validation:quantityMinNumberModifier', {
+                                                    min: minItems
+                                                });
+                                            }
+                                            return true;
+                                        }
+                                    },
+                                    render: function(param) {
+                                        var _param_field = param.field, onChange = _param_field.onChange, value = _param_field.value, ref = _param_field.ref, _param_fieldState = param.fieldState, invalid = _param_fieldState.invalid, error = _param_fieldState.error;
+                                        var onChangeProductQuantity = function(val) {
+                                            var quantity = Math.min(MAX_PRODUCT_NUMBER, Math.max(0, Math.ceil(val)));
+                                            onChange(quantity);
+                                            trigger("".concat(productId, ".").concat(modifierSet.id, ".modifiers[").concat(index, "].quantity"));
+                                            onChangeModifiers({
+                                                target: {
+                                                    id: modifier.id.toString()
+                                                }
+                                            }, 'selector', quantity);
+                                        };
+                                        var _ref;
+                                        return /*#__PURE__*/ jsxs("div", {
+                                            className: "modifier-container",
+                                            children: [
+                                                /*#__PURE__*/ jsx("div", {
+                                                    className: "d-flex align-items-center column mb-8 pl-6 pt-2",
+                                                    children: /*#__PURE__*/ jsx("div", {
+                                                        className: "quantity-container mb-0",
+                                                        children: /*#__PURE__*/ jsx(NumberInputHorizontal, {
+                                                            ref: ref,
+                                                            size: "big",
+                                                            onChange: onChangeProductQuantity,
+                                                            onMinusClick: onChangeProductQuantity,
+                                                            onPlusClick: onChangeProductQuantity,
+                                                            min: 0,
+                                                            max: MAX_PRODUCT_NUMBER,
+                                                            value: (_ref = value !== null && value !== void 0 ? value : selectedOrderModifier) !== null && _ref !== void 0 ? _ref : 0,
+                                                            className: clsx(invalid && 'error'),
+                                                            isLoading: isLoading
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "p-2 mt-3 w-100 pl-4",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("p", {
+                                                            className: "pl-2",
+                                                            children: modifier.description
+                                                        }),
+                                                        /*#__PURE__*/ jsxs("div", {
+                                                            className: "pl-2 price",
+                                                            children: [
+                                                                "+ ",
+                                                                formatToCurrency(modifier.price)
+                                                            ]
+                                                        }),
+                                                        (error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/ jsx("div", {
+                                                            className: "d-flex mt-3 w-100",
+                                                            children: /*#__PURE__*/ jsx("p", {
+                                                                className: "iframe-event__message-error",
+                                                                children: error.message
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        });
+                                    }
+                                })
+                            ]
+                        }),
+                        (modifiersErrors === null || modifiersErrors === void 0 ? void 0 : modifiersErrors.message) && /*#__PURE__*/ jsx(Col, {
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: "invalid-feedback field-values-error",
+                                children: modifiersSetWithErrors.message || 'test'
+                            })
+                        })
+                    ]
+                });
+            })
+        })
+    });
+};
+var Checkbox = function(param) {
+    var onChange = param.onChange, value = param.value, label = param.label, defaultChecked = param.defaultChecked;
+    var checkboxId = useId();
+    return /*#__PURE__*/ jsx(Form.Group, {
+        controlId: checkboxId,
+        className: "custom-checkbox mt-0",
+        children: /*#__PURE__*/ jsx(Form.Check, {
+            label: label,
+            value: value,
+            defaultChecked: defaultChecked,
+            onChange: onChange,
+            type: "checkbox"
+        })
+    });
+};
+
+export { ModifiersSetControl };

package/dist/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.d.ts

@@ -0,0 +1,12 @@
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct';
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps';
+interface ProductControlProps {
+    product: Product;
+    isLoading?: boolean;
+    editOrderModifier?: OrderModifierByProduct;
+    errors?: FieldErrors<FieldValues>;
+}
+export declare const ProductControl: ({ product, isLoading, editOrderModifier, errors, }: ProductControlProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProductControll.d.ts.map

package/dist/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductControll.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,WAAW,EACZ,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAA;AACrG,OAAO,EAAE,OAAO,EAAE,MAAM,qDAAqD,CAAA;AAG7E,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,sBAAsB,CAAA;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;CAClC;AAED,eAAO,MAAM,cAAc,uDAKxB,mBAAmB,4CAgCrB,CAAA"}

package/dist/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useFormContext, Controller } from 'react-hook-form';
+import { ModifiersSetControl } from './ModifierSetControll.js';
+
+var ProductControl = function(param) {
+    var product = param.product, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, editOrderModifier = param.editOrderModifier, errors = param.errors;
+    var control = useFormContext().control;
+    var modifiersSet = (product === null || product === void 0 ? void 0 : product.modifiersSet) || [];
+    return /*#__PURE__*/ jsx(Controller, {
+        control: control,
+        name: "product",
+        render: function() {
+            return /*#__PURE__*/ jsx("div", {
+                className: "mb-8 pt-4",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: " d-flex  flex-column",
+                    children: modifiersSet.map(function(modifierSet) {
+                        return /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "modifier-header",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: "title",
+                                        children: modifierSet.name
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(ModifiersSetControl, {
+                                    modifierSet: modifierSet,
+                                    productId: product.id,
+                                    modifiers: modifierSet.modifiers,
+                                    isEditMode: !!(editOrderModifier === null || editOrderModifier === void 0 ? void 0 : editOrderModifier.modifiers),
+                                    orderProductModifierSets: editOrderModifier === null || editOrderModifier === void 0 ? void 0 : editOrderModifier.modifiers,
+                                    modifiersSetWithErrors: errors,
+                                    isLoading: isLoading
+                                })
+                            ]
+                        });
+                    })
+                })
+            });
+        }
+    });
+};
+
+export { ProductControl };

package/dist/iframe/ProductWithModifierModal/ModifierSetModal/index.d.ts

@@ -0,0 +1,2 @@
+import './ProductWithModifierSetModal.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/iframe/ProductWithModifierModal/ModifierSetModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ProductWithModifierModal/ModifierSetModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/dist/iframe/ProductWithModifierModal/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductWithModifierSetModal } from './ModifierSetModal/ProductWithModifierSetModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/iframe/ProductWithModifierModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/iframe/ProductWithModifierModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,gDAAgD,CAAA"}

package/dist/iframe/event/ticket-description/TicketDescription.d.ts

@@ -4,11 +4,12 @@ interface TicketDescriptionProps {
     title: string;
     description: string;
     className?: string;
+    classNameProductModal?: string;
     images: Image[] | null;
     price?: ReactNode;
     isRequired?: boolean;
     canExpand?: boolean;
 }
-export declare function TicketDescription({ title, description, className, images, price, isRequired, canExpand, }: TicketDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TicketDescription({ title, description, className, classNameProductModal, images, price, isRequired, canExpand, }: TicketDescriptionProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TicketDescription.d.ts.map

package/dist/iframe/event/ticket-description/TicketDescription.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TicketDescription.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/ticket-description/TicketDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAA;AAE1D,OAAO,EACL,KAAK,EAEN,MAAM,sDAAsD,CAAA;AAK7D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAID,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,SAAc,EACd,MAAM,EACN,KAAK,EACL,UAAkB,EAClB,SAAgB,GACjB,EAAE,sBAAsB,2CAiDxB"}
+{"version":3,"file":"TicketDescription.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/ticket-description/TicketDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAA;AAE1D,OAAO,EACL,KAAK,EAEN,MAAM,sDAAsD,CAAA;AAK7D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAID,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,SAAc,EACd,qBAA0B,EAC1B,MAAM,EACN,KAAK,EACL,UAAkB,EAClB,SAAgB,GACjB,EAAE,sBAAsB,2CAiDxB"}

package/dist/iframe/event/ticket-description/TicketDescription.js

@@ -54,7 +54,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var DESCRIPTION_MAX_LENGTH = 120;
 function TicketDescription(param) {
-    var title = param.title, description = param.description, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, images = param.images, price = param.price, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_canExpand = param.canExpand, canExpand = _param_canExpand === void 0 ? true : _param_canExpand;
+    var title = param.title, description = param.description, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_classNameProductModal = param.classNameProductModal, classNameProductModal = _param_classNameProductModal === void 0 ? '' : _param_classNameProductModal, images = param.images, price = param.price, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_canExpand = param.canExpand, canExpand = _param_canExpand === void 0 ? true : _param_canExpand;
     var _useState = _sliced_to_array(useState(false), 2), isDescriptionExpanded = _useState[0], setIsDescriptionExpanded = _useState[1];
     var wrapperClasses = clsx('ticket-description', className);
     var imageSrc = images ? MediaService.getImageSrc(images, THUMBNAIL_IMAGE_SIZE) : null;
@@ -68,11 +68,12 @@ function TicketDescription(param) {
                 className: "ticket-description__wrapper",
                 style: descriptionWrapperStyle,
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: "ticket-description__wrapper-children",
+                    className: clsx('ticket-description__wrapper-children', classNameProductModal),
                     children: [
                         imageSrc && /*#__PURE__*/ jsx("div", {
-                            className: "image-wrapper",
+                            className: clsx('image-wrapper', classNameProductModal && 'w-100 h-25'),
                             children: /*#__PURE__*/ jsx("img", {
+                                className: clsx(classNameProductModal && 'w-100'),
                                 src: imageSrc,
                                 alt: title
                             })

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

@@ -1 +1 @@
-{"version":3,"file":"ProductSummary.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAA;AAElF,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,YAAY,EAAE,SAAS,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,cAAc,kDAIxB,mBAAmB,4CA2BrB,CAAA"}
+{"version":3,"file":"ProductSummary.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAA;AAGlF,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,YAAY,EAAE,SAAS,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,cAAc,kDAIxB,mBAAmB,4CAyDrB,CAAA"}

package/dist/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.js

@@ -1,17 +1,29 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { useIntl } from 'react-intl';
 import * as Config from '@licklist/core/dist/Config';
+import { calculateTotalModifiersPrice } from '../../utils/index.js';
 
 var ProductSummary = function(param) {
     var name = param.name, productQuantityError = param.productQuantityError, orderProduct = param.orderProduct;
+    var _orderProduct_orderModifiersSets;
     var t = useTranslation('Design').t;
     var formatNumber = useIntl().formatNumber;
     var priceForOneProduct = orderProduct === null || orderProduct === void 0 ? void 0 : orderProduct.price;
+    var modifierSetsPrice = calculateTotalModifiersPrice(orderProduct === null || orderProduct === void 0 ? void 0 : orderProduct.orderModifiersSets);
     var fullPrice = formatNumber(priceForOneProduct * (orderProduct === null || orderProduct === void 0 ? void 0 : orderProduct.quantity), {
         style: 'currency',
         currency: Config.Currency.GBP
     });
+    var modifiersName = "".concat((_orderProduct_orderModifiersSets = orderProduct.orderModifiersSets) === null || _orderProduct_orderModifiersSets === void 0 ? void 0 : _orderProduct_orderModifiersSets.map(function(modifierProduct) {
+        return modifierProduct === null || modifierProduct === void 0 ? void 0 : modifierProduct.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(item === null || item === void 0 ? void 0 : item.name) : item === null || item === void 0 ? void 0 : item.name;
+        }).join(', ');
+    }).join(', '));
+    var fullModifiersPrice = formatNumber(modifierSetsPrice, {
+        style: 'currency',
+        currency: Config.Currency.GBP
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: "product",
         children: [
@@ -30,12 +42,27 @@ var ProductSummary = function(param) {
                             orderProduct === null || orderProduct === void 0 ? void 0 : orderProduct.quantity
                         ]
                     }),
-                    /*#__PURE__*/ jsx("p", {
+                    modifierSetsPrice && /*#__PURE__*/ jsx("p", {
                         className: "price",
                         children: fullPrice
                     })
                 ]
             }),
+            fullModifiersPrice && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        className: "mt-2",
+                        children: modifiersName
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "d-flex justify-content-end",
+                        children: /*#__PURE__*/ jsx("p", {
+                            className: "price",
+                            children: fullModifiersPrice
+                        })
+                    })
+                ]
+            }),
             productQuantityError && /*#__PURE__*/ jsx("p", {
                 className: "iframe-event__message-error",
                 children: productQuantityError