@roomstay/frontend 1.3.0

package/dist/src/components/navigation/StepSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepSelector.js","sourceRoot":"/","sources":["src/components/navigation/StepSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text, { TextType } from '../generic/Text';\nimport Icon, { IconType } from '../generic/Icon';\nimport { Link } from 'react-router-dom';\nimport { useContext, useState } from 'react';\nimport StepManager from '../../util/StepManager';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../translations/Translation';\nimport * as classNames from 'classnames';\nimport { Color } from '../../util/Color';\nimport StepSelectorModal from './StepSelectorModal';\nimport ScreenSize from '../../util/ScreenSize';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport Step from '../../pages/steps/Step';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport default function StepSelector() {\n    const { screenSize } = useContext(BookingEngineContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const steps = StepManager.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));\n\n    const onDropdownClick = () => {\n        screenSize <= ScreenSize.Medium ? setModalOpen(true) : null;\n    };\n\n    const closeModal = () => {\n        setModalOpen(false);\n    };\n\n    const currentStepIndex = StepManager.getStepIndex(currentStep.getName());\n\n    return (\n        <>\n            <div className=\"step-dropdown\" onClick={onDropdownClick}>\n                <div className=\"step-container\">\n                    <Icon icon={IconType.Dropdown} />\n                    <div className=\"step-awards\">\n                        <img alt=\"\" style={{ width: '80px' }} />\n                    </div>\n                    <ul className=\"step-selector\">\n                        {steps.map((step: Step, stepIndex: number) => {\n                            const stepName = t(step.getStepTranslation());\n\n                            const prettyStep = stepIndex + 1;\n\n                            const isPrevStep = currentStepIndex > prettyStep;\n\n                            let stepNumber: JSX.Element;\n                            if (isPrevStep) {\n                                stepNumber = <Icon icon={IconType.Check} color={Color.White} size=\"24px\" />;\n                            } else {\n                                stepNumber = (\n                                    <Text type={TextType.Small}>\n                                        <strong>{'0' + prettyStep}</strong>\n                                    </Text>\n                                );\n                            }\n\n                            let isClickable = false;\n\n                            if (step) {\n                                const stepValidator = step.getValidator();\n\n                                if (stepValidator && stepValidator.isValid(basketContext)) {\n                                    isClickable = true;\n                                }\n                            }\n\n                            const stepClassNames = classNames('step-selector__item', {\n                                'is-current': currentStepIndex === prettyStep,\n                                'is-valid': isClickable,\n                                'is-complete': isPrevStep,\n                                'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,\n                            });\n\n                            return (\n                                <li className={stepClassNames} key={prettyStep}>\n                                    <span className=\"step-selector__count\">{stepNumber}</span>\n                                    <div>\n                                        <span className=\"step-selector__step-count-mobile\">\n                                            <Text type={TextType.Small} color={Color.Navy}>\n                                                <strong>{t(Translation.Navigation.Steps.StepProgress, { step: prettyStep })}</strong>\n                                            </Text>\n                                        </span>\n                                        <Text>\n                                            <strong>{stepName}</strong>\n                                        </Text>\n                                    </div>\n                                    <Link to={step.getStepUrl()} />\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </div>\n            </div>\n            {screenSize <= ScreenSize.Medium && <StepSelectorModal isOpen={modalOpen} onClose={closeModal} />}\n        </>\n    );\n}\n"]}

package/dist/src/components/navigation/StepSelectorModal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface StepSelectorModalProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+}
+export default function StepSelectorModal(props: StepSelectorModalProps): JSX.Element;

package/dist/src/components/navigation/StepSelectorModal.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const SimpleModal_1 = require("../generic/modal/SimpleModal");
+const react_i18next_1 = require("react-i18next");
+const react_1 = require("react");
+const Translation_1 = require("../../translations/Translation");
+const React = require("react");
+const classNames = require("classnames");
+const Icon_1 = require("../generic/Icon");
+const Color_1 = require("../../util/Color");
+const Text_1 = require("../generic/Text");
+const react_router_dom_1 = require("react-router-dom");
+const StepManager_1 = require("../../util/StepManager");
+const contexts_1 = require("@frontend/contexts");
+const contexts_2 = require("@frontend/contexts");
+function StepSelectorModal(props) {
+    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const { t } = react_i18next_1.useTranslation();
+    const steps = StepManager_1.default.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));
+    const onModalClose = () => {
+        return props.onClose ? props.onClose() : null;
+    };
+    const currentStepIndex = StepManager_1.default.getStepIndex(currentStep.getName());
+    return (React.createElement(SimpleModal_1.default, { open: props.isOpen, title: t(Translation_1.Translation.Navigation.SelectStep), onClose: onModalClose },
+        React.createElement("ul", { className: "step-selector --horizontal" }, steps.map((step, stepIndex) => {
+            const stepName = t(step.getStepTranslation());
+            const prettyStep = stepIndex + 1;
+            const isPrevStep = currentStepIndex > prettyStep;
+            let stepNumber;
+            if (isPrevStep) {
+                stepNumber = React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check, color: Color_1.Color.White, size: "24px" });
+            }
+            else {
+                stepNumber = (React.createElement(Text_1.default, null,
+                    React.createElement("strong", null, '0' + prettyStep)));
+            }
+            let isClickable = false;
+            if (step) {
+                const stepValidator = step.getValidator();
+                if (stepValidator && stepValidator.isValid(basketContext)) {
+                    isClickable = true;
+                }
+            }
+            const stepClassNames = classNames('step-selector__item', {
+                'is-current': currentStepIndex === prettyStep,
+                'is-valid': isClickable,
+                'is-complete': isPrevStep,
+                'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,
+            });
+            const closeOnClick = () => {
+                props.onClose();
+            };
+            return (React.createElement("li", { className: stepClassNames, key: stepIndex, onClick: closeOnClick },
+                React.createElement("span", { className: "step-selector__count" }, stepNumber),
+                React.createElement("div", null,
+                    React.createElement(Text_1.default, null,
+                        React.createElement("strong", null, stepName))),
+                React.createElement(react_router_dom_1.Link, { to: step.getStepUrl() })));
+        }))));
+}
+exports.default = StepSelectorModal;
+//# sourceMappingURL=StepSelectorModal.js.map

package/dist/src/components/navigation/StepSelectorModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepSelectorModal.js","sourceRoot":"/","sources":["src/components/navigation/StepSelectorModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import SimpleModal from '../generic/modal/SimpleModal';\nimport { useTranslation } from 'react-i18next';\nimport { useContext } from 'react';\nimport { Translation } from '../../translations/Translation';\nimport * as React from 'react';\nimport * as classNames from 'classnames';\n\nimport Icon, { IconType } from '../generic/Icon';\nimport { Color } from '../../util/Color';\nimport Text from '../generic/Text';\nimport { Link } from 'react-router-dom';\nimport StepManager from '../../util/StepManager';\nimport { BasketContext } from '@frontend/contexts';\nimport Step from '../../pages/steps/Step';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport interface StepSelectorModalProps {\n    isOpen?: boolean;\n    onClose?: () => void;\n}\n\nexport default function StepSelectorModal(props: StepSelectorModalProps) {\n    const { currentStep } = useContext(FullPageEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { t } = useTranslation();\n\n    const steps = StepManager.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));\n\n    const onModalClose = () => {\n        return props.onClose ? props.onClose() : null;\n    };\n\n    const currentStepIndex = StepManager.getStepIndex(currentStep.getName());\n\n    return (\n        <SimpleModal open={props.isOpen} title={t(Translation.Navigation.SelectStep)} onClose={onModalClose}>\n            <ul className=\"step-selector --horizontal\">\n                {steps.map((step: Step, stepIndex: number) => {\n                    const stepName = t(step.getStepTranslation());\n\n                    const prettyStep = stepIndex + 1;\n\n                    const isPrevStep = currentStepIndex > prettyStep;\n\n                    let stepNumber: JSX.Element;\n                    if (isPrevStep) {\n                        stepNumber = <Icon icon={IconType.Check} color={Color.White} size=\"24px\" />;\n                    } else {\n                        stepNumber = (\n                            <Text>\n                                <strong>{'0' + prettyStep}</strong>\n                            </Text>\n                        );\n                    }\n\n                    let isClickable = false;\n\n                    if (step) {\n                        const stepValidator = step.getValidator();\n\n                        if (stepValidator && stepValidator.isValid(basketContext)) {\n                            isClickable = true;\n                        }\n                    }\n\n                    const stepClassNames = classNames('step-selector__item', {\n                        'is-current': currentStepIndex === prettyStep,\n                        'is-valid': isClickable,\n                        'is-complete': isPrevStep,\n                        'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,\n                    });\n\n                    const closeOnClick = () => {\n                        props.onClose();\n                    };\n                    return (\n                        <li className={stepClassNames} key={stepIndex} onClick={closeOnClick}>\n                            <span className=\"step-selector__count\">{stepNumber}</span>\n                            <div>\n                                <Text>\n                                    <strong>{stepName}</strong>\n                                </Text>\n                            </div>\n                            <Link to={step.getStepUrl()} />\n                        </li>\n                    );\n                })}\n            </ul>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/components/steps/DaysSelectedInformer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DaysSelectedInformer(): JSX.Element;

package/dist/src/components/steps/DaysSelectedInformer.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const Text_1 = require("../generic/Text");
+const Color_1 = require("../../util/Color");
+const DatePickerContext_1 = require("../../contexts/DatePickerContext");
+function DaysSelectedInformer() {
+    const dpContext = react_1.useContext(DatePickerContext_1.DatePickerContext);
+    const { startDate, endDate, hoveredMonth: hoveredDate } = dpContext;
+    let daysPicked = 0;
+    const correctEndDate = hoveredDate !== null && hoveredDate !== void 0 ? hoveredDate : endDate;
+    if (startDate && correctEndDate) {
+        daysPicked = correctEndDate.diff(dpContext.startDate, 'day');
+    }
+    return (React.createElement(Text_1.default, { bold: true, color: Color_1.Color.Success, type: Text_1.TextType.Small }, daysPicked > 0 ? (React.createElement(React.Fragment, null,
+        "Selected ",
+        daysPicked,
+        " nights, ", startDate === null || startDate === void 0 ? void 0 :
+        startDate.format('D MMM'),
+        ", to ",
+        correctEndDate.format('D MMM'))) : (React.createElement(React.Fragment, null, "Please select your dates"))));
+}
+exports.default = DaysSelectedInformer;
+//# sourceMappingURL=DaysSelectedInformer.js.map

package/dist/src/components/steps/DaysSelectedInformer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DaysSelectedInformer.js","sourceRoot":"/","sources":["src/components/steps/DaysSelectedInformer.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAmC;AAEnC,0CAAiD;AACjD,4CAAyC;AAEzC,wEAAqE;AAErE,SAAwB,oBAAoB;IACxC,MAAM,SAAS,GAAG,kBAAU,CAAC,qCAAiB,CAAC,CAAC;IAEhD,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IAEpE,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,MAAM,cAAc,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,OAAO,CAAC;IAE9C,IAAI,SAAS,IAAI,cAAc,EAAE;QAC7B,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAChE;IAED,OAAO,CACH,oBAAC,cAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,OAAO,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IACvD,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CACd;;QACc,UAAU;qBAAW,SAAS,aAAT,SAAS;QAAT,SAAS,CAAE,MAAM,CAAC,OAAO;;QAAQ,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAC/F,CACN,CAAC,CAAC,CAAC,CACA,qEAA6B,CAChC,CACE,CACV,CAAC;AACN,CAAC;AAvBD,uCAuBC","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\n\nimport Text, { TextType } from '../generic/Text';\nimport { Color } from '../../util/Color';\n\nimport { DatePickerContext } from '../../contexts/DatePickerContext';\n\nexport default function DaysSelectedInformer() {\n    const dpContext = useContext(DatePickerContext);\n\n    const { startDate, endDate, hoveredMonth: hoveredDate } = dpContext;\n\n    let daysPicked = 0;\n    const correctEndDate = hoveredDate ?? endDate;\n\n    if (startDate && correctEndDate) {\n        daysPicked = correctEndDate.diff(dpContext.startDate, 'day');\n    }\n\n    return (\n        <Text bold={true} color={Color.Success} type={TextType.Small}>\n            {daysPicked > 0 ? (\n                <>\n                    Selected {daysPicked} nights, {startDate?.format('D MMM')}, to {correctEndDate.format('D MMM')}\n                </>\n            ) : (\n                <>Please select your dates</>\n            )}\n        </Text>\n    );\n}\n"]}

package/dist/src/components/steps/MinimumNightStayPill.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function MinimumNightStayPill(): JSX.Element;

package/dist/src/components/steps/MinimumNightStayPill.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const browser_1 = require("@sentry/browser");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const BookingAPI_1 = require("../../api/BookingAPI");
+const contexts_1 = require("@frontend/contexts");
+const NoHotelSelectedError_1 = require("../../errors/NoHotelSelectedError");
+const Translation_1 = require("../../translations/Translation");
+const Icon_1 = require("../generic/Icon");
+const SmallSpinner_1 = require("../generic/loader/SmallSpinner");
+const Pill_1 = require("../generic/Pill");
+const hooks_1 = require("@frontend/hooks");
+function MinimumNightStayPill() {
+    var _a;
+    const { hotel } = hooks_1.useCurrentHotel();
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const { t } = react_i18next_1.useTranslation();
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    const [minNights, setMinNights] = react_1.useState(-1);
+    const [loadIndex, setLoadIndex] = react_1.useState(0);
+    const selectedBasketRow = (_a = basketContext.selectedBasketRow) !== null && _a !== void 0 ? _a : basketContext.currentBasketRows[0];
+    const startDate = selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getStartDate();
+    const endDate = selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getEndDate();
+    react_1.useEffect(() => {
+        if (!hotel) {
+            return;
+        }
+        let cancelled = false;
+        setLoadIndex((oldLoadIndex) => oldLoadIndex + 1);
+        if (endDate === null || endDate === void 0 ? void 0 : endDate.isValid()) {
+            setIsLoading(true);
+            BookingAPI_1.default.Availability.fetchMinNightStayData(selectedBasketRow, hotel.hotelID)
+                .then((response) => {
+                if (!cancelled) {
+                    setIsLoading(false);
+                    if (response.Status === 'MinStay' && (endDate === null || endDate === void 0 ? void 0 : endDate.diff(startDate, 'day')) < response.Quantity) {
+                        setMinNights(response.Quantity);
+                    }
+                    else {
+                        setMinNights(-1);
+                    }
+                }
+            })
+                .catch((ex) => {
+                if (!(ex instanceof NoHotelSelectedError_1.NoHotelSelectedError)) {
+                    browser_1.captureException(ex);
+                }
+            });
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [selectedBasketRow, startDate, endDate]);
+    if (!hotel) {
+        return null;
+    }
+    return (React.createElement("div", { className: "u-mh-30" }, isLoading ? (React.createElement(SmallSpinner_1.default, null)) : minNights !== -1 ? (React.createElement(Pill_1.default, { type: Pill_1.PillType.Primary, icon: Icon_1.IconType.Info }, t(Translation_1.Translation.Step.Room.NoRoomsFound.MinNightStay, { minNightStay: minNights }))) : (React.createElement(React.Fragment, null))));
+}
+exports.default = MinimumNightStayPill;
+//# sourceMappingURL=MinimumNightStayPill.js.map

package/dist/src/components/steps/MinimumNightStayPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimumNightStayPill.js","sourceRoot":"/","sources":["src/components/steps/MinimumNightStayPill.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { captureException } from '@sentry/browser';\n\nimport { useContext, useState, useEffect } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport API from '../../api/BookingAPI';\n\nimport { BasketContext } from '@frontend/contexts';\nimport { NoHotelSelectedError } from '../../errors/NoHotelSelectedError';\nimport { Translation } from '../../translations/Translation';\nimport { IconType } from '../generic/Icon';\nimport SmallSpinner from '../generic/loader/SmallSpinner';\nimport Pill, { PillType } from '../generic/Pill';\nimport { useCurrentHotel } from '@frontend/hooks';\n\nexport default function MinimumNightStayPill() {\n    const { hotel } = useCurrentHotel();\n    const basketContext = useContext(BasketContext);\n    const { t } = useTranslation();\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [minNights, setMinNights] = useState(-1);\n\n    const [loadIndex, setLoadIndex] = useState(0);\n\n    const selectedBasketRow = basketContext.selectedBasketRow ?? basketContext.currentBasketRows[0];\n\n    const startDate = selectedBasketRow?.getStartDate();\n    const endDate = selectedBasketRow?.getEndDate();\n\n    useEffect(() => {\n        if (!hotel) {\n            return;\n        }\n\n        let cancelled = false;\n        setLoadIndex((oldLoadIndex) => oldLoadIndex + 1);\n\n        if (endDate?.isValid()) {\n            setIsLoading(true);\n\n            API.Availability.fetchMinNightStayData(selectedBasketRow, hotel.hotelID)\n                .then((response) => {\n                    if (!cancelled) {\n                        setIsLoading(false);\n                        if (response.Status === 'MinStay' && endDate?.diff(startDate, 'day') < response.Quantity) {\n                            setMinNights(response.Quantity);\n                        } else {\n                            setMinNights(-1);\n                        }\n                    }\n                })\n                .catch((ex) => {\n                    if (!(ex instanceof NoHotelSelectedError)) {\n                        captureException(ex);\n                    }\n                });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, [selectedBasketRow, startDate, endDate]);\n\n    if (!hotel) {\n        return null;\n    }\n\n    return (\n        <div className=\"u-mh-30\">\n            {isLoading ? (\n                <SmallSpinner />\n            ) : minNights !== -1 ? (\n                <Pill type={PillType.Primary} icon={IconType.Info}>\n                    {t(Translation.Step.Room.NoRoomsFound.MinNightStay, { minNightStay: minNights })}\n                </Pill>\n            ) : (\n                <></>\n            )}\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/addons/AddonCard.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Addon } from '../../../models/Addon/Addon';
+interface Props {
+    addon: Addon;
+    className?: string;
+}
+declare const AddonCard: ({ addon, className }: Props) => JSX.Element;
+export default AddonCard;

package/dist/src/components/steps/addons/AddonCard.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const contexts_1 = require("@frontend/contexts");
+const Addon_1 = require("../../../models/Addon/Addon");
+const Translation_1 = require("../../../translations/Translation");
+const Color_1 = require("../../../util/Color");
+const BEButton_1 = require("../../generic/BEButton");
+const BESelect_1 = require("../../generic/BESelect");
+const Currency_1 = require("../../generic/Currency");
+const Headline_1 = require("../../generic/Headline");
+const Icon_1 = require("../../generic/Icon");
+const NumberIncrement_1 = require("../../generic/NumberIncrement");
+const Text_1 = require("../../generic/Text");
+const classnames_1 = require("classnames");
+const Check_1 = require("../../../icons/Check");
+const hooks_1 = require("@frontend/hooks");
+const AddonCard = ({ addon, className }) => {
+    var _a;
+    const { t } = react_i18next_1.useTranslation();
+    const { hotel } = hooks_1.useCurrentHotel();
+    const basketContext = React.useContext(contexts_1.BasketContext);
+    const addonBasketRow = basketContext.getRowForAddon(addon);
+    const [quantity, setQuantity] = react_1.useState(1);
+    const [adultQuantity, setAdultQuantity] = react_1.useState(addonBasketRow ? addonBasketRow.getAdultQuantity() : 1);
+    const [childQuantity, setChildQuantity] = react_1.useState(addonBasketRow ? addonBasketRow.getChildQuantity() : 0);
+    const [priceInfo, setPriceInfo] = react_1.useState({ quantity: 1 });
+    const [selectedDate, setSelectedDate] = react_1.useState(addonBasketRow ? addonBasketRow.getSelectedDate() : '');
+    const [selectedTime, setSelectedTime] = react_1.useState(addonBasketRow ? addonBasketRow.getSelectedTime() : '');
+    react_1.useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (addonBasketRow) {
+            setPriceInfo((_a = addon.availability[addonBasketRow.getSelectedDate()]) !== null && _a !== void 0 ? _a : addon.availability[addon.firstDate]);
+            setSelectedDate((_b = addonBasketRow.getSelectedDate()) !== null && _b !== void 0 ? _b : addon.firstDate);
+            setSelectedTime((_c = addonBasketRow.getSelectedTime()) !== null && _c !== void 0 ? _c : '');
+            setQuantity(addonBasketRow.getQuantity());
+            setAdultQuantity(addonBasketRow.getAdultQuantity());
+            setChildQuantity(addonBasketRow.getChildQuantity());
+        }
+        else {
+            setPriceInfo((_d = addon.availability[addon.firstDate]) !== null && _d !== void 0 ? _d : []);
+            setSelectedDate(addon.firstDate);
+            setSelectedTime((_g = (_f = (_e = addon.availability[addon.firstDate]) === null || _e === void 0 ? void 0 : _e.selectorTimes) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.value);
+        }
+    }, []);
+    const setDate = (date) => {
+        var _a, _b, _c;
+        setPriceInfo(addon.availability[date]);
+        setSelectedDate(date);
+        setSelectedTime((_c = (_b = (_a = addon.availability[date]) === null || _a === void 0 ? void 0 : _a.selectorTimes) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value);
+        if (addon.availability[date].quantity < quantity) {
+            setQuantity(addon.availability[date].quantity);
+        }
+    };
+    const onClickAddToCartHandler = () => {
+        basketContext.setAddonQuantities(addon, {
+            quantity,
+            adult: adultQuantity,
+            child: childQuantity,
+        }, selectedDate, selectedTime);
+    };
+    const classes = classnames_1.default({
+        '--active': !!basketContext.getRowForAddon(addon),
+    });
+    const onClickRemove = () => {
+        const selectedAddon = basketContext.basketAddonRows.find((row) => {
+            return row.getAddon().code === addon.code;
+        });
+        basketContext.removeBasketAddonRow(selectedAddon);
+    };
+    const setQuantityOnChange = (val) => {
+        setQuantity(val);
+    };
+    const setAdultsQuantityOnChange = (val) => {
+        setAdultQuantity(val);
+    };
+    const setChildQuantityOnChange = (val) => {
+        setChildQuantity(val);
+    };
+    const setDateOnChange = (selected) => {
+        setDate(selected);
+    };
+    const setSelectedTimeOnChange = (selected) => {
+        setSelectedTime(selected);
+    };
+    const addonConfigurations = [
+        {
+            name: 'Date',
+            enabled: (addonBasketRow === null || addonBasketRow === void 0 ? void 0 : addonBasketRow.getNumberOfAvailableNights()) > 1 && !addonBasketRow.getAddon().hideDatePicker,
+            element: (React.createElement(BESelect_1.default, { className: "u-flex align-items-center", onChange: setDateOnChange, selectedValue: selectedDate, iconComponent: Icon_1.IconDropdownFilled, items: addon.selectorDates })),
+        },
+        {
+            name: 'Time',
+            enabled: ((_a = priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.selectorTimes) === null || _a === void 0 ? void 0 : _a.length) !== 0,
+            element: (React.createElement(BESelect_1.default, { className: "u-flex align-items-center", onChange: setSelectedTimeOnChange, selectedValue: selectedTime, iconComponent: Icon_1.IconDropdownFilled, items: priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.selectorTimes })),
+        },
+        {
+            name: Translation_1.Translation.Step.Addon.Quantity,
+            enabled: priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.price,
+            element: React.createElement(NumberIncrement_1.default, { number: quantity, min: 1, max: priceInfo.quantity, onChange: setQuantityOnChange }),
+        },
+        {
+            name: Translation_1.Translation.Step.Date.Adult_plural,
+            enabled: priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.adultPrice,
+            element: React.createElement(NumberIncrement_1.default, { number: adultQuantity, min: 0, max: priceInfo.quantity - childQuantity, onChange: setAdultsQuantityOnChange }),
+        },
+        {
+            name: Translation_1.Translation.Step.Date.Child_plural,
+            enabled: priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.childPrice,
+            element: React.createElement(NumberIncrement_1.default, { number: childQuantity, min: 0, max: priceInfo.quantity - adultQuantity, onChange: setChildQuantityOnChange }),
+        },
+    ];
+    let pricingTypeSuffix = (() => {
+        switch (addon.pricingType) {
+            case Addon_1.AddonPricingType.PER_STAY:
+                return 'QTY';
+            case Addon_1.AddonPricingType.PER_NIGHT:
+                return 'Night';
+            case Addon_1.AddonPricingType.PER_PERSON:
+                return 'Person';
+            case Addon_1.AddonPricingType.PER_PERSON_OCCUPANCY_PER_NIGHT:
+            case Addon_1.AddonPricingType.PER_PERSON_PER_NIGHT:
+                return 'Person per night';
+            case Addon_1.AddonPricingType.PER_ADULT_OCCUPANCY_PER_NIGHT:
+                return 'Adult per night';
+            case Addon_1.AddonPricingType.PER_CHILD_OCCUPANCY_PER_NIGHT:
+                return 'Adult per night';
+            case Addon_1.AddonPricingType.PER_QUANTITY_NAME_PER_NIGHT:
+                return 'Night';
+            case Addon_1.AddonPricingType.PER_ROOM_QUANTITY_PER_NIGHT:
+                return 'Per Room / Day';
+        }
+    })();
+    const addonCardImageStyle = {};
+    if (addon.image) {
+        addonCardImageStyle.backgroundImage = `url('${addon.image}')`;
+    }
+    else {
+        addonCardImageStyle.backgroundImage = `url('${hotel.logo}')`;
+        addonCardImageStyle.backgroundSize = '50%';
+        addonCardImageStyle.backgroundRepeat = 'no-repeat';
+    }
+    return (React.createElement("div", { className: 'u-flex u-flex-flex-start u-rounded addon-card-wrapper ' + className + ' ' + classes, style: { backgroundColor: Color_1.Color.White } },
+        React.createElement("div", { className: "addon-card-image", style: addonCardImageStyle }),
+        React.createElement("div", { className: "u-marg-heavy u-marg@m- u-w-100@xl" },
+            React.createElement("div", { className: "u-flex" },
+                React.createElement(Headline_1.default, { bold: true }, addon.name),
+                addonBasketRow ? React.createElement(Check_1.default, null) : React.createElement(React.Fragment, null)),
+            React.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small }, addon.description),
+            React.createElement("div", { className: "addon-card-wrapper--price u-flex u-flex-align-flex-end" },
+                React.createElement("div", { className: "u-w-100" }, addonConfigurations.map((input) => {
+                    if (!input.enabled) {
+                        return;
+                    }
+                    return (React.createElement("div", { key: input.name, className: "u-flex justify-content-start u-marg-bot u-marg-top" },
+                        React.createElement(Text_1.default, { className: "u-mw-100", bold: true }, t(input.name)),
+                        input.element));
+                })),
+                React.createElement("div", { className: "addon-card-wrapper--price-action" },
+                    React.createElement("div", { className: "u-flex u-flex-direction-column u-flex-align-flex-end", style: { alignSelf: 'flex-end' } },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, inline: true }, t(Translation_1.Translation.Misc.From)),
+                        React.createElement("div", { className: "room-details--content-price flex-align-items-baseline flex-row" },
+                            (priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.price) && (React.createElement(React.Fragment, null,
+                                React.createElement("div", { className: "u-flex align-items-end" },
+                                    React.createElement(Headline_1.default, { size: 'large', bold: true, lineHeight: "1em" },
+                                        React.createElement(Currency_1.default, { hideDecimals: true }, priceInfo.price)),
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey, inline: true, className: "u-marg-left--light u-clear-font-weight" },
+                                        "/ ",
+                                        pricingTypeSuffix)))),
+                            (!!(priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.adultPrice) || !!(priceInfo === null || priceInfo === void 0 ? void 0 : priceInfo.childPrice)) && (React.createElement("h2", { className: "u-marg-none d-flex flex-wrap justify-content-end" },
+                                !!priceInfo.adultPrice && (React.createElement("div", { className: "d-flex align-items-end flex-row" },
+                                    React.createElement(Headline_1.default, { size: 'large', bold: true, lineHeight: "1em" },
+                                        React.createElement(Currency_1.default, null, priceInfo.adultPrice)),
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey, inline: true, className: "u-marg-left--light u-clear-font-weight" },
+                                        "/ ",
+                                        t(Translation_1.Translation.Step.Date.Adult)))),
+                                !!priceInfo.adultPrice && !!priceInfo.childPrice && React.createElement("br", null),
+                                !!priceInfo.childPrice && (React.createElement("div", { className: "d-flex align-items-end flex-row" },
+                                    React.createElement(Headline_1.default, { size: 'large', bold: true, lineHeight: "1em" },
+                                        React.createElement(Currency_1.default, null, priceInfo.childPrice)),
+                                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey, inline: true, className: "u-marg-left--light u-clear-font-weight" },
+                                        "/ ",
+                                        t(Translation_1.Translation.Step.Date.Child))))))),
+                        React.createElement("div", { className: "u-marg-bottom--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey, inline: true, className: "u-nowrap" }, "Including Fees and Taxes"))),
+                    React.createElement("div", { className: "u-marg-top--light u-flex justify-content-end u-w-100@l- flex-column flex-lg-row" },
+                        addonBasketRow ? (React.createElement("div", { className: "u-marg-right--light@l u-marg-bottom--light@l-" },
+                            React.createElement(BEButton_1.default, { onClick: onClickRemove, textColor: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, wide: true }, t(Translation_1.Translation.Step.Addon.Remove)))) : (React.createElement(React.Fragment, null)),
+                        React.createElement(BEButton_1.default, { onClick: onClickAddToCartHandler, primary: true, filled: true, wide: true }, addonBasketRow ? t(Translation_1.Translation.Step.Addon.UpdateCart) : t(Translation_1.Translation.Step.Addon.AddToCart))))))));
+};
+exports.default = AddonCard;
+//# sourceMappingURL=AddonCard.js.map

package/dist/src/components/steps/addons/AddonCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddonCard.js","sourceRoot":"/","sources":["src/components/steps/addons/AddonCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useState, useEffect } from 'react';\n\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext } from '@frontend/contexts';\nimport { Addon, PriceInfo, AddonPricingType } from '../../../models/Addon/Addon';\nimport { Translation } from '../../../translations/Translation';\nimport { Color } from '../../../util/Color';\nimport BEButton from '../../generic/BEButton';\nimport BESelect from '../../generic/BESelect';\nimport Currency from '../../generic/Currency';\nimport Headline from '../../generic/Headline';\nimport { IconDropdownFilled } from '../../generic/Icon';\nimport NumberIncrement from '../../generic/NumberIncrement';\nimport Text, { TextType } from '../../generic/Text';\nimport classNames from 'classnames';\nimport Check from '../../../icons/Check';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ninterface Props {\n    addon: Addon;\n    className?: string;\n}\n\nconst AddonCard = ({ addon, className }: Props) => {\n    const { t } = useTranslation();\n\n    const { hotel } = useCurrentHotel();\n    const basketContext = React.useContext(BasketContext);\n\n    const addonBasketRow = basketContext.getRowForAddon(addon);\n\n    const [quantity, setQuantity] = useState(1);\n    const [adultQuantity, setAdultQuantity] = useState(addonBasketRow ? addonBasketRow.getAdultQuantity() : 1);\n    const [childQuantity, setChildQuantity] = useState(addonBasketRow ? addonBasketRow.getChildQuantity() : 0);\n\n    const [priceInfo, setPriceInfo] = useState<PriceInfo>({ quantity: 1 });\n\n    const [selectedDate, setSelectedDate] = useState(addonBasketRow ? addonBasketRow.getSelectedDate() : '');\n    const [selectedTime, setSelectedTime] = useState(addonBasketRow ? addonBasketRow.getSelectedTime() : '');\n\n    useEffect(() => {\n        if (addonBasketRow) {\n            setPriceInfo(addon.availability[addonBasketRow.getSelectedDate()] ?? addon.availability[addon.firstDate]);\n            setSelectedDate(addonBasketRow.getSelectedDate() ?? addon.firstDate);\n            setSelectedTime(addonBasketRow.getSelectedTime() ?? '');\n            setQuantity(addonBasketRow.getQuantity());\n            setAdultQuantity(addonBasketRow.getAdultQuantity());\n            setChildQuantity(addonBasketRow.getChildQuantity());\n        } else {\n            setPriceInfo(addon.availability[addon.firstDate] ?? ([] as any));\n            setSelectedDate(addon.firstDate);\n            setSelectedTime(addon.availability[addon.firstDate]?.selectorTimes?.[0]?.value);\n        }\n    }, []);\n\n    const setDate = (date: any) => {\n        setPriceInfo(addon.availability[date]);\n        setSelectedDate(date);\n        setSelectedTime(addon.availability[date]?.selectorTimes?.[0]?.value);\n        if (addon.availability[date].quantity < quantity) {\n            setQuantity(addon.availability[date].quantity);\n        }\n    };\n\n    const onClickAddToCartHandler = () => {\n        basketContext.setAddonQuantities(\n            addon,\n            {\n                quantity,\n                adult: adultQuantity,\n                child: childQuantity,\n            },\n            selectedDate,\n            selectedTime\n        );\n    };\n\n    const classes = classNames({\n        '--active': !!basketContext.getRowForAddon(addon),\n    });\n\n    const onClickRemove = () => {\n        const selectedAddon = basketContext.basketAddonRows.find((row) => {\n            return row.getAddon().code === addon.code;\n        });\n        basketContext.removeBasketAddonRow(selectedAddon);\n    };\n\n    const setQuantityOnChange = (val: any) => {\n        setQuantity(val);\n    };\n    const setAdultsQuantityOnChange = (val: any) => {\n        setAdultQuantity(val);\n    };\n    const setChildQuantityOnChange = (val: any) => {\n        setChildQuantity(val);\n    };\n    const setDateOnChange = (selected: any) => {\n        setDate(selected);\n    };\n    const setSelectedTimeOnChange = (selected: any) => {\n        setSelectedTime(selected);\n    };\n\n    const addonConfigurations = [\n        {\n            name: 'Date',\n            enabled: addonBasketRow?.getNumberOfAvailableNights() > 1 && !addonBasketRow.getAddon().hideDatePicker,\n            element: (\n                <BESelect\n                    className=\"u-flex align-items-center\"\n                    onChange={setDateOnChange}\n                    selectedValue={selectedDate}\n                    iconComponent={IconDropdownFilled}\n                    items={addon.selectorDates}\n                />\n            ),\n        },\n        {\n            name: 'Time',\n            enabled: priceInfo?.selectorTimes?.length !== 0,\n            element: (\n                <BESelect\n                    className=\"u-flex align-items-center\"\n                    onChange={setSelectedTimeOnChange}\n                    selectedValue={selectedTime}\n                    iconComponent={IconDropdownFilled}\n                    items={priceInfo?.selectorTimes}\n                />\n            ),\n        },\n        {\n            name: Translation.Step.Addon.Quantity,\n            enabled: priceInfo?.price,\n            element: <NumberIncrement number={quantity} min={1} max={priceInfo.quantity} onChange={setQuantityOnChange} />,\n        },\n        {\n            name: Translation.Step.Date.Adult_plural,\n            enabled: priceInfo?.adultPrice,\n            element: <NumberIncrement number={adultQuantity} min={0} max={priceInfo.quantity - childQuantity} onChange={setAdultsQuantityOnChange} />,\n        },\n        {\n            name: Translation.Step.Date.Child_plural,\n            enabled: priceInfo?.childPrice,\n            element: <NumberIncrement number={childQuantity} min={0} max={priceInfo.quantity - adultQuantity} onChange={setChildQuantityOnChange} />,\n        },\n    ];\n\n    let pricingTypeSuffix = (() => {\n        switch (addon.pricingType) {\n            case AddonPricingType.PER_STAY:\n                return 'QTY';\n            case AddonPricingType.PER_NIGHT:\n                return 'Night';\n            case AddonPricingType.PER_PERSON:\n                return 'Person';\n            case AddonPricingType.PER_PERSON_OCCUPANCY_PER_NIGHT:\n            case AddonPricingType.PER_PERSON_PER_NIGHT:\n                return 'Person per night';\n            case AddonPricingType.PER_ADULT_OCCUPANCY_PER_NIGHT:\n                return 'Adult per night';\n            case AddonPricingType.PER_CHILD_OCCUPANCY_PER_NIGHT:\n                return 'Adult per night';\n            case AddonPricingType.PER_QUANTITY_NAME_PER_NIGHT:\n                return 'Night';\n            case AddonPricingType.PER_ROOM_QUANTITY_PER_NIGHT:\n                return 'Per Room / Day';\n        }\n    })();\n\n    const addonCardImageStyle: any = {};\n    if (addon.image) {\n        addonCardImageStyle.backgroundImage = `url('${addon.image}')`;\n    } else {\n        addonCardImageStyle.backgroundImage = `url('${hotel.logo}')`;\n        addonCardImageStyle.backgroundSize = '50%';\n        addonCardImageStyle.backgroundRepeat = 'no-repeat';\n    }\n\n    return (\n        <div className={'u-flex u-flex-flex-start u-rounded addon-card-wrapper ' + className + ' ' + classes} style={{ backgroundColor: Color.White }}>\n            <div className=\"addon-card-image\" style={addonCardImageStyle} />\n            <div className=\"u-marg-heavy u-marg@m- u-w-100@xl\">\n                <div className=\"u-flex\">\n                    <Headline bold={true}>{addon.name}</Headline>\n                    {addonBasketRow ? <Check /> : <></>}\n                </div>\n                <Text color={Color.DarkGrey} type={TextType.Small}>\n                    {addon.description}\n                </Text>\n                <div className=\"addon-card-wrapper--price u-flex u-flex-align-flex-end\">\n                    <div className=\"u-w-100\">\n                        {addonConfigurations.map((input) => {\n                            if (!input.enabled) {\n                                return;\n                            }\n\n                            return (\n                                <div key={input.name} className=\"u-flex justify-content-start u-marg-bot u-marg-top\">\n                                    <Text className=\"u-mw-100\" bold={true}>\n                                        {t(input.name)}\n                                    </Text>\n                                    {input.element}\n                                </div>\n                            );\n                        })}\n\n                        {/* {addon.guaranteeDescription && (\n                            <>\n                                <h4 className=\"u-marg-bottom--light u-marg-top\">Guarantee</h4>\n                                <div className=\"u-marg-bot--heavy\">\n                                    <Text type={TextType.Small}>{addon.guaranteeDescription}</Text>\n                                </div>\n                            </>\n                        )}\n                        {addon.cancelPenalty && (\n                            <>\n                                <h4 className=\"u-marg-bottom--light u-marg-top\">Cancellation Policy</h4>\n                                <div className=\"u-marg-bot--heavy\">\n                                    <Text type={TextType.Small}>{addon.cancelPenalty}</Text>\n                                </div>\n                            </>\n                        )} */}\n                    </div>\n                    <div className=\"addon-card-wrapper--price-action\">\n                        <div className=\"u-flex u-flex-direction-column u-flex-align-flex-end\" style={{ alignSelf: 'flex-end' }}>\n                            <Text type={TextType.Small} color={Color.Navy} inline={true}>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"room-details--content-price flex-align-items-baseline flex-row\">\n                                {priceInfo?.price && (\n                                    <>\n                                        <div className=\"u-flex align-items-end\">\n                                            <Headline size={'large'} bold={true} lineHeight=\"1em\">\n                                                <Currency hideDecimals={true}>{priceInfo.price}</Currency>\n                                            </Headline>\n                                            <Text type={TextType.Small} color={Color.DarkGrey} inline={true} className=\"u-marg-left--light u-clear-font-weight\">\n                                                / {pricingTypeSuffix}\n                                            </Text>\n                                        </div>\n                                    </>\n                                )}\n                                {(!!priceInfo?.adultPrice || !!priceInfo?.childPrice) && (\n                                    <h2 className=\"u-marg-none d-flex flex-wrap justify-content-end\">\n                                        {!!priceInfo.adultPrice && (\n                                            <div className=\"d-flex align-items-end flex-row\">\n                                                <Headline size={'large'} bold={true} lineHeight=\"1em\">\n                                                    <Currency>{priceInfo.adultPrice}</Currency>\n                                                </Headline>\n                                                <Text type={TextType.Small} color={Color.DarkGrey} inline={true} className=\"u-marg-left--light u-clear-font-weight\">\n                                                    / {t(Translation.Step.Date.Adult)}\n                                                </Text>\n                                            </div>\n                                        )}\n                                        {!!priceInfo.adultPrice && !!priceInfo.childPrice && <br />}\n                                        {!!priceInfo.childPrice && (\n                                            <div className=\"d-flex align-items-end flex-row\">\n                                                <Headline size={'large'} bold={true} lineHeight=\"1em\">\n                                                    <Currency>{priceInfo.childPrice}</Currency>\n                                                </Headline>\n                                                <Text type={TextType.Small} color={Color.DarkGrey} inline={true} className=\"u-marg-left--light u-clear-font-weight\">\n                                                    / {t(Translation.Step.Date.Child)}\n                                                </Text>\n                                            </div>\n                                        )}\n                                    </h2>\n                                )}\n                            </div>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Small} color={Color.Grey} inline={true} className=\"u-nowrap\">\n                                    Including Fees and Taxes\n                                </Text>\n                            </div>\n                        </div>\n                        <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@l- flex-column flex-lg-row\">\n                            {addonBasketRow ? (\n                                <div className=\"u-marg-right--light@l u-marg-bottom--light@l-\">\n                                    <BEButton onClick={onClickRemove} textColor={Color.White} backgroundColor={Color.Navy} wide={true}>\n                                        {t(Translation.Step.Addon.Remove)}\n                                    </BEButton>\n                                </div>\n                            ) : (\n                                <></>\n                            )}\n                            <BEButton onClick={onClickAddToCartHandler} primary={true} filled={true} wide={true}>\n                                {addonBasketRow ? t(Translation.Step.Addon.UpdateCart) : t(Translation.Step.Addon.AddToCart)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default AddonCard;\n"]}

package/dist/src/components/steps/addons/AddonList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AddonList: () => JSX.Element;
+export default AddonList;

package/dist/src/components/steps/addons/AddonList.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const BookingAPI_1 = require("../../../api/BookingAPI");
+const contexts_1 = require("@frontend/contexts");
+const contexts_2 = require("@frontend/contexts");
+const hooks_1 = require("@frontend/hooks");
+const ScreenSize_1 = require("../../../util/ScreenSize");
+const LargeLoader_1 = require("../../generic/loader/LargeLoader");
+const StepRoomSummaryAndButton_1 = require("../room/StepRoomSummaryAndButton");
+const AddonCard_1 = require("./AddonCard");
+const AddonsNotFound_1 = require("./AddonsNotFound");
+const AddonList = () => {
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const beContext = react_1.useContext(contexts_1.BookingEngineContext);
+    const ccx = react_1.useContext(contexts_2.CompanyContext);
+    const { hotel } = hooks_1.useCurrentHotel();
+    const rows = basketContext.getAllValidRows();
+    const [addons, setAddons] = react_1.useState(null);
+    const [isLoading, setLoading] = react_1.useState(false);
+    React.useEffect(() => {
+        setLoading(true);
+        BookingAPI_1.default.Addons.findAddons(rows, hotel.hotelID).then((foundedAddons) => {
+            setLoading(false);
+            setAddons(foundedAddons);
+        });
+    }, [ccx.currentLanguage]);
+    return (React.createElement("div", { className: "u-flex" },
+        React.createElement("div", { className: 'row' + (beContext.screenSize > ScreenSize_1.default.ExtraLarge ? ' no-gutters' : '') },
+            React.createElement("div", { className: "col-md-7 col-lg-8 no-gutters" }, !isLoading ? ((addons === null || addons === void 0 ? void 0 : addons.length) ? (addons.map((addon, index) => {
+                return React.createElement(AddonCard_1.default, { key: index, className: "u-marg-bottom", addon: addon });
+            })) : (React.createElement(AddonsNotFound_1.default, null))) : (React.createElement(LargeLoader_1.default, null))),
+            React.createElement("div", { className: "col-xl-3 col-md-5 col-lg-4 offset-xl-1" },
+                React.createElement(StepRoomSummaryAndButton_1.default, null)))));
+};
+exports.default = AddonList;
+//# sourceMappingURL=AddonList.js.map

package/dist/src/components/steps/addons/AddonList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddonList.js","sourceRoot":"/","sources":["src/components/steps/addons/AddonList.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAA6C;AAC7C,wDAA0C;AAC1C,iDAAyE;AACzE,iDAAoD;AACpD,2CAAkD;AAGlD,yDAAkD;AAClD,kEAA2D;AAC3D,+EAAwE;AACxE,2CAAoC;AACpC,qDAA8C;AAE9C,MAAM,SAAS,GAAG,GAAG,EAAE;IACnB,MAAM,aAAa,GAAG,kBAAU,CAAC,wBAAa,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAU,CAAC,+BAAoB,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,kBAAU,CAAC,yBAAc,CAAC,CAAC;IAEvC,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAe,EAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,aAAa,CAAC,eAAe,EAAE,CAAC;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,oBAAG,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,EAAE,EAAE;YAC9D,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,SAAS,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,6BAAK,SAAS,EAAC,QAAQ;QACnB,6BAAK,SAAS,EAAE,KAAK,GAAG,CAAC,SAAS,CAAC,UAAU,GAAG,oBAAU,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;YACvF,6BAAK,SAAS,EAAC,8BAA8B,IACxC,CAAC,SAAS,CAAC,CAAC,CAAC,CACV,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAC,CAAC,CAAC,CACb,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,KAAa,EAAE,EAAE;gBACvC,OAAO,oBAAC,mBAAS,IAAC,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;YAC7E,CAAC,CAAC,CACL,CAAC,CAAC,CAAC,CACA,oBAAC,wBAAc,OAAG,CACrB,CACJ,CAAC,CAAC,CAAC,CACA,oBAAC,qBAAW,OAAG,CAClB,CACC;YAEN,6BAAK,SAAS,EAAC,wCAAwC;gBACnD,oBAAC,kCAAwB,OAAG,CAC1B,CACJ,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useContext, useState } from 'react';\nimport API from '../../../api/BookingAPI';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport { CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { Addon } from '../../../models/Addon/Addon';\n\nimport ScreenSize from '../../../util/ScreenSize';\nimport LargeLoader from '../../generic/loader/LargeLoader';\nimport StepRoomSummaryAndButton from '../room/StepRoomSummaryAndButton';\nimport AddonCard from './AddonCard';\nimport AddonsNotFound from './AddonsNotFound';\n\nconst AddonList = () => {\n    const basketContext = useContext(BasketContext);\n    const beContext = useContext(BookingEngineContext);\n    const ccx = useContext(CompanyContext);\n\n    const { hotel } = useCurrentHotel();\n\n    const rows = basketContext.getAllValidRows();\n    const [addons, setAddons] = useState(null);\n    const [isLoading, setLoading] = useState(false);\n\n    React.useEffect(() => {\n        setLoading(true);\n        API.Addons.findAddons(rows, hotel.hotelID).then((foundedAddons) => {\n            setLoading(false);\n            setAddons(foundedAddons);\n        });\n    }, [ccx.currentLanguage]);\n\n    return (\n        <div className=\"u-flex\">\n            <div className={'row' + (beContext.screenSize > ScreenSize.ExtraLarge ? ' no-gutters' : '')}>\n                <div className=\"col-md-7 col-lg-8 no-gutters\">\n                    {!isLoading ? (\n                        addons?.length ? (\n                            addons.map((addon: Addon, index: number) => {\n                                return <AddonCard key={index} className=\"u-marg-bottom\" addon={addon} />;\n                            })\n                        ) : (\n                            <AddonsNotFound />\n                        )\n                    ) : (\n                        <LargeLoader />\n                    )}\n                </div>\n\n                <div className=\"col-xl-3 col-md-5 col-lg-4 offset-xl-1\">\n                    <StepRoomSummaryAndButton />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default AddonList;\n"]}

package/dist/src/components/steps/addons/AddonsNotFound.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AddonsNotFound(): JSX.Element;