@licklist/design 0.44.477 → 0.44.479
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/iframe/order-process/components/BookingSummary/BookingSummary.d.ts +1 -1
- package/dist/iframe/order-process/components/BookingSummary/BookingSummary.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/BookingSummary.js +1 -1
- package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.js +1 -1
- package/dist/iframe/order-process/components/BookingSummary/types/index.d.ts +2 -1
- package/dist/iframe/order-process/components/BookingSummary/types/index.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts +0 -4
- package/dist/iframe/order-process/components/BookingSummary/utils/index.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummary/utils/index.js +1 -1
- package/dist/iframe/payment/payment-page/PaymentPage.js +1 -1
- package/dist/styles/iframe-events/Event.scss +0 -2
- package/package.json +1 -1
- package/src/iframe/order-process/OrderProcess.stories.tsx +2 -5
- package/src/iframe/order-process/components/BookingSummary/BookingSummary.stories.tsx +2 -2
- package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx +6 -13
- package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx +4 -12
- package/src/iframe/order-process/components/BookingSummary/types/index.ts +2 -1
- package/src/iframe/order-process/components/BookingSummary/utils/index.ts +0 -21
- package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx +9 -1
- package/src/iframe/payment/payment-page/PaymentPage.tsx +1 -1
- package/src/styles/iframe-events/Event.scss +0 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { BookingSummaryProps } from "./types";
|
|
3
3
|
export declare const BookingSummary: {
|
|
4
|
-
({ date, menuSteps, formValues, isNotShownPeopleAmount, eventName, transactionFee, productsWithErrors, isLoading, hasPeopleInput, }: Omit<BookingSummaryProps, "totallWithDiscount">): JSX.Element;
|
|
4
|
+
({ date, menuSteps, formValues, isNotShownPeopleAmount, eventName, transactionFee, productsWithErrors, isLoading, hasPeopleInput, peopleAmount, }: Omit<BookingSummaryProps, "totallWithDiscount">): JSX.Element;
|
|
5
5
|
SummaryTotal: ({ formValues, totalWithDiscount, transactionFee, isFreePayment, }: Pick<BookingSummaryProps, "formValues" | "totalWithDiscount" | "transactionFee" | "isFreePayment">) => JSX.Element;
|
|
6
6
|
Accordion: ({ children, title, showTitleOnlyOnMobile, hasPeopleInput, }: import("./components/BookingSummaryAccordion").BookingSummaryAccordionProps) => JSX.Element;
|
|
7
7
|
};
|
|
@@ -1 +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;
|
|
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;AAI9C,eAAO,MAAM,cAAc;uJAWxB,KAAK,mBAAmB,EAAE,oBAAoB,CAAC;;;CAyEjD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("@licklist/core/dist/Config"),n=require("../../../../static/loader/LoaderIndicator.js"),m=require("react-i18next");require("../../../../static/index.js");var o=require("react-intl");require("./components/SummaryTotal/components/SummaryTotalBlock.js");var c=require("./components/ProductsByMenuStep/ProductsByMenuStep.js"),l=require("./components/SummaryTotal/SummaryTotal.js"),s=require("./components/BookingSummaryAccordion/BookingSummaryAccordion.js"),i=function(e){var l=e.date,i=e.menuSteps,u=e.formValues,d=e.isNotShownPeopleAmount,p=e.eventName,y=e.transactionFee,E=void 0===y?0:y,v=e.productsWithErrors,f=e.isLoading,N=e.hasPeopleInput,S=e.peopleAmount,g=m.useTranslation("Design").t,B=o.useIntl().formatNumber,j=t.useMemo((function(){var e=Object.values(u).filter(Boolean);return null==e?void 0:e.filter((function(e){return 0!==(null==e?void 0:e.quantity)}))}),[u]);return f?r.createElement("div",{className:"payment-booking-summary"},r.createElement(n.LoaderIndicator,{isLoaded:!1})):r.createElement("div",{className:"payment-booking-summary"},r.createElement(s.BookingSummaryAccordion,{hasPeopleInput:N},r.createElement("div",{className:"event-info"},r.createElement("p",{className:"m-0 title event-name"},p),r.createElement("p",{className:"m-0"},l)),r.createElement("hr",null),j.length>0?r.createElement("div",null,r.createElement("div",{className:"cart-items"},i.map((function(e){return r.createElement(c.ProductsByMenuStep,{key:e.id,orderProducts:j,step:e,productsWithErrors:v})})),!d&&S>0&&r.createElement(r.Fragment,null,r.createElement("hr",null),r.createElement("div",{className:"d-flex justify-content-between mt-3"},r.createElement("p",{className:"m-0"},g("people"),":"),r.createElement("p",{className:"price"},S))),!!E&&r.createElement(r.Fragment,null,r.createElement("hr",null),r.createElement("div",{className:"d-flex justify-content-between mt-3"},r.createElement("p",{className:"m-0"},g("transactionFee"),":"),r.createElement("p",{className:"price"},B(E,{style:"currency",currency:a.Currency.GBP})))))):r.createElement("div",{className:"cart-items"},r.createElement("p",{className:"empty-cart"},g("emptyBasket")))))};i.SummaryTotal=l.SummaryTotal,i.Accordion=s.BookingSummaryAccordion,exports.BookingSummary=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SummaryTotal.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SummaryTotal.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIlD,eAAO,MAAM,YAAY,sEAKtB,KACD,mBAAmB,EACnB,YAAY,GAAG,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,CACxE,gBA4BA,CAAC"}
|
package/dist/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("react-i18next"),l=require("./components/SummaryTotalBlock.js"),n=require("../../utils/index.js");exports.SummaryTotal=function(e){var o=e.formValues,u=e.totalWithDiscount,i=e.transactionFee,c=void 0===i?0:i,s=e.isFreePayment,m=void 0!==s&&s,f=a.useTranslation("Design").t,d=t.useMemo((function(){return Object.values(o).filter(Boolean).filter((function(e){return 0!==(null==e?void 0:e.quantity)}))}),[o]),y=m?0:n.cartSumByOrderProducts(d)+c;return d.length?r.createElement("div",{className:"d-flex flex-column justify-content-between"},r.createElement(l.SummaryTotalBlock,{label:f("total"),amount:y}),!!u&&!m&&r.createElement(l.SummaryTotalBlock,{label:f("totalWithDiscount"),amount:u+c})):null};
|
|
@@ -6,7 +6,7 @@ export declare type BookingSummaryProps = {
|
|
|
6
6
|
date: string;
|
|
7
7
|
menuSteps: MenuStep[];
|
|
8
8
|
formValues: {
|
|
9
|
-
[key: string]: Order
|
|
9
|
+
[key: string]: Order;
|
|
10
10
|
};
|
|
11
11
|
totalWithDiscount?: number;
|
|
12
12
|
isNotShownPeopleAmount?: boolean;
|
|
@@ -16,5 +16,6 @@ export declare type BookingSummaryProps = {
|
|
|
16
16
|
isFreePayment?: boolean;
|
|
17
17
|
productsWithErrors?: ProductQuantityCheckResponse["products"];
|
|
18
18
|
isLoading?: boolean;
|
|
19
|
+
peopleAmount: number;
|
|
19
20
|
};
|
|
20
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +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,
|
|
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,CAAC;KACtB,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;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC"}
|
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
import { Order } from "../../../../../types";
|
|
2
|
-
import { BookingSummaryProps } from "../types";
|
|
3
|
-
export declare const sanitizeFormValues: (formValues: BookingSummaryProps["formValues"]) => {
|
|
4
|
-
[key: string]: number | Order;
|
|
5
|
-
};
|
|
6
2
|
export declare const cartSumByOrderProducts: (orderProducts: Order[]) => number;
|
|
7
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/BookingSummary/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,kBAAmB,KAAK,EAAE,WAKtD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.cartSumByOrderProducts=function(e){return e.reduce((function(e,r){return e+((null==r?void 0:r.deposit)||(null==r?void 0:r.price))*r.quantity}),0)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),o=require("react"),a=(e=o)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-router-dom"),n=require("../../../static/loader/LoaderIndicator.js"),m=require("react-i18next"),s=require("react-bootstrap");require("../../../static/index.js"),require("../../order-process/components/NavigationFooter/NavigationFooter.js");var i=require("../../page/components/PageHeader/PageHeader.js"),l=require("@licklist/plugins/dist/context/payment/PaymentSessionContext"),c=require("../../order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock.js"),u=require("../../ryft/RyftPaymentForm.js"),d=require("../../order-process/components/BookingSummary/BookingSummary.js");require("../../order-process/components/NavigationSteps/NavigationSteps.js"),require("../../order-process/components/StepsForm/StepsForm.js"),require("../../order-process/components/Timer/Timer.js"),require("../../order-process/components/PaymentCard/PaymentCard.js");var p=require("../../order-process/components/BookingSummaryFooter/BookingSummaryFooter.js"),y=require("../../page/components/PageBody/PageBody.js");require("../../order-process/components/CalendarStepsForm/CalendarStepsForm.js");var g=require("./PaymentTimer.js"),f=require("../../page/Page.js");exports.PaymentPage=function(e){var B=e.onCloseIframePayment,P=e.onFailIframePayment,k=e.data,E=e.isLoading,S=e.bookingSummaryProps,q=e.paymentMetadata,j=t.__rest(e,["onCloseIframePayment","onFailIframePayment","data","isLoading","bookingSummaryProps","paymentMetadata"]),v=m.useTranslation("Design").t,x=r.useLocation().search,C=o.useContext(l.PaymentSessionContext).isPaymentSessionExpired,b=Boolean(new URLSearchParams(x).get("isIframePayment")),w=function(){window.close()};return o.useEffect((function(){b&&B&&window.addEventListener("beforeunload",(function(){B()}))}),[]),o.useEffect((function(){C&&b&&P&&P()}),[C]),E?a.createElement(n.LoaderIndicator,{isLoaded:!1}):null===k?a.createElement(f.Page,null,a.createElement(y.PageBody,{leftBlock:a.createElement(y.PageBody.LeftBlock,null,a.createElement("div",{className:"d-flex h-100 w-100 justify-content-center align-items-center flex-column"},a.createElement("h6",null,v("linkNotActiveOrExpired")),a.createElement(s.Col,{xs:12,md:3},a.createElement(s.Button,{className:"mt-5 w-20",onClick:function(){window.location.href="https://booked.it/"}},v("backToSite")))))})):a.createElement(f.Page,{className:"payment_link",headerBlock:a.createElement(i.PageHeader,{showBackButton:b,onBackButtonClick:b?w:void 0,showCloseButton:b,onCloseButtonClick:b?w:void 0},
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),o=require("react"),a=(e=o)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-router-dom"),n=require("../../../static/loader/LoaderIndicator.js"),m=require("react-i18next"),s=require("react-bootstrap");require("../../../static/index.js"),require("../../order-process/components/NavigationFooter/NavigationFooter.js");var i=require("../../page/components/PageHeader/PageHeader.js"),l=require("@licklist/plugins/dist/context/payment/PaymentSessionContext"),c=require("../../order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock.js"),u=require("../../ryft/RyftPaymentForm.js"),d=require("../../order-process/components/BookingSummary/BookingSummary.js");require("../../order-process/components/NavigationSteps/NavigationSteps.js"),require("../../order-process/components/StepsForm/StepsForm.js"),require("../../order-process/components/Timer/Timer.js"),require("../../order-process/components/PaymentCard/PaymentCard.js");var p=require("../../order-process/components/BookingSummaryFooter/BookingSummaryFooter.js"),y=require("../../page/components/PageBody/PageBody.js");require("../../order-process/components/CalendarStepsForm/CalendarStepsForm.js");var g=require("./PaymentTimer.js"),f=require("../../page/Page.js");exports.PaymentPage=function(e){var B=e.onCloseIframePayment,P=e.onFailIframePayment,k=e.data,E=e.isLoading,S=e.bookingSummaryProps,q=e.paymentMetadata,j=t.__rest(e,["onCloseIframePayment","onFailIframePayment","data","isLoading","bookingSummaryProps","paymentMetadata"]),v=m.useTranslation("Design").t,x=r.useLocation().search,C=o.useContext(l.PaymentSessionContext).isPaymentSessionExpired,b=Boolean(new URLSearchParams(x).get("isIframePayment")),w=function(){window.close()};return o.useEffect((function(){b&&B&&window.addEventListener("beforeunload",(function(){B()}))}),[]),o.useEffect((function(){C&&b&&P&&P()}),[C]),E?a.createElement(n.LoaderIndicator,{isLoaded:!1}):null===k?a.createElement(f.Page,null,a.createElement(y.PageBody,{leftBlock:a.createElement(y.PageBody.LeftBlock,null,a.createElement("div",{className:"d-flex h-100 w-100 justify-content-center align-items-center flex-column"},a.createElement("h6",null,v("linkNotActiveOrExpired")),a.createElement(s.Col,{xs:12,md:3},a.createElement(s.Button,{className:"mt-5 w-20",onClick:function(){window.location.href="https://booked.it/"}},v("backToSite")))))})):a.createElement(f.Page,{className:"payment_link",headerBlock:a.createElement(i.PageHeader,{showBackButton:b,onBackButtonClick:b?w:void 0,showCloseButton:b,onCloseButtonClick:b?w:void 0},a.createElement(g.PaymentTimer,null),a.createElement("div",{className:"d-flex align-items-center justify-content-center w-100"},v("paymentDetails")))},a.createElement(y.PageBody,{leftBlock:a.createElement(y.PageBody.LeftBlock,null,a.createElement(u.RyftPaymentForm,t.__assign({},j))),rightBlock:a.createElement(y.PageBody.RightBlock,{bottomBlock:a.createElement(p.BookingSummaryFooter,{showButton:!1},a.createElement("div",{className:"d-flex flex-column justify-content-between"},q&&a.createElement(a.Fragment,null,a.createElement(c.SummaryTotalBlock,{label:v("total"),amount:q.total||0}),a.createElement(c.SummaryTotalBlock,{label:v("paidSum"),amount:q.paid||0})),a.createElement(c.SummaryTotalBlock,{label:v(q?"remaining":"total"),amount:(null==k?void 0:k.amount)||0})))},a.createElement("h6",null,v("paymentDetails")),a.createElement(d.BookingSummary,t.__assign({},S)))}))};
|
|
@@ -91,11 +91,9 @@
|
|
|
91
91
|
|
|
92
92
|
&__select-product {
|
|
93
93
|
width: 10.5rem !important;
|
|
94
|
-
margin-top: 1rem;
|
|
95
94
|
}
|
|
96
95
|
|
|
97
96
|
&__unselect-product {
|
|
98
|
-
margin-top: 1rem;
|
|
99
97
|
width: 10.5rem !important;
|
|
100
98
|
background-color: $snippet-elements-button-color !important;
|
|
101
99
|
color: $snippet-elements-button-background-color !important;
|
package/package.json
CHANGED
|
@@ -15,7 +15,6 @@ import { StepsForm } from "./components/StepsForm";
|
|
|
15
15
|
import { Page, PageBody, PageHeader } from "../page";
|
|
16
16
|
import { StepsFormRef } from "./components/StepsForm/StepsForm";
|
|
17
17
|
import { BookingSummaryFooter } from "./components/BookingSummaryFooter";
|
|
18
|
-
import { sanitizeFormValues } from "./components/BookingSummary/utils";
|
|
19
18
|
import { Order } from "../../types";
|
|
20
19
|
// eslint-disable-next-line max-len
|
|
21
20
|
import { RenderNumberOfPeopleInputComponent } from "../event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent";
|
|
@@ -267,10 +266,7 @@ export function Default() {
|
|
|
267
266
|
};
|
|
268
267
|
|
|
269
268
|
const shouldShowPeopleInput = useMemo(() => {
|
|
270
|
-
const
|
|
271
|
-
sanitizeFormValues(formValues);
|
|
272
|
-
|
|
273
|
-
const values = Object.values(orderProducts).filter(
|
|
269
|
+
const values = Object.values(formValues).filter(
|
|
274
270
|
Boolean
|
|
275
271
|
) as Order[];
|
|
276
272
|
const filteredValues = values.filter(
|
|
@@ -347,6 +343,7 @@ export function Default() {
|
|
|
347
343
|
date="29 Sept 2022 at 09:00"
|
|
348
344
|
menuSteps={menuSteps as any}
|
|
349
345
|
formValues={formValues}
|
|
346
|
+
peopleAmount={peopleAmount}
|
|
350
347
|
totalWithDiscount={5}
|
|
351
348
|
eventName="Glam!"
|
|
352
349
|
/>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { Meta } from "@storybook/react";
|
|
3
3
|
import { BookingSummary } from "./BookingSummary";
|
|
4
4
|
|
|
@@ -139,6 +139,7 @@ export function Default() {
|
|
|
139
139
|
<BookingSummary
|
|
140
140
|
date="29 Sept 2022 at 09:00"
|
|
141
141
|
menuSteps={menuSteps as any}
|
|
142
|
+
peopleAmount={5}
|
|
142
143
|
formValues={{
|
|
143
144
|
"3": {
|
|
144
145
|
id: 3,
|
|
@@ -161,7 +162,6 @@ export function Default() {
|
|
|
161
162
|
price: 1,
|
|
162
163
|
productsCategoryId: 1,
|
|
163
164
|
},
|
|
164
|
-
numberOfPeople: 5,
|
|
165
165
|
}}
|
|
166
166
|
totalWithDiscount={5}
|
|
167
167
|
transactionFee={0.01}
|
|
@@ -6,7 +6,6 @@ import { LoaderIndicator } from "../../../../static";
|
|
|
6
6
|
import { MenuStep, Order } from "../../../../types";
|
|
7
7
|
import { ProductsByMenuStep } from "./components/ProductsByMenuStep";
|
|
8
8
|
import { BookingSummaryProps } from "./types";
|
|
9
|
-
import { sanitizeFormValues } from "./utils";
|
|
10
9
|
import { SummaryTotal } from "./components/SummaryTotal";
|
|
11
10
|
import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
|
|
12
11
|
|
|
@@ -20,21 +19,15 @@ export const BookingSummary = ({
|
|
|
20
19
|
productsWithErrors,
|
|
21
20
|
isLoading,
|
|
22
21
|
hasPeopleInput,
|
|
22
|
+
peopleAmount,
|
|
23
23
|
}: Omit<BookingSummaryProps, "totallWithDiscount">) => {
|
|
24
24
|
const { t } = useTranslation("Design");
|
|
25
25
|
const { formatNumber } = useIntl();
|
|
26
26
|
|
|
27
|
-
const
|
|
28
|
-
const
|
|
27
|
+
const orderProducts = useMemo(() => {
|
|
28
|
+
const products = Object.values(formValues).filter(Boolean) as Order[];
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
(productId) => orderProducts[productId]
|
|
32
|
-
) as Order[];
|
|
33
|
-
|
|
34
|
-
return [
|
|
35
|
-
numberOfPeople as number,
|
|
36
|
-
products.filter((prod) => prod.quantity !== 0),
|
|
37
|
-
];
|
|
30
|
+
return products?.filter((prod) => prod?.quantity !== 0);
|
|
38
31
|
}, [formValues]);
|
|
39
32
|
|
|
40
33
|
if (isLoading) {
|
|
@@ -67,12 +60,12 @@ export const BookingSummary = ({
|
|
|
67
60
|
/>
|
|
68
61
|
);
|
|
69
62
|
})}
|
|
70
|
-
{!isNotShownPeopleAmount &&
|
|
63
|
+
{!isNotShownPeopleAmount && peopleAmount > 0 && (
|
|
71
64
|
<>
|
|
72
65
|
<hr />
|
|
73
66
|
<div className="d-flex justify-content-between mt-3">
|
|
74
67
|
<p className="m-0">{t("people")}:</p>
|
|
75
|
-
<p className="price">{
|
|
68
|
+
<p className="price">{peopleAmount}</p>
|
|
76
69
|
</div>
|
|
77
70
|
</>
|
|
78
71
|
)}
|
package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
|
-
import { Order } from "../../../../../../types";
|
|
4
3
|
import { BookingSummaryProps } from "../../types";
|
|
5
|
-
import {
|
|
4
|
+
import { cartSumByOrderProducts } from "../../utils";
|
|
6
5
|
import { SummaryTotalBlock } from "./components/SummaryTotalBlock";
|
|
7
6
|
|
|
8
7
|
export const SummaryTotal = ({
|
|
@@ -15,17 +14,10 @@ export const SummaryTotal = ({
|
|
|
15
14
|
"formValues" | "totalWithDiscount" | "transactionFee" | "isFreePayment"
|
|
16
15
|
>) => {
|
|
17
16
|
const { t } = useTranslation("Design");
|
|
18
|
-
const
|
|
19
|
-
const
|
|
17
|
+
const orderProducts = useMemo(() => {
|
|
18
|
+
const products = Object.values(formValues).filter(Boolean);
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
(productId) => orderProducts[productId]
|
|
23
|
-
) as Order[];
|
|
24
|
-
|
|
25
|
-
return [
|
|
26
|
-
numberOfPeople as number,
|
|
27
|
-
products.filter((prod) => prod.quantity !== 0),
|
|
28
|
-
];
|
|
20
|
+
return products.filter((prod) => prod?.quantity !== 0);
|
|
29
21
|
}, [formValues]);
|
|
30
22
|
|
|
31
23
|
const cartSum = isFreePayment
|
|
@@ -8,7 +8,7 @@ export type BookingSummaryProps = {
|
|
|
8
8
|
date: string;
|
|
9
9
|
menuSteps: MenuStep[];
|
|
10
10
|
formValues: {
|
|
11
|
-
[key: string]: Order
|
|
11
|
+
[key: string]: Order;
|
|
12
12
|
};
|
|
13
13
|
totalWithDiscount?: number;
|
|
14
14
|
isNotShownPeopleAmount?: boolean;
|
|
@@ -18,4 +18,5 @@ export type BookingSummaryProps = {
|
|
|
18
18
|
isFreePayment?: boolean;
|
|
19
19
|
productsWithErrors?: ProductQuantityCheckResponse["products"];
|
|
20
20
|
isLoading?: boolean;
|
|
21
|
+
peopleAmount: number;
|
|
21
22
|
};
|
|
@@ -1,25 +1,4 @@
|
|
|
1
1
|
import { Order } from "../../../../../types";
|
|
2
|
-
import { BookingSummaryProps } from "../types";
|
|
3
|
-
|
|
4
|
-
export const sanitizeFormValues = (
|
|
5
|
-
formValues: BookingSummaryProps["formValues"]
|
|
6
|
-
) =>
|
|
7
|
-
Object.keys(formValues).reduce(
|
|
8
|
-
(
|
|
9
|
-
prevValues: {
|
|
10
|
-
[key: string]: Order | number;
|
|
11
|
-
},
|
|
12
|
-
currentKey: string
|
|
13
|
-
) => {
|
|
14
|
-
const value = formValues[currentKey];
|
|
15
|
-
if (value) {
|
|
16
|
-
return { ...prevValues, [currentKey]: value };
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
return prevValues;
|
|
20
|
-
},
|
|
21
|
-
{}
|
|
22
|
-
);
|
|
23
2
|
|
|
24
3
|
export const cartSumByOrderProducts = (orderProducts: Order[]) =>
|
|
25
4
|
orderProducts.reduce((prevSumValue: number, product) => {
|
|
@@ -174,7 +174,12 @@ const OrderProcessContextProvider: React.FC = ({ children }) => {
|
|
|
174
174
|
|
|
175
175
|
return (
|
|
176
176
|
<OrderProcessContext.Provider
|
|
177
|
-
value={{
|
|
177
|
+
value={{
|
|
178
|
+
orderFormValues,
|
|
179
|
+
setOrderFormValues,
|
|
180
|
+
formValues,
|
|
181
|
+
setFormValues,
|
|
182
|
+
}}
|
|
178
183
|
>
|
|
179
184
|
{children}
|
|
180
185
|
</OrderProcessContext.Provider>
|
|
@@ -403,6 +408,8 @@ const MENU_STEPS = [
|
|
|
403
408
|
|
|
404
409
|
export function Default() {
|
|
405
410
|
const { formValues, setFormValues } = useContext(OrderProcessContext);
|
|
411
|
+
const [peopleAmount] = useState(0);
|
|
412
|
+
|
|
406
413
|
return (
|
|
407
414
|
<div className="snippet">
|
|
408
415
|
<OrderProcessContextProvider>
|
|
@@ -434,6 +441,7 @@ export function Default() {
|
|
|
434
441
|
<BookingSummary
|
|
435
442
|
date="29 Sept 2022 at 09:00"
|
|
436
443
|
menuSteps={menuSteps as any}
|
|
444
|
+
peopleAmount={peopleAmount}
|
|
437
445
|
formValues={formValues}
|
|
438
446
|
totalWithDiscount={5}
|
|
439
447
|
eventName="Glam!"
|
|
@@ -109,7 +109,7 @@ export const PaymentPage = ({
|
|
|
109
109
|
showCloseButton={isIframePayment}
|
|
110
110
|
onCloseButtonClick={isIframePayment ? onGoBack : undefined}
|
|
111
111
|
>
|
|
112
|
-
|
|
112
|
+
<PaymentTimer />
|
|
113
113
|
|
|
114
114
|
<div className="d-flex align-items-center justify-content-center w-100">
|
|
115
115
|
{t("paymentDetails")}
|
|
@@ -91,11 +91,9 @@
|
|
|
91
91
|
|
|
92
92
|
&__select-product {
|
|
93
93
|
width: 10.5rem !important;
|
|
94
|
-
margin-top: 1rem;
|
|
95
94
|
}
|
|
96
95
|
|
|
97
96
|
&__unselect-product {
|
|
98
|
-
margin-top: 1rem;
|
|
99
97
|
width: 10.5rem !important;
|
|
100
98
|
background-color: $snippet-elements-button-color !important;
|
|
101
99
|
color: $snippet-elements-button-background-color !important;
|