@roomstay/frontend 2.6.44 → 2.6.45

package/dist/src/components/generic/BookingWizard/BookingWizard.d.ts

@@ -7,6 +7,10 @@ export declare enum EBookingWizardTheme {
     Default = "default",
     Specific = "specific"
 }
+export declare enum EBookingWizardOverlayDirection {
+    Upward = "upward",
+    Downward = "downward"
+}
 export interface BookingWizardProps extends BookingWizardContentProps {
     layout?: BookingWizardLayout;
     theme?: BookingWizardTheme;
@@ -16,6 +20,7 @@ export interface BookingWizardProps extends BookingWizardContentProps {
     selectedProperty: BookingWizardProperty;
     defaultColors: BookingWizardProperty['colors'];
     onSubmit: BookingWizardContextType['onSubmit'];
+    overlayDirection?: EBookingWizardOverlayDirection;
 }
 declare const BookingWizard: React.FC<BookingWizardProps>;
 export default BookingWizard;

package/dist/src/components/generic/BookingWizard/BookingWizard.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EBookingWizardTheme = void 0;
+exports.EBookingWizardOverlayDirection = exports.EBookingWizardTheme = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
@@ -45,8 +45,13 @@ var EBookingWizardTheme;
     EBookingWizardTheme["Default"] = "default";
     EBookingWizardTheme["Specific"] = "specific";
 })(EBookingWizardTheme = exports.EBookingWizardTheme || (exports.EBookingWizardTheme = {}));
+var EBookingWizardOverlayDirection;
+(function (EBookingWizardOverlayDirection) {
+    EBookingWizardOverlayDirection["Upward"] = "upward";
+    EBookingWizardOverlayDirection["Downward"] = "downward";
+})(EBookingWizardOverlayDirection = exports.EBookingWizardOverlayDirection || (exports.EBookingWizardOverlayDirection = {}));
 const BookingWizard = (props) => {
-    const { layout = 'horizontal', theme = EBookingWizardTheme.Default, onSubmit, wrapperClassname, contentClassname: contentClassnameProps, selectedProperty, properties, defaultColors, maxAdults, disableChild, showInfants, disableRoom, hideGuestSelect, hidePromocode, hideProperty, defaultValues, } = props;
+    const { layout = 'horizontal', theme = EBookingWizardTheme.Default, onSubmit, wrapperClassname, contentClassname: contentClassnameProps, selectedProperty, properties, defaultColors, maxAdults, disableChild, showInfants, disableRoom, hideGuestSelect, hidePromocode, hideProperty, defaultValues, overlayDirection = EBookingWizardOverlayDirection.Downward, } = props;
     const [isOpen, setIsOpen] = react_1.default.useState(false);
     const { isMobile } = (0, WindowSize_1.useWindowSize)();
     const { t } = (0, react_i18next_1.useTranslation)();
@@ -74,10 +79,10 @@ const BookingWizard = (props) => {
     }, [layout, isMobile, isSmallContainer]);
     (0, react_1.useEffect)(() => {
         if (!isMobile) {
-            setOverlayPlacement('bottom-start');
+            setOverlayPlacement(overlayDirection === EBookingWizardOverlayDirection.Downward ? 'bottom-start' : 'top-start');
         }
         else {
-            setOverlayPlacement('bottom');
+            setOverlayPlacement(overlayDirection === EBookingWizardOverlayDirection.Downward ? 'bottom' : 'top');
         }
     }, [isMobile]);
     const classes = (0, classnames_1.default)(BookingWizard_module_scss_1.default.container, {

package/dist/src/components/generic/BookingWizard/BookingWizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BookingWizard.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport useMeasure from 'react-use-measure';\n\nimport BEButton from '@/components/generic/BEButton';\nimport { BookingWizardContent, BookingWizardContentProps } from '@/components/generic/BookingWizard/BookingWizardContent';\nimport {\n    BookingWizardContext,\n    BookingWizardContextType,\n    BookingWizardLayout,\n    BookingWizardOverlayType,\n    BookingWizardTheme,\n} from '@/components/generic/BookingWizard/BookingWizardContext';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport { BookingWizardProperty } from '@/models/BookingWizard/BookingWizardProperty';\nimport { TBookingWizardProperties } from '@/models/BookingWizard/BookingWizardTypes';\nimport { Translation } from '@/translations/Translation';\nimport ScreenSize from '@/util/ScreenSize';\n\nimport styles from './BookingWizard.module.scss';\n\nexport enum EBookingWizardTheme {\n    Default = 'default',\n    Specific = 'specific',\n}\n\nexport interface BookingWizardProps extends BookingWizardContentProps {\n    layout?: BookingWizardLayout;\n    theme?: BookingWizardTheme;\n\n    wrapperClassname?: string;\n    contentClassname?: string;\n\n    properties: TBookingWizardProperties;\n    selectedProperty: BookingWizardProperty;\n    defaultColors: BookingWizardProperty['colors'];\n    onSubmit: BookingWizardContextType['onSubmit'];\n}\n\nconst BookingWizard: React.FC<BookingWizardProps> = (props) => {\n    const {\n        layout = 'horizontal',\n        theme = EBookingWizardTheme.Default,\n        onSubmit,\n        wrapperClassname,\n        contentClassname: contentClassnameProps,\n        selectedProperty,\n        properties,\n        defaultColors,\n        maxAdults,\n        disableChild,\n        showInfants,\n        disableRoom,\n        hideGuestSelect,\n        hidePromocode,\n        hideProperty,\n        defaultValues,\n    } = props;\n    const [isOpen, setIsOpen] = React.useState(false);\n\n    const { isMobile } = useWindowSize();\n    const { t } = useTranslation();\n    const [ref, bounds] = useMeasure({ debounce: 300 });\n\n    const [compOverlayType, setCompOverlayType] = useState<BookingWizardOverlayType>('popup');\n    const [overlayOffset, setOverlayOffset] = useState<[number, number]>();\n    const [dateSelectorOverlayOffset, setDateSelectorOverlayOffset] = useState<[number, number]>();\n    const [overlayPlacement, setOverlayPlacement] = useState<Placement>();\n\n    const isSmallContainer = useMemo(() => {\n        if (!bounds.width) return false;\n        return bounds.width <= ScreenSize.Medium;\n    }, [bounds]);\n\n    useEffect(() => {\n        if ((layout === 'horizontal' || layout === 'horizontal-condensed') && !isMobile) {\n            setOverlayOffset([0, 6]);\n            setDateSelectorOverlayOffset([0, 6]);\n            setCompOverlayType('popup');\n        } else {\n            setOverlayOffset([0, 10]);\n            setDateSelectorOverlayOffset([0, -8]);\n            setCompOverlayType('bottom-sheet');\n        }\n    }, [layout, isMobile, isSmallContainer]);\n\n    useEffect(() => {\n        if (!isMobile) {\n            setOverlayPlacement('bottom-start');\n        } else {\n            setOverlayPlacement('bottom');\n        }\n    }, [isMobile]);\n\n    const classes = classNames(\n        styles.container,\n        {\n            [styles['--theme-specific']]: theme === EBookingWizardTheme.Specific,\n            [styles['--theme-default']]: theme === EBookingWizardTheme.Default,\n            [styles['--theme-condensed']]: layout === 'horizontal-condensed',\n            [styles['--in-small-container']]: isSmallContainer,\n        },\n        wrapperClassname\n    );\n\n    const contentClassname = classNames(contentClassnameProps, { [styles['--in-small-container']]: isSmallContainer });\n\n    const bookingWizardContext: BookingWizardContextType = {\n        layout,\n        theme,\n        type: compOverlayType,\n        className: classes,\n        isMobile,\n        isSmallContainer,\n\n        onSubmit,\n\n        overlay: {\n            offset: overlayOffset,\n            placement: overlayPlacement,\n            fallbackPlacements: overlayPlacement,\n            dateOffset: dateSelectorOverlayOffset,\n        },\n    };\n\n    if (layout === 'button') {\n        return (\n            <div className={classes}>\n                <BEButton className={styles.bookNowBtn} onClick={() => setIsOpen(true)}>\n                    {t(Translation.Misc.BookNow)}\n                </BEButton>\n\n                <SimpleModal className={styles.container} size={SimpleModalSize.ExtraSmall} open={isOpen} onClose={() => setIsOpen(false)} alignCenter overflowVisible>\n                    <div>\n                        <div className={styles.title}>\n                            <span>{t(Translation.Misc.BookAHotel)}</span>\n                            <Icon className={styles.closeBtn} icon={IconType.Close} size=\"24px\" onClick={() => setIsOpen(false)} />\n                        </div>\n                        <BookingWizardContext.Provider value={bookingWizardContext}>\n                            <div className={classes}>\n                                <BookingWizardContent\n                                    properties={properties}\n                                    selectedProperty={selectedProperty}\n                                    defaultColors={defaultColors}\n                                    classname={contentClassname}\n                                    maxAdults={maxAdults}\n                                    disableChild={disableChild}\n                                    showInfants={showInfants}\n                                    disableRoom={disableRoom}\n                                    defaultValues={defaultValues}\n                                    hideGuestSelect={hideGuestSelect}\n                                    hidePromocode={hidePromocode}\n                                    hideProperty={hideProperty}\n                                />\n                            </div>\n                        </BookingWizardContext.Provider>\n                    </div>\n                </SimpleModal>\n            </div>\n        );\n    }\n\n    return (\n        <div ref={ref} className={classes}>\n            <BookingWizardContext.Provider value={bookingWizardContext}>\n                <BookingWizardContent {...props} classname={contentClassname} disableChild={disableChild} disableRoom={disableRoom} defaultValues={defaultValues} />\n            </BookingWizardContext.Provider>\n        </div>\n    );\n};\n\nexport default BookingWizard;\n"]}
+{"version":3,"file":"BookingWizard.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport useMeasure from 'react-use-measure';\n\nimport BEButton from '@/components/generic/BEButton';\nimport { BookingWizardContent, BookingWizardContentProps } from '@/components/generic/BookingWizard/BookingWizardContent';\nimport {\n    BookingWizardContext,\n    BookingWizardContextType,\n    BookingWizardLayout,\n    BookingWizardOverlayType,\n    BookingWizardTheme,\n} from '@/components/generic/BookingWizard/BookingWizardContext';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport { BookingWizardProperty } from '@/models/BookingWizard/BookingWizardProperty';\nimport { TBookingWizardProperties } from '@/models/BookingWizard/BookingWizardTypes';\nimport { Translation } from '@/translations/Translation';\nimport ScreenSize from '@/util/ScreenSize';\n\nimport styles from './BookingWizard.module.scss';\n\nexport enum EBookingWizardTheme {\n    Default = 'default',\n    Specific = 'specific',\n}\n\nexport enum EBookingWizardOverlayDirection {\n    Upward = 'upward',\n    Downward = 'downward',\n}\n\nexport interface BookingWizardProps extends BookingWizardContentProps {\n    layout?: BookingWizardLayout;\n    theme?: BookingWizardTheme;\n\n    wrapperClassname?: string;\n    contentClassname?: string;\n\n    properties: TBookingWizardProperties;\n    selectedProperty: BookingWizardProperty;\n    defaultColors: BookingWizardProperty['colors'];\n    onSubmit: BookingWizardContextType['onSubmit'];\n\n    overlayDirection?: EBookingWizardOverlayDirection;\n}\n\nconst BookingWizard: React.FC<BookingWizardProps> = (props) => {\n    const {\n        layout = 'horizontal',\n        theme = EBookingWizardTheme.Default,\n        onSubmit,\n        wrapperClassname,\n        contentClassname: contentClassnameProps,\n        selectedProperty,\n        properties,\n        defaultColors,\n        maxAdults,\n        disableChild,\n        showInfants,\n        disableRoom,\n        hideGuestSelect,\n        hidePromocode,\n        hideProperty,\n        defaultValues,\n        overlayDirection = EBookingWizardOverlayDirection.Downward,\n    } = props;\n    const [isOpen, setIsOpen] = React.useState(false);\n\n    const { isMobile } = useWindowSize();\n    const { t } = useTranslation();\n    const [ref, bounds] = useMeasure({ debounce: 300 });\n\n    const [compOverlayType, setCompOverlayType] = useState<BookingWizardOverlayType>('popup');\n    const [overlayOffset, setOverlayOffset] = useState<[number, number]>();\n    const [dateSelectorOverlayOffset, setDateSelectorOverlayOffset] = useState<[number, number]>();\n    const [overlayPlacement, setOverlayPlacement] = useState<Placement>();\n\n    const isSmallContainer = useMemo(() => {\n        if (!bounds.width) return false;\n        return bounds.width <= ScreenSize.Medium;\n    }, [bounds]);\n\n    useEffect(() => {\n        if ((layout === 'horizontal' || layout === 'horizontal-condensed') && !isMobile) {\n            setOverlayOffset([0, 6]);\n            setDateSelectorOverlayOffset([0, 6]);\n            setCompOverlayType('popup');\n        } else {\n            setOverlayOffset([0, 10]);\n            setDateSelectorOverlayOffset([0, -8]);\n            setCompOverlayType('bottom-sheet');\n        }\n    }, [layout, isMobile, isSmallContainer]);\n\n    useEffect(() => {\n        if (!isMobile) {\n            setOverlayPlacement(overlayDirection === EBookingWizardOverlayDirection.Downward ? 'bottom-start' : 'top-start');\n        } else {\n            setOverlayPlacement(overlayDirection === EBookingWizardOverlayDirection.Downward ? 'bottom' : 'top');\n        }\n    }, [isMobile]);\n\n    const classes = classNames(\n        styles.container,\n        {\n            [styles['--theme-specific']]: theme === EBookingWizardTheme.Specific,\n            [styles['--theme-default']]: theme === EBookingWizardTheme.Default,\n            [styles['--theme-condensed']]: layout === 'horizontal-condensed',\n            [styles['--in-small-container']]: isSmallContainer,\n        },\n        wrapperClassname\n    );\n\n    const contentClassname = classNames(contentClassnameProps, { [styles['--in-small-container']]: isSmallContainer });\n\n    const bookingWizardContext: BookingWizardContextType = {\n        layout,\n        theme,\n        type: compOverlayType,\n        className: classes,\n        isMobile,\n        isSmallContainer,\n\n        onSubmit,\n\n        overlay: {\n            offset: overlayOffset,\n            placement: overlayPlacement,\n            fallbackPlacements: overlayPlacement,\n            dateOffset: dateSelectorOverlayOffset,\n        },\n    };\n\n    if (layout === 'button') {\n        return (\n            <div className={classes}>\n                <BEButton className={styles.bookNowBtn} onClick={() => setIsOpen(true)}>\n                    {t(Translation.Misc.BookNow)}\n                </BEButton>\n\n                <SimpleModal className={styles.container} size={SimpleModalSize.ExtraSmall} open={isOpen} onClose={() => setIsOpen(false)} alignCenter overflowVisible>\n                    <div>\n                        <div className={styles.title}>\n                            <span>{t(Translation.Misc.BookAHotel)}</span>\n                            <Icon className={styles.closeBtn} icon={IconType.Close} size=\"24px\" onClick={() => setIsOpen(false)} />\n                        </div>\n                        <BookingWizardContext.Provider value={bookingWizardContext}>\n                            <div className={classes}>\n                                <BookingWizardContent\n                                    properties={properties}\n                                    selectedProperty={selectedProperty}\n                                    defaultColors={defaultColors}\n                                    classname={contentClassname}\n                                    maxAdults={maxAdults}\n                                    disableChild={disableChild}\n                                    showInfants={showInfants}\n                                    disableRoom={disableRoom}\n                                    defaultValues={defaultValues}\n                                    hideGuestSelect={hideGuestSelect}\n                                    hidePromocode={hidePromocode}\n                                    hideProperty={hideProperty}\n                                />\n                            </div>\n                        </BookingWizardContext.Provider>\n                    </div>\n                </SimpleModal>\n            </div>\n        );\n    }\n\n    return (\n        <div ref={ref} className={classes}>\n            <BookingWizardContext.Provider value={bookingWizardContext}>\n                <BookingWizardContent {...props} classname={contentClassname} disableChild={disableChild} disableRoom={disableRoom} defaultValues={defaultValues} />\n            </BookingWizardContext.Provider>\n        </div>\n    );\n};\n\nexport default BookingWizard;\n"]}

package/dist/src/components/steps/confirmation/AdyenPaymentOption/AdyenPaymentOption.d.ts

@@ -0,0 +1,4 @@
+import '@adyen/adyen-web/styles/adyen.css';
+import './Adyen.global.scss';
+import React from 'react';
+export declare const AdyenPaymentOption: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;

package/dist/src/components/steps/confirmation/AdyenPaymentOption/AdyenPaymentOption.js

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdyenPaymentOption = void 0;
+require("@adyen/adyen-web/styles/adyen.css");
+require("./Adyen.global.scss");
+const auto_1 = require("@adyen/adyen-web/auto");
+const contexts_1 = require("../../../../contexts/index.js");
+const react_1 = __importStar(require("react"));
+const Headline_1 = __importDefault(require("../../../generic/Headline"));
+let paymentResolveFunction;
+let paymentPromise;
+exports.AdyenPaymentOption = (0, react_1.forwardRef)(function ForwardedAdyenPaymentOption(props, ref) {
+    var _a, _b;
+    const adyenTarget = (0, react_1.useRef)(null);
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const [adyenDropin, setAdyenDropin] = (0, react_1.useState)(null);
+    const adyenCheckoutResponse = (_b = (_a = basketContext.reservationData) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.adyen;
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        submitPayment() {
+            return __awaiter(this, void 0, void 0, function* () {
+                return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                    if (adyenDropin) {
+                        adyenDropin.submit();
+                        // Adyen's types are weird.
+                        const response = (yield paymentPromise);
+                        if (response && response.resultCode !== 'Authorised') {
+                            return resolve({
+                                success: false,
+                                message: 'Payment failed to authorize',
+                                data: { sessionData: response.sessionData, sessionResponse: response.sessionResult },
+                            });
+                        }
+                        resolve({ success: true, message: 'Payment successful' });
+                    }
+                }));
+            });
+        },
+    }));
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        let adyenCheckoutObj;
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            if (!adyenCheckoutResponse || !adyenTarget.current || cancelled || !(adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.sessionId) || !(adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.sessionData)) {
+                return;
+            }
+            // Sometimes the useEffect cancel isn't called, so if we're here with an existing adyen dropin, we should unmount it.
+            if (adyenDropin) {
+                adyenDropin.unmount();
+            }
+            paymentPromise = new Promise((resolve) => {
+                paymentResolveFunction = resolve;
+            });
+            adyenCheckoutObj = yield (0, auto_1.AdyenCheckout)({
+                session: {
+                    id: (_a = adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.sessionId) !== null && _a !== void 0 ? _a : '',
+                    sessionData: adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.sessionData,
+                },
+                environment: adyenCheckoutResponse.isLive ? 'live' : 'test',
+                amount: {
+                    currency: (_b = adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.currency) !== null && _b !== void 0 ? _b : '',
+                    value: parseFloat((_c = adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.amount) !== null && _c !== void 0 ? _c : '0') * 100,
+                },
+                clientKey: (_d = adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.clientKey) !== null && _d !== void 0 ? _d : '',
+                countryCode: adyenCheckoutResponse === null || adyenCheckoutResponse === void 0 ? void 0 : adyenCheckoutResponse.countryCode,
+                onPaymentCompleted: (result) => {
+                    paymentResolveFunction(result);
+                },
+                onPaymentFailed: (result, component) => {
+                    component === null || component === void 0 ? void 0 : component.setStatus('error', { message: 'Payment failed to process' });
+                    paymentResolveFunction(result);
+                },
+                showPayButton: false,
+            });
+            if (adyenTarget.current) {
+                const dropin = new auto_1.Dropin(adyenCheckoutObj);
+                dropin.mount(adyenTarget.current);
+                setAdyenDropin(dropin);
+            }
+        }))();
+        return () => {
+            cancelled = true;
+            if (adyenDropin) {
+                adyenDropin.unmount();
+            }
+        };
+    }, [adyenTarget, adyenCheckoutResponse]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+            react_1.default.createElement(Headline_1.default, { bold: true }, "Choose your payment method")),
+        react_1.default.createElement("div", { ref: adyenTarget, id: "dropin-container" })));
+});
+//# sourceMappingURL=AdyenPaymentOption.js.map

package/dist/src/components/steps/confirmation/AdyenPaymentOption/AdyenPaymentOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdyenPaymentOption.js","sourceRoot":"/","sources":["src/components/steps/confirmation/AdyenPaymentOption/AdyenPaymentOption.tsx"],"names":[],"mappings":"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","sourcesContent":["import '@adyen/adyen-web/styles/adyen.css';\nimport './Adyen.global.scss';\n\nimport { AdyenCheckout, Dropin, PaymentCompletedData, PaymentFailedData, SessionsResponse } from '@adyen/adyen-web/auto';\nimport { BasketContext } from '@frontend/contexts';\nimport React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport Headline from '@/components/generic/Headline';\nimport { PaymentHandlerElementRef } from '@/handlers/payment/PaymentHandler';\n\nlet paymentResolveFunction: (value: PaymentCompletedData | PaymentFailedData | undefined) => void;\nlet paymentPromise: Promise<PaymentCompletedData | PaymentFailedData | undefined>;\n\nexport const AdyenPaymentOption = forwardRef(function ForwardedAdyenPaymentOption(props: any, ref: any) {\n    const adyenTarget = useRef(null);\n    const basketContext = useContext(BasketContext);\n    const [adyenDropin, setAdyenDropin] = useState<Dropin | null>(null);\n\n    const adyenCheckoutResponse = basketContext.reservationData?.payment?.adyen;\n\n    useImperativeHandle<PaymentHandlerElementRef, PaymentHandlerElementRef>(ref, () => ({\n        async submitPayment() {\n            return new Promise(async (resolve) => {\n                if (adyenDropin) {\n                    adyenDropin.submit();\n\n                    // Adyen's types are weird.\n                    const response = (await paymentPromise) as SessionsResponse;\n\n                    if (response && response.resultCode !== 'Authorised') {\n                        return resolve({\n                            success: false,\n                            message: 'Payment failed to authorize',\n                            data: { sessionData: response.sessionData, sessionResponse: response.sessionResult },\n                        });\n                    }\n\n                    resolve({ success: true, message: 'Payment successful' });\n                }\n            });\n        },\n    }));\n\n    useEffect(() => {\n        let cancelled = false;\n\n        let adyenCheckoutObj: Awaited<ReturnType<typeof AdyenCheckout>>;\n        (async () => {\n            if (!adyenCheckoutResponse || !adyenTarget.current || cancelled || !adyenCheckoutResponse?.sessionId || !adyenCheckoutResponse?.sessionData) {\n                return;\n            }\n\n            // Sometimes the useEffect cancel isn't called, so if we're here with an existing adyen dropin, we should unmount it.\n            if (adyenDropin) {\n                adyenDropin.unmount();\n            }\n\n            paymentPromise = new Promise((resolve) => {\n                paymentResolveFunction = resolve;\n            });\n\n            adyenCheckoutObj = await AdyenCheckout({\n                session: {\n                    id: adyenCheckoutResponse?.sessionId ?? '',\n                    sessionData: adyenCheckoutResponse?.sessionData,\n                },\n                environment: adyenCheckoutResponse.isLive ? 'live' : 'test',\n                amount: {\n                    currency: adyenCheckoutResponse?.currency ?? '',\n                    value: parseFloat(adyenCheckoutResponse?.amount ?? '0') * 100,\n                },\n                clientKey: adyenCheckoutResponse?.clientKey ?? '',\n                countryCode: adyenCheckoutResponse?.countryCode,\n                onPaymentCompleted: (result) => {\n                    paymentResolveFunction(result);\n                },\n                onPaymentFailed: (result, component) => {\n                    component?.setStatus('error', { message: 'Payment failed to process' });\n\n                    paymentResolveFunction(result);\n                },\n                showPayButton: false,\n            });\n\n            if (adyenTarget.current) {\n                const dropin = new Dropin(adyenCheckoutObj);\n                dropin.mount(adyenTarget.current as HTMLElement);\n                setAdyenDropin(dropin);\n            }\n        })();\n\n        return () => {\n            cancelled = true;\n\n            if (adyenDropin) {\n                adyenDropin.unmount();\n            }\n        };\n    }, [adyenTarget, adyenCheckoutResponse]);\n\n    return (\n        <>\n            <div className=\"u-marg-bottom--heavy\">\n                <Headline bold>Choose your payment method</Headline>\n            </div>\n            <div ref={adyenTarget} id=\"dropin-container\"></div>\n        </>\n    );\n});\n"]}

package/dist/src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.js

@@ -128,7 +128,7 @@ exports.StepConfirmationVGSPaymentInput = (0, react_1.forwardRef)(function Forwa
         }
     }, [errors]);
     (0, react_1.useImperativeHandle)(ref, () => ({
-        getTokenizedCode: () => new Promise((resolve, reject) => {
+        submitPayment: () => new Promise((resolve, reject) => {
             if (vgsForm) {
                 vgsForm.submit('/post', {
                     serializer: 'deep',
@@ -153,7 +153,11 @@ exports.StepConfirmationVGSPaymentInput = (0, react_1.forwardRef)(function Forwa
                         Number: cardData['credit-card'],
                         Type: cardNumber.state.cardType,
                     };
-                    resolve(card);
+                    resolve({
+                        success: true,
+                        message: 'Payment successful',
+                        data: { PaymentCard: card },
+                    });
                 }, (error) => {
                     setErrorsOnFaults(error);
                     reject(error);

package/dist/src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationPaymentDetails.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCurrentHotel, useWindowScroll } from '@frontend/hooks';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\nimport PaymentCard from '@/models/PaymentCard';\n\nexport const StepConfirmationVGSPaymentInput = forwardRef(function ForwardedStepConfirmationVGSPaymentInput(props: any, ref: any) {\n    const { hotel } = useCurrentHotel();\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n\n    const { t } = useTranslation();\n\n    const { focusElement } = useWindowScroll();\n\n    const vgsInputCss = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, nameOnCard, expirationDate, securityCode],\n        vgsForm,\n    } = useVgsCollect([\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n            name: 'credit-card',\n            type: 'card-number',\n            vgsProps: {\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardNumber) + ' *',\n                validations: ['required', 'validCardNumber'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n            name: 'card-name',\n            type: 'text',\n            vgsProps: {\n                validations: ['required'],\n                css: vgsInputCss,\n                placeholder: t(Translation.Step.Confirmation.Inputs.NameOnCard) + ' *',\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n            name: 'expiration-date',\n            type: 'card-expiration-date',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardExpiry) + ' *',\n                validations: ['required', 'validCardExpirationDate'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n            name: 'security-code',\n            type: 'card-security-code',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.SecurityCode) + ' *',\n                validations: ['required', 'validCardSecurityCode'],\n                css: vgsInputCss,\n            },\n        },\n    ]);\n\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = t(Translation.Step.Confirmation.Inputs.CardNumber);\n                    break;\n                case 'expiration-date':\n                    name = t(Translation.Step.Confirmation.Inputs.CardExpiry);\n                    break;\n                case 'security-code':\n                    name = t(Translation.Step.Confirmation.Inputs.SecurityCode);\n                    break;\n                default:\n                    name = t(Translation.Step.Confirmation.Inputs.NameOnCard);\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    useEffect(() => {\n        if (errors && Object.keys(errors).length !== 0 && cardNumber?.ref?.current) {\n            focusElement(cardNumber?.ref?.current);\n        }\n    }, [errors]);\n\n    useImperativeHandle(ref, () => ({\n        getTokenizedCode: () =>\n            new Promise<PaymentCard | IRoomstayMemberCards>((resolve, reject) => {\n                if (vgsForm) {\n                    vgsForm.submit(\n                        '/post',\n                        {\n                            serializer: 'deep',\n                            methods: 'POST',\n                        },\n                        (status: any, response: any) => {\n                            const cardData = response;\n                            const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                            if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                                setErrorsOnFaults({\n                                    'expiration-date': {\n                                        errorMessages: [t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid)],\n                                    },\n                                });\n                                reject(t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid));\n                                return;\n                            }\n\n                            const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n\n                            const card: any = {\n                                CVV: cardData['security-code'],\n                                Expiry: expiration,\n                                Name: cardData['card-name'],\n                                Number: cardData['credit-card'],\n                                Type: cardNumber.state.cardType,\n                            };\n\n                            resolve(card);\n                        },\n                        (error: any) => {\n                            setErrorsOnFaults(error);\n                            reject(error);\n                        }\n                    );\n                } else {\n                    console.error('VGS not on element, problem has occurred');\n                }\n            }),\n    }));\n\n    const formRef = useRef(null);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n\n    return (\n        <div>\n            {inputNames.map((name) => {\n                const errorMessage = errors[name];\n                return (\n                    <AutoAutoHeight open={!!errorMessage} key={name}>\n                        <div className=\"u-flex\">\n                            <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                <Text type={TextType.Small}>{errorMessage}</Text>\n                            </Alert>\n                        </div>\n                    </AutoAutoHeight>\n                );\n            })}\n            <div className=\"u-marg-bottom\">\n                <AcceptablePaymentCard\n                    isCurrent={(cardKey: any) => {\n                        return cardNumber.state.cardType !== null && cardTypes[cardKey]?.name === cardNumber.state.cardType;\n                    }}\n                    isDefault={(cardKey: any) => {\n                        return cardNumber.state.cardType === null;\n                    }}\n                />\n            </div>\n            <form ref={formRef}>\n                <InputGroup dimensions=\"2/2\">\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                    <InputGroup dimensions=\"2/2\">\n                        <div className={expirationDate.getClasses()} ref={expirationDate.ref} />\n                        <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                    </InputGroup>\n                </InputGroup>\n                <InputGroup dimensions=\"1\">\n                    <div className={nameOnCard.getClasses()} ref={nameOnCard.ref} />\n                </InputGroup>\n            </form>\n        </div>\n    );\n});\n"]}
+{"version":3,"file":"StepConfirmationPaymentDetails.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCurrentHotel, useWindowScroll } from '@frontend/hooks';\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { PaymentHandlerElementRef } from '@/handlers/payment/PaymentHandler';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\n\nexport const StepConfirmationVGSPaymentInput = forwardRef(function ForwardedStepConfirmationVGSPaymentInput(props: any, ref: any) {\n    const { hotel } = useCurrentHotel();\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n\n    const { t } = useTranslation();\n\n    const { focusElement } = useWindowScroll();\n\n    const vgsInputCss = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, nameOnCard, expirationDate, securityCode],\n        vgsForm,\n    } = useVgsCollect([\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n            name: 'credit-card',\n            type: 'card-number',\n            vgsProps: {\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardNumber) + ' *',\n                validations: ['required', 'validCardNumber'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n            name: 'card-name',\n            type: 'text',\n            vgsProps: {\n                validations: ['required'],\n                css: vgsInputCss,\n                placeholder: t(Translation.Step.Confirmation.Inputs.NameOnCard) + ' *',\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n            name: 'expiration-date',\n            type: 'card-expiration-date',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardExpiry) + ' *',\n                validations: ['required', 'validCardExpirationDate'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n            name: 'security-code',\n            type: 'card-security-code',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.SecurityCode) + ' *',\n                validations: ['required', 'validCardSecurityCode'],\n                css: vgsInputCss,\n            },\n        },\n    ]);\n\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = t(Translation.Step.Confirmation.Inputs.CardNumber);\n                    break;\n                case 'expiration-date':\n                    name = t(Translation.Step.Confirmation.Inputs.CardExpiry);\n                    break;\n                case 'security-code':\n                    name = t(Translation.Step.Confirmation.Inputs.SecurityCode);\n                    break;\n                default:\n                    name = t(Translation.Step.Confirmation.Inputs.NameOnCard);\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    useEffect(() => {\n        if (errors && Object.keys(errors).length !== 0 && cardNumber?.ref?.current) {\n            focusElement(cardNumber?.ref?.current);\n        }\n    }, [errors]);\n\n    useImperativeHandle<PaymentHandlerElementRef, PaymentHandlerElementRef>(ref, () => ({\n        submitPayment: () =>\n            new Promise((resolve, reject) => {\n                if (vgsForm) {\n                    vgsForm.submit(\n                        '/post',\n                        {\n                            serializer: 'deep',\n                            methods: 'POST',\n                        },\n                        (status: any, response: any) => {\n                            const cardData = response;\n                            const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                            if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                                setErrorsOnFaults({\n                                    'expiration-date': {\n                                        errorMessages: [t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid)],\n                                    },\n                                });\n                                reject(t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid));\n                                return;\n                            }\n\n                            const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n\n                            const card: any = {\n                                CVV: cardData['security-code'],\n                                Expiry: expiration,\n                                Name: cardData['card-name'],\n                                Number: cardData['credit-card'],\n                                Type: cardNumber.state.cardType,\n                            };\n\n                            resolve({\n                                success: true,\n                                message: 'Payment successful',\n                                data: { PaymentCard: card },\n                            });\n                        },\n                        (error: any) => {\n                            setErrorsOnFaults(error);\n                            reject(error);\n                        }\n                    );\n                } else {\n                    console.error('VGS not on element, problem has occurred');\n                }\n            }),\n    }));\n\n    const formRef = useRef(null);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n\n    return (\n        <div>\n            {inputNames.map((name) => {\n                const errorMessage = errors[name];\n                return (\n                    <AutoAutoHeight open={!!errorMessage} key={name}>\n                        <div className=\"u-flex\">\n                            <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                <Text type={TextType.Small}>{errorMessage}</Text>\n                            </Alert>\n                        </div>\n                    </AutoAutoHeight>\n                );\n            })}\n            <div className=\"u-marg-bottom\">\n                <AcceptablePaymentCard\n                    isCurrent={(cardKey: any) => {\n                        return cardNumber.state.cardType !== null && cardTypes[cardKey]?.name === cardNumber.state.cardType;\n                    }}\n                    isDefault={(cardKey: any) => {\n                        return cardNumber.state.cardType === null;\n                    }}\n                />\n            </div>\n            <form ref={formRef}>\n                <InputGroup dimensions=\"2/2\">\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                    <InputGroup dimensions=\"2/2\">\n                        <div className={expirationDate.getClasses()} ref={expirationDate.ref} />\n                        <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                    </InputGroup>\n                </InputGroup>\n                <InputGroup dimensions=\"1\">\n                    <div className={nameOnCard.getClasses()} ref={nameOnCard.ref} />\n                </InputGroup>\n            </form>\n        </div>\n    );\n});\n"]}

package/dist/src/components/steps/confirmation/PaymentInformation.d.ts

@@ -1,8 +1,2 @@
-import { EBookingPaymentMethod } from '@roomstay/core';
-import { FC } from 'react';
-interface PaymentInformationProps {
-    tokenizerRef: any;
-    onChangeCb: (code: EBookingPaymentMethod) => void;
-}
-declare const PaymentInformation: FC<PaymentInformationProps>;
+declare const PaymentInformation: () => JSX.Element;
 export default PaymentInformation;

package/dist/src/components/steps/confirmation/PaymentInformation.js

@@ -26,83 +26,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("@roomstay/core");
-const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const InlinePaymentOption_1 = __importDefault(require("../../generic/PaymentCard/InlinePaymentOption"));
 const RadioButtonGroup_1 = __importDefault(require("../../generic/RadioButtonGroup/RadioButtonGroup"));
-const StepConfirmationPaymentDetails_1 = require("./PaymentDetails/StepConfirmationPaymentDetails");
-const PlanpayLabel_1 = __importDefault(require("./PlanpayLabel"));
-const PlanpayPaymentMethod_1 = require("./PlanpayPaymentMethod");
-const contexts_1 = require("../../../contexts");
-const hooks_1 = require("../../../hooks");
-const Planpay_1 = __importDefault(require("../../../hooks/Planpay"));
-const Translation_1 = require("../../../translations/Translation");
-const PaymentInformation = ({ tokenizerRef, onChangeCb }) => {
-    var _a;
+const ConfirmationStepContext_1 = require("../../../contexts/ConfirmationStepContext/ConfirmationStepContext");
+const PaymentInformation = () => {
     const methods = (0, react_hook_form_1.useFormContext)();
-    const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const basketContext = (0, contexts_1.useBasket)();
-    const { hasPricePreview, planpayConfig } = (0, Planpay_1.default)();
-    const { cards = [], roomstayMember } = (0, contexts_1.useMemberContext)();
-    const defaultCard = (0, react_1.useMemo)(() => cards.find((card) => card.cardId === (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard)), [cards, roomstayMember]);
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { currentCurrency } = (0, react_1.useContext)(contexts_1.CompanyContext);
-    const paymentMethod = methods.watch('paymentMethod');
-    // TODO: while we figure out how to handle member cards we'll just disable this for non-passthrough paymets
-    const isPassthrough = (hotel === null || hotel === void 0 ? void 0 : hotel.cardProcessor) ? hotel.cardProcessor === core_1.EHotelCardProcessor.Passthrough : true;
-    const vgsCardInputOption = {
-        value: core_1.EBookingPaymentMethod.Card,
-        label: (react_1.default.createElement(InlinePaymentOption_1.default, { active: paymentMethod === core_1.EBookingPaymentMethod.Card, overrideSubLabel: isPassthrough ? undefined : t(Translation_1.Translation.Step.Confirmation.CardThirdPartyLabel) })),
-        renderContent: isPassthrough ? () => react_1.default.createElement(StepConfirmationPaymentDetails_1.StepConfirmationVGSPaymentInput, { ref: tokenizerRef }) : undefined,
-    };
-    const options = [];
-    if ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.paymentMethods) === null || _a === void 0 ? void 0 : _a.includes(core_1.EBookingPaymentMethod.Card)) {
-        let defaultCardOption;
-        // Reason this is split up is in case someone doesn't have a default card selected
-        // We still want to select the first card they have, if they have any.
-        if (cards.length && isPassthrough) {
-            const selectedMemberCard = defaultCard ? defaultCard : cards[0];
-            defaultCardOption = {
-                value: selectedMemberCard.cardId,
-                label: react_1.default.createElement(InlinePaymentOption_1.default, { card: selectedMemberCard }),
-            };
+    const { availablePaymentHandlers } = (0, react_1.useContext)(ConfirmationStepContext_1.ConfirmationStepContext);
+    const currentOptions = [];
+    for (const paymentHandler of availablePaymentHandlers) {
+        if (paymentHandler.isExclusive) {
+            // We don't want to display any exclusive payment handlers
+            continue;
         }
-        else {
-            defaultCardOption = vgsCardInputOption;
+        if (paymentHandler.isAvailable) {
+            currentOptions.push({
+                value: paymentHandler.name,
+                label: paymentHandler.renderInput ? paymentHandler.renderInput() : react_1.default.createElement(react_1.default.Fragment, null, "Payment Handler"),
+                disabled: paymentHandler.isDisabled || (paymentHandler.requireFormFilled && !methods.formState.isValid),
+                disabledReason: paymentHandler.disabledReason,
+                options: paymentHandler.subOptions,
+                renderContent: paymentHandler.renderPaymentInput,
+            });
         }
-        const selectableStoredCardOptions = [];
-        if (cards.length) {
-            for (const memberCard of cards) {
-                selectableStoredCardOptions.push({
-                    value: memberCard.cardId,
-                    label: react_1.default.createElement(InlinePaymentOption_1.default, { card: memberCard }),
-                });
-            }
-            selectableStoredCardOptions.push(vgsCardInputOption);
-        }
-        options.push(Object.assign(Object.assign({}, defaultCardOption), { options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined }));
-    }
-    (0, react_1.useEffect)(() => {
-        methods.trigger('paymentMethod');
-    }, [currentCurrency]);
-    if (hasPricePreview && planpayConfig && planpayConfig.minDaysShowPlanpay && (0, dayjs_1.default)(basketContext.startDate).diff((0, dayjs_1.default)(), 'day') > planpayConfig.minDaysShowPlanpay) {
-        options.push({
-            value: core_1.EBookingPaymentMethod.Planpay,
-            label: react_1.default.createElement(PlanpayLabel_1.default, null),
-            disabled: !methods.formState.isValid,
-            disabledReason: !methods.formState.isValid ? 'You must fill all the above details before proceeding with Planpay' : '',
-            renderContent: () => react_1.default.createElement(PlanpayPaymentMethod_1.PlanpayPaymentMethod, null),
-        });
     }
     return (react_1.default.createElement(react_hook_form_1.Controller, { control: methods.control, name: "paymentMethod", render: ({ field: { onChange, value } }) => {
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(RadioButtonGroup_1.default, { options: options, value: value, onChange: (code) => {
+                    react_1.default.createElement(RadioButtonGroup_1.default, { options: currentOptions, value: value, onChange: (code) => {
                             onChange(code);
-                            onChangeCb(code);
                         } }))));
         } }));
 };

package/dist/src/components/steps/confirmation/PaymentInformation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentInformation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yCAA4E;AAC5E,kDAA0B;AAC1B,+CAAkE;AAClE,qDAA6D;AAC7D,iDAA+C;AAE/C,+GAAuF;AACvF,8GAA8G;AAC9G,kIAAgI;AAChI,gGAAwE;AACxE,+FAA4F;AAC5F,yCAAyE;AACzE,mCAA0C;AAC1C,8DAAyC;AAEzC,4DAAyD;AAOzD,MAAM,kBAAkB,GAAgC,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE;;IACrF,MAAM,OAAO,GAAG,IAAA,gCAAc,GAA0B,CAAC;IACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,aAAa,GAAG,IAAA,oBAAS,GAAE,CAAC;IAClC,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,GAAG,IAAA,iBAAU,GAAE,CAAC;IACxD,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,cAAc,EAAE,GAAG,IAAA,2BAAgB,GAAE,CAAC;IAC1D,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,MAAK,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,CAAA,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9H,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAC;IAEvD,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAErD,2GAA2G;IAC3G,MAAM,aAAa,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,EAAC,CAAC,CAAC,KAAK,CAAC,aAAa,KAAK,0BAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5G,MAAM,kBAAkB,GAAuB;QAC3C,KAAK,EAAE,4BAAqB,CAAC,IAAI;QACjC,KAAK,EAAE,CACH,8BAAC,6BAAmB,IAChB,MAAM,EAAE,aAAa,KAAK,4BAAqB,CAAC,IAAI,EACpD,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,GACpG,CACL;QACD,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,8BAAC,gEAA+B,IAAC,GAAG,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,SAAS;KAC1G,CAAC;IAEF,MAAM,OAAO,GAAyB,EAAE,CAAC;IACzC,IAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,0CAAE,QAAQ,CAAC,4BAAqB,CAAC,IAAI,CAAC,EAAE;QAC7D,IAAI,iBAAqC,CAAC;QAC1C,kFAAkF;QAClF,sEAAsE;QACtE,IAAI,KAAK,CAAC,MAAM,IAAI,aAAa,EAAE;YAC/B,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAEhE,iBAAiB,GAAG;gBAChB,KAAK,EAAE,kBAAkB,CAAC,MAAM;gBAChC,KAAK,EAAE,8BAAC,6BAAmB,IAAC,IAAI,EAAE,kBAAkB,GAAI;aAC3D,CAAC;SACL;aAAM;YACH,iBAAiB,GAAG,kBAAkB,CAAC;SAC1C;QAED,MAAM,2BAA2B,GAAG,EAAE,CAAC;QAEvC,IAAI,KAAK,CAAC,MAAM,EAAE;YACd,KAAK,MAAM,UAAU,IAAI,KAAK,EAAE;gBAC5B,2BAA2B,CAAC,IAAI,CAAC;oBAC7B,KAAK,EAAE,UAAU,CAAC,MAAM;oBACxB,KAAK,EAAE,8BAAC,6BAAmB,IAAC,IAAI,EAAE,UAAU,GAAI;iBACnD,CAAC,CAAC;aACN;YACD,2BAA2B,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SACxD;QAED,OAAO,CAAC,IAAI,iCACL,iBAAiB,KACpB,OAAO,EAAE,2BAA2B,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS,IAC3F,CAAC;KACN;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,eAAe,IAAI,aAAa,IAAI,aAAa,CAAC,kBAAkB,IAAI,IAAA,eAAK,EAAC,aAAa,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAA,eAAK,GAAE,EAAE,KAAK,CAAC,GAAG,aAAa,CAAC,kBAAkB,EAAE;QAChK,OAAO,CAAC,IAAI,CAAC;YACT,KAAK,EAAE,4BAAqB,CAAC,OAAO;YACpC,KAAK,EAAE,8BAAC,sBAAY,OAAG;YACvB,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO;YACpC,cAAc,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,oEAAoE,CAAC,CAAC,CAAC,EAAE;YACtH,aAAa,EAAE,GAAG,EAAE,CAAC,8BAAC,2CAAoB,OAAG;SAChD,CAAC,CAAC;KACN;IAED,OAAO,CACH,8BAAC,4BAAU,IACP,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,IAAI,EAAC,eAAe,EACpB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;YACvC,OAAO,CACH;gBACI;oBACI,8BAAC,0BAAgB,IACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;4BACf,QAAQ,CAAC,IAAI,CAAC,CAAC;4BACf,UAAU,CAAC,IAA6B,CAAC,CAAC;wBAC9C,CAAC,GACH,CACA,CACP,CACN,CAAC;QACN,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import { EBookingPaymentMethod, EHotelCardProcessor } from '@roomstay/core';\nimport dayjs from 'dayjs';\nimport React, { FC, useContext, useEffect, useMemo } from 'react';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentOption from '@/components/generic/PaymentCard/InlinePaymentOption';\nimport RadioButtonGroup, { IRadioButtonOption } from '@/components/generic/RadioButtonGroup/RadioButtonGroup';\nimport { StepConfirmationVGSPaymentInput } from '@/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails';\nimport PlanpayLabel from '@/components/steps/confirmation/PlanpayLabel';\nimport { PlanpayPaymentMethod } from '@/components/steps/confirmation/PlanpayPaymentMethod';\nimport { CompanyContext, useBasket, useMemberContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport usePlanpay from '@/hooks/Planpay';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport { Translation } from '@/translations/Translation';\n\ninterface PaymentInformationProps {\n    tokenizerRef: any;\n    onChangeCb: (code: EBookingPaymentMethod) => void;\n}\n\nconst PaymentInformation: FC<PaymentInformationProps> = ({ tokenizerRef, onChangeCb }) => {\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { hotel } = useCurrentHotel();\n    const basketContext = useBasket();\n    const { hasPricePreview, planpayConfig } = usePlanpay();\n    const { cards = [], roomstayMember } = useMemberContext();\n    const defaultCard = useMemo(() => cards.find((card) => card.cardId === roomstayMember?.defaultCard), [cards, roomstayMember]);\n    const { t } = useTranslation();\n\n    const { currentCurrency } = useContext(CompanyContext);\n\n    const paymentMethod = methods.watch('paymentMethod');\n\n    // TODO: while we figure out how to handle member cards we'll just disable this for non-passthrough paymets\n    const isPassthrough = hotel?.cardProcessor ? hotel.cardProcessor === EHotelCardProcessor.Passthrough : true;\n\n    const vgsCardInputOption: IRadioButtonOption = {\n        value: EBookingPaymentMethod.Card,\n        label: (\n            <InlinePaymentOption\n                active={paymentMethod === EBookingPaymentMethod.Card}\n                overrideSubLabel={isPassthrough ? undefined : t(Translation.Step.Confirmation.CardThirdPartyLabel)}\n            />\n        ),\n        renderContent: isPassthrough ? () => <StepConfirmationVGSPaymentInput ref={tokenizerRef} /> : undefined,\n    };\n\n    const options: IRadioButtonOption[] = [];\n    if (hotel?.paymentMethods?.includes(EBookingPaymentMethod.Card)) {\n        let defaultCardOption: IRadioButtonOption;\n        // Reason this is split up is in case someone doesn't have a default card selected\n        // We still want to select the first card they have, if they have any.\n        if (cards.length && isPassthrough) {\n            const selectedMemberCard = defaultCard ? defaultCard : cards[0];\n\n            defaultCardOption = {\n                value: selectedMemberCard.cardId,\n                label: <InlinePaymentOption card={selectedMemberCard} />,\n            };\n        } else {\n            defaultCardOption = vgsCardInputOption;\n        }\n\n        const selectableStoredCardOptions = [];\n\n        if (cards.length) {\n            for (const memberCard of cards) {\n                selectableStoredCardOptions.push({\n                    value: memberCard.cardId,\n                    label: <InlinePaymentOption card={memberCard} />,\n                });\n            }\n            selectableStoredCardOptions.push(vgsCardInputOption);\n        }\n\n        options.push({\n            ...defaultCardOption,\n            options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined,\n        });\n    }\n\n    useEffect(() => {\n        methods.trigger('paymentMethod');\n    }, [currentCurrency]);\n\n    if (hasPricePreview && planpayConfig && planpayConfig.minDaysShowPlanpay && dayjs(basketContext.startDate).diff(dayjs(), 'day') > planpayConfig.minDaysShowPlanpay) {\n        options.push({\n            value: EBookingPaymentMethod.Planpay,\n            label: <PlanpayLabel />,\n            disabled: !methods.formState.isValid,\n            disabledReason: !methods.formState.isValid ? 'You must fill all the above details before proceeding with Planpay' : '',\n            renderContent: () => <PlanpayPaymentMethod />,\n        });\n    }\n\n    return (\n        <Controller\n            control={methods.control}\n            name=\"paymentMethod\"\n            render={({ field: { onChange, value } }) => {\n                return (\n                    <>\n                        <div>\n                            <RadioButtonGroup\n                                options={options}\n                                value={value}\n                                onChange={(code) => {\n                                    onChange(code);\n                                    onChangeCb(code as EBookingPaymentMethod);\n                                }}\n                            />\n                        </div>\n                    </>\n                );\n            }}\n        />\n    );\n};\n\nexport default PaymentInformation;\n"]}
+{"version":3,"file":"PaymentInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentInformation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAA6D;AAE7D,8GAA8G;AAC9G,wGAAqG;AAGrG,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,IAAA,gCAAc,GAA0B,CAAC;IACzD,MAAM,EAAE,wBAAwB,EAAE,GAAG,IAAA,kBAAU,EAAC,iDAAuB,CAAC,CAAC;IAEzE,MAAM,cAAc,GAAyB,EAAE,CAAC;IAEhD,KAAK,MAAM,cAAc,IAAI,wBAAwB,EAAE;QACnD,IAAI,cAAc,CAAC,WAAW,EAAE;YAC5B,0DAA0D;YAC1D,SAAS;SACZ;QAED,IAAI,cAAc,CAAC,WAAW,EAAE;YAC5B,cAAc,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,cAAc,CAAC,IAAI;gBAC1B,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,gFAAoB;gBACvF,QAAQ,EAAE,cAAc,CAAC,UAAU,IAAI,CAAC,cAAc,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC;gBACvG,cAAc,EAAE,cAAc,CAAC,cAAc;gBAC7C,OAAO,EAAE,cAAc,CAAC,UAAU;gBAClC,aAAa,EAAE,cAAc,CAAC,kBAAkB;aACnD,CAAC,CAAC;SACN;KACJ;IAED,OAAO,CACH,8BAAC,4BAAU,IACP,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,IAAI,EAAC,eAAe,EACpB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;YACvC,OAAO,CACH;gBACI;oBACI,8BAAC,0BAAgB,IACb,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;4BACf,QAAQ,CAAC,IAAI,CAAC,CAAC;wBACnB,CAAC,GACH,CACA,CACP,CACN,CAAC;QACN,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import React, { useContext } from 'react';\nimport { Controller, useFormContext } from 'react-hook-form';\n\nimport RadioButtonGroup, { IRadioButtonOption } from '@/components/generic/RadioButtonGroup/RadioButtonGroup';\nimport { ConfirmationStepContext } from '@/contexts/ConfirmationStepContext/ConfirmationStepContext';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\n\nconst PaymentInformation = () => {\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { availablePaymentHandlers } = useContext(ConfirmationStepContext);\n\n    const currentOptions: IRadioButtonOption[] = [];\n\n    for (const paymentHandler of availablePaymentHandlers) {\n        if (paymentHandler.isExclusive) {\n            // We don't want to display any exclusive payment handlers\n            continue;\n        }\n\n        if (paymentHandler.isAvailable) {\n            currentOptions.push({\n                value: paymentHandler.name,\n                label: paymentHandler.renderInput ? paymentHandler.renderInput() : <>Payment Handler</>,\n                disabled: paymentHandler.isDisabled || (paymentHandler.requireFormFilled && !methods.formState.isValid),\n                disabledReason: paymentHandler.disabledReason,\n                options: paymentHandler.subOptions,\n                renderContent: paymentHandler.renderPaymentInput,\n            });\n        }\n    }\n\n    return (\n        <Controller\n            control={methods.control}\n            name=\"paymentMethod\"\n            render={({ field: { onChange, value } }) => {\n                return (\n                    <>\n                        <div>\n                            <RadioButtonGroup\n                                options={currentOptions}\n                                value={value}\n                                onChange={(code) => {\n                                    onChange(code);\n                                }}\n                            />\n                        </div>\n                    </>\n                );\n            }}\n        />\n    );\n};\n\nexport default PaymentInformation;\n"]}

package/dist/src/components/steps/confirmation/PlanpayPaymentMethod.js

@@ -77,7 +77,7 @@ const PlanpayPaymentMethod = () => {
         if (hasPlanpay) {
             loadPlanPaySDK();
         }
-    }, [hotel]);
+    }, [hotel, hasPlanpay]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "planpay-payment-container", "data-planpay-checkout-id": planPayCheckoutResponse === null || planPayCheckoutResponse === void 0 ? void 0 : planPayCheckoutResponse.id, style: { minHeight: '204px', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' } },
             react_1.default.createElement(PlanpayWidgetLoader, null))));

package/dist/src/components/steps/confirmation/PlanpayPaymentMethod.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlanpayPaymentMethod.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PlanpayPaymentMethod.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { planpay } from '@planpay/web';\nimport React, { FC, useContext, useEffect, useLayoutEffect } from 'react';\n\nimport Placeholder from '@/components/generic/Placeholder';\nimport { useCurrentHotel } from '@/hooks/CurrentHotelHook';\nimport usePlanpay from '@/hooks/Planpay';\n\nconst PlanpayWidgetLoader = () => {\n    return (\n        <div>\n            <div className=\"row no-gutters\">\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                    </div>\n\n                    <Placeholder type=\"text\" h=\"md\" blink />\n                    <Placeholder type=\"text\" h=\"md\" blink />\n                </div>\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                    </div>\n\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                </div>\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                    </div>\n\n                    <div className=\"d-flex justify-content-center u-marg-top u-marg-bottom\">\n                        <Placeholder type=\"text\" w=\"xs\" h=\"sm\" blink noMarg />\n                    </div>\n\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink noMarg />\n                    </div>\n                    <div className=\"d-flex justify-content-center u-marg-top u-marg-bottom\">\n                        <Placeholder type=\"text\" w=\"xs\" h=\"sm\" blink noMarg />\n                    </div>\n                </div>\n            </div>\n            <div className=\"row no-gutters\">\n                <div className=\"col-md-4\">\n                    <Placeholder type=\"text\" h=\"lg\" blink />\n                </div>\n                <div className=\"offset-md-4 col-md-4 d-flex align-items-center\">\n                    <Placeholder type=\"text\" w=\"xl\" h=\"sm\" blink />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const PlanpayPaymentMethod: FC = () => {\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n    const { hasPlanpay, loadPlanPaySDK } = usePlanpay();\n\n    const planPayCheckoutResponse = basketContext.reservationData?.payment?.planpay;\n\n    useLayoutEffect(() => {\n        if (planPayCheckoutResponse?.id) {\n            planpay.checkout.refresh();\n        }\n    }, [planPayCheckoutResponse?.id]);\n\n    useEffect(() => {\n        if (hasPlanpay) {\n            loadPlanPaySDK();\n        }\n    }, [hotel]);\n\n    return (\n        <>\n            <div\n                className=\"planpay-payment-container\"\n                data-planpay-checkout-id={planPayCheckoutResponse?.id}\n                style={{ minHeight: '204px', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' }}\n            >\n                <PlanpayWidgetLoader />\n            </div>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"PlanpayPaymentMethod.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PlanpayPaymentMethod.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { planpay } from '@planpay/web';\nimport React, { FC, useContext, useEffect, useLayoutEffect } from 'react';\n\nimport Placeholder from '@/components/generic/Placeholder';\nimport { useCurrentHotel } from '@/hooks/CurrentHotelHook';\nimport usePlanpay from '@/hooks/Planpay';\n\nconst PlanpayWidgetLoader = () => {\n    return (\n        <div>\n            <div className=\"row no-gutters\">\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                    </div>\n\n                    <Placeholder type=\"text\" h=\"md\" blink />\n                    <Placeholder type=\"text\" h=\"md\" blink />\n                </div>\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                    </div>\n\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                    <Placeholder type=\"text\" h=\"sm\" blink />\n                </div>\n                <div className=\"col-md-4\">\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink />\n                    </div>\n\n                    <div className=\"d-flex justify-content-center u-marg-top u-marg-bottom\">\n                        <Placeholder type=\"text\" w=\"xs\" h=\"sm\" blink noMarg />\n                    </div>\n\n                    <div className=\"d-flex justify-content-center\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"sm\" blink noMarg />\n                    </div>\n                    <div className=\"d-flex justify-content-center u-marg-top u-marg-bottom\">\n                        <Placeholder type=\"text\" w=\"xs\" h=\"sm\" blink noMarg />\n                    </div>\n                </div>\n            </div>\n            <div className=\"row no-gutters\">\n                <div className=\"col-md-4\">\n                    <Placeholder type=\"text\" h=\"lg\" blink />\n                </div>\n                <div className=\"offset-md-4 col-md-4 d-flex align-items-center\">\n                    <Placeholder type=\"text\" w=\"xl\" h=\"sm\" blink />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const PlanpayPaymentMethod: FC = () => {\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n    const { hasPlanpay, loadPlanPaySDK } = usePlanpay();\n\n    const planPayCheckoutResponse = basketContext.reservationData?.payment?.planpay;\n\n    useLayoutEffect(() => {\n        if (planPayCheckoutResponse?.id) {\n            planpay.checkout.refresh();\n        }\n    }, [planPayCheckoutResponse?.id]);\n\n    useEffect(() => {\n        if (hasPlanpay) {\n            loadPlanPaySDK();\n        }\n    }, [hotel, hasPlanpay]);\n\n    return (\n        <>\n            <div\n                className=\"planpay-payment-container\"\n                data-planpay-checkout-id={planPayCheckoutResponse?.id}\n                style={{ minHeight: '204px', display: 'flex', justifyContent: 'flex-end', flexDirection: 'column' }}\n            >\n                <PlanpayWidgetLoader />\n            </div>\n        </>\n    );\n};\n"]}

package/dist/src/components/steps/confirmation/RoomContactDetails.js

@@ -165,7 +165,7 @@ const RoomContactDetails = () => {
         var _a;
         const userProfile = (_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a[userProfileIndex];
         if (userProfile && formState.submitCount >= 1 && (userProfileIndex === 0 || !copyCheckBox))
-            Object.values(userProfile).map((error, errorIndex) => {
+            return Object.values(userProfile).map((error, errorIndex) => {
                 return (react_1.default.createElement(AutoAutoHeight_1.default, { key: errorIndex, open: true },
                     react_1.default.createElement("div", { className: "u-flex" },
                         react_1.default.createElement(Alert_1.default, { icon: Icon_1.IconType.Error, type: Alert_1.AlertType.Danger, noMargin: errorIndex === Object.keys(userProfile).length - 1 },