@licklist/design 0.44.468 → 0.44.470

package/dist/iframe/event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderNumberOfPeopleInputComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent.tsx"],"names":[],"mappings":";AAOA,UAAU,uCAAuC;IAC/C,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,kCAAkC,+DAI5C,uCAAuC,gBAuCzC,CAAC"}
+{"version":3,"file":"RenderNumberOfPeopleInputComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent.tsx"],"names":[],"mappings":";AAOA,UAAU,uCAAuC;IAC/C,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,kCAAkC,+DAI5C,uCAAuC,gBAoCzC,CAAC"}

package/dist/iframe/event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent.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 t=e(require("react")),r=require("react-i18next"),n=e(require("clsx")),a=require("../../../../../order-process/components/CategoryProduct/components/NumberInput/NumberInput.js");exports.RenderNumberOfPeopleInputComponent=function(e){var o=e.onChangePeopleAmount,u=e.peopleAmount,m=e.peopleAmountError,l=r.useTranslation("Design").t;return t.createElement("div",{id:"numberOfPeople",className:"people-input calendar-people-input pt-5 mb-5"},t.createElement("div",{className:"d-flex align-items-center input-wrapper"},t.createElement("h3",{className:"iframe-event__name"},l("people")),t.createElement(a.NumberInput,{onChange:o,onArrowDown:function(){return o(Number(u)-1)},onArrowUp:function(){return o(Number(u)+1)},min:0,value:Number(u),className:n("iframe-event__product-count")})),t.createElement("div",{className:"iframe-event__message-error"},m&&t.createElement("div",{className:"mt-3"},t.createElement("p",null,t.createElement(r.Trans,{t:l,i18nKey:"pleaseSelectAtLeastFrom",values:{min:1,type:"item",from:"this category"}})))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),t=require("react-i18next"),n=e(require("clsx")),a=require("../../../../../order-process/components/CategoryProduct/components/NumberInput/NumberInput.js");exports.RenderNumberOfPeopleInputComponent=function(e){var o=e.onChangePeopleAmount,u=e.peopleAmount,m=e.peopleAmountError,l=t.useTranslation("Design").t;return r.createElement("div",{id:"numberOfPeople",className:"people-input"},r.createElement("div",{className:"d-flex align-items-center input-wrapper"},r.createElement("h3",{className:"iframe-event__name"},l("people")),r.createElement(a.NumberInput,{onChange:o,onArrowDown:function(){return o(Number(u)-1)},onArrowUp:function(){return o(Number(u)+1)},min:0,value:Number(u),className:n("iframe-event__product-count")})),r.createElement("div",{className:"iframe-event__message-error"},m&&r.createElement("div",{className:"mt-3"},r.createElement("p",null,r.createElement(t.Trans,{t:l,i18nKey:"pleaseSelectAtLeastFrom",values:{min:1,type:"item",from:"this category"}})))))};

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { BookingSummaryProps } from "./types";
 export declare const BookingSummary: {
-    ({ date, menuSteps, formValues, isNotShownPeopleAmount, eventName, transactionFee, productsWithErrors, isLoading, }: Omit<BookingSummaryProps, "totallWithDiscount">): JSX.Element;
+    ({ date, menuSteps, formValues, isNotShownPeopleAmount, eventName, transactionFee, productsWithErrors, isLoading, hasPeopleInput, }: Omit<BookingSummaryProps, "totallWithDiscount">): JSX.Element;
     SummaryTotal: ({ formValues, totalWithDiscount, transactionFee, isFreePayment, }: Pick<BookingSummaryProps, "formValues" | "totalWithDiscount" | "transactionFee" | "isFreePayment">) => JSX.Element;
-    Accordion: ({ children, title, showTitleOnlyOnMobile, }: import("./components/BookingSummaryAccordion").BookingSummaryAccordionProps) => JSX.Element;
+    Accordion: ({ children, title, showTitleOnlyOnMobile, hasPeopleInput, }: import("./components/BookingSummaryAccordion").BookingSummaryAccordionProps) => JSX.Element;
 };
 //# sourceMappingURL=BookingSummary.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BookingSummary.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/BookingSummary/BookingSummary.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAK9C,eAAO,MAAM,cAAc;yHASxB,KAAK,mBAAmB,EAAE,oBAAoB,CAAC;;;CAgFjD,CAAC"}
+{"version":3,"file":"BookingSummary.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/BookingSummary/BookingSummary.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAK9C,eAAO,MAAM,cAAc;yIAUxB,KAAK,mBAAmB,EAAE,oBAAoB,CAAC;;;CAgFjD,CAAC"}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),a=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@licklist/core/dist/Config"),m=require("../../../../static/loader/LoaderIndicator.js"),c=require("react-i18next");require("../../../../static/index.js");var o=require("react-intl");require("./components/SummaryTotal/components/SummaryTotalBlock.js");var s=require("./components/ProductsByMenuStep/ProductsByMenuStep.js"),l=require("./utils/index.js"),i=require("./components/SummaryTotal/SummaryTotal.js"),u=require("./components/BookingSummaryAccordion/BookingSummaryAccordion.js"),d=function(e){var i=e.date,d=e.menuSteps,p=e.formValues,y=e.isNotShownPeopleAmount,E=e.eventName,f=e.transactionFee,v=void 0===f?0:f,N=e.productsWithErrors,S=e.isLoading,g=c.useTranslation("Design").t,q=o.useIntl().formatNumber,j=t.__read(r.useMemo((function(){var e=l.sanitizeFormValues(p),r=e.numberOfPeople,a=t.__rest(e,["numberOfPeople"]);return[r,Object.keys(a).map((function(e){return a[e]})).filter((function(e){return 0!==e.quantity}))]}),[p]),2),k=j[0],b=void 0===k?0:k,B=j[1];return S?a.createElement("div",{className:"payment-booking-summary"},a.createElement(m.LoaderIndicator,{isLoaded:!1})):a.createElement("div",{className:"payment-booking-summary"},a.createElement(u.BookingSummaryAccordion,null,a.createElement("div",{className:"event-info"},a.createElement("p",{className:"m-0 title event-name"},E),a.createElement("p",{className:"m-0"},i)),a.createElement("hr",null),B.length>0?a.createElement("div",null,a.createElement("div",{className:"cart-items"},d.map((function(e){return a.createElement(s.ProductsByMenuStep,{key:e.id,orderProducts:B,step:e,productsWithErrors:N})})),!y&&b>0&&a.createElement(a.Fragment,null,a.createElement("hr",null),a.createElement("div",{className:"d-flex justify-content-between mt-3"},a.createElement("p",{className:"m-0"},g("people"),":"),a.createElement("p",{className:"price"},b))),!!v&&a.createElement(a.Fragment,null,a.createElement("hr",null),a.createElement("div",{className:"d-flex justify-content-between mt-3"},a.createElement("p",{className:"m-0"},g("transactionFee"),":"),a.createElement("p",{className:"price"},q(v,{style:"currency",currency:n.Currency.GBP})))))):a.createElement("div",{className:"cart-items"},a.createElement("p",{className:"empty-cart"},g("emptyBasket")))))};d.SummaryTotal=i.SummaryTotal,d.Accordion=u.BookingSummaryAccordion,exports.BookingSummary=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),r=require("react"),a=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@licklist/core/dist/Config"),m=require("../../../../static/loader/LoaderIndicator.js"),c=require("react-i18next");require("../../../../static/index.js");var o=require("react-intl");require("./components/SummaryTotal/components/SummaryTotalBlock.js");var s=require("./components/ProductsByMenuStep/ProductsByMenuStep.js"),l=require("./utils/index.js"),i=require("./components/SummaryTotal/SummaryTotal.js"),u=require("./components/BookingSummaryAccordion/BookingSummaryAccordion.js"),d=function(e){var i=e.date,d=e.menuSteps,p=e.formValues,y=e.isNotShownPeopleAmount,E=e.eventName,f=e.transactionFee,v=void 0===f?0:f,N=e.productsWithErrors,S=e.isLoading,g=e.hasPeopleInput,q=c.useTranslation("Design").t,j=o.useIntl().formatNumber,k=t.__read(r.useMemo((function(){var e=l.sanitizeFormValues(p),r=e.numberOfPeople,a=t.__rest(e,["numberOfPeople"]);return[r,Object.keys(a).map((function(e){return a[e]})).filter((function(e){return 0!==e.quantity}))]}),[p]),2),b=k[0],B=void 0===b?0:b,P=k[1];return S?a.createElement("div",{className:"payment-booking-summary"},a.createElement(m.LoaderIndicator,{isLoaded:!1})):a.createElement("div",{className:"payment-booking-summary"},a.createElement(u.BookingSummaryAccordion,{hasPeopleInput:g},a.createElement("div",{className:"event-info"},a.createElement("p",{className:"m-0 title event-name"},E),a.createElement("p",{className:"m-0"},i)),a.createElement("hr",null),P.length>0?a.createElement("div",null,a.createElement("div",{className:"cart-items"},d.map((function(e){return a.createElement(s.ProductsByMenuStep,{key:e.id,orderProducts:P,step:e,productsWithErrors:N})})),!y&&B>0&&a.createElement(a.Fragment,null,a.createElement("hr",null),a.createElement("div",{className:"d-flex justify-content-between mt-3"},a.createElement("p",{className:"m-0"},q("people"),":"),a.createElement("p",{className:"price"},B))),!!v&&a.createElement(a.Fragment,null,a.createElement("hr",null),a.createElement("div",{className:"d-flex justify-content-between mt-3"},a.createElement("p",{className:"m-0"},q("transactionFee"),":"),a.createElement("p",{className:"price"},j(v,{style:"currency",currency:n.Currency.GBP})))))):a.createElement("div",{className:"cart-items"},a.createElement("p",{className:"empty-cart"},q("emptyBasket")))))};d.SummaryTotal=i.SummaryTotal,d.Accordion=u.BookingSummaryAccordion,exports.BookingSummary=d;

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

@@ -2,6 +2,7 @@ import { PropsWithChildren } from "react";
 export declare type BookingSummaryAccordionProps = PropsWithChildren<{
     title?: string;
     showTitleOnlyOnMobile?: boolean;
+    hasPeopleInput?: boolean;
 }>;
-export declare const BookingSummaryAccordion: ({ children, title, showTitleOnlyOnMobile, }: BookingSummaryAccordionProps) => JSX.Element;
+export declare const BookingSummaryAccordion: ({ children, title, showTitleOnlyOnMobile, hasPeopleInput, }: BookingSummaryAccordionProps) => JSX.Element;
 //# sourceMappingURL=BookingSummaryAccordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BookingSummaryAccordion.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/BookingSummaryAccordion/BookingSummaryAccordion.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAaf,oBAAY,4BAA4B,GAAG,iBAAiB,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC,CAAC;AAEH,eAAO,MAAM,uBAAuB,gDAIjC,4BAA4B,gBA2D9B,CAAC"}
+{"version":3,"file":"BookingSummaryAccordion.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/BookingSummaryAccordion/BookingSummaryAccordion.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAaf,oBAAY,4BAA4B,GAAG,iBAAiB,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,CAAC;AAEH,eAAO,MAAM,uBAAuB,gEAKjC,4BAA4B,gBA6D9B,CAAC"}

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),n=require("react"),o=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-bootstrap"),s=require("@licklist/plugins/dist/hooks/Media/useWindowDimensions"),a=require("../../types/index.js"),r=require("../../../../../page/components/PageBody/constants.js"),c=require("../ToggleHeader/ToggleHeader.js"),l=require("../../../../../page/components/PageBody/hooks/useResizePageBody.js");exports.BookingSummaryAccordion=function(e){var d=e.children,u=e.title,E=e.showTitleOnlyOnMobile,p=void 0!==E&&E,C=s.useWindowDimensions().width,w=t.__read(n.useState(C<=a.MOBILE_WIDTH),2),O=w[0],_=w[1],g=l.useResizePageBody().rightBlockContentStyles,v=C<=a.MOBILE_WIDTH,m=n.useCallback((function(e){_(e===a.ACCORDION_KEY)}),[]),f=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_EXPAND))}),[]),y=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_EXPANDED))}),[]),B=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_COLLAPSE))}),[]),h=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_COLLAPSED))}),[]);n.useEffect((function(){C>a.MOBILE_WIDTH?_(!0):_(!1)}),[C,_]);var I=!p||p&&v;return o.createElement(i.Accordion,{defaultActiveKey:a.ACCORDION_KEY,onSelect:m},o.createElement(c.ToggleHeader,{showExpandButton:v,isExpanded:O,title:u,hideComponent:!I}),o.createElement(i.Accordion.Collapse,{eventKey:a.ACCORDION_KEY,onEnter:f,onEntered:y,onExit:B,onExited:h,className:I&&"has-toggler",style:g},o.createElement("div",{className:"summary-wrapper"},d)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),n=require("react"),o=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-bootstrap"),a=require("@licklist/plugins/dist/hooks/Media/useWindowDimensions"),s=require("../../types/index.js"),r=require("../../../../../page/components/PageBody/constants.js"),c=require("../ToggleHeader/ToggleHeader.js"),l=require("../../../../../page/components/PageBody/hooks/useResizePageBody.js");exports.BookingSummaryAccordion=function(e){var d=e.children,u=e.title,E=e.showTitleOnlyOnMobile,p=void 0!==E&&E,C=e.hasPeopleInput,w=a.useWindowDimensions().width,O=t.__read(n.useState(w<=s.MOBILE_WIDTH),2),_=O[0],g=O[1],v=l.useResizePageBody().rightBlockContentStyles,h=w<=s.MOBILE_WIDTH,m=n.useCallback((function(e){g(e===s.ACCORDION_KEY)}),[]),f=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_EXPAND))}),[]),y=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_EXPANDED))}),[]),B=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_COLLAPSE))}),[]),I=n.useCallback((function(){window.dispatchEvent(new Event(r.RIGHT_BLOCK_COLLAPSED))}),[]);n.useEffect((function(){w>s.MOBILE_WIDTH?g(!0):g(!1)}),[w,g]);var D=!p||p&&h;return o.createElement(i.Accordion,{defaultActiveKey:s.ACCORDION_KEY,onSelect:m},o.createElement(c.ToggleHeader,{showExpandButton:h,isExpanded:_,title:u,hideComponent:!D}),o.createElement(i.Accordion.Collapse,{eventKey:s.ACCORDION_KEY,onEnter:f,onEntered:y,onExit:B,onExited:I,className:"".concat(D&&"has-toggler"," ").concat(C&&"collapse-with-people-input"),style:v},o.createElement("div",{className:"summary-wrapper"},d)))};

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

@@ -11,6 +11,7 @@ export declare type BookingSummaryProps = {
     totalWithDiscount?: number;
     isNotShownPeopleAmount?: boolean;
     eventName: string;
+    hasPeopleInput?: boolean;
     transactionFee?: number;
     isFreePayment?: boolean;
     productsWithErrors?: ProductQuantityCheckResponse["products"];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;AAC5F,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAE/C,oBAAY,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;KAC/B,CAAC;IACF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;AAC5F,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAE/C,oBAAY,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;KAC/B,CAAC;IACF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

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/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;
@@ -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,23 @@
     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 {
+  margin-bottom: 1rem;
+  h3 {
+    font-size: 1rem;
+  }
+  input[type="number"] {
+    height: 2rem;
+  }
+
   .input-wrapper {
-    justify-content: center
+    justify-content: center;
   }
 
   .iframe-event {
@@ -341,6 +367,7 @@
   }
 
   .people-input {
+    margin-bottom: 0;
     .input-wrapper {
       justify-content: space-between;
     }
@@ -349,6 +376,9 @@
       &__name {
         margin-bottom: 1rem;
       }
+      &__message-error {
+        padding-bottom: 0.5rem;
+      }
     }
   }
 }

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

@@ -126,6 +126,9 @@
           max-height: 7.5rem;
         }
       }
+      .collapse-with-people-input {
+        max-height: calc(100vh - 22rem);
+      }
 
       .collapsing {
         transition: none;

package/package.json

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

package/src/iframe/event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent.tsx

@@ -19,10 +19,7 @@ export const RenderNumberOfPeopleInputComponent = ({
   const { t } = useTranslation("Design");
 
   return (
-    <div
-      id={NUMBER_OF_PEOPLE}
-      className="people-input calendar-people-input pt-5 mb-5"
-    >
+    <div id={NUMBER_OF_PEOPLE} className="people-input">
       <div className="d-flex align-items-center input-wrapper">
         <h3 className="iframe-event__name">{t("people")}</h3>
 

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

@@ -4,6 +4,7 @@ import React, {
   useContext,
   createContext,
   useRef,
+  useMemo,
 } from "react";
 import { MemoryRouter, Route, useHistory } from "react-router-dom";
 import { Meta } from "@storybook/react";
@@ -14,6 +15,10 @@ import { StepsForm } from "./components/StepsForm";
 import { Page, PageBody, PageHeader } from "../page";
 import { StepsFormRef } from "./components/StepsForm/StepsForm";
 import { BookingSummaryFooter } from "./components/BookingSummaryFooter";
+import { sanitizeFormValues } from "./components/BookingSummary/utils";
+import { Order } from "../../types";
+// eslint-disable-next-line max-len
+import { RenderNumberOfPeopleInputComponent } from "../event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent";
 
 const ROUTES = [
   { pathname: "/step1", key: "/step1", name: "Burger" },
@@ -74,6 +79,9 @@ const productCategories = [
 
         price: 1,
         images: IMAGES,
+        maxAmount: 1,
+        minAmount: 1,
+        isRequired: true,
       },
       {
         id: 5,
@@ -172,7 +180,12 @@ const OrderProcessContextProvider: React.FC = ({ children }) => {
 
   return (
     <OrderProcessContext.Provider
-      value={{ orderFormValues, setOrderFormValues, formValues, setFormValues }}
+      value={{
+        orderFormValues,
+        setOrderFormValues,
+        formValues,
+        setFormValues,
+      }}
     >
       {children}
     </OrderProcessContext.Provider>
@@ -208,6 +221,8 @@ const TimerWrapper = () => {
 export function Default() {
   const externalHistory = useHistory();
   const formRef = useRef<StepsFormRef | null>(null);
+  const [peopleAmount, setPeopleAmount] = useState(0);
+  const [peopleAmountError, setPeopleAmountError] = useState(false);
 
   return (
     <MemoryRouter initialEntries={ROUTES} initialIndex={0}>
@@ -228,7 +243,7 @@ export function Default() {
                   formValues,
                   setFormValues,
                 } = useContext(OrderProcessContext);
-
+                const relyOnPeopleCategoryIds = [4];
                 const onPrevStep = () => {
                   if (formRef.current?.getFormValues()) {
                     setFormValues(formRef.current?.getFormValues());
@@ -251,6 +266,37 @@ export function Default() {
                   }
                 };
 
+                const shouldShowPeopleInput = useMemo(() => {
+                  const { numberOfPeople, ...orderProducts } =
+                    sanitizeFormValues(formValues);
+
+                  const values = Object.values(orderProducts).filter(
+                    Boolean
+                  ) as Order[];
+                  const filteredValues = values.filter(
+                    (product) =>
+                      relyOnPeopleCategoryIds.includes(
+                        product.productsCategoryId
+                      ) && product.quantity > 0
+                  );
+
+                  return Boolean(filteredValues.length);
+                }, [formValues, relyOnPeopleCategoryIds]);
+                const onChangePeopleAmount = (value: number) => {
+                  if (!setPeopleAmount) {
+                    return;
+                  }
+                  setPeopleAmount(value);
+                  if (value > 0) {
+                    if (peopleAmountError) {
+                      setPeopleAmountError(false);
+                    }
+                    return;
+                  }
+
+                  setPeopleAmountError(true);
+                };
+
                 return (
                   <Page
                     headerBlock={
@@ -274,7 +320,6 @@ export function Default() {
                             setFormValues={setFormValues}
                             defaultValues={orderFormValues}
                             onSubmit={onNextStep}
-                            relyOnPeopleCategoryIds={[4]}
                             ref={formRef}
                           />
                         </PageBody.LeftBlock>
@@ -283,6 +328,13 @@ export function Default() {
                         <PageBody.RightBlock
                           bottomBlock={
                             <BookingSummaryFooter>
+                              {shouldShowPeopleInput && (
+                                <RenderNumberOfPeopleInputComponent
+                                  peopleAmount={peopleAmount || 0}
+                                  onChangePeopleAmount={onChangePeopleAmount}
+                                  peopleAmountError={peopleAmountError}
+                                />
+                              )}
                               <BookingSummary.SummaryTotal
                                 formValues={formValues}
                                 totalWithDiscount={5}
@@ -291,6 +343,7 @@ export function Default() {
                           }
                         >
                           <BookingSummary
+                            hasPeopleInput={shouldShowPeopleInput}
                             date="29 Sept 2022 at 09:00"
                             menuSteps={menuSteps as any}
                             formValues={formValues}

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

@@ -19,6 +19,7 @@ export const BookingSummary = ({
   transactionFee = 0,
   productsWithErrors,
   isLoading,
+  hasPeopleInput,
 }: Omit<BookingSummaryProps, "totallWithDiscount">) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -46,7 +47,7 @@ export const BookingSummary = ({
 
   return (
     <div className="payment-booking-summary">
-      <BookingSummaryAccordion>
+      <BookingSummaryAccordion hasPeopleInput={hasPeopleInput}>
         <div className="event-info">
           <p className="m-0 title event-name">{eventName}</p>
           <p className="m-0">{date}</p>

package/src/iframe/order-process/components/BookingSummary/components/BookingSummaryAccordion/BookingSummaryAccordion.tsx

@@ -19,12 +19,14 @@ import { useResizePageBody } from "../../../../../page/components/PageBody/hooks
 export type BookingSummaryAccordionProps = PropsWithChildren<{
   title?: string;
   showTitleOnlyOnMobile?: boolean;
+  hasPeopleInput?: boolean;
 }>;
 
 export const BookingSummaryAccordion = ({
   children,
   title,
   showTitleOnlyOnMobile = false,
+  hasPeopleInput,
 }: BookingSummaryAccordionProps) => {
   const { width } = useWindowDimensions();
   const [isExpanded, setIsExpanded] = useState(width <= MOBILE_WIDTH);
@@ -77,7 +79,9 @@ export const BookingSummaryAccordion = ({
         onEntered={onExpanded}
         onExit={onCollapse}
         onExited={onCollapsed}
-        className={showToggleHeader && "has-toggler"}
+        className={`${showToggleHeader && "has-toggler"} ${
+          hasPeopleInput && "collapse-with-people-input"
+        }`}
         style={rightBlockContentStyles}
       >
         <div className="summary-wrapper">{children}</div>

package/src/iframe/order-process/components/BookingSummary/types/index.ts

@@ -13,6 +13,7 @@ export type BookingSummaryProps = {
   totalWithDiscount?: number;
   isNotShownPeopleAmount?: boolean;
   eventName: string;
+  hasPeopleInput?: boolean;
   transactionFee?: number;
   isFreePayment?: boolean;
   productsWithErrors?: ProductQuantityCheckResponse["products"];

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/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;
@@ -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,23 @@
     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 {
+  margin-bottom: 1rem;
+  h3 {
+    font-size: 1rem;
+  }
+  input[type="number"] {
+    height: 2rem;
+  }
+
   .input-wrapper {
-    justify-content: center
+    justify-content: center;
   }
 
   .iframe-event {
@@ -341,6 +367,7 @@
   }
 
   .people-input {
+    margin-bottom: 0;
     .input-wrapper {
       justify-content: space-between;
     }
@@ -349,6 +376,9 @@
       &__name {
         margin-bottom: 1rem;
       }
+      &__message-error {
+        padding-bottom: 0.5rem;
+      }
     }
   }
 }

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

@@ -126,6 +126,9 @@
           max-height: 7.5rem;
         }
       }
+      .collapse-with-people-input {
+        max-height: calc(100vh - 22rem);
+      }
 
       .collapsing {
         transition: none;