@licklist/design 0.44.469 → 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/styles/iframe-events/Event.scss

@@ -285,6 +285,14 @@
 }
 
 .people-input {
+  margin-bottom: 1rem;
+  h3 {
+    font-size: 1rem;
+  }
+  input[type="number"] {
+    height: 2rem;
+  }
+
   .input-wrapper {
     justify-content: center;
   }
@@ -359,6 +367,7 @@
   }
 
   .people-input {
+    margin-bottom: 0;
     .input-wrapper {
       justify-content: space-between;
     }
@@ -367,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.469",
+  "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" },
@@ -175,7 +180,12 @@ const OrderProcessContextProvider: React.FC = ({ children }) => {
 
   return (
     <OrderProcessContext.Provider
-      value={{ orderFormValues, setOrderFormValues, formValues, setFormValues }}
+      value={{
+        orderFormValues,
+        setOrderFormValues,
+        formValues,
+        setFormValues,
+      }}
     >
       {children}
     </OrderProcessContext.Provider>
@@ -211,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}>
@@ -231,7 +243,7 @@ export function Default() {
                   formValues,
                   setFormValues,
                 } = useContext(OrderProcessContext);
-
+                const relyOnPeopleCategoryIds = [4];
                 const onPrevStep = () => {
                   if (formRef.current?.getFormValues()) {
                     setFormValues(formRef.current?.getFormValues());
@@ -254,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={
@@ -277,7 +320,6 @@ export function Default() {
                             setFormValues={setFormValues}
                             defaultValues={orderFormValues}
                             onSubmit={onNextStep}
-                            relyOnPeopleCategoryIds={[4]}
                             ref={formRef}
                           />
                         </PageBody.LeftBlock>
@@ -286,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}
@@ -294,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/styles/iframe-events/Event.scss

@@ -285,6 +285,14 @@
 }
 
 .people-input {
+  margin-bottom: 1rem;
+  h3 {
+    font-size: 1rem;
+  }
+  input[type="number"] {
+    height: 2rem;
+  }
+
   .input-wrapper {
     justify-content: center;
   }
@@ -359,6 +367,7 @@
   }
 
   .people-input {
+    margin-bottom: 0;
     .input-wrapper {
       justify-content: space-between;
     }
@@ -367,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;