@roomstay/frontend 1.3.0

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedPhoneNumberField = void 0;
+const core_1 = require("@material-ui/core");
+const classnames_1 = require("classnames");
+const React = require("react");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const CountryCodesAndNumbers_1 = require("../../../../models/CountryCodesAndNumbers");
+const RoomstayThemeEngine_1 = require("../../../../providers/RoomstayThemeEngine");
+const Translation_1 = require("../../../../translations/Translation");
+const Icon_1 = require("../../Icon");
+require("./EnhancedPhoneNumberField.global.scss");
+const PHONE_AND_PREFIX_SPLIT = ' ';
+exports.EnhancedPhoneNumberField = (props) => {
+    const { t } = react_i18next_1.useTranslation();
+    const organizedCountries = react_1.useMemo(() => {
+        return CountryCodesAndNumbers_1.ListOfCountriesAndCodes.sort((a, b) => {
+            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);
+        });
+    }, [CountryCodesAndNumbers_1.ListOfCountriesAndCodes]);
+    const [isSuggestionOpen, setIsSuggestionOpen] = react_1.useState(false);
+    const container = react_1.useRef(null);
+    const { validationStatus, name, onChange, value } = props;
+    const [selectedCountry, subscriberCode] = react_1.useMemo(() => {
+        var _a;
+        const [prefix, number] = (_a = value === null || value === void 0 ? void 0 : value.split(PHONE_AND_PREFIX_SPLIT)) !== null && _a !== void 0 ? _a : [];
+        let selectedCountry;
+        if (prefix) {
+            for (const country of organizedCountries) {
+                if (prefix === `${country.phone}`) {
+                    selectedCountry = country;
+                    break;
+                }
+            }
+            if (!selectedCountry) {
+                selectedCountry = organizedCountries[0];
+            }
+            return [selectedCountry, number];
+        }
+        return [organizedCountries[0], ''];
+    }, [value]);
+    react_1.useEffect(() => {
+        // Close the modal if we click off it, weird hack to avoid modal closing before click is registered
+        const clickListener = (e) => {
+            setTimeout(() => {
+                if (isSuggestionOpen) {
+                    setIsSuggestionOpen(false);
+                }
+            }, 5);
+        };
+        document.body.addEventListener('click', clickListener);
+        return () => {
+            document.body.removeEventListener('click', clickListener);
+        };
+    }, [isSuggestionOpen]);
+    const onSuggestionsTriggerClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsSuggestionOpen((old) => !old);
+    };
+    const raiseOnChangeEvent = (prefix, suffix) => {
+        var _a;
+        let newSuffix = suffix !== null && suffix !== void 0 ? suffix : subscriberCode;
+        if (newSuffix.startsWith('0')) {
+            newSuffix = newSuffix.substring(1);
+        }
+        const newValue = `${(_a = prefix === null || prefix === void 0 ? void 0 : prefix.phone) !== null && _a !== void 0 ? _a : selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;
+        if (value != newValue) {
+            onChange({ target: { name, value: newValue } });
+        }
+    };
+    const onInputChanged = (e) => {
+        raiseOnChangeEvent(undefined, e.target.value);
+    };
+    const onPrefixChanged = (selectedCountry) => {
+        raiseOnChangeEvent(selectedCountry, undefined);
+    };
+    const fieldClasses = classnames_1.default('rs-enhanced-phone-field', {
+        [`--${validationStatus}`]: !!validationStatus,
+    });
+    return (React.createElement("div", { className: fieldClasses },
+        React.createElement("div", { className: "rs-enhanced-phone-field--country", onClick: onSuggestionsTriggerClick },
+            React.createElement("div", { className: "rs-enhanced-phone-field--country-icon" }, CountryCodesAndNumbers_1.convertCountryCodeToFlag(selectedCountry.code)),
+            React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown })),
+        React.createElement("div", { className: "rs-enhanced-phone-field--number" },
+            React.createElement("span", { className: "rs-enhanced-phone-field--number-prefix" },
+                "+",
+                selectedCountry.phone),
+            React.createElement("input", { placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) + ' *', type: "number", style: { paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }, onChange: onInputChanged, value: subscriberCode }),
+            React.createElement("div", { className: "rs-enhanced-phone-field--number-status" })),
+        React.createElement("div", { className: "rs-enhanced-phone-field--anchor", ref: container }),
+        React.createElement(core_1.Popper, { container: RoomstayThemeEngine_1.default.EngineContainer, anchorEl: container === null || container === void 0 ? void 0 : container.current, placement: "bottom-start", disablePortal: false, open: isSuggestionOpen, className: "rs-enhanced-phone-field--suggest-list", role: "presentation", modifiers: {
+                flip: {
+                    enabled: true,
+                },
+                preventOverflow: {
+                    enabled: false,
+                    boundariesElement: 'scrollParent',
+                },
+            } }, organizedCountries.map((country) => {
+            const onCountryClick = (e) => {
+                onPrefixChanged(country);
+                setIsSuggestionOpen(false);
+                return;
+            };
+            const isSelected = country.code === selectedCountry.code;
+            return (React.createElement("div", { className: `rs-enhanced-phone-field--suggest-list-item ${isSelected ? '--selected' : ''}`, onClick: onCountryClick },
+                React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-icon" }, CountryCodesAndNumbers_1.convertCountryCodeToFlag(country.code)),
+                React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-name" },
+                    country.label,
+                    " ",
+                    React.createElement("span", null,
+                        "+",
+                        country.phone)),
+                isSelected && (React.createElement("span", { className: "rs-enhanced-phone-field--suggest-list-selected" },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })))));
+        }))));
+};
+//# sourceMappingURL=EnhancedPhoneNumberField.js.map

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":";;;AAAA,4CAA2C;AAC3C,2CAAoC;AACpC,+BAA+B;AAC/B,iCAAsF;AACtF,iDAA+C;AAC/C,sFAA2H;AAC3H,mFAA4E;AAC5E,sEAAmE;AACnE,qCAA4C;AAE5C,kDAAgD;AAYhD,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAEtB,QAAA,wBAAwB,GAAG,CAAC,KAAwC,EAAE,EAAE;IACjF,MAAM,EAAE,CAAC,EAAE,GAAG,8BAAc,EAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAkB,eAAO,CAAC,GAAG,EAAE;QACnD,OAAO,gDAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAC9G,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gDAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,SAAS,GAAG,cAAM,CAAC,IAAI,CAAC,CAAC;IAE/B,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,GAAG,eAAO,CAAC,GAAG,EAAE;;QACnD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,SAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,sBAAsB,oCAAK,EAAE,CAAC;QACpE,IAAI,eAA4B,CAAC;QAEjC,IAAI,MAAM,EAAE;YACR,KAAK,MAAM,OAAO,IAAI,kBAAkB,EAAE;gBACtC,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,EAAE;oBAC/B,eAAe,GAAG,OAAO,CAAC;oBAC1B,MAAM;iBACT;aACJ;YAED,IAAI,CAAC,eAAe,EAAE;gBAClB,eAAe,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;aAC3C;YAED,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SACpC;QAED,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,iBAAS,CAAC,GAAG,EAAE;QACX,mGAAmG;QACnG,MAAM,aAAa,GAAG,CAAC,CAAM,EAAE,EAAE;YAC7B,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,gBAAgB,EAAE;oBAClB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC9B;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;QACV,CAAC,CAAC;QAEF,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAC9D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,yBAAyB,GAAG,CAAC,CAAa,EAAE,EAAE;QAChD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,mBAAmB,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,MAAoB,EAAE,MAAe,EAAE,EAAE;;QACjE,IAAI,SAAS,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,cAAc,CAAC;QAEzC,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YAC3B,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SACtC;QAED,MAAM,QAAQ,GAAG,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,eAAe,CAAC,KAAK,GAAG,sBAAsB,GAAG,SAAS,EAAE,CAAC;QAElG,IAAI,KAAK,IAAI,QAAQ,EAAE;YACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAS,CAAC,CAAC;SAC1D;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QACxD,kBAAkB,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,eAA4B,EAAE,EAAE;QACrD,kBAAkB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,oBAAU,CAAC,yBAAyB,EAAE;QACvD,CAAC,KAAK,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC,gBAAgB;KAChD,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAE,YAAY;QACxB,6BAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,yBAAyB;YAChF,6BAAK,SAAS,EAAC,uCAAuC,IAAE,iDAAwB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAO;YAC7G,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI,CAC/B;QACN,6BAAK,SAAS,EAAC,iCAAiC;YAC5C,8BAAM,SAAS,EAAC,wCAAwC;;gBAAG,eAAe,CAAC,KAAK,CAAQ;YACxF,+BACI,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EACjE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,EAAE,EACpE,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,cAAc,GACvB;YAEF,6BAAK,SAAS,EAAC,wCAAwC,GAAO,CAC5D;QACN,6BAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,SAAS,GAAQ;QACvE,oBAAC,aAAM,IACH,SAAS,EAAE,6BAAmB,CAAC,eAAe,EAC9C,QAAQ,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAC5B,SAAS,EAAC,cAAc,EACxB,aAAa,EAAE,KAAK,EACpB,IAAI,EAAE,gBAAgB,EACtB,SAAS,EAAC,uCAAuC,EACjD,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE;gBACP,IAAI,EAAE;oBACF,OAAO,EAAE,IAAI;iBAChB;gBACD,eAAe,EAAE;oBACb,OAAO,EAAE,KAAK;oBACd,iBAAiB,EAAE,cAAc;iBACpC;aACJ,IAEA,kBAAkB,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YAChC,MAAM,cAAc,GAAG,CAAC,CAAa,EAAE,EAAE;gBACrC,eAAe,CAAC,OAAO,CAAC,CAAC;gBACzB,mBAAmB,CAAC,KAAK,CAAC,CAAC;gBAE3B,OAAO;YACX,CAAC,CAAC;YAEF,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,IAAI,CAAC;YAEzD,OAAO,CACH,6BAAK,SAAS,EAAE,8CAA8C,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc;gBACnH,6BAAK,SAAS,EAAC,oDAAoD,IAAE,iDAAwB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAO;gBAClH,6BAAK,SAAS,EAAC,oDAAoD;oBAC9D,OAAO,CAAC,KAAK;;oBAAE;;wBAAQ,OAAO,CAAC,KAAK,CAAQ,CAC3C;gBACL,UAAU,IAAI,CACX,8BAAM,SAAS,EAAC,gDAAgD;oBAC5D,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,GAAI,CAC3B,CACV,CACC,CACT,CAAC;QACN,CAAC,CAAC,CACG,CACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Popper } from '@material-ui/core';\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport { ChangeEvent, MouseEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '../../../../models/CountryCodesAndNumbers';\nimport RoomstayThemeEngine from '../../../../providers/RoomstayThemeEngine';\nimport { Translation } from '../../../../translations/Translation';\nimport Icon, { IconType } from '../../Icon';\n\nimport './EnhancedPhoneNumberField.global.scss';\n\ninterface EnhancedPhoneNumberField {\n    validationStatus: 'success' | 'error';\n\n    name: string;\n\n    value?: string;\n\n    onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nexport const EnhancedPhoneNumberField = (props: Partial<EnhancedPhoneNumberField>) => {\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [isSuggestionOpen, setIsSuggestionOpen] = useState(false);\n    const container = useRef(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        let selectedCountry: CountryType;\n\n        if (prefix) {\n            for (const country of organizedCountries) {\n                if (prefix === `${country.phone}`) {\n                    selectedCountry = country;\n                    break;\n                }\n            }\n\n            if (!selectedCountry) {\n                selectedCountry = organizedCountries[0];\n            }\n\n            return [selectedCountry, number];\n        }\n\n        return [organizedCountries[0], ''];\n    }, [value]);\n\n    useEffect(() => {\n        // Close the modal if we click off it, weird hack to avoid modal closing before click is registered\n        const clickListener = (e: any) => {\n            setTimeout(() => {\n                if (isSuggestionOpen) {\n                    setIsSuggestionOpen(false);\n                }\n            }, 5);\n        };\n\n        document.body.addEventListener('click', clickListener);\n\n        return () => {\n            document.body.removeEventListener('click', clickListener);\n        };\n    }, [isSuggestionOpen]);\n\n    const onSuggestionsTriggerClick = (e: MouseEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n\n        setIsSuggestionOpen((old) => !old);\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        raiseOnChangeEvent(undefined, e.target.value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n    });\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onSuggestionsTriggerClick}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={container}></div>\n            <Popper\n                container={RoomstayThemeEngine.EngineContainer}\n                anchorEl={container?.current}\n                placement=\"bottom-start\"\n                disablePortal={false}\n                open={isSuggestionOpen}\n                className=\"rs-enhanced-phone-field--suggest-list\"\n                role=\"presentation\"\n                modifiers={{\n                    flip: {\n                        enabled: true,\n                    },\n                    preventOverflow: {\n                        enabled: false,\n                        boundariesElement: 'scrollParent',\n                    },\n                }}\n            >\n                {organizedCountries.map((country) => {\n                    const onCountryClick = (e: MouseEvent) => {\n                        onPrefixChanged(country);\n                        setIsSuggestionOpen(false);\n\n                        return;\n                    };\n\n                    const isSelected = country.code === selectedCountry.code;\n\n                    return (\n                        <div className={`rs-enhanced-phone-field--suggest-list-item ${isSelected ? '--selected' : ''}`} onClick={onCountryClick}>\n                            <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country.code)}</div>\n                            <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                                {country.label} <span>+{country.phone}</span>\n                            </div>\n                            {isSelected && (\n                                <span className=\"rs-enhanced-phone-field--suggest-list-selected\">\n                                    <Icon icon={IconType.Check} />\n                                </span>\n                            )}\n                        </div>\n                    );\n                })}\n            </Popper>\n        </div>\n    );\n};\n"]}

package/dist/src/components/generic/date/DatePicker.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import * as dayjs from 'dayjs';
+export interface DatePickerProps {
+    showMonthOnLoad?: dayjs.Dayjs;
+    selectedStartDate?: dayjs.Dayjs;
+    selectedEndDate?: dayjs.Dayjs;
+    canSelect?: boolean;
+    showArrows?: boolean;
+    showMultipleMonths?: boolean;
+    small?: boolean;
+    supportsMultiSelecting?: boolean;
+    showMinNightStay?: boolean;
+    supportsWeek?: boolean;
+    onDateClicked?: (date: dayjs.Dayjs) => void;
+    onStartDateChanged?: (date: dayjs.Dayjs) => void;
+    onEndDateChanged?: (date: dayjs.Dayjs) => void;
+}
+export default function DatePicker(props: DatePickerProps): JSX.Element;

package/dist/src/components/generic/date/DatePicker.js

@@ -0,0 +1,200 @@
+"use strict";
+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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Color_1 = require("../../../util/Color");
+const Icon_1 = require("../Icon");
+const react_1 = require("react");
+const classNames = require("classnames");
+const dayjs = require("dayjs");
+const DatePickerContext_1 = require("../../../contexts/DatePickerContext");
+const DatePickerMonth_1 = require("./DatePickerMonth");
+const BookingAPI_1 = require("../../../api/BookingAPI");
+const contexts_1 = require("@frontend/contexts");
+const DataLayer_1 = require("../../../util/DataLayer");
+const MinimumNightStayPill_1 = require("../../steps/MinimumNightStayPill");
+const DaysSelectedInformer_1 = require("../../steps/DaysSelectedInformer");
+const hooks_1 = require("@frontend/hooks");
+const DatePickerWeek = react_1.lazy(() => Promise.resolve().then(() => require('./DatePickerWeek')));
+var DateRangePickingState;
+(function (DateRangePickingState) {
+    DateRangePickingState[DateRangePickingState["StartDate"] = 1] = "StartDate";
+    DateRangePickingState[DateRangePickingState["EndDate"] = 2] = "EndDate";
+})(DateRangePickingState || (DateRangePickingState = {}));
+function DatePicker(props) {
+    var _a, _b;
+    const { hotel } = hooks_1.useCurrentHotel();
+    const [currentMonth, setCurrentMonth] = react_1.useState(props.showMonthOnLoad ? props.showMonthOnLoad : props.selectedStartDate ? props.selectedStartDate : dayjs());
+    const [selectedStartDate, setSelectedStartDate] = react_1.useState((_a = props.selectedStartDate) !== null && _a !== void 0 ? _a : null);
+    const [selectedEndDate, setSelectedEndDate] = react_1.useState((_b = props.selectedEndDate) !== null && _b !== void 0 ? _b : null);
+    const [hoveringOverDate, setHoveringOverDate] = react_1.useState(null);
+    const [pickingState, setPickingState] = react_1.useState(DateRangePickingState.StartDate);
+    const [calendarStyle, setCalendarStyle] = react_1.useState((hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType) ? hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType : 'Month');
+    react_1.useEffect(() => {
+        setCalendarStyle((hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType) ? hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType : 'Month');
+    }, [hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType]);
+    const [months, setMonths] = react_1.useState(props.showMultipleMonths ? [currentMonth, currentMonth.add(1, 'month')] : [currentMonth]);
+    const [maxPrice, setMaxPrice] = react_1.useState(0);
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const onClickDate = (newDate) => __awaiter(this, void 0, void 0, function* () {
+        let newPickingState = null;
+        const selectedBasketRow = basketContext.selectedBasketRow;
+        const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 0;
+        const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;
+        const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';
+        const newDatePrice = yield BookingAPI_1.default.Availability.getCheapestPriceForDay(newDate, adults, children, promoCode, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, false);
+        switch (pickingState) {
+            default:
+            case DateRangePickingState.StartDate:
+                if (newDatePrice.price || !hotel) {
+                    newPickingState = DateRangePickingState.EndDate;
+                    setSelectedStartDate(newDate);
+                    setSelectedEndDate(null);
+                }
+                break;
+            case DateRangePickingState.EndDate:
+                if (newDate.isBefore(selectedStartDate)) {
+                    setSelectedStartDate(newDate);
+                    newPickingState = DateRangePickingState.EndDate;
+                }
+                else {
+                    newPickingState = DateRangePickingState.StartDate;
+                    setHoveringOverDate(null);
+                    const nextAvailableDay = yield getLastValidDay(selectedStartDate, newDate);
+                    if (newDate.isSame(selectedStartDate)) {
+                        setSelectedEndDate(nextAvailableDay.add(1, 'day'));
+                    }
+                    else {
+                        setSelectedEndDate(nextAvailableDay);
+                    }
+                }
+                break;
+        }
+        if (props.supportsMultiSelecting) {
+            setPickingState(newPickingState);
+        }
+    });
+    const getLastValidDay = (fromDate, toDate) => new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+        const selectedBasketRow = basketContext.selectedBasketRow;
+        const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 0;
+        const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;
+        const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';
+        const diff = toDate === null || toDate === void 0 ? void 0 : toDate.diff(fromDate, 'day');
+        let nextMustBreak = false;
+        for (let i = 0; i <= diff; i++) {
+            const dayToCheck = fromDate.add(i, 'day');
+            const price = yield BookingAPI_1.default.Availability.getCheapestPriceForDay(dayToCheck, adults, children, promoCode, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, false);
+            if (nextMustBreak) {
+                return resolve(dayToCheck.subtract(1, 'day'));
+            }
+            if (!price.price && hotel) {
+                nextMustBreak = true;
+                continue;
+            }
+        }
+        resolve(toDate);
+    }));
+    const onHoveredOverDay = (day) => {
+        if (selectedStartDate && !selectedEndDate) {
+            getLastValidDay(selectedStartDate, day).then((lastValidDay) => {
+                setHoveringOverDate(lastValidDay);
+            });
+        }
+    };
+    const firstUpdate = react_1.useRef();
+    react_1.useEffect(() => {
+        if (props.showMonthOnLoad) {
+            setCurrentMonth(props.showMonthOnLoad);
+        }
+    }, [props.showMonthOnLoad]);
+    react_1.useEffect(() => {
+        if (props.showMultipleMonths) {
+            setMonths([currentMonth, currentMonth.add(1, 'month')]);
+        }
+    }, [currentMonth, props.showMultipleMonths]);
+    react_1.useEffect(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = undefined;
+            return;
+        }
+        if (props.onStartDateChanged) {
+            props.onStartDateChanged(selectedStartDate);
+        }
+    }, [selectedStartDate]);
+    react_1.useLayoutEffect(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = undefined;
+            return;
+        }
+        if (props.onEndDateChanged) {
+            props.onEndDateChanged(selectedEndDate);
+        }
+    }, [selectedEndDate]);
+    const context = {
+        today: dayjs(),
+        todayInUnix: dayjs().unix(),
+        startDate: selectedStartDate,
+        endDate: selectedEndDate,
+        hoveredMonth: hoveringOverDate,
+        maxPrice,
+        onHoverOver: onHoveredOverDay,
+        currentMonth,
+        onDayClicked: (date) => {
+            onClickDate(date);
+        },
+        setMaxPrice,
+    };
+    const printMonths = react_1.useMemo(() => (React.createElement(React.Fragment, null, calendarStyle === 'Month' ? (React.createElement(React.Fragment, null,
+        React.createElement(DatePickerMonth_1.default, { small: props.small, showingMonth: currentMonth }),
+        props.showMultipleMonths && React.createElement(DatePickerMonth_1.default, { showingMonth: currentMonth.add(1, 'month') }))) : (React.createElement(React.Fragment, null,
+        React.createElement(React.Suspense, { fallback: "Loading..." },
+            React.createElement(DatePickerWeek, null)))))), [currentMonth, props.showMultipleMonths, calendarStyle]);
+    const calendarClassNames = classNames('diji-calendar', {
+        '--single': !props.showMultipleMonths,
+        '--small': props.small,
+        '--week': calendarStyle === 'Week',
+    });
+    const previousMonthOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Show Previous Month', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
+        setCurrentMonth(currentMonth.subtract(1, 'month'));
+    };
+    const nextMonthOnClick = () => {
+        DataLayer_1.default.instance.sendInteraction('Show Next Month', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
+        setCurrentMonth(currentMonth.add(1, 'month'));
+    };
+    const setCalendarStyleAsMonth = () => {
+        DataLayer_1.default.instance.sendInteraction('Set Calendar Style - Month', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
+        setCalendarStyle('Month');
+    };
+    const setCalendarStyleAsWeek = () => {
+        DataLayer_1.default.instance.sendInteraction('Set Calendar Style - Week', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
+        setCalendarStyle('Week');
+    };
+    return (React.createElement(DatePickerContext_1.DatePickerContext.Provider, { value: context },
+        React.createElement("div", { ref: firstUpdate, className: calendarClassNames },
+            calendarStyle === 'Month' && (React.createElement("div", { className: "diji-calendar-navigation" },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowLeft2, onClick: previousMonthOnClick, color: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, borderRadius: "round", size: "24px" }),
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, onClick: nextMonthOnClick, color: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, borderRadius: "round", size: "24px" }))),
+            props.supportsWeek && (React.createElement("div", { className: "diji-calendar-picker-type" },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ViewMonth, size: "32px", color: calendarStyle === 'Month' ? Color_1.Color.Navy : Color_1.Color.Grey, onClick: setCalendarStyleAsMonth }),
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ViewWeek, size: "32px", color: calendarStyle === 'Week' ? Color_1.Color.Navy : Color_1.Color.Grey, onClick: setCalendarStyleAsWeek }))),
+            printMonths,
+            props.showMinNightStay && props.showMultipleMonths && (React.createElement("div", { className: "diji-calendar--min-night-stay u-flex u-flex-direction-column u-flex-align-center" },
+                React.createElement(DaysSelectedInformer_1.default, null),
+                React.createElement("div", { className: "u-marg-top--light" },
+                    React.createElement(MinimumNightStayPill_1.default, null))))),
+        props.showMinNightStay && !props.showMultipleMonths && (React.createElement("div", { className: "diji-calendar--min-night-stay --small u-flex u-flex-direction-column u-flex-align-center u-marg-top" },
+            React.createElement(DaysSelectedInformer_1.default, null),
+            React.createElement("div", { className: "u-marg-top--light" },
+                React.createElement(MinimumNightStayPill_1.default, null))))));
+}
+exports.default = DatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/dist/src/components/generic/date/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"/","sources":["src/components/generic/date/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { Color } from '../../../util/Color';\nimport Icon, { IconType } from '../Icon';\nimport { useEffect, useState, useRef, useLayoutEffect, useMemo, useContext, lazy } from 'react';\n\nimport * as classNames from 'classnames';\n\nimport * as dayjs from 'dayjs';\nimport { DatePickerContext } from '../../../contexts/DatePickerContext';\nimport DatePickerMonth from './DatePickerMonth';\nimport API from '../../../api/BookingAPI';\nimport { BasketContext } from '@frontend/contexts';\nimport DataLayer, { InteractionStep, InteractionType } from '../../../util/DataLayer';\nimport MinimumNightStayPill from '../../steps/MinimumNightStayPill';\nimport DaysSelectedInformer from '../../steps/DaysSelectedInformer';\nimport { useCurrentHotel } from '@frontend/hooks';\n\nconst DatePickerWeek = lazy(() => import('./DatePickerWeek'));\n\nexport interface DatePickerProps {\n    showMonthOnLoad?: dayjs.Dayjs;\n\n    selectedStartDate?: dayjs.Dayjs;\n    selectedEndDate?: dayjs.Dayjs;\n\n    canSelect?: boolean;\n    // Includes default navigation arrows\n    showArrows?: boolean;\n    // Displays two side by side\n    showMultipleMonths?: boolean;\n\n    // Used for tight spaces\n    small?: boolean;\n\n    // is there support for start / end dates\n    supportsMultiSelecting?: boolean;\n\n    // Do or don't show mininmum night stay block\n    showMinNightStay?: boolean;\n\n    supportsWeek?: boolean;\n\n    onDateClicked?: (date: dayjs.Dayjs) => void;\n    onStartDateChanged?: (date: dayjs.Dayjs) => void;\n    onEndDateChanged?: (date: dayjs.Dayjs) => void;\n}\n\ninterface DatePickerDayObject {\n    value: string;\n    dateObj: dayjs.Dayjs | null;\n    price?: string;\n    hovered: boolean;\n}\n\nenum DateRangePickingState {\n    StartDate = 1,\n    EndDate = 2,\n}\n\nexport default function DatePicker(props: DatePickerProps) {\n    const { hotel } = useCurrentHotel();\n\n    const [currentMonth, setCurrentMonth] = useState(props.showMonthOnLoad ? props.showMonthOnLoad : props.selectedStartDate ? props.selectedStartDate : dayjs());\n\n    const [selectedStartDate, setSelectedStartDate] = useState(props.selectedStartDate ?? null);\n    const [selectedEndDate, setSelectedEndDate] = useState(props.selectedEndDate ?? null);\n\n    const [hoveringOverDate, setHoveringOverDate] = useState(null);\n\n    const [pickingState, setPickingState] = useState(DateRangePickingState.StartDate);\n    const [calendarStyle, setCalendarStyle] = useState<'Month' | 'Week'>(hotel?.defaultDatepickerType ? hotel?.defaultDatepickerType : 'Month');\n    useEffect(() => {\n        setCalendarStyle(hotel?.defaultDatepickerType ? hotel?.defaultDatepickerType : 'Month');\n    }, [hotel?.defaultDatepickerType]);\n\n    const [months, setMonths] = useState(props.showMultipleMonths ? [currentMonth, currentMonth.add(1, 'month')] : [currentMonth]);\n    const [maxPrice, setMaxPrice] = useState(0);\n\n    const basketContext = useContext(BasketContext);\n\n    const onClickDate = async (newDate: dayjs.Dayjs) => {\n        let newPickingState: DateRangePickingState = null;\n\n        const selectedBasketRow = basketContext.selectedBasketRow;\n        const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 0;\n        const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;\n        const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';\n\n        const newDatePrice = await API.Availability.getCheapestPriceForDay(newDate, adults, children, promoCode, hotel?.hotelID, false);\n\n        switch (pickingState) {\n            default:\n            case DateRangePickingState.StartDate:\n                if (newDatePrice.price || !hotel) {\n                    newPickingState = DateRangePickingState.EndDate;\n\n                    setSelectedStartDate(newDate);\n                    setSelectedEndDate(null);\n                }\n\n                break;\n            case DateRangePickingState.EndDate:\n                if (newDate.isBefore(selectedStartDate)) {\n                    setSelectedStartDate(newDate);\n                    newPickingState = DateRangePickingState.EndDate;\n                } else {\n                    newPickingState = DateRangePickingState.StartDate;\n\n                    setHoveringOverDate(null);\n\n                    const nextAvailableDay = await getLastValidDay(selectedStartDate, newDate);\n\n                    if (newDate.isSame(selectedStartDate)) {\n                        setSelectedEndDate(nextAvailableDay.add(1, 'day'));\n                    } else {\n                        setSelectedEndDate(nextAvailableDay);\n                    }\n                }\n\n                break;\n        }\n\n        if (props.supportsMultiSelecting) {\n            setPickingState(newPickingState);\n        }\n    };\n\n    const getLastValidDay = (fromDate: dayjs.Dayjs, toDate: dayjs.Dayjs): Promise<dayjs.Dayjs> =>\n        new Promise(async (resolve) => {\n            const selectedBasketRow = basketContext.selectedBasketRow;\n            const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 0;\n            const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;\n            const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';\n\n            const diff = toDate?.diff(fromDate, 'day');\n\n            let nextMustBreak = false;\n            for (let i = 0; i <= diff; i++) {\n                const dayToCheck = fromDate.add(i, 'day');\n\n                const price = await API.Availability.getCheapestPriceForDay(dayToCheck, adults, children, promoCode, hotel?.hotelID, false);\n\n                if (nextMustBreak) {\n                    return resolve(dayToCheck.subtract(1, 'day'));\n                }\n\n                if (!price.price && hotel) {\n                    nextMustBreak = true;\n                    continue;\n                }\n            }\n\n            resolve(toDate);\n        });\n\n    const onHoveredOverDay = (day: dayjs.Dayjs) => {\n        if (selectedStartDate && !selectedEndDate) {\n            getLastValidDay(selectedStartDate, day).then((lastValidDay) => {\n                setHoveringOverDate(lastValidDay);\n            });\n        }\n    };\n\n    const firstUpdate = useRef();\n\n    useEffect(() => {\n        if (props.showMonthOnLoad) {\n            setCurrentMonth(props.showMonthOnLoad);\n        }\n    }, [props.showMonthOnLoad]);\n\n    useEffect(() => {\n        if (props.showMultipleMonths) {\n            setMonths([currentMonth, currentMonth.add(1, 'month')]);\n        }\n    }, [currentMonth, props.showMultipleMonths]);\n\n    useEffect(() => {\n        if (firstUpdate.current) {\n            firstUpdate.current = undefined;\n            return;\n        }\n\n        if (props.onStartDateChanged) {\n            props.onStartDateChanged(selectedStartDate);\n        }\n    }, [selectedStartDate]);\n\n    useLayoutEffect(() => {\n        if (firstUpdate.current) {\n            firstUpdate.current = undefined;\n            return;\n        }\n\n        if (props.onEndDateChanged) {\n            props.onEndDateChanged(selectedEndDate);\n        }\n    }, [selectedEndDate]);\n\n    const context = {\n        today: dayjs(),\n        todayInUnix: dayjs().unix(),\n        startDate: selectedStartDate,\n        endDate: selectedEndDate,\n\n        hoveredMonth: hoveringOverDate,\n        maxPrice,\n\n        onHoverOver: onHoveredOverDay,\n        currentMonth,\n\n        onDayClicked: (date: dayjs.Dayjs) => {\n            onClickDate(date);\n        },\n        setMaxPrice,\n    };\n\n    const printMonths = useMemo(\n        () => (\n            <>\n                {calendarStyle === 'Month' ? (\n                    <>\n                        <DatePickerMonth small={props.small} showingMonth={currentMonth} />\n                        {props.showMultipleMonths && <DatePickerMonth showingMonth={currentMonth.add(1, 'month')} />}\n                    </>\n                ) : (\n                    <>\n                        <React.Suspense fallback=\"Loading...\">\n                            <DatePickerWeek />\n                        </React.Suspense>\n                    </>\n                )}\n            </>\n        ),\n        [currentMonth, props.showMultipleMonths, calendarStyle]\n    );\n\n    const calendarClassNames = classNames('diji-calendar', {\n        '--single': !props.showMultipleMonths,\n        '--small': props.small,\n        '--week': calendarStyle === 'Week',\n    });\n    const previousMonthOnClick = () => {\n        DataLayer.instance.sendInteraction('Show Previous Month', InteractionType.CALENDAR, InteractionStep.DATES);\n        setCurrentMonth(currentMonth.subtract(1, 'month'));\n    };\n    const nextMonthOnClick = () => {\n        DataLayer.instance.sendInteraction('Show Next Month', InteractionType.CALENDAR, InteractionStep.DATES);\n        setCurrentMonth(currentMonth.add(1, 'month'));\n    };\n    const setCalendarStyleAsMonth = () => {\n        DataLayer.instance.sendInteraction('Set Calendar Style - Month', InteractionType.CALENDAR, InteractionStep.DATES);\n        setCalendarStyle('Month');\n    };\n    const setCalendarStyleAsWeek = () => {\n        DataLayer.instance.sendInteraction('Set Calendar Style - Week', InteractionType.CALENDAR, InteractionStep.DATES);\n        setCalendarStyle('Week');\n    };\n\n    return (\n        <DatePickerContext.Provider value={context}>\n            <div ref={firstUpdate} className={calendarClassNames}>\n                {calendarStyle === 'Month' && (\n                    <div className=\"diji-calendar-navigation\">\n                        <Icon icon={IconType.ArrowLeft2} onClick={previousMonthOnClick} color={Color.White} backgroundColor={Color.Navy} borderRadius=\"round\" size=\"24px\" />\n                        <Icon icon={IconType.ArrowRight2} onClick={nextMonthOnClick} color={Color.White} backgroundColor={Color.Navy} borderRadius=\"round\" size=\"24px\" />\n                    </div>\n                )}\n                {props.supportsWeek && (\n                    <div className=\"diji-calendar-picker-type\">\n                        <Icon icon={IconType.ViewMonth} size=\"32px\" color={calendarStyle === 'Month' ? Color.Navy : Color.Grey} onClick={setCalendarStyleAsMonth} />\n                        <Icon icon={IconType.ViewWeek} size=\"32px\" color={calendarStyle === 'Week' ? Color.Navy : Color.Grey} onClick={setCalendarStyleAsWeek} />\n                    </div>\n                )}\n                {printMonths}\n                {props.showMinNightStay && props.showMultipleMonths && (\n                    <div className=\"diji-calendar--min-night-stay u-flex u-flex-direction-column u-flex-align-center\">\n                        <DaysSelectedInformer />\n                        <div className=\"u-marg-top--light\">\n                            <MinimumNightStayPill />\n                        </div>\n                    </div>\n                )}\n            </div>\n\n            {props.showMinNightStay && !props.showMultipleMonths && (\n                <div className=\"diji-calendar--min-night-stay --small u-flex u-flex-direction-column u-flex-align-center u-marg-top\">\n                    <DaysSelectedInformer />\n                    <div className=\"u-marg-top--light\">\n                        <MinimumNightStayPill />\n                    </div>\n                </div>\n            )}\n        </DatePickerContext.Provider>\n    );\n}\n"]}

package/dist/src/components/generic/date/DatePickerDay.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import * as dayjs from 'dayjs';
+interface DatePickerDayProps {
+    text: any;
+    day?: dayjs.Dayjs | any;
+    unix: number;
+    price?: Promise<number>;
+    statuses?: DatePickerDayStatus[];
+    selectable?: boolean;
+    onClick?: (day: string) => void;
+    onHover?: (day: string, status: boolean) => void;
+    displayType?: 'month' | 'week';
+}
+export declare enum DatePickerDayStatus {
+    Inactive = 0,
+    Selecting = "--selecting",
+    Loading = "--loading",
+    Selected = "--selected"
+}
+export default function DatePickerDay(props: DatePickerDayProps): JSX.Element;
+export {};

package/dist/src/components/generic/date/DatePickerDay.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerDayStatus = void 0;
+const React = require("react");
+const Text_1 = require("../Text");
+const react_1 = require("react");
+const Currency_1 = require("../Currency");
+const DatePickerContext_1 = require("../../../contexts/DatePickerContext");
+const BookingAPI_1 = require("../../../api/BookingAPI");
+const Icon_1 = require("../Icon");
+const Color_1 = require("../../../util/Color");
+const contexts_1 = require("@frontend/contexts");
+const AvailabilityAPI_1 = require("../../../api/AvailabilityAPI");
+const classnames_1 = require("classnames");
+const hooks_1 = require("@frontend/hooks");
+var DatePickerDayStatus;
+(function (DatePickerDayStatus) {
+    DatePickerDayStatus[DatePickerDayStatus["Inactive"] = 0] = "Inactive";
+    DatePickerDayStatus["Selecting"] = "--selecting";
+    DatePickerDayStatus["Loading"] = "--loading";
+    DatePickerDayStatus["Selected"] = "--selected";
+})(DatePickerDayStatus = exports.DatePickerDayStatus || (exports.DatePickerDayStatus = {}));
+function DatePickerDay(props) {
+    const { hotel } = hooks_1.useCurrentHotel();
+    const datePickerContext = react_1.useContext(DatePickerContext_1.DatePickerContext);
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const [price, setPrice] = react_1.useState();
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    const [isHovering, setIsHovering] = react_1.useState(false);
+    const [isSelected, setIsSelected] = react_1.useState(false);
+    const [isSelecting, setIsSelecting] = react_1.useState(false);
+    const [isFirst, setIsFirst] = react_1.useState(false);
+    const [isLast, setIsLast] = react_1.useState(false);
+    const isCurrent = props.day && datePickerContext.today.isSame(props.day, 'date');
+    const isPast = props.unix < datePickerContext.todayInUnix && !isCurrent;
+    const { selectedBasketRow } = basketContext;
+    react_1.useEffect(() => {
+        let cancelled = false;
+        const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 1;
+        const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;
+        const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';
+        if (props.day && !isPast) {
+            if (hotel) {
+                setPrice(0);
+                setIsLoading(true);
+                BookingAPI_1.default.Availability.getCheapestPriceForDay(props.day, adults, children, promoCode, hotel.hotelID).then((foundedPrice) => {
+                    if (!cancelled) {
+                        if (foundedPrice) {
+                            setPrice(foundedPrice.price);
+                            if (datePickerContext.maxPrice < AvailabilityAPI_1.default.maxNightPrice) {
+                                datePickerContext.setMaxPrice(AvailabilityAPI_1.default.maxNightPrice);
+                            }
+                        }
+                        setIsLoading(false);
+                    }
+                });
+            }
+            else {
+                datePickerContext.setMaxPrice(-1);
+                setPrice(-1);
+                setIsLoading(false);
+            }
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [props.day, selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getAdults(), selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getChildren(), selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getPromoCode()]);
+    react_1.useEffect(() => {
+        if (datePickerContext.hoveredMonth) {
+            if (props.unix && datePickerContext.startDate.isBefore(props.day, 'date') && datePickerContext.hoveredMonth.isSameOrAfter(props.day, 'date')) {
+                setIsSelecting(true);
+                if (datePickerContext.hoveredMonth.isSame(props.day, 'date') || (datePickerContext.endDate && datePickerContext.endDate.isSame(props.day))) {
+                    setIsLast(true);
+                }
+                else {
+                    setIsLast(false);
+                }
+                return;
+            }
+        }
+        setIsSelecting(false);
+        setIsLast(false);
+    }, [datePickerContext.hoveredMonth, props.day]);
+    react_1.useEffect(() => {
+        var _a, _b, _c;
+        if (props.unix && datePickerContext.startDate) {
+            if (((_a = datePickerContext.startDate) === null || _a === void 0 ? void 0 : _a.isSameOrBefore(props.day, 'date')) && ((_b = datePickerContext.endDate) === null || _b === void 0 ? void 0 : _b.isSameOrAfter(props.day, 'date'))) {
+                setIsSelected(true);
+                if ((_c = datePickerContext.endDate) === null || _c === void 0 ? void 0 : _c.isSame(props.day, 'date')) {
+                    setIsLast(true);
+                }
+                return;
+            }
+            if (datePickerContext.startDate.isSame(props.day, 'date')) {
+                setIsFirst(true);
+                setIsSelected(true);
+                return;
+            }
+        }
+        setIsSelected(false);
+        setIsFirst(false);
+        setIsLast(false);
+    }, [datePickerContext.startDate, datePickerContext.endDate, props.day]);
+    const memo = react_1.useMemo(() => {
+        var _a, _b;
+        const onHoverIn = (e) => {
+            datePickerContext.onHoverOver(props.day);
+            setIsHovering(true);
+        };
+        const onHoverOut = (e) => {
+            setIsHovering(false);
+        };
+        const onClick = (e) => {
+            datePickerContext.onDayClicked(props.day);
+        };
+        const isSelectable = () => {
+            return props.day && props.selectable && !isLoading && !isPast && (price || !hotel);
+        };
+        const classes = classnames_1.default(`diji-calendar-${(_a = props.displayType) !== null && _a !== void 0 ? _a : 'month'}--item`, {
+            '--selectable': isSelectable(),
+            '--hovered': isHovering && isSelectable(),
+            '--past': !isSelectable(),
+            '--current': isCurrent,
+            '--first': isFirst,
+            '--last': isLast,
+            '--loading': isLoading,
+            '--selected': isSelected,
+            '--selecting': isSelecting && !isSelected,
+        });
+        const events = {};
+        events.onMouseEnter = onHoverIn;
+        events.onMouseLeave = onHoverOut;
+        events.onClick = onClick;
+        const priceBlock = props.day && props.selectable && !isPast && (price || (isLoading && !price)) && price >= 0 && (React.createElement("div", { className: `diji-calendar-${(_b = props.displayType) !== null && _b !== void 0 ? _b : 'month'}--item-cost` }, isLoading ? (React.createElement("div", { className: "u-inline-flex a-spin" },
+            React.createElement(Icon_1.default, { color: Color_1.Color.Accent, icon: Icon_1.IconType.Spinner, size: "14px" }))) : (React.createElement(Text_1.default, { type: Text_1.TextType.Label },
+            React.createElement(Currency_1.default, { shortenThousandsAfter: 6, removeCurrencyAfterChar: 5, hideDecimals: true, disableLocalization: true }, price)))));
+        if (props.displayType === 'week') {
+            let height = 0;
+            const range = (price / AvailabilityAPI_1.default.maxNightPrice) * 100;
+            if (isSelectable()) {
+                if (range < 10) {
+                    height = 10;
+                }
+                else if (range > 90) {
+                    height = 90;
+                }
+                else {
+                    height = range;
+                }
+            }
+            else {
+                if (!isLoading) {
+                    height = 95;
+                }
+            }
+            return (React.createElement("div", Object.assign({ className: classes }, events),
+                props.text === '1' && React.createElement("div", { className: "diji-calendar-week--month-indicator" }, props.day.format('MMMM')),
+                React.createElement("div", { className: "diji-calendar-week--day-label" }, props.day.format('dd')),
+                React.createElement("div", { className: "diji-calendar-week--day-digit" },
+                    React.createElement(Text_1.default, null, props.text)),
+                React.createElement("div", { className: "diji-calendar-week--price-indicator" },
+                    React.createElement("div", { className: "diji-calendar-week--price-indicator-block", style: { maxHeight: `${height}%` } })),
+                priceBlock));
+        }
+        else {
+            return (React.createElement("div", Object.assign({ className: classes }, events),
+                React.createElement(Text_1.default, null, props.text),
+                priceBlock));
+        }
+    }, [
+        isFirst,
+        isLast,
+        isSelecting,
+        isSelected,
+        isHovering,
+        isLoading,
+        props.unix,
+        datePickerContext.hoveredMonth,
+        datePickerContext.startDate,
+        datePickerContext.endDate,
+        basketContext,
+        datePickerContext.maxPrice,
+        hotel,
+    ]);
+    return memo;
+}
+exports.default = DatePickerDay;
+//# sourceMappingURL=DatePickerDay.js.map