@roomstay/frontend 2.0.0-1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@roomstay/frontend",
-    "version": "2.0.0-1",
+    "version": "2.0.0",
     "author": {
         "name": "Roomstay",
         "email": "rob@roomstay.io",

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-declare global {
-    interface Window {
-        VGSCollect: any;
-    }
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-export default _default;

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

@@ -1,241 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const react_1 = require("react");
-const InputGroup_1 = require("components/generic/InputGroup/InputGroup");
-const AutoAutoHeight_1 = require("animations/AutoAutoHeight");
-const Alert_1 = require("components/generic/Alert");
-const Icon_1 = require("components/generic/Icon/Icon");
-const Text_1 = require("components/generic/Text");
-const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("translations/Translation");
-const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
-const DataLayer_1 = require("util/DataLayer");
-const HotelDTO_1 = require("models/Api/HotelDTO");
-const LargeLoader_1 = require("components/generic/loader/LargeLoader");
-const hooks_1 = require("@frontend/hooks");
-window.VGSCollect = window.VGSCollect || {};
-class VGSInputMapper {
-    constructor(name, type, ref, vgsProps) {
-        this.name = name;
-        this.ref = ref;
-        this.type = type;
-        this.vgsProps = vgsProps;
-        this.isValid = null;
-        this.isFocused = false;
-    }
-}
-function StepConfirmationPaymentDetails(props, ref) {
-    var _a;
-    const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const [VGSForm, setVGSForm] = (0, react_1.useState)(null);
-    const [errors, setErrors] = (0, react_1.useState)({});
-    const [vgsLoaded, setVgsLoaded] = (0, react_1.useState)(false);
-    const { focusElement } = (0, hooks_1.useWindowScroll)();
-    const setErrorsOnFaults = (faults) => {
-        const newErrors = {};
-        Object.keys(faults).forEach((input) => {
-            let name = '';
-            switch (input) {
-                case 'credit-card':
-                    name = 'Credit Card';
-                    break;
-                case 'expiration-date':
-                    name = 'Expiration Date';
-                    break;
-                case 'security-code':
-                    name = 'Security Code';
-                    break;
-                default:
-                    name = 'Card Name';
-                    break;
-            }
-            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];
-        });
-        setErrors(newErrors);
-    };
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (errors && Object.keys(errors).length !== 0 && ((_a = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.ref) === null || _a === void 0 ? void 0 : _a.current)) {
-            focusElement((_b = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.ref) === null || _b === void 0 ? void 0 : _b.current);
-        }
-    }, [errors]);
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        getTokenizedCode: () => new Promise((resolve, reject) => {
-            if (VGSForm) {
-                VGSForm.submit('/post', {
-                    serializer: 'deep',
-                    methods: 'POST',
-                }, (status, response) => {
-                    const cardData = JSON.parse(response.data);
-                    const expMatch = cardData['expiration-date'].match(/^(\d+)\s*\/\s*(\d+)$/);
-                    if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {
-                        setErrorsOnFaults({
-                            'expiration-date': {
-                                errorMessages: ['Invalid - it must be in the format MM / YY or MM / YYYY'],
-                            },
-                        });
-                        reject('invalid expiration date');
-                        return;
-                    }
-                    const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));
-                    const card = {
-                        CVV: cardData['security-code'],
-                        Expiry: parseInt(expiration),
-                        Name: cardData['card-name'],
-                        Number: cardData['credit-card'],
-                        Type: window.VGSCollect.enteredCardType,
-                    };
-                    resolve(card);
-                }, (error) => {
-                    setErrorsOnFaults(error);
-                    reject(error);
-                });
-            }
-            else {
-                console.error('VGS not on element, problem has occurred');
-            }
-        }),
-    }));
-    const formRef = (0, react_1.useRef)(null);
-    const getClassesFormInput = (mapper) => {
-        const classes = ['c-input'];
-        if (mapper.isFocused) {
-            classes.push('--selected');
-        }
-        if (mapper.isValid !== null) {
-            if (mapper.isValid) {
-                classes.push('--success');
-            }
-            else {
-                classes.push('--error');
-            }
-        }
-        return classes.join(' ');
-    };
-    const getVGSInputProps = (mapper) => {
-        return Object.assign({ name: mapper.name, type: mapper.type }, mapper.vgsProps);
-    };
-    const css = {
-        fontSize: '13px',
-        lineHeight: '18px',
-        '&::placeholder': {
-            color: '#8B8F9A',
-            opacity: 1,
-        },
-    };
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const cardNumberplaceholder = t(Translation_1.Translation.Step.Confirmation.Inputs.CardNumber);
-    const nameOnCardplaceholder = t(Translation_1.Translation.Step.Confirmation.Inputs.NameOnCard);
-    const securityCodeplaceholder = t(Translation_1.Translation.Step.Confirmation.Inputs.SecurityCode);
-    const cardExpiryplaceholder = t(Translation_1.Translation.Step.Confirmation.Inputs.CardExpiry);
-    const [cardNumber, setCardNumber] = (0, react_1.useState)(new VGSInputMapper('credit-card', 'card-number', (0, react_1.useRef)(null), {
-        autoComplete: ['cc-number'],
-        successColor: '#4F8A10',
-        errorColor: '#D8000C',
-        showCardIcon: false,
-        placeholder: cardNumberplaceholder + ' *',
-        validations: ['required', 'validCardNumber'],
-        css,
-    }));
-    const [nameOnCard, setNameOnCard] = (0, react_1.useState)(new VGSInputMapper('card-name', 'text', (0, react_1.useRef)(null), {
-        placeholder: nameOnCardplaceholder + ' *',
-        validations: ['required'],
-        css,
-    }));
-    const [expirationDate, setExpirationDate] = (0, react_1.useState)(new VGSInputMapper('expiration-date', 'card-expiration-date', (0, react_1.useRef)(null), {
-        placeholder: cardExpiryplaceholder + ' *',
-        validations: ['required', 'validCardExpirationDate'],
-        css,
-    }));
-    const [securityCode, setSecurityCode] = (0, react_1.useState)(new VGSInputMapper('security-code', 'card-security-code', (0, react_1.useRef)(null), {
-        placeholder: securityCodeplaceholder + ' *',
-        validations: ['required', 'validCardSecurityCode'],
-        css,
-    }));
-    const vgsInputsAndSetters = [
-        [cardNumber, setCardNumber],
-        [nameOnCard, setNameOnCard],
-        [expirationDate, setExpirationDate],
-        [securityCode, setSecurityCode],
-    ];
-    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];
-    const [selectedCard, setSelectedCard] = (0, react_1.useState)(String);
-    const cardTypes = ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.paymentCardTypes) !== null && _a !== void 0 ? _a : [])
-        .map((card) => {
-        const mapping = HotelDTO_1.SynxisToVGSCardNameMapping[card];
-        if (!mapping) {
-            return null;
-        }
-        return {
-            name: HotelDTO_1.SynxisToVGSCardNameMapping[card],
-            status: false,
-        };
-    })
-        .filter((obj) => obj);
-    (0, react_1.useEffect)(() => {
-        let cancelled = false;
-        RoomstayThemeEngine_1.default.loadScript('https://js.verygoodvault.com/vgs-collect/1/AC7dReJwJ6EWF1L9FHdcCw7n.js', 'vgs-collect').then(() => {
-            if (!cancelled) {
-                setVgsLoaded(true);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (vgsLoaded) {
-            setVGSForm(window.VGSCollect.create(hotel === null || hotel === void 0 ? void 0 : hotel.vgsVaultName, (state) => {
-                var _a, _b;
-                DataLayer_1.default.instance.sendInteraction('Payment Info', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
-                window.VGSCollect.enteredCardType = (_a = state['credit-card']) === null || _a === void 0 ? void 0 : _a.cardType;
-                setSelectedCard((_b = state['credit-card']) === null || _b === void 0 ? void 0 : _b.cardType);
-                vgsInputsAndSetters.forEach((getNSet) => {
-                    const old = Object.assign({}, getNSet[0]);
-                    const clone = getNSet[0];
-                    const vgsState = state[getNSet[0].name];
-                    if (vgsState) {
-                        clone.isFocused = vgsState.isFocused;
-                        clone.isValid = !vgsState.isEmpty ? vgsState.isValid : null;
-                    }
-                    getNSet[1](Object.assign({}, clone));
-                });
-            }));
-        }
-    }, [vgsLoaded]);
-    (0, react_1.useEffect)(() => {
-        if (VGSForm) {
-            vgsInputsAndSetters.forEach((getNSet) => {
-                const mapper = getNSet[0];
-                VGSForm.field(mapper.ref.current, getVGSInputProps(mapper));
-            });
-        }
-    }, [VGSForm]);
-    if (vgsLoaded) {
-        return (React.createElement(React.Fragment, null,
-            inputNames.map((name) => {
-                const errorMessage = errors[name];
-                return (React.createElement(AutoAutoHeight_1.default, { open: !!errorMessage, key: name },
-                    React.createElement("div", { className: "u-flex" },
-                        React.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, errorMessage)))));
-            }),
-            React.createElement("div", { className: "u-flex flex-row justify-content-start u-marg-bottom" }, Object.keys(cardTypes).map((cardKey) => {
-                return (React.createElement("div", { key: cardKey, id: cardTypes[cardKey].name, className: 'cc-icon u-flex u-marg-right--light' + (selectedCard !== null ? (cardTypes[cardKey].name === selectedCard ? ' -current' : '') : ' -default'), style: { backgroundImage: `url('${RoomstayThemeEngine_1.default.getAssetUrl() + 'assets/img/' + cardTypes[cardKey].name + '.png'}')` } }));
-            })),
-            React.createElement("form", { ref: formRef },
-                React.createElement(InputGroup_1.default, { dimensions: "2/2" },
-                    React.createElement("div", { className: getClassesFormInput(cardNumber), ref: cardNumber.ref }),
-                    React.createElement(InputGroup_1.default, { dimensions: "2/2" },
-                        React.createElement("div", { className: getClassesFormInput(expirationDate), ref: expirationDate.ref }),
-                        React.createElement("div", { className: getClassesFormInput(securityCode), ref: securityCode.ref }))),
-                React.createElement(InputGroup_1.default, { dimensions: "1" },
-                    React.createElement("div", { className: getClassesFormInput(nameOnCard), ref: nameOnCard.ref })))));
-    }
-    else {
-        return React.createElement(LargeLoader_1.default, null);
-    }
-}
-exports.default = (0, react_1.forwardRef)(StepConfirmationPaymentDetails);
-//# sourceMappingURL=StepConfirmationPaymentDetails.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"StepConfirmationPaymentDetails.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationPaymentDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport InputGroup from 'components/generic/InputGroup/InputGroup';\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport Alert, { AlertType } from 'components/generic/Alert';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport Text, { TextType } from 'components/generic/Text';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\nimport DataLayer, { InteractionStep, InteractionType } from 'util/DataLayer';\nimport { SynxisToVGSCardNameMapping } from 'models/Api/HotelDTO';\nimport LargeLoader from 'components/generic/loader/LargeLoader';\nimport { useCurrentHotel, useWindowScroll } from '@frontend/hooks';\nimport { IBookingPaymentTokenizedCard } from '@roomstay/core';\n\ndeclare global {\n    interface Window {\n        VGSCollect: any;\n    }\n}\n\nwindow.VGSCollect = window.VGSCollect || {};\n\ntype VGSInputType = 'card-number' | 'text' | 'card-expiration-date' | 'card-security-code';\n\nclass VGSInputMapper {\n    public ref: React.MutableRefObject<any>;\n    public vgsProps: any;\n    public name: string;\n    public type: VGSInputType;\n\n    public isFocused: boolean;\n    public isValid: boolean;\n\n    public constructor(name: string, type: VGSInputType, ref: React.MutableRefObject<any>, vgsProps: any) {\n        this.name = name;\n        this.ref = ref;\n        this.type = type;\n        this.vgsProps = vgsProps;\n\n        this.isValid = null;\n        this.isFocused = false;\n    }\n}\n\nfunction StepConfirmationPaymentDetails(props: any, ref: any) {\n    const { hotel } = useCurrentHotel();\n\n    const [VGSForm, setVGSForm] = useState(null);\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n    const [vgsLoaded, setVgsLoaded] = useState(false);\n\n    const { focusElement } = useWindowScroll();\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 = 'Credit Card';\n                    break;\n                case 'expiration-date':\n                    name = 'Expiration Date';\n                    break;\n                case 'security-code':\n                    name = 'Security Code';\n                    break;\n                default:\n                    name = 'Card Name';\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<IBookingPaymentTokenizedCard>((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 = JSON.parse(response.data);\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: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\n                                    },\n                                });\n                                reject('invalid expiration date');\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: IBookingPaymentTokenizedCard = {\n                                CVV: cardData['security-code'],\n                                Expiry: parseInt(expiration),\n                                Name: cardData['card-name'],\n                                Number: cardData['credit-card'],\n                                Type: window.VGSCollect.enteredCardType,\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 getClassesFormInput = (mapper: VGSInputMapper) => {\n        const classes = ['c-input'];\n\n        if (mapper.isFocused) {\n            classes.push('--selected');\n        }\n\n        if (mapper.isValid !== null) {\n            if (mapper.isValid) {\n                classes.push('--success');\n            } else {\n                classes.push('--error');\n            }\n        }\n\n        return classes.join(' ');\n    };\n\n    const getVGSInputProps = (mapper: VGSInputMapper) => {\n        return {\n            name: mapper.name,\n            type: mapper.type,\n            ...mapper.vgsProps,\n        };\n    };\n\n    const css = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n    const { t } = useTranslation();\n    const cardNumberplaceholder = t(Translation.Step.Confirmation.Inputs.CardNumber);\n    const nameOnCardplaceholder = t(Translation.Step.Confirmation.Inputs.NameOnCard);\n    const securityCodeplaceholder = t(Translation.Step.Confirmation.Inputs.SecurityCode);\n    const cardExpiryplaceholder = t(Translation.Step.Confirmation.Inputs.CardExpiry);\n\n    const [cardNumber, setCardNumber] = useState(\n        new VGSInputMapper('credit-card', 'card-number', useRef(null), {\n            autoComplete: ['cc-number'],\n            successColor: '#4F8A10',\n            errorColor: '#D8000C',\n            showCardIcon: false,\n            placeholder: cardNumberplaceholder + ' *',\n            validations: ['required', 'validCardNumber'],\n            css,\n        })\n    );\n\n    const [nameOnCard, setNameOnCard] = useState(\n        new VGSInputMapper('card-name', 'text', useRef(null), {\n            placeholder: nameOnCardplaceholder + ' *',\n            validations: ['required'],\n            css,\n        })\n    );\n\n    const [expirationDate, setExpirationDate] = useState(\n        new VGSInputMapper('expiration-date', 'card-expiration-date', useRef(null), {\n            placeholder: cardExpiryplaceholder + ' *',\n            validations: ['required', 'validCardExpirationDate'],\n            css,\n        })\n    );\n\n    const [securityCode, setSecurityCode] = useState(\n        new VGSInputMapper('security-code', 'card-security-code', useRef(null), {\n            placeholder: securityCodeplaceholder + ' *',\n            validations: ['required', 'validCardSecurityCode'],\n            css,\n        })\n    );\n\n    const vgsInputsAndSetters: any = [\n        [cardNumber, setCardNumber],\n        [nameOnCard, setNameOnCard],\n        [expirationDate, setExpirationDate],\n        [securityCode, setSecurityCode],\n    ];\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n\n    const [selectedCard, setSelectedCard] = useState(String);\n\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card: string) => {\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    useEffect(() => {\n        let cancelled = false;\n\n        RoomstayThemeEngine.loadScript('https://js.verygoodvault.com/vgs-collect/1/AC7dReJwJ6EWF1L9FHdcCw7n.js', 'vgs-collect').then(() => {\n            if (!cancelled) {\n                setVgsLoaded(true);\n            }\n        });\n\n        return () => {\n            cancelled = true;\n        };\n    }, []);\n\n    useEffect(() => {\n        if (vgsLoaded) {\n            setVGSForm(\n                window.VGSCollect.create(hotel?.vgsVaultName, (state: any) => {\n                    DataLayer.instance.sendInteraction('Payment Info', InteractionType.FORM_FIELD, InteractionStep.GUEST_DETAILS);\n\n                    window.VGSCollect.enteredCardType = state['credit-card']?.cardType;\n\n                    setSelectedCard(state['credit-card']?.cardType);\n\n                    vgsInputsAndSetters.forEach((getNSet: any) => {\n                        const old = { ...getNSet[0] };\n                        const clone = getNSet[0];\n\n                        const vgsState = state[getNSet[0].name];\n\n                        if (vgsState) {\n                            clone.isFocused = vgsState.isFocused;\n\n                            clone.isValid = !vgsState.isEmpty ? vgsState.isValid : null;\n                        }\n\n                        getNSet[1]({ ...clone });\n                    });\n                })\n            );\n        }\n    }, [vgsLoaded]);\n\n    useEffect(() => {\n        if (VGSForm) {\n            vgsInputsAndSetters.forEach((getNSet: any) => {\n                const mapper = getNSet[0];\n\n                VGSForm.field(mapper.ref.current, getVGSInputProps(mapper));\n            });\n        }\n    }, [VGSForm]);\n\n    if (vgsLoaded) {\n        return (\n            <>\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-flex flex-row justify-content-start u-marg-bottom\">\n                    {Object.keys(cardTypes).map((cardKey: any) => {\n                        return (\n                            <div\n                                key={cardKey}\n                                id={cardTypes[cardKey].name}\n                                className={\n                                    'cc-icon u-flex u-marg-right--light' + (selectedCard !== null ? (cardTypes[cardKey].name === selectedCard ? ' -current' : '') : ' -default')\n                                }\n                                style={{ backgroundImage: `url('${RoomstayThemeEngine.getAssetUrl() + 'assets/img/' + cardTypes[cardKey].name + '.png'}')` }}\n                            />\n                        );\n                    })}\n                </div>\n                <form ref={formRef}>\n                    <InputGroup dimensions=\"2/2\">\n                        <div className={getClassesFormInput(cardNumber)} ref={cardNumber.ref} />\n                        <InputGroup dimensions=\"2/2\">\n                            <div className={getClassesFormInput(expirationDate)} ref={expirationDate.ref} />\n                            <div className={getClassesFormInput(securityCode)} ref={securityCode.ref} />\n                        </InputGroup>\n                    </InputGroup>\n                    <InputGroup dimensions=\"1\">\n                        <div className={getClassesFormInput(nameOnCard)} ref={nameOnCard.ref} />\n                    </InputGroup>\n                </form>\n            </>\n        );\n    } else {\n        return <LargeLoader />;\n    }\n}\n\nexport default forwardRef(StepConfirmationPaymentDetails);\n"]}

package/dist/src/contexts/BasketContext/BasketContextType.d.ts

@@ -1,41 +0,0 @@
-import type * as dayjs from 'dayjs';
-import type { Addon } from 'models/Addon/Addon';
-import type ReservationsDTO from 'models/Api/ReservationsDTO';
-import type BasketAddonRow from 'models/BasketAddonRow';
-import type BasketRow from 'models/BasketRow';
-import type { RoomRate } from 'models/Room/RoomRate';
-export interface BasketContextType {
-    selectedBasketRow: BasketRow;
-    currentBasketRows: BasketRow[];
-    basketAddonRows: BasketAddonRow[];
-    startDate: dayjs.Dayjs;
-    endDate: dayjs.Dayjs;
-    addBasketRow: (row: BasketRow, selectThisRate?: boolean, neverSelectThisRate?: boolean) => void;
-    addRate: (rate: RoomRate, notify?: boolean) => Promise<void>;
-    getAllValidRows: () => BasketRow[];
-    getAllDatelessRows: () => BasketRow[];
-    getNumberOfAdults: (withTranslation: boolean) => number | string;
-    getNumberOfChildren: (withTranslation: boolean) => number | string;
-    getNumberOfRooms: (withTranslation: boolean) => number | string;
-    getTotalPrice: () => any;
-    updateBasketRow: (row: BasketRow, updateGlobalDates?: boolean) => void;
-    removeBasketRow: (row: BasketRow) => void;
-    clearBasketRows: (confirm: boolean) => void;
-    selectBasketRow: (row: BasketRow) => void;
-    setStartDate: (date: dayjs.Dayjs) => void;
-    setEndDate: (date: dayjs.Dayjs) => void;
-    hasCheckedOut: boolean;
-    reservationData: ReservationsDTO;
-    booked: (data: ReservationsDTO) => void;
-    rollback: () => void;
-    checkedOut: (data: ReservationsDTO) => void;
-    clearSelectedRates: () => void;
-    getRowForAddon: (selectedAddon: Addon) => BasketAddonRow;
-    setAddonQuantities: (addon: Addon, quantities: {
-        quantity: number;
-        adult: number;
-        child: number;
-    }, selectedDate: string, selectedTime: string) => void;
-    removeBasketAddonRow: (row: BasketAddonRow) => void;
-    attemptSelectUnfilledRow: () => BasketRow | null;
-}