@licklist/design 0.71.18-dev.0 → 0.71.18-dev.10

package/dist/report/ReportRunnerModal/ReportRunnerModal.d.ts

@@ -15,7 +15,8 @@ export type ReportRunnerModalProps = {
     onHide: () => void;
     onEdit: () => void;
     reports?: Report[] | null;
+    providerId?: number;
 };
-export declare const ReportRunnerModal: ({ reportId, show, onHide, useShowReportFields, reports, generate, download, onEdit, }: ReportRunnerModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReportRunnerModal: ({ reportId, show, onHide, useShowReportFields, reports, generate, download, onEdit, providerId, }: ReportRunnerModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ReportRunnerModal.d.ts.map

package/dist/report/ReportRunnerModal/ReportRunnerModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportRunnerModal.d.ts","sourceRoot":"","sources":["../../../src/report/ReportRunnerModal/ReportRunnerModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,MAAM,EAEN,UAAU,EACX,MAAM,uCAAuC,CAAA;AAM9C,OAAO,EAAE,SAAS,EAAE,MAAM,+CAA+C,CAAA;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAG7F,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,mBAAmB,EAAE,CACnB,UAAU,CAAC,EAAE,UAAU,KACpB,uBAAuB,CAAC,WAAW,EAAE,EAAE,OAAO,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,CAAA;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;CAC1B,CAAA;AASD,eAAO,MAAM,iBAAiB,0FAS3B,sBAAsB,4CA6KxB,CAAA"}
+{"version":3,"file":"ReportRunnerModal.d.ts","sourceRoot":"","sources":["../../../src/report/ReportRunnerModal/ReportRunnerModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,MAAM,EAEN,UAAU,EACX,MAAM,uCAAuC,CAAA;AAM9C,OAAO,EAAE,SAAS,EAAE,MAAM,+CAA+C,CAAA;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAG7F,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,mBAAmB,EAAE,CACnB,UAAU,CAAC,EAAE,UAAU,KACpB,uBAAuB,CAAC,WAAW,EAAE,EAAE,OAAO,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,CAAA;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AASD,eAAO,MAAM,iBAAiB,sGAU3B,sBAAsB,4CA8KxB,CAAA"}

package/dist/report/ReportRunnerModal/ReportRunnerModal.js

@@ -190,7 +190,7 @@ function _ts_generator(thisArg, body) {
 var _obj;
 var labelByPeriodType = (_obj = {}, _define_property(_obj, PERIOD_BY_CREATION_DATE, 'Design:reportPeriodByCreationDate'), _define_property(_obj, PERIOD_BY_BOOKING_DATE, 'Design:reportPeriodByBookingDate'), _obj);
 var ReportRunnerModal = function(param) {
-    var reportId = param.reportId, show = param.show, onHide = param.onHide, useShowReportFields = param.useShowReportFields, reports = param.reports, generate = param.generate, download = param.download, onEdit = param.onEdit;
+    var reportId = param.reportId, show = param.show, onHide = param.onHide, useShowReportFields = param.useShowReportFields, reports = param.reports, generate = param.generate, download = param.download, onEdit = param.onEdit, providerId = param.providerId;
     var _errors_periodBy, _errors_periodBy1, _errors_periodBy2, _errors_dateFrom, _errors_dateTo;
     var t = useTranslation([
         'App',
@@ -231,7 +231,8 @@ var ReportRunnerModal = function(param) {
                             type: report.type,
                             dateFrom: values.dateFrom,
                             dateTo: values.dateTo,
-                            data: data
+                            data: data,
+                            providerId: providerId
                         });
                         return [
                             2

package/dist/sales/coupon/utils/index.d.ts

@@ -1,5 +1,6 @@
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper';
 import { ProductGroup } from '@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper';
-export declare const convertToTypeaheadOptions: (productGroups?: ProductGroup[]) => {
+export declare const convertToTypeaheadOptions: (productGroups?: ProductGroup[] | ModifierSet[]) => {
     id: number;
     value: string;
     label: string;

package/dist/sales/coupon/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/sales/coupon/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+DAA+D,CAAA;AAE5F,eAAO,MAAM,yBAAyB,mBAAoB,YAAY,EAAE;;;;GAUvE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/sales/coupon/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,8DAA8D,CAAA;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,+DAA+D,CAAA;AAE5F,eAAO,MAAM,yBAAyB,mBAAoB,YAAY,EAAE,GAAG,WAAW,EAAE;;;;GAUvF,CAAA"}

package/dist/sales/modals/refund-modal/RefundModal.d.ts

@@ -1,7 +1,11 @@
 import { OrderPaymentType } from '@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper';
+export declare const FULL_REFUND_TYPE = "fullRefund";
+export declare const PARTIAL_REFUND_TYPE = "partialRefund";
+export declare const NET_REFUND_TYPE = "netRefund";
+export type RefundType = typeof FULL_REFUND_TYPE | typeof PARTIAL_REFUND_TYPE | typeof NET_REFUND_TYPE;
 export interface RefundModalProps {
     isVisible: boolean;
-    isFullRefund?: boolean;
+    refundType?: RefundType;
     onHide: () => void;
     onSubmit: (amount?: number) => void;
     isLoading?: boolean;
@@ -9,5 +13,5 @@ export interface RefundModalProps {
     defaultValue?: number;
     maxValue?: number;
 }
-export declare const RefundModal: ({ isVisible, onHide, onSubmit, isLoading, isFullRefund, paymentType, defaultValue, maxValue, }: RefundModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RefundModal: ({ isVisible, onHide, onSubmit, isLoading, refundType, paymentType, defaultValue, maxValue, }: RefundModalProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RefundModal.d.ts.map

package/dist/sales/modals/refund-modal/RefundModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RefundModal.d.ts","sourceRoot":"","sources":["../../../../src/sales/modals/refund-modal/RefundModal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6DAA6D,CAAA;AAK9F,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,gBAAgB,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAMD,eAAO,MAAM,WAAW,mGASrB,gBAAgB,4CAoGlB,CAAA"}
+{"version":3,"file":"RefundModal.d.ts","sourceRoot":"","sources":["../../../../src/sales/modals/refund-modal/RefundModal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6DAA6D,CAAA;AAK9F,eAAO,MAAM,gBAAgB,eAAe,CAAA;AAC5C,eAAO,MAAM,mBAAmB,kBAAkB,CAAA;AAClD,eAAO,MAAM,eAAe,cAAc,CAAA;AAE1C,MAAM,MAAM,UAAU,GAClB,OAAO,gBAAgB,GACvB,OAAO,mBAAmB,GAC1B,OAAO,eAAe,CAAA;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,gBAAgB,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAMD,eAAO,MAAM,WAAW,iGASrB,gBAAgB,4CAoGlB,CAAA"}

package/dist/sales/modals/refund-modal/RefundModal.js

@@ -61,13 +61,17 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+var FULL_REFUND_TYPE = 'fullRefund';
+var PARTIAL_REFUND_TYPE = 'partialRefund';
+var NET_REFUND_TYPE = 'netRefund';
 var RefundModal = function(param) {
-    var isVisible = param.isVisible, onHide = param.onHide, onSubmit = param.onSubmit, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isFullRefund = param.isFullRefund, isFullRefund = _param_isFullRefund === void 0 ? false : _param_isFullRefund, paymentType = param.paymentType, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? 0 : _param_defaultValue, maxValue = param.maxValue;
+    var isVisible = param.isVisible, onHide = param.onHide, onSubmit = param.onSubmit, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_refundType = param.refundType, refundType = _param_refundType === void 0 ? PARTIAL_REFUND_TYPE : _param_refundType, paymentType = param.paymentType, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? 0 : _param_defaultValue, maxValue = param.maxValue;
     var _errors_amount;
     var t = useTranslation([
         'Design',
         'Validation'
     ]).t;
+    var isInputDisabled = isLoading || refundType === 'fullRefund' || refundType === 'netRefund';
     var _useForm = useForm(), handleSubmit = _useForm.handleSubmit, register = _useForm.register, errors = _useForm.formState.errors, reset = _useForm.reset;
     var onModalSubmit = function(param) {
         var amount = param.amount;
@@ -97,7 +101,7 @@ var RefundModal = function(param) {
                     children: [
                         /*#__PURE__*/ jsx(ModalTitle, {
                             as: "h5",
-                            children: t(isFullRefund ? 'Design:fullRefund' : 'Design:partialRefund')
+                            children: t("Design:".concat(refundType))
                         }),
                         /*#__PURE__*/ jsx(Button, {
                             variant: "danger",
@@ -150,7 +154,7 @@ var RefundModal = function(param) {
                                             }
                                         })), {
                                             step: 0.01,
-                                            disabled: isLoading || isFullRefund,
+                                            disabled: isInputDisabled,
                                             isInvalid: !!errors.amount,
                                             min: 0
                                         })),
@@ -186,4 +190,4 @@ var RefundModal = function(param) {
     });
 };
 
-export { RefundModal };
+export { FULL_REFUND_TYPE, NET_REFUND_TYPE, PARTIAL_REFUND_TYPE, RefundModal };

package/dist/sales/modals/refund-modal/index.d.ts

@@ -1,3 +1,3 @@
-export { RefundModal } from './RefundModal';
-export type { RefundModalProps } from './RefundModal';
+export { RefundModal, FULL_REFUND_TYPE, NET_REFUND_TYPE, PARTIAL_REFUND_TYPE, } from './RefundModal';
+export type { RefundModalProps, RefundType } from './RefundModal';
 //# sourceMappingURL=index.d.ts.map

package/dist/sales/modals/refund-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/sales/modals/refund-modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/sales/modals/refund-modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,MAAM,eAAe,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA"}

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

@@ -33,7 +33,7 @@
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
-    background-color:transparent;
+    background-color: transparent;
     border: none;
     color: $snippet-calendar-disabled-button-font-color;
     cursor: not-allowed;
@@ -105,3 +105,10 @@
   font-weight: 300;
   color: $snippet-calendar-button-font-color;
 }
+
+.modifier-price {
+  font-size: 1rem;
+  line-height: 1.03rem;
+  font-weight: 500;
+  color: $snippet-calendar-button-font-color;
+}

package/dist/styles/events/EditEventModal.scss

@@ -37,6 +37,8 @@
   .edit-step-dialog {
     .custom-checkbox {
       align-items: unset;
+      position: relative;
+      z-index: 0;
       .form-check-label {
         margin-top: 1rem;
       }

package/dist/styles/iframe-page/Page.scss

@@ -24,6 +24,22 @@
     min-width: auto;
   }
 
+  .manual-booking-form-modal {
+    width: 40vw !important;
+    left: 60vh;
+  
+    .modal-content {
+      height: 96vh;
+      margin-left: auto;
+    }
+  
+    @include media-breakpoint-down(sm) {
+      width: 100vw !important;
+      left: 0;
+      top: 10% !important;
+    }
+  }
+
   .header-block {
     margin-bottom: 1rem;
   }

package/dist/styles/iframe-page/PageBody.scss

@@ -10,6 +10,8 @@
     height: calc(100svh - 5.5rem);
   }
 
+
+
   .left-block {
     flex: 1;
     align-items: stretch;
@@ -25,6 +27,8 @@
       min-height: calc(100svh - 6.5rem);
     }
 
+
+
     .navigation {
       font-size: 1.125rem;
       font-weight: 500;

package/dist/styles/modals/Modals.scss

@@ -6,6 +6,22 @@
   z-index: 1080;
 }
 
+.manual-booking-form-modal {
+  width: 40vw !important;
+  left: 66vw;
+
+  .modal-content {
+    min-height: 95vh;
+    margin-left: auto;
+  }
+
+  @include media-breakpoint-down(sm) {
+    width: 100vw !important;
+    left: 0;
+    top: 10% !important;
+  }
+}
+
 .confirm-modal {
   z-index: 1081;
 }

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

@@ -90,6 +90,7 @@
     }
     label.btn-link {
       width: 4.5rem;
+      z-index: 0;
       display: flex;
       justify-content: center;
       span {

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

@@ -58,6 +58,11 @@
     font-weight: 600;
   }
 
+  .modifier-badge {
+    font-size: 0.5rem;
+    font-weight: 400;
+  }
+
   .step-badge {
     background-color: #ffdbdb;
     color: #d52902;
@@ -81,6 +86,12 @@
     background-color: #e9f5ea;
     color: #269b36;
   }
+
+  .modifier-badge {
+    background-color: #e9f5ea;
+    color: #269b36;
+    height: 1rem;
+  }
 }
 
 .product-set-mobile-footer {

package/dist/styles/sales/ManualBooking.scss

@@ -234,6 +234,12 @@
     margin-bottom: 2rem;
   }
 
+  .quantity-container-product {
+    display: flex;
+    justify-content: center;
+    margin: 1rem;
+  }
+
   .save-btn:disabled {
     background-color: #fafafa;
     border: none;

package/dist/styles/themes/bookedit/index.scss

@@ -51,6 +51,25 @@
   border-bottom: 1px solid #f0f0f0;
 }
 
+ .modifier-header {
+  background-color: color('white');
+  padding: 0 2.5rem;
+  z-index: 2;
+  margin-top: 1rem;
+  min-height: 2rem;
+}
+
+.modifier-container {
+  background-color: color('white');
+  padding-bottom: 1rem;
+}
+
+.modifier-set-container {
+  background-color: color('white');
+  border-bottom: 2px solid #f0f0f0;
+  padding-bottom: 1rem;
+}
+
 .header-user-image {
   width: 3rem;
   height: 3rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.18-dev.0",
+  "version": "0.71.18-dev.10",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.2-dev.5",
+    "@licklist/core": "0.31.2-dev.11",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.5",
+    "@licklist/plugins": "0.35.1-dev.8",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.31.2-dev.5",
+    "@licklist/core": "0.31.2-dev.11",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.5",
+    "@licklist/plugins": "0.35.1-dev.8",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -208,4 +208,4 @@
     "yarn": "4.4.0"
   },
   "stableVersion": "0.71.4-dev.1"
-}
+}

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/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetForm.tsx

@@ -0,0 +1,212 @@
+import { useMemo } from 'react'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { Button, Form } from 'react-bootstrap'
+import { isEmpty, uniqBy } from 'lodash'
+import { useTranslation } from 'react-i18next'
+import { useIntl } from 'react-intl'
+import { Currency } from '@licklist/core/dist/Config'
+import { MenuStep } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
+import { NumberInputHorizontal } from 'src/sales'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { MAX_PRODUCT_NUMBER } from '../../order-process/components/CategoryProduct/constants'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { getOrderProductModifiersPrice } from '../../order-process/components/BookingSummary/utils'
+import { ProductControl } from './controll/ProductControll'
+
+export interface ManualBookingFormValues {
+  steps: MenuStep[]
+}
+
+interface ProductWithModifierSetFormProps {
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+const filteredOrderModifierSets = (
+  modifiersSet: OrderModifier[],
+): OrderModifier[] => {
+  if (!modifiersSet) return []
+  const orderModifier = modifiersSet
+    ?.flat()
+    .filter((modifier) => !!modifier?.quantity)
+
+  const filteredOrderModifier = uniqBy(
+    orderModifier,
+    (item) => `${item.modifierId}-${item.modifierSetId}`,
+  )
+
+  return filteredOrderModifier || []
+}
+
+export const ProductWithModifierSetForm = ({
+  product,
+  category,
+  editOrderModifier,
+  onChange,
+}: ProductWithModifierSetFormProps) => {
+  const form = useForm({ mode: 'onChange' })
+  const { t } = useTranslation(['App', 'Sale', 'Validation'])
+
+  const {
+    formState: { errors, isSubmitting, isValid },
+    control,
+    trigger,
+    watch,
+  } = form
+  const defaultProductQuantity = editOrderModifier?.productQuantity ?? 0
+
+  const valuesOrder = watch()
+  const productQuantity = valuesOrder?.product?.quantity ?? defaultProductQuantity
+
+  const orderModifiersSets =
+    valuesOrder[`${product.id}`]?.orderProductModifiers || []
+
+  const filteredOrderModifiers = filteredOrderModifierSets(orderModifiersSets)
+
+  const orderModifierSets: OrderModifierByProduct[] = useMemo(() =>  [
+      {
+        productQuantity: productQuantity ?? 1,
+        modifiers: filteredOrderModifiers,
+      },
+    ]
+  , [filteredOrderModifiers, productQuantity])
+
+  const onSubmit = (event) => {
+    event.preventDefault()
+    trigger(`${product.id}`)
+
+    if (!isValid) return undefined
+    const productOrder: FormOrderItem = {
+      id: product.id,
+      name: product.name,
+      deposit: product?.deposit,
+      hasDeposit: category.allowDeposits && product?.deposit < product.price,
+      price: product.price,
+      productCategoryId: category.id,
+      quantity: productQuantity,
+      capacity: product?.capacity,
+      orderModifiersSets: orderModifierSets,
+    }
+    if (productOrder) {
+      return onChange(productOrder)
+    }
+    return undefined
+  }
+
+  const handleProductQuantityChange = (
+    value: number,
+    onChange: (val: number) => void,
+  ) => {
+    if (value < 0) {
+      onChange(0)
+    } else if (value > MAX_PRODUCT_NUMBER) {
+      onChange(MAX_PRODUCT_NUMBER)
+    } else {
+      onChange(value)
+    }
+  }
+
+  const disabledAddButton = useMemo(() => {
+    if (defaultProductQuantity) return false
+    return !productQuantity || !isEmpty(errors)
+  }, [defaultProductQuantity, productQuantity, errors])
+
+  const modifierPrice = getOrderProductModifiersPrice(orderModifierSets[0])
+  const productWithModifierPrice =
+    (product.price * productQuantity || 0) + modifierPrice
+  const { formatNumber } = useIntl()
+  const formatToCurrency = (value: number) =>
+    formatNumber(value, { style: 'currency', currency: Currency.GBP })
+
+  return (
+    <FormProvider {...form}>
+      <Form>
+        <div className='manual-booking-form'>
+          <ProductControl
+            product={product}
+            editOrderModifier={editOrderModifier}
+          />
+          <div className='bg-light m-2 p-2 rounded'>
+            <Controller
+              control={control}
+              name='product.quantity'
+              rules={{
+                min: {
+                  value: 1,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('product'),
+                    min: 1,
+                  }) as string,
+                },
+                max: {
+                  value: !product.isUnlimited
+                    ? product.maxQuantity
+                    : MAX_PRODUCT_NUMBER,
+                  message: t('Validation:fieldMaxNumber', {
+                    attribute: t('product'),
+                    max: product.maxQuantity,
+                  }) as string,
+                },
+              }}
+              render={({
+                field: { onChange, value, ref },
+                fieldState: { invalid, error },
+              }) => (
+                <div className='mb-8 d-flex flex-column'>
+                  <div className='quantity-container-product w-100'>
+                    <NumberInputHorizontal
+                      ref={ref}
+                      size='big'
+                      onChange={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onMinusClick={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onPlusClick={(val) => {
+                        handleProductQuantityChange(val, onChange)
+                      }}
+                      min={0}
+                      max={100}
+                      value={value || defaultProductQuantity}
+                      className={clsx(invalid && 'error')}
+                      isLoading={isSubmitting}
+                    />
+                  </div>
+                  <div className=' d-flex flex-column  align-items-center justify-content-center'>
+                    <div className='modifier-price pb-4 pl-5'>
+                      {formatToCurrency(product.price)}
+                    </div>
+                    {error?.message && (
+                      <div className='d-flex justify-content-center mt-3 w-100'>
+                        <p className='iframe-event__message-error'>
+                          {error.message}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            />
+            <Button
+              as='button'
+              variant='primary'
+              className='w-100'
+              disabled={disabledAddButton}
+              onClick={onSubmit}
+            >
+              {`${t('Design:add')}${modifierPrice ? ` (${formatToCurrency(productWithModifierPrice)})` : ''}`}
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </FormProvider>
+  )
+}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -0,0 +1,75 @@
+import { useDialogContext, DialogContextProvider } from 'src/modals'
+import { Modal } from 'react-bootstrap'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { TicketDescription } from 'src/iframe/event'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { useOnWindowUnmount } from '../../order-process/components/utils/useOnWindowUnmount'
+import { ProductWithModifierSetForm } from './ProductWithModifierSetForm'
+
+interface ProductWithModifierSetModalProps {
+  show: boolean
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+export const ProductWithModifierSetModal = ({
+  show,
+  onHide,
+  product,
+  category,
+  onChange,
+  editOrderModifier,
+}: ProductWithModifierSetModalProps) => {
+  const { onBeforeUnload, onPopState } = useDialogContext()
+  useOnWindowUnmount({ onBeforeUnload, onPopState })
+
+  return (
+    <DialogContextProvider>
+      <Modal
+        onHide={onHide}
+        show={show}
+        className='m-0 manual-booking-form-modal mt-0 h-100 p-0'
+        dialogClassName='manual-booking-dialog mt-0'
+      >
+        <div className='close-button'>
+          <button
+            type='button'
+            onClick={onHide}
+            onKeyPress={onHide}
+            className='btn btn-light rounded-circle position-absolute top-0 end-0 m-2'
+          >
+            &times;
+          </button>
+        </div>
+        <div className='right-block' id='select-event-container'>
+          <div className='manual-booking-container'>
+            <div className='manual-booking-header'>
+              <TicketDescription
+                title={product.name}
+                description={product.description}
+                className={clsx('iframe-event__product-description', !product.images && 'mt-4')}
+                classNameProductModal='d-block'
+                images={product.images}
+                isRequired={product.isRequired}
+                canExpand
+              />
+            </div>
+            <ProductWithModifierSetForm
+              product={product}
+              onHide={onHide}
+              editOrderModifier={editOrderModifier}
+              onChange={onChange}
+              category={category}
+            />
+          </div>
+        </div>
+      </Modal>
+    </DialogContextProvider>
+  )
+}