@licklist/design 0.44.467 → 0.44.469

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":";AAQA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,eAAe,qEAKzB,oBAAoB,gBAuMtB,CAAC"}
+{"version":3,"file":"CategoryProduct.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,eAAe,qEAKzB,oBAAoB,gBAmKtB,CAAC"}

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

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),i=e(r),t=require("@licklist/core/dist/Config"),n=require("react-i18next"),a=require("react-hook-form"),o=e(require("@licklist/plugins/dist/services/Form/HookFormService")),c=e(require("clsx")),u=require("react-intl"),d=require("../../../event/ticket-description/TicketDescription.js"),s=require("./components/NumberInput/NumberInput.js");exports.CategoryProduct=function(e){var l=e.product,m=e.category,p=e.canExpandDescription,v=void 0===p||p,y=e.productsWithErrors,f=u.useIntl().formatNumber,g=n.useTranslation(["Design","Validation"]).t,q=a.useFormContext(),E=q.control,N=q.clearErrors,x=q.setError,_=r.useMemo((function(){if(y){var e=y.find((function(e){return e.product_id===l.id}));return null==e?void 0:e.message}}),[y,l.id]),A=r.useMemo((function(){if(m.allowDeposits&&l.deposit&&!(null==l?void 0:l.isSoldOut))return l.deposit}),[m,l]);return r.useEffect((function(){_&&x("".concat(l.id),{message:_,type:"validate"})}),[_,l.id]),i.createElement(a.Controller,{control:E,name:"".concat(l.id),rules:{required:l.isRequired,validate:function(e){if(!e)return!0;var r=l.isRequired,i=void 0!==r&&r,t=l.maxAmount,n=void 0===t?0:t,a=l.minAmount,o=void 0===a?0:a,c=e.quantity,u=void 0===c?0:c;return!u&&!i||(!u&&i?g("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}):u<o?g("Validation:fieldMinNumber",{min:l.minAmount,attribute:l.name}):!(n&&u>=o&&n<u)||g("Validation:quantityMaxNumber",{max:l.maxAmount}))}},render:function(e){var r=e.field,n=r.onChange,a=r.value,u=void 0===a?{}:a,p=r.ref,y=e.fieldState,q=y.invalid,E=y.error;return i.createElement("div",{id:String(l.id),className:"iframe-event__category-product"},i.createElement("div",{className:c("iframe-event__product",q&&"error")},i.createElement(d.TicketDescription,{title:l.name,description:l.description,className:c("iframe-event__product-description"),images:l.images,isRequired:l.isRequired,canExpand:v})),i.createElement("div",{className:"iframe-event__product-price-wrapper"},i.createElement("span",{className:"product-price"},f(null!=A?A:l.price,{style:"currency",currency:t.Currency.GBP})),l.isSoldOut?i.createElement("div",{className:"iframe-event__sold-out-wrapper"},g("Design:soldOut")):i.createElement(s.NumberInput,{ref:p,onChange:function(e){n({id:l.id,name:l.name,deposit:A,price:l.price,productsCategoryId:m.id,quantity:e}),N("".concat(l.id))},onArrowDown:function(){n({id:l.id,name:l.name,deposit:A,price:l.price,productsCategoryId:m.id,quantity:(null==u?void 0:u.quantity)-1||0}),N("".concat(l.id))},onArrowUp:function(){var e;n({id:l.id,name:l.name,deposit:A,price:l.price,productsCategoryId:m.id,quantity:(null!==(e=null==u?void 0:u.quantity)&&void 0!==e?e:0)+1}),N("".concat(l.id))},min:0,disabled:l.isSoldOut,value:(null==u?void 0:u.quantity)||0,className:c(q&&"error")})),A&&!(null==m?void 0:m.remainderExpireAfter)&&i.createElement("div",{className:"mt-4"},g("Design:payNowAndUponArrival",{deposit:f(A,{style:"currency",currency:t.Currency.GBP}),remainder:f(l.price-A,{style:"currency",currency:t.Currency.GBP})})),A&&(null==m?void 0:m.remainderExpireAfter)>0&&i.createElement("div",{className:"mt-4"},g("Design:payNowAndReminderDays",{deposit:f(A,{style:"currency",currency:t.Currency.GBP}),remainder:f(l.price-A,{style:"currency",currency:t.Currency.GBP}),days:null==m?void 0:m.remainderExpireAfter})),q&&i.createElement("div",{className:"d-flex mt-3 w-100"},i.createElement("p",{className:"iframe-event__message-error"},o.hasError(E,"required")&&g("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}),o.hasError(E,"validate")&&E.message)))}})};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),i=require("@licklist/core/dist/Config"),n=require("react-i18next"),a=require("react-hook-form"),c=e(require("@licklist/plugins/dist/services/Form/HookFormService")),o=e(require("clsx")),s=require("react-intl"),u=require("../../../event/ticket-description/TicketDescription.js"),d=require("./components/ProductQuantityInput/ProductQuantityInput.js");exports.CategoryProduct=function(e){var l=e.product,m=e.category,p=e.canExpandDescription,y=void 0===p||p,f=e.productsWithErrors,v=s.useIntl().formatNumber,E=n.useTranslation(["Design","Validation"]).t,g=a.useFormContext(),q=g.control,x=g.clearErrors,N=g.setError,_=r.useMemo((function(){if(f){var e=f.find((function(e){return e.product_id===l.id}));return null==e?void 0:e.message}}),[f,l.id]),A=r.useMemo((function(){if(m.allowDeposits&&l.deposit&&!(null==l?void 0:l.isSoldOut))return l.deposit}),[m,l]);return r.useEffect((function(){_&&N("".concat(l.id),{message:_,type:"validate"})}),[_,l.id]),t.createElement(a.Controller,{control:q,name:"".concat(l.id),rules:{required:l.isRequired,validate:function(e){if(!e)return!0;var r=l.isRequired,t=void 0!==r&&r,i=l.maxAmount,n=void 0===i?0:i,a=l.minAmount,c=void 0===a?0:a,o=e.quantity,s=void 0===o?0:o;return!s&&!t||(!s&&t?E("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}):s<c?E("Validation:fieldMinNumber",{min:l.minAmount,attribute:l.name}):!(n&&s>=c&&n<s)||E("Validation:quantityMaxNumber",{max:l.maxAmount}))}},render:function(e){var r=e.field,n=r.onChange,a=r.value,s=void 0===a?{}:a,p=r.ref,f=e.fieldState,g=f.invalid,q=f.error;return t.createElement("div",{id:String(l.id),className:"iframe-event__category-product"},t.createElement("div",{className:o("iframe-event__product",g&&"error")},t.createElement(u.TicketDescription,{title:l.name,description:l.description,className:o("iframe-event__product-description"),images:l.images,isRequired:l.isRequired,canExpand:y})),t.createElement("div",{className:"iframe-event__product-price-wrapper"},t.createElement("span",{className:"product-price"},v(null!=A?A:l.price,{style:"currency",currency:i.Currency.GBP})),t.createElement(d.ProductQuantityInput,{onChange:n,productInfo:s,ref:p,clearErrors:x,product:l,category:m,invalid:g,deposit:A})),A&&!(null==m?void 0:m.remainderExpireAfter)&&t.createElement("div",{className:"mt-4"},E("Design:payNowAndUponArrival",{deposit:v(A,{style:"currency",currency:i.Currency.GBP}),remainder:v(l.price-A,{style:"currency",currency:i.Currency.GBP})})),A&&(null==m?void 0:m.remainderExpireAfter)>0&&t.createElement("div",{className:"mt-4"},E("Design:payNowAndReminderDays",{deposit:v(A,{style:"currency",currency:i.Currency.GBP}),remainder:v(l.price-A,{style:"currency",currency:i.Currency.GBP}),days:null==m?void 0:m.remainderExpireAfter})),g&&t.createElement("div",{className:"d-flex mt-3 w-100"},t.createElement("p",{className:"iframe-event__message-error"},c.hasError(q,"required")&&E("Design:pleaseSelectAtLeastFrom",{min:1,type:"item",from:"this category"}),c.hasError(q,"validate")&&q.message)))}})};

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { Product, ProductCategory } from "../../../../../../types";
+interface FormOrderItem {
+    id: number;
+    name: string;
+    price: number;
+    productsCategoryId: number;
+    deposit?: number | null;
+    quantity: number;
+}
+interface ProductQuantityInputProps {
+    product: Product;
+    category: ProductCategory;
+    clearErrors: UseFormClearErrors<FieldValues>;
+    onChange: (value: FormOrderItem) => void;
+    deposit?: number;
+    ref: RefCallBack;
+    invalid: boolean;
+    productInfo: FormOrderItem;
+}
+export declare const ProductQuantityInput: ({ product, category, onChange, clearErrors, ref, productInfo, invalid, deposit, }: ProductQuantityInputProps) => JSX.Element;
+export {};
+//# sourceMappingURL=ProductQuantityInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductQuantityInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,sFAS9B,yBAAyB,gBAgF3B,CAAC"}

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

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),i=require("react-i18next"),n=require("react-bootstrap"),r=e(require("clsx")),o=require("../NumberInput/NumberInput.js");exports.ProductQuantityInput=function(e){var u=e.product,a=e.category,d=e.onChange,c=e.clearErrors,l=e.ref,s=e.productInfo,p=e.invalid,m=e.deposit,y=i.useTranslation("Design").t;return u.isSoldOut?t.createElement("div",{className:"iframe-event__sold-out-wrapper"},y("Design:soldOut")):1===(null==u?void 0:u.maxAmount)?t.createElement(n.Button,{ref:l,disabled:u.isSoldOut,className:r("iframe-event__".concat((null==s?void 0:s.quantity)?"unselect-product":"select-product"),p&&"error"),onClick:function(){d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:(null==s?void 0:s.quantity)?0:1})}},y("Design:".concat((null==s?void 0:s.quantity)?"unselect":"select"))):t.createElement(o.NumberInput,{ref:l,onChange:function(e){d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:e}),c("".concat(u.id))},onArrowDown:function(){d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:(null==s?void 0:s.quantity)-1||0}),c("".concat(u.id))},onArrowUp:function(){var e;d({id:u.id,name:u.name,deposit:m,price:u.price,productsCategoryId:a.id,quantity:(null!==(e=null==s?void 0:s.quantity)&&void 0!==e?e:0)+1}),c("".concat(u.id))},min:0,disabled:u.isSoldOut,value:(null==s?void 0:s.quantity)||0,className:r(p&&"error")})};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/iframe/order-process/components/StepsForm/StepsForm.d.ts

@@ -2,8 +2,6 @@ import React from "react";
 import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { MenuStep } from "../../../../types";
 export interface StepsFormProps {
-    relyOnPeopleCategoryIds?: number[];
-    ticketCategoriesIds?: number[];
     step: MenuStep;
     isLastMenuStep: boolean;
     onSubmit: (values: Record<string, any>) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"StepsForm.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/StepsForm/StepsForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;AAG5F,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,MAAM,WAAW,cAAc;IAC7B,uBAAuB,CAAC,EAAE,MAAM,EAAE,CAAC;IACnC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;CAC/D;AAED,oBAAY,YAAY,GAAG;IACzB,aAAa,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,SAAS,qFA0JrB,CAAC"}
+{"version":3,"file":"StepsForm.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/StepsForm/StepsForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;AAE5F,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;CAC/D;AAED,oBAAY,YAAY,GAAG;IACzB,aAAa,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,SAAS,qFAoIrB,CAAC"}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),o=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,s=require("react-i18next"),u=require("react-bootstrap"),i=require("react-hook-form"),n=require("lodash"),l=require("@licklist/plugins/dist/hooks/Value/usePreviousValue"),a=require("@licklist/plugins/dist/utils/ScrollUtils"),c=require("@licklist/plugins/dist/utils/FormValues"),d=require("../../../event/event-details/components/number-of-people-input/NumberOfPeopleInput.js"),m=require("../Category/Category.js"),f=require("../../constants.js"),p=require("../CalendarStepsForm/components/ErrorModal.js"),E=require("../utils/category.js"),g="NO_ORDER_ITEMS_ERROR",v=t.forwardRef((function(e,v){var y=e.step,q=e.isLastMenuStep,F=e.relyOnPeopleCategoryIds,S=void 0===F?[]:F,C=e.ticketCategoriesIds,h=void 0===C?[]:C,O=e.setFormValues,V=e.defaultValues,_=e.onSubmit,b=e.setFormErrors,P=e.id,j=void 0===P?f.STEP_FORM_ID:P,I=e.productsWithErrors,k=i.useForm({defaultValues:V}),M=s.useTranslation(["Design","Validation"]).t,R=r.__read(t.useState(""),2),T=R[0],N=R[1],x=E.useCategory().verifyCategoryItems,B=k.control,D=k.formState.errors,K=k.getValues,W=k.setError,L=k.clearErrors,w=k.reset,A=i.useWatch({control:B}),H=l.usePreviousValue(D),U=t.useMemo((function(){if(h.length||!(null==S?void 0:S.length))return!1;var e=Object.values(A).filter(Boolean).filter((function(e){return S.includes(e.productsCategoryId)&&e.quantity>0&&!e.isSoldOut}));return Boolean(e.length)}),[A,S,h]);t.useImperativeHandle(v,(function(){return{getFormValues:function(){return K()}}})),t.useEffect((function(){I&&N(M("soldOutProduct"))}),[I]);return t.useEffect((function(){D&&setTimeout(L,0),O(A)}),[A]),t.useEffect((function(){c.isFormValuesEmpty(A)||L(g)}),[A,L]),t.useEffect((function(){w(V)}),[V]),t.useEffect((function(){!n.isEqual(D,H)&&b&&b(D)}),[D,H,b]),o.createElement(u.Form,{onSubmit:k.handleSubmit((function(e){if(q&&c.isFormValuesEmpty(e))return W(g,{}),void a.scrollToError(g);var r=x(e,y);if(r)return N(r.message),void W("category_".concat(r.id),{message:r.message});_(e)}),(function(e){a.scrollToError(c.getFirstErrorKey(e)),N(M("pleaseCheckSelectedProducts"))})),id:j},o.createElement(i.FormProvider,r.__assign({},k),o.createElement(p.ErrorModal,{isOpen:Boolean(T),messageKey:T,onClose:function(){return N("")}}),o.createElement("div",null,o.createElement("div",{className:"iframe-event"},o.createElement(m.Category,{productCategories:null==y?void 0:y.productCategories,productsWithErrors:I,errors:D}),U&&q&&o.createElement(d.NumberOfPeopleInput,null),D[g]&&o.createElement("div",{className:"d-flex m-5 justify-content-center form-error",id:g},o.createElement(s.Trans,{t:M,i18nKey:"pleaseSelectAtLeastFrom",values:{min:1,type:"item",from:"those categories"}}))))))}));exports.StepsForm=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),s=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("react-i18next"),i=require("react-bootstrap"),u=require("react-hook-form"),a=require("lodash"),l=require("@licklist/plugins/dist/hooks/Value/usePreviousValue"),n=require("@licklist/plugins/dist/utils/ScrollUtils"),c=require("@licklist/plugins/dist/utils/FormValues"),m=require("../Category/Category.js"),d=require("../../constants.js"),f=require("../CalendarStepsForm/components/ErrorModal.js"),E=require("../utils/category.js"),p="NO_ORDER_ITEMS_ERROR",g=t.forwardRef((function(e,g){var v=e.step,y=e.isLastMenuStep,q=e.setFormValues,F=e.defaultValues,S=e.onSubmit,V=e.setFormErrors,_=e.id,C=void 0===_?d.STEP_FORM_ID:_,h=e.productsWithErrors,b=u.useForm({defaultValues:F}),j=o.useTranslation(["Design","Validation"]).t,O=r.__read(t.useState(""),2),P=O[0],R=O[1],T=E.useCategory().verifyCategoryItems,k=b.control,M=b.formState.errors,x=b.getValues,I=b.setError,D=b.clearErrors,K=b.reset,N=u.useWatch({control:k}),W=l.usePreviousValue(M);t.useImperativeHandle(g,(function(){return{getFormValues:function(){return x()}}})),t.useEffect((function(){h&&R(j("soldOutProduct"))}),[h]);return t.useEffect((function(){M&&setTimeout(D,0),q(N)}),[N]),t.useEffect((function(){c.isFormValuesEmpty(N)||D(p)}),[N,D]),t.useEffect((function(){K(F)}),[F]),t.useEffect((function(){!a.isEqual(M,W)&&V&&V(M)}),[M,W,V]),s.createElement(i.Form,{onSubmit:b.handleSubmit((function(e){if(y&&c.isFormValuesEmpty(e))return I(p,{}),void n.scrollToError(p);var r=T(e,v);if(r)return R(r.message),void I("category_".concat(r.id),{message:r.message});S(e)}),(function(e){n.scrollToError(c.getFirstErrorKey(e)),R(j("pleaseCheckSelectedProducts"))})),id:C},s.createElement(u.FormProvider,r.__assign({},b),s.createElement(f.ErrorModal,{isOpen:Boolean(P),messageKey:P,onClose:function(){return R("")}}),s.createElement("div",null,s.createElement("div",{className:"iframe-event"},s.createElement(m.Category,{productCategories:null==v?void 0:v.productCategories,productsWithErrors:h,errors:M}),M[p]&&s.createElement("div",{className:"d-flex m-5 justify-content-center form-error",id:p},s.createElement(o.Trans,{t:j,i18nKey:"pleaseSelectAtLeastFrom",values:{min:1,type:"item",from:"those categories"}}))))))}));exports.StepsForm=g;

package/dist/styles/iframe-events/Event.scss

@@ -65,7 +65,7 @@
     .iframe-event__category-product {
       margin-top: 1rem;
       padding-bottom: 1rem;
-    
+
       border-bottom: 2px solid $separator-color;
 
       &:first-child {
@@ -73,7 +73,7 @@
       }
     }
 
-    &:not(:first-child){
+    &:not(:first-child) {
       .iframe-event__name {
         margin: 1rem 0;
       }
@@ -89,6 +89,24 @@
     }
   }
 
+  &__select-product {
+    width: 10.5rem !important;
+    margin-top: 1rem;
+  }
+
+  &__unselect-product {
+    margin-top: 1rem;
+    width: 10.5rem !important;
+    background-color: $snippet-elements-button-color !important;
+    color: $snippet-elements-button-background-color !important;
+    border: 1px solid $snippet-elements-button-background-color !important;
+  }
+
+  &__unselect-product.error,
+  &__select-product.error {
+    border: 1px solid red !important;
+  }
+
   &__product-price-wrapper {
     display: flex;
     align-items: center;
@@ -109,7 +127,7 @@
   }
 
   &__product-count {
-    margin-left: 3rem;
+    margin-left: 1.5rem;
   }
 
   &__product-count.error {
@@ -143,7 +161,7 @@
       border-radius: $iframe-border-radius;
       font-size: 0.875rem;
       height: 2.25rem;
-  
+
       &:active,
       &.active,
       &:hover,
@@ -156,25 +174,25 @@
           background-color: $snippet-elements-button-background-color;
           box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
         }
-  
+
         &:disabled {
           border: none;
         }
       }
-  
+
       &:hover,
       &.hover,
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: .7;
+          opacity: 0.7;
         }
       }
-  
+
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -223,19 +241,19 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: .7;
+        opacity: 0.7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: .8;
+        opacity: 0.8;
       }
     }
   }
 
-  &__book-now{
+  &__book-now {
     margin: 1rem 0;
     position: fixed;
     left: 0;
@@ -260,15 +278,15 @@
     justify-content: center;
     width: 10.5rem;
     height: 2rem;
-    color: #9D9D9D;
-    background-color: #F3F3F3;
+    color: #9d9d9d;
+    background-color: #f3f3f3;
     border-radius: $iframe-border-radius;
   }
 }
 
 .people-input {
   .input-wrapper {
-    justify-content: center
+    justify-content: center;
   }
 
   .iframe-event {

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

@@ -119,6 +119,7 @@
 
         &.show {
           overflow: scroll;
+          overflow-x: hidden;
         }
 
         @include media-breakpoint-down(sm) {
@@ -164,7 +165,8 @@
     }
   }
 
-  input, select {
+  input,
+  select {
     border-radius: $iframe-border-radius;
     height: 2.25rem;
     padding: 0.25rem 0.5rem;
@@ -205,16 +207,16 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        background-color:  darken(#0E8CE2, 10%);
-        box-shadow: 0 0 0 $input-btn-focus-width darken(#0E8CE2, 10%);
+        background-color: darken(#0e8ce2, 10%);
+        box-shadow: 0 0 0 $input-btn-focus-width darken(#0e8ce2, 10%);
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        background-color: darken(#0E8CE2, 10%);
-        box-shadow: 0 0 0 $input-btn-focus-width darken(#0E8CE2, 10%);
+        background-color: darken(#0e8ce2, 10%);
+        box-shadow: 0 0 0 $input-btn-focus-width darken(#0e8ce2, 10%);
       }
     }
   }
@@ -229,7 +231,7 @@
     font-size: 0.875rem;
     height: 2.25rem;
 
-    &:focus{
+    &:focus {
       box-shadow: unset;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.467",
+  "version": "0.44.469",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/iframe/order-process/OrderProcess.stories.tsx

@@ -74,6 +74,9 @@ const productCategories = [
 
         price: 1,
         images: IMAGES,
+        maxAmount: 1,
+        minAmount: 1,
+        isRequired: true,
       },
       {
         id: 5,

package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx

@@ -7,8 +7,8 @@ import * as Config from "@licklist/core/dist/Config";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { TicketDescription } from "../../../event/ticket-description";
 import { ProductCategory, Product } from "../../../../types";
-import { NumberInput } from "./components/NumberInput";
 import { StepsFormProps } from "../StepsForm/StepsForm";
+import { ProductQuantityInput } from "./components/ProductQuantityInput";
 
 interface CategoryProductProps {
   product: Product;
@@ -126,52 +126,16 @@ export const CategoryProduct = ({
                   currency: Config.Currency.GBP,
                 })}
               </span>
-              {product.isSoldOut ? (
-                <div className="iframe-event__sold-out-wrapper">
-                  {t("Design:soldOut")}
-                </div>
-              ) : (
-                <NumberInput
-                  ref={ref}
-                  onChange={(val) => {
-                    onChange({
-                      id: product.id,
-                      name: product.name,
-                      deposit,
-                      price: product.price,
-                      productsCategoryId: category.id,
-                      quantity: val,
-                    });
-                    clearErrors(`${product.id}` as const);
-                  }}
-                  onArrowDown={() => {
-                    onChange({
-                      id: product.id,
-                      name: product.name,
-                      deposit,
-                      price: product.price,
-                      productsCategoryId: category.id,
-                      quantity: productInfo?.quantity - 1 || 0,
-                    });
-                    clearErrors(`${product.id}` as const);
-                  }}
-                  onArrowUp={() => {
-                    onChange({
-                      id: product.id,
-                      name: product.name,
-                      deposit,
-                      price: product.price,
-                      productsCategoryId: category.id,
-                      quantity: (productInfo?.quantity ?? 0) + 1,
-                    });
-                    clearErrors(`${product.id}` as const);
-                  }}
-                  min={0}
-                  disabled={product.isSoldOut}
-                  value={productInfo?.quantity || 0}
-                  className={clsx(invalid && "error")}
-                />
-              )}
+              <ProductQuantityInput
+                onChange={onChange}
+                productInfo={productInfo}
+                ref={ref}
+                clearErrors={clearErrors}
+                product={product}
+                category={category}
+                invalid={invalid}
+                deposit={deposit}
+              />
             </div>
             {deposit && !category?.remainderExpireAfter && (
               <div className="mt-4">

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import clsx from "clsx";
+import { Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { NumberInput } from "../NumberInput";
+import { Product, ProductCategory } from "../../../../../../types";
+
+interface FormOrderItem {
+  id: number;
+  name: string;
+  price: number;
+  productsCategoryId: number;
+  deposit?: number | null;
+  quantity: number;
+}
+
+interface ProductQuantityInputProps {
+  product: Product;
+  category: ProductCategory;
+  clearErrors: UseFormClearErrors<FieldValues>;
+  onChange: (value: FormOrderItem) => void;
+  deposit?: number;
+  ref: RefCallBack;
+  invalid: boolean;
+  productInfo: FormOrderItem;
+}
+
+export const ProductQuantityInput = ({
+  product,
+  category,
+  onChange,
+  clearErrors,
+  ref,
+  productInfo,
+  invalid,
+  deposit,
+}: ProductQuantityInputProps) => {
+  const { t } = useTranslation("Design");
+
+  const onClick = () => {
+    onChange({
+      id: product.id,
+      name: product.name,
+      deposit,
+      price: product.price,
+      productsCategoryId: category.id,
+      quantity: productInfo?.quantity ? 0 : 1,
+    });
+  };
+
+  if (product.isSoldOut) {
+    return (
+      <div className="iframe-event__sold-out-wrapper">
+        {t("Design:soldOut")}
+      </div>
+    );
+  }
+  if (product?.maxAmount === 1) {
+    return (
+      <Button
+        ref={ref}
+        disabled={product.isSoldOut}
+        className={clsx(
+          `iframe-event__${
+            productInfo?.quantity ? "unselect-product" : "select-product"
+          }`,
+          invalid && "error"
+        )}
+        onClick={onClick}
+      >
+        {t(`Design:${productInfo?.quantity ? "unselect" : "select"}`)}
+      </Button>
+    );
+  }
+  return (
+    <NumberInput
+      ref={ref}
+      onChange={(val) => {
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: val,
+        });
+        clearErrors(`${product.id}` as const);
+      }}
+      onArrowDown={() => {
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: productInfo?.quantity - 1 || 0,
+        });
+        clearErrors(`${product.id}` as const);
+      }}
+      onArrowUp={() => {
+        onChange({
+          id: product.id,
+          name: product.name,
+          deposit,
+          price: product.price,
+          productsCategoryId: category.id,
+          quantity: (productInfo?.quantity ?? 0) + 1,
+        });
+        clearErrors(`${product.id}` as const);
+      }}
+      min={0}
+      disabled={product.isSoldOut}
+      value={productInfo?.quantity || 0}
+      className={clsx(invalid && "error")}
+    />
+  );
+};

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/index.ts

@@ -0,0 +1 @@
+export { ProductQuantityInput } from "./ProductQuantityInput";

package/src/iframe/order-process/components/StepsForm/StepsForm.tsx

@@ -1,6 +1,5 @@
 import React, {
   useEffect,
-  useMemo,
   forwardRef,
   useImperativeHandle,
   useState,
@@ -17,7 +16,6 @@ import {
 } from "@licklist/plugins/dist/utils/FormValues";
 import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { Category } from "../Category";
-import { NumberOfPeopleInput } from "../../../event/event-details/components/number-of-people-input";
 import { MenuStep } from "../../../../types";
 import { STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../CalendarStepsForm/components/ErrorModal";
@@ -26,8 +24,6 @@ import { useCategory } from "../utils/category";
 const NO_ORDER_ITEMS_ERROR = "NO_ORDER_ITEMS_ERROR";
 
 export interface StepsFormProps {
-  relyOnPeopleCategoryIds?: number[];
-  ticketCategoriesIds?: number[];
   step: MenuStep;
   isLastMenuStep: boolean;
   onSubmit: (values: Record<string, any>) => void;
@@ -47,8 +43,6 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
     {
       step,
       isLastMenuStep,
-      relyOnPeopleCategoryIds = [],
-      ticketCategoriesIds = [],
       setFormValues,
       defaultValues,
       onSubmit,
@@ -74,22 +68,6 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
     const formValues = useWatch({ control });
     const prevErrors = usePreviousValue(errors);
 
-    const shouldShowPeopleInput = useMemo(() => {
-      if (ticketCategoriesIds.length || !relyOnPeopleCategoryIds?.length) {
-        return false;
-      }
-      const values = Object.values(formValues)
-        .filter(Boolean)
-        .filter(
-          (product) =>
-            relyOnPeopleCategoryIds.includes(product.productsCategoryId) &&
-            product.quantity > 0 &&
-            !product.isSoldOut
-        );
-
-      return Boolean(values.length);
-    }, [formValues, relyOnPeopleCategoryIds, ticketCategoriesIds]);
-
     useImperativeHandle(ref, () => {
       return {
         getFormValues: () => getValues(),
@@ -174,10 +152,6 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
                 errors={errors}
               />
 
-              {shouldShowPeopleInput && isLastMenuStep && (
-                <NumberOfPeopleInput />
-              )}
-
               {errors[NO_ORDER_ITEMS_ERROR] && (
                 <div
                   className="d-flex m-5 justify-content-center form-error"

package/src/styles/iframe-events/Event.scss

@@ -65,7 +65,7 @@
     .iframe-event__category-product {
       margin-top: 1rem;
       padding-bottom: 1rem;
-    
+
       border-bottom: 2px solid $separator-color;
 
       &:first-child {
@@ -73,7 +73,7 @@
       }
     }
 
-    &:not(:first-child){
+    &:not(:first-child) {
       .iframe-event__name {
         margin: 1rem 0;
       }
@@ -89,6 +89,24 @@
     }
   }
 
+  &__select-product {
+    width: 10.5rem !important;
+    margin-top: 1rem;
+  }
+
+  &__unselect-product {
+    margin-top: 1rem;
+    width: 10.5rem !important;
+    background-color: $snippet-elements-button-color !important;
+    color: $snippet-elements-button-background-color !important;
+    border: 1px solid $snippet-elements-button-background-color !important;
+  }
+
+  &__unselect-product.error,
+  &__select-product.error {
+    border: 1px solid red !important;
+  }
+
   &__product-price-wrapper {
     display: flex;
     align-items: center;
@@ -109,7 +127,7 @@
   }
 
   &__product-count {
-    margin-left: 3rem;
+    margin-left: 1.5rem;
   }
 
   &__product-count.error {
@@ -143,7 +161,7 @@
       border-radius: $iframe-border-radius;
       font-size: 0.875rem;
       height: 2.25rem;
-  
+
       &:active,
       &.active,
       &:hover,
@@ -156,25 +174,25 @@
           background-color: $snippet-elements-button-background-color;
           box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
         }
-  
+
         &:disabled {
           border: none;
         }
       }
-  
+
       &:hover,
       &.hover,
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: .7;
+          opacity: 0.7;
         }
       }
-  
+
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -223,19 +241,19 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: .7;
+        opacity: 0.7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: .8;
+        opacity: 0.8;
       }
     }
   }
 
-  &__book-now{
+  &__book-now {
     margin: 1rem 0;
     position: fixed;
     left: 0;
@@ -260,15 +278,15 @@
     justify-content: center;
     width: 10.5rem;
     height: 2rem;
-    color: #9D9D9D;
-    background-color: #F3F3F3;
+    color: #9d9d9d;
+    background-color: #f3f3f3;
     border-radius: $iframe-border-radius;
   }
 }
 
 .people-input {
   .input-wrapper {
-    justify-content: center
+    justify-content: center;
   }
 
   .iframe-event {

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

@@ -119,6 +119,7 @@
 
         &.show {
           overflow: scroll;
+          overflow-x: hidden;
         }
 
         @include media-breakpoint-down(sm) {
@@ -164,7 +165,8 @@
     }
   }
 
-  input, select {
+  input,
+  select {
     border-radius: $iframe-border-radius;
     height: 2.25rem;
     padding: 0.25rem 0.5rem;
@@ -205,16 +207,16 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        background-color:  darken(#0E8CE2, 10%);
-        box-shadow: 0 0 0 $input-btn-focus-width darken(#0E8CE2, 10%);
+        background-color: darken(#0e8ce2, 10%);
+        box-shadow: 0 0 0 $input-btn-focus-width darken(#0e8ce2, 10%);
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        background-color: darken(#0E8CE2, 10%);
-        box-shadow: 0 0 0 $input-btn-focus-width darken(#0E8CE2, 10%);
+        background-color: darken(#0e8ce2, 10%);
+        box-shadow: 0 0 0 $input-btn-focus-width darken(#0e8ce2, 10%);
       }
     }
   }
@@ -229,7 +231,7 @@
     font-size: 0.875rem;
     height: 2.25rem;
 
-    &:focus{
+    &:focus {
       box-shadow: unset;
     }
   }