@roomstay/frontend 2.6.58 → 2.6.60

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

@@ -1 +1 @@
-{"version":3,"file":"BookingWizardPromoCode.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardPromoCode/BookingWizardPromoCode.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAAoE;AACpE,iDAA+C;AAE/C,4DAAyD;AACzD,8CAA2C;AAE3C,oEAA4C;AAC5C,8GAA0D;AAUnD,MAAM,sBAAsB,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAqB,EAAE,CAAC,CAAC;IAEzD,MAAM,cAAc,GAAG,IAAA,mBAAW,EAC9B,IAAA,mBAAQ,EAAC,CAAC,KAAK,EAAE,EAAE;QACf,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,GAAG,CAAC,EACP,EAAE,CACL,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,cAAc,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS;YAAE,OAAO,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC1D,IAAI,KAAK,KAAK,KAAK;YAAE,OAAO,eAAe,IAAI,gBAAgB,CAAC;QAChE,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO,eAAe,IAAI,WAAW,CAAC;QAC1D,OAAO,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAE/B,MAAM,cAAc,GAAG,CACnB,yCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,4CAAM,CAAC,SAAS,EAAE,EAAE,CAAC,4CAAM,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,EAAE,CAAC,4CAAM,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,EAAE,CAAC,EACxH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1C,CACL,CAAC;IAEF,IAAI,KAAK,CAAC,WAAW,EAAE;QACnB,OAAO,cAAc,CAAC;KACzB;IAED,OAAO,8BAAC,iBAAO,IAAC,KAAK,EAAE,eAAe,EAAE,IAAG,cAAc,CAAW,CAAC;AACzE,CAAC,CAAC;AA7CW,QAAA,sBAAsB,0BA6CjC","sourcesContent":["import classNames from 'classnames';\nimport React, { FC, useCallback, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Translation } from '@/translations/Translation';\nimport { debounce } from '@/util/Debounce';\n\nimport Tooltip from '../../Tooltip/Tooltip';\nimport styles from './BookingWizardPromoCode.module.scss';\n\ninterface BookingWizardPromoCodeProps {\n    promoCode?: string;\n    valid?: boolean;\n    onChange?: (promoCode: string) => void;\n\n    hideTooltip?: boolean;\n}\n\nexport const BookingWizardPromoCode: FC<BookingWizardPromoCodeProps> = (props) => {\n    const { promoCode, valid, onChange } = props;\n    const { t } = useTranslation();\n\n    const [code, setCode] = useState<string | undefined>('');\n\n    const debounceChange = useCallback(\n        debounce((value) => {\n            onChange?.(value);\n        }, 500),\n        []\n    );\n\n    useEffect(() => {\n        debounceChange(code);\n    }, [code]);\n\n    useEffect(() => {\n        if (promoCode !== code) setCode(promoCode);\n    }, [promoCode]);\n\n    const getTooltipTitle = () => {\n        if (!promoCode) return t(Translation.Step.Date.PromoCode);\n        if (valid === false) return `Promo Code '${code}' is not valid`;\n        if (valid === true) return `Promo Code '${code}' applied`;\n        return t(Translation.Step.Date.PromoCode);\n    };\n\n    console.log(props.hideTooltip);\n\n    const promocodeInput = (\n        <input\n            className={classNames(styles.container, { [styles['--error']]: valid === false, [styles['--success']]: valid === true })}\n            type=\"text\"\n            value={code}\n            placeholder={t(Translation.Step.Date.PromoCode)}\n            onChange={(e) => setCode(e.target.value)}\n        />\n    );\n\n    if (props.hideTooltip) {\n        return promocodeInput;\n    }\n\n    return <Tooltip title={getTooltipTitle()}>{promocodeInput}</Tooltip>;\n};\n"]}
+{"version":3,"file":"BookingWizardPromoCode.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardPromoCode/BookingWizardPromoCode.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAAoE;AACpE,iDAA+C;AAE/C,4DAAyD;AACzD,8CAA2C;AAE3C,oEAA4C;AAC5C,6FAA+D;AAC/D,8GAA0D;AASnD,MAAM,sBAAsB,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAqB,EAAE,CAAC,CAAC;IAEzD,MAAM,cAAc,GAAG,IAAA,mBAAW,EAC9B,IAAA,mBAAQ,EAAC,CAAC,KAAK,EAAE,EAAE;QACf,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,GAAG,CAAC,EACP,EAAE,CACL,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,cAAc,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,SAAS;YAAE,OAAO,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC1D,IAAI,KAAK,KAAK,KAAK;YAAE,OAAO,eAAe,IAAI,gBAAgB,CAAC;QAChE,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO,eAAe,IAAI,WAAW,CAAC;QAC1D,OAAO,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CACnB,yCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,4CAAM,CAAC,SAAS,EAAE,mCAAmB,CAAC,OAAO,CAAC,EAAE;YAClE,CAAC,4CAAM,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK;YACpC,CAAC,4CAAM,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;SACxC,CAAC,EACF,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1C,CACL,CAAC;IAEF,IAAI,KAAK,CAAC,WAAW,EAAE;QACnB,OAAO,cAAc,CAAC;KACzB;IAED,OAAO,8BAAC,iBAAO,IAAC,KAAK,EAAE,eAAe,EAAE,IAAG,cAAc,CAAW,CAAC;AACzE,CAAC,CAAC;AA9CW,QAAA,sBAAsB,0BA8CjC","sourcesContent":["import classNames from 'classnames';\nimport React, { FC, useCallback, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Translation } from '@/translations/Translation';\nimport { debounce } from '@/util/Debounce';\n\nimport Tooltip from '../../Tooltip/Tooltip';\nimport bookingWizardStyles from '../BookingWizard.module.scss';\nimport styles from './BookingWizardPromoCode.module.scss';\ninterface BookingWizardPromoCodeProps {\n    promoCode?: string;\n    valid?: boolean;\n    onChange?: (promoCode: string) => void;\n\n    hideTooltip?: boolean;\n}\n\nexport const BookingWizardPromoCode: FC<BookingWizardPromoCodeProps> = (props) => {\n    const { promoCode, valid, onChange } = props;\n    const { t } = useTranslation();\n\n    const [code, setCode] = useState<string | undefined>('');\n\n    const debounceChange = useCallback(\n        debounce((value) => {\n            onChange?.(value);\n        }, 500),\n        []\n    );\n\n    useEffect(() => {\n        debounceChange(code);\n    }, [code]);\n\n    useEffect(() => {\n        if (promoCode !== code) setCode(promoCode);\n    }, [promoCode]);\n\n    const getTooltipTitle = () => {\n        if (!promoCode) return t(Translation.Step.Date.PromoCode);\n        if (valid === false) return `Promo Code '${code}' is not valid`;\n        if (valid === true) return `Promo Code '${code}' applied`;\n        return t(Translation.Step.Date.PromoCode);\n    };\n\n    const promocodeInput = (\n        <input\n            className={classNames(styles.container, bookingWizardStyles['value'], {\n                [styles['--error']]: valid === false,\n                [styles['--success']]: valid === true,\n            })}\n            type=\"text\"\n            value={code}\n            placeholder={t(Translation.Step.Date.PromoCode)}\n            onChange={(e) => setCode(e.target.value)}\n        />\n    );\n\n    if (props.hideTooltip) {\n        return promocodeInput;\n    }\n\n    return <Tooltip title={getTooltipTitle()}>{promocodeInput}</Tooltip>;\n};\n"]}

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

@@ -10,6 +10,12 @@ export interface DatePickerProps extends ShowYearOnCalendarProps {
     onEndDateChanged?: (date: dayjs.Dayjs) => void;
     fixedStartDate?: boolean;
     showMultipleMonths?: boolean;
+    /**
+     * When showMultipleMonths is set to true.
+     * Optional limit for how many months can be displayed via "Add More Dates".
+     */
+    monthCount?: number;
     theme?: EBookingWizardTheme;
+    className?: string;
 }
 export default function DateRangePicker(props: DatePickerProps): JSX.Element;

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

@@ -55,7 +55,7 @@ var EDateRangePickingState;
 })(EDateRangePickingState || (EDateRangePickingState = {}));
 function DateRangePicker(props) {
     var _a, _b;
-    const { showYearOnCalendar, yearDisplayOption } = props;
+    const { showYearOnCalendar, yearDisplayOption, showArrows = true, monthCount = 2 } = props;
     const [currentMonth, setCurrentMonth] = (0, react_1.useState)(props.selectedStartDate ? props.selectedStartDate : (0, dayjs_1.default)());
     const [selectedStartDate, setSelectedStartDate] = (0, react_1.useState)((_a = props.selectedStartDate) !== null && _a !== void 0 ? _a : (props.fixedStartDate ? (0, dayjs_1.default)() : null));
     const [selectedEndDate, setSelectedEndDate] = (0, react_1.useState)((_b = props.selectedEndDate) !== null && _b !== void 0 ? _b : null);
@@ -128,10 +128,11 @@ function DateRangePicker(props) {
         fixedStartDate: !!props.fixedStartDate,
         theme: props.theme,
     };
-    const printMonths = (0, react_1.useMemo)(() => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DateRangePickerMonth_1.default, { small: props.small, showingMonth: currentMonth, showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption }),
-        props.showMultipleMonths && (react_1.default.createElement(DateRangePickerMonth_1.default, { small: props.small, showingMonth: currentMonth.add(1, 'month'), showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption })))), [currentMonth, props.showMultipleMonths]);
-    const calendarClassNames = (0, classnames_1.default)(DateRangePicker_module_scss_1.default['roomstay-calendar'], {
+    const printMonths = (0, react_1.useMemo)(() => {
+        const monthsToRender = props.showMultipleMonths ? Array.from({ length: monthCount }, (_, index) => currentMonth.clone().add(index, 'month')) : [currentMonth];
+        return (react_1.default.createElement(react_1.default.Fragment, null, monthsToRender.map((month, index) => (react_1.default.createElement(DateRangePickerMonth_1.default, { key: index, small: props.small, showingMonth: month, showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption })))));
+    }, [currentMonth, props.showMultipleMonths, props.small, props.theme, showYearOnCalendar, yearDisplayOption, monthCount]);
+    const calendarClassNames = (0, classnames_1.default)(DateRangePicker_module_scss_1.default['roomstay-calendar'], props.className, {
         [DateRangePicker_module_scss_1.default['--small']]: props.small,
         [DateRangePicker_module_scss_1.default['--single']]: !props.showMultipleMonths,
         [DateRangePicker_module_scss_1.default['--specific']]: props.theme === BookingWizard_1.EBookingWizardTheme.Specific,
@@ -146,9 +147,9 @@ function DateRangePicker(props) {
     const iconBackground = props.theme === BookingWizard_1.EBookingWizardTheme.Specific ? undefined : Color_1.Color.Snow;
     return (react_1.default.createElement(DateRangePickerContext_1.DateRangePickerContext.Provider, { value: context },
         react_1.default.createElement("div", { ref: firstUpdate, className: calendarClassNames },
-            react_1.default.createElement("div", { className: DateRangePicker_module_scss_1.default['roomstay-calendar-navigation'] },
+            showArrows && (react_1.default.createElement("div", { className: DateRangePicker_module_scss_1.default['roomstay-calendar-navigation'] },
                 react_1.default.createElement(Icon_1.default, { className: DateRangePicker_module_scss_1.default['roomstay-calendar-arrow'], icon: Icon_1.IconType.ArrowLeft2, onClick: previousMonthOnClick, color: Color_1.Color.Navy, backgroundColor: iconBackground, borderRadius: "round", size: iconSize }),
-                react_1.default.createElement(Icon_1.default, { className: DateRangePicker_module_scss_1.default['roomstay-calendar-arrow'], icon: Icon_1.IconType.ArrowRight2, onClick: nextMonthOnClick, color: Color_1.Color.Navy, backgroundColor: iconBackground, borderRadius: "round", size: iconSize })),
+                react_1.default.createElement(Icon_1.default, { className: DateRangePicker_module_scss_1.default['roomstay-calendar-arrow'], icon: Icon_1.IconType.ArrowRight2, onClick: nextMonthOnClick, color: Color_1.Color.Navy, backgroundColor: iconBackground, borderRadius: "round", size: iconSize }))),
             printMonths)));
 }
 exports.default = DateRangePicker;

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.js","sourceRoot":"/","sources":["src/components/generic/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport dayjs, { Dayjs } from 'dayjs';\nimport isSameOrAfter from 'dayjs/plugin/isSameOrAfter';\nimport isSameOrBefore from 'dayjs/plugin/isSameOrBefore';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { DateRangePickerContext, DateRangePickerContextProps } from '@/components/generic/DateRangePicker/DateRangePickerContext';\nimport DateRangePickerMonth from '@/components/generic/DateRangePicker/DateRangePickerMonth';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { ShowYearOnCalendarProps } from '@/models/Api/HotelOverrideDTO';\nimport { Color } from '@/util/Color';\n\nimport { EBookingWizardTheme } from '../BookingWizard/BookingWizard';\nimport styles from './DateRangePicker.module.scss';\n\ndayjs.extend(isSameOrBefore);\ndayjs.extend(isSameOrAfter);\n\nexport interface DatePickerProps extends ShowYearOnCalendarProps {\n    selectedStartDate?: dayjs.Dayjs | null;\n    selectedEndDate?: dayjs.Dayjs | null;\n    // Includes default navigation arrows\n    showArrows?: boolean;\n    small?: boolean;\n    onStartDateChanged?: (date: dayjs.Dayjs) => void;\n    onEndDateChanged?: (date: dayjs.Dayjs) => void;\n    fixedStartDate?: boolean;\n    showMultipleMonths?: boolean;\n    theme?: EBookingWizardTheme;\n}\n\nenum EDateRangePickingState {\n    StartDate = 1,\n    EndDate = 2,\n}\n\nexport default function DateRangePicker(props: DatePickerProps) {\n    const { showYearOnCalendar, yearDisplayOption } = props;\n    const [currentMonth, setCurrentMonth] = useState(props.selectedStartDate ? props.selectedStartDate : dayjs());\n\n    const [selectedStartDate, setSelectedStartDate] = useState<Dayjs | null>(props.selectedStartDate ?? (props.fixedStartDate ? dayjs() : null));\n    const [selectedEndDate, setSelectedEndDate] = useState(props.selectedEndDate ?? null);\n\n    const [hoveringOverDate, setHoveringOverDate] = useState<Dayjs | null>(null);\n\n    const [pickingState, setPickingState] = useState(props.fixedStartDate ? EDateRangePickingState.EndDate : EDateRangePickingState.StartDate);\n\n    const onClickDate = async (newDate: dayjs.Dayjs) => {\n        let newPickingState: EDateRangePickingState | null = null;\n        switch (pickingState) {\n            default:\n            case EDateRangePickingState.StartDate:\n                newPickingState = EDateRangePickingState.EndDate;\n                setSelectedStartDate(newDate);\n                setSelectedEndDate(null);\n                break;\n            case EDateRangePickingState.EndDate:\n                if (newDate.isBefore(selectedStartDate)) {\n                    setSelectedStartDate(newDate);\n                    newPickingState = EDateRangePickingState.EndDate;\n                } else {\n                    newPickingState = EDateRangePickingState.StartDate;\n\n                    setHoveringOverDate(null);\n\n                    const nextAvailableDay = 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        setPickingState(props.fixedStartDate ? EDateRangePickingState.EndDate : newPickingState);\n    };\n\n    const onHoveredOverDay = (day: dayjs.Dayjs) => {\n        if (selectedStartDate && !selectedEndDate) {\n            setHoveringOverDate(day as Dayjs);\n        }\n    };\n\n    const firstUpdate = useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        if (firstUpdate.current) {\n            firstUpdate.current = null;\n            return;\n        }\n\n        if (props.onStartDateChanged) {\n            props.onStartDateChanged(selectedStartDate as Dayjs);\n        }\n    }, [selectedStartDate]);\n\n    useLayoutEffect(() => {\n        if (firstUpdate.current) {\n            firstUpdate.current = null;\n            return;\n        }\n\n        if (props.onEndDateChanged) {\n            props.onEndDateChanged(selectedEndDate as Dayjs);\n        }\n    }, [selectedEndDate]);\n\n    const context: DateRangePickerContextProps = {\n        today: dayjs(),\n        todayInUnix: dayjs().unix(),\n        startDate: selectedStartDate,\n        endDate: selectedEndDate,\n\n        hoveredMonth: hoveringOverDate,\n\n        onHoverOver: onHoveredOverDay,\n        currentMonth,\n\n        onDayClicked: (date: dayjs.Dayjs) => {\n            onClickDate(date);\n        },\n        fixedStartDate: !!props.fixedStartDate,\n        theme: props.theme,\n    };\n\n    const printMonths = useMemo(\n        () => (\n            <>\n                <DateRangePickerMonth small={props.small} showingMonth={currentMonth} showYearOnCalendar={showYearOnCalendar} yearDisplayOption={yearDisplayOption} />\n                {props.showMultipleMonths && (\n                    <DateRangePickerMonth\n                        small={props.small}\n                        showingMonth={currentMonth.add(1, 'month')}\n                        showYearOnCalendar={showYearOnCalendar}\n                        yearDisplayOption={yearDisplayOption}\n                    />\n                )}\n            </>\n        ),\n        [currentMonth, props.showMultipleMonths]\n    );\n\n    const calendarClassNames = classNames(styles['roomstay-calendar'], {\n        [styles['--small']]: props.small,\n        [styles['--single']]: !props.showMultipleMonths,\n        [styles['--specific']]: props.theme === EBookingWizardTheme.Specific,\n    });\n    const previousMonthOnClick = () => {\n        setCurrentMonth(currentMonth.subtract(1, 'month'));\n    };\n    const nextMonthOnClick = () => {\n        setCurrentMonth(currentMonth.add(1, 'month'));\n    };\n\n    const iconSize = props.theme === EBookingWizardTheme.Specific ? '16px' : '24px';\n    const iconBackground = props.theme === EBookingWizardTheme.Specific ? undefined : Color.Snow;\n\n    return (\n        <DateRangePickerContext.Provider value={context}>\n            <div ref={firstUpdate} className={calendarClassNames}>\n                <div className={styles['roomstay-calendar-navigation']}>\n                    <Icon\n                        className={styles['roomstay-calendar-arrow']}\n                        icon={IconType.ArrowLeft2}\n                        onClick={previousMonthOnClick}\n                        color={Color.Navy}\n                        backgroundColor={iconBackground}\n                        borderRadius=\"round\"\n                        size={iconSize}\n                    />\n                    <Icon\n                        className={styles['roomstay-calendar-arrow']}\n                        icon={IconType.ArrowRight2}\n                        onClick={nextMonthOnClick}\n                        color={Color.Navy}\n                        backgroundColor={iconBackground}\n                        borderRadius=\"round\"\n                        size={iconSize}\n                    />\n                </div>\n                {printMonths}\n            </div>\n        </DateRangePickerContext.Provider>\n    );\n}\n"]}
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"/","sources":["src/components/generic/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport dayjs, { Dayjs } from 'dayjs';\nimport isSameOrAfter from 'dayjs/plugin/isSameOrAfter';\nimport isSameOrBefore from 'dayjs/plugin/isSameOrBefore';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { DateRangePickerContext, DateRangePickerContextProps } from '@/components/generic/DateRangePicker/DateRangePickerContext';\nimport DateRangePickerMonth from '@/components/generic/DateRangePicker/DateRangePickerMonth';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { ShowYearOnCalendarProps } from '@/models/Api/HotelOverrideDTO';\nimport { Color } from '@/util/Color';\n\nimport { EBookingWizardTheme } from '../BookingWizard/BookingWizard';\nimport styles from './DateRangePicker.module.scss';\n\ndayjs.extend(isSameOrBefore);\ndayjs.extend(isSameOrAfter);\n\nexport interface DatePickerProps extends ShowYearOnCalendarProps {\n    selectedStartDate?: dayjs.Dayjs | null;\n    selectedEndDate?: dayjs.Dayjs | null;\n    // Includes default navigation arrows\n    showArrows?: boolean;\n    small?: boolean;\n    onStartDateChanged?: (date: dayjs.Dayjs) => void;\n    onEndDateChanged?: (date: dayjs.Dayjs) => void;\n    fixedStartDate?: boolean;\n    showMultipleMonths?: boolean;\n    /**\n     * When showMultipleMonths is set to true.\n     * Optional limit for how many months can be displayed via \"Add More Dates\".\n     */\n    monthCount?: number;\n    theme?: EBookingWizardTheme;\n    className?: string;\n}\n\nenum EDateRangePickingState {\n    StartDate = 1,\n    EndDate = 2,\n}\n\nexport default function DateRangePicker(props: DatePickerProps) {\n    const { showYearOnCalendar, yearDisplayOption, showArrows = true, monthCount = 2 } = props;\n    const [currentMonth, setCurrentMonth] = useState(props.selectedStartDate ? props.selectedStartDate : dayjs());\n\n    const [selectedStartDate, setSelectedStartDate] = useState<Dayjs | null>(props.selectedStartDate ?? (props.fixedStartDate ? dayjs() : null));\n    const [selectedEndDate, setSelectedEndDate] = useState(props.selectedEndDate ?? null);\n\n    const [hoveringOverDate, setHoveringOverDate] = useState<Dayjs | null>(null);\n\n    const [pickingState, setPickingState] = useState(props.fixedStartDate ? EDateRangePickingState.EndDate : EDateRangePickingState.StartDate);\n\n    const onClickDate = async (newDate: dayjs.Dayjs) => {\n        let newPickingState: EDateRangePickingState | null = null;\n        switch (pickingState) {\n            default:\n            case EDateRangePickingState.StartDate:\n                newPickingState = EDateRangePickingState.EndDate;\n                setSelectedStartDate(newDate);\n                setSelectedEndDate(null);\n                break;\n            case EDateRangePickingState.EndDate:\n                if (newDate.isBefore(selectedStartDate)) {\n                    setSelectedStartDate(newDate);\n                    newPickingState = EDateRangePickingState.EndDate;\n                } else {\n                    newPickingState = EDateRangePickingState.StartDate;\n\n                    setHoveringOverDate(null);\n\n                    const nextAvailableDay = 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        setPickingState(props.fixedStartDate ? EDateRangePickingState.EndDate : newPickingState);\n    };\n\n    const onHoveredOverDay = (day: dayjs.Dayjs) => {\n        if (selectedStartDate && !selectedEndDate) {\n            setHoveringOverDate(day as Dayjs);\n        }\n    };\n\n    const firstUpdate = useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        if (firstUpdate.current) {\n            firstUpdate.current = null;\n            return;\n        }\n\n        if (props.onStartDateChanged) {\n            props.onStartDateChanged(selectedStartDate as Dayjs);\n        }\n    }, [selectedStartDate]);\n\n    useLayoutEffect(() => {\n        if (firstUpdate.current) {\n            firstUpdate.current = null;\n            return;\n        }\n\n        if (props.onEndDateChanged) {\n            props.onEndDateChanged(selectedEndDate as Dayjs);\n        }\n    }, [selectedEndDate]);\n\n    const context: DateRangePickerContextProps = {\n        today: dayjs(),\n        todayInUnix: dayjs().unix(),\n        startDate: selectedStartDate,\n        endDate: selectedEndDate,\n\n        hoveredMonth: hoveringOverDate,\n\n        onHoverOver: onHoveredOverDay,\n        currentMonth,\n\n        onDayClicked: (date: dayjs.Dayjs) => {\n            onClickDate(date);\n        },\n        fixedStartDate: !!props.fixedStartDate,\n        theme: props.theme,\n    };\n\n    const printMonths = useMemo(() => {\n        const monthsToRender = props.showMultipleMonths ? Array.from({ length: monthCount }, (_, index) => currentMonth.clone().add(index, 'month')) : [currentMonth];\n\n        return (\n            <>\n                {monthsToRender.map((month, index) => (\n                    <DateRangePickerMonth key={index} small={props.small} showingMonth={month} showYearOnCalendar={showYearOnCalendar} yearDisplayOption={yearDisplayOption} />\n                ))}\n            </>\n        );\n    }, [currentMonth, props.showMultipleMonths, props.small, props.theme, showYearOnCalendar, yearDisplayOption, monthCount]);\n\n    const calendarClassNames = classNames(styles['roomstay-calendar'], props.className, {\n        [styles['--small']]: props.small,\n        [styles['--single']]: !props.showMultipleMonths,\n        [styles['--specific']]: props.theme === EBookingWizardTheme.Specific,\n    });\n    const previousMonthOnClick = () => {\n        setCurrentMonth(currentMonth.subtract(1, 'month'));\n    };\n    const nextMonthOnClick = () => {\n        setCurrentMonth(currentMonth.add(1, 'month'));\n    };\n\n    const iconSize = props.theme === EBookingWizardTheme.Specific ? '16px' : '24px';\n    const iconBackground = props.theme === EBookingWizardTheme.Specific ? undefined : Color.Snow;\n\n    return (\n        <DateRangePickerContext.Provider value={context}>\n            <div ref={firstUpdate} className={calendarClassNames}>\n                {showArrows && (\n                    <div className={styles['roomstay-calendar-navigation']}>\n                        <Icon\n                            className={styles['roomstay-calendar-arrow']}\n                            icon={IconType.ArrowLeft2}\n                            onClick={previousMonthOnClick}\n                            color={Color.Navy}\n                            backgroundColor={iconBackground}\n                            borderRadius=\"round\"\n                            size={iconSize}\n                        />\n                        <Icon\n                            className={styles['roomstay-calendar-arrow']}\n                            icon={IconType.ArrowRight2}\n                            onClick={nextMonthOnClick}\n                            color={Color.Navy}\n                            backgroundColor={iconBackground}\n                            borderRadius=\"round\"\n                            size={iconSize}\n                        />\n                    </div>\n                )}\n                {printMonths}\n            </div>\n        </DateRangePickerContext.Provider>\n    );\n}\n"]}

package/dist/src/components/generic/DateRangePicker/FloatingDateRangePicker.d.ts

@@ -15,6 +15,8 @@ export interface FloatingDateRangePickerProps extends Omit<DatePickerProps, 'sel
         placement?: Placement;
         fallbackPlacements?: Placement;
     };
+    notes?: React.ReactNode;
+    onOverlayOpenChange?: (isOpen: boolean) => void;
 }
 export interface FloatingDateRangePickerHandle {
     closePicker: () => void;

package/dist/src/components/generic/DateRangePicker/FloatingDateRangePicker.js

@@ -45,7 +45,7 @@ const BookingWizard_1 = require("../BookingWizard/BookingWizard");
 const DateRangePicker_module_scss_1 = __importDefault(require("./DateRangePicker.module.scss"));
 const FloatingDateRangePicker = react_1.default.forwardRef((props, ref) => {
     var _a, _b;
-    const { children, startDate: startDateProp, endDate: endDateProp, selectedDateChanged: selectedDateChangedProp, className, overlay, showYearOnCalendar, yearDisplayOption } = props, DatePickerProps = __rest(props, ["children", "startDate", "endDate", "selectedDateChanged", "className", "overlay", "showYearOnCalendar", "yearDisplayOption"]);
+    const { children, notes, startDate: startDateProp, endDate: endDateProp, selectedDateChanged: selectedDateChangedProp, className, overlay, showYearOnCalendar, yearDisplayOption, onOverlayOpenChange } = props, DatePickerProps = __rest(props, ["children", "notes", "startDate", "endDate", "selectedDateChanged", "className", "overlay", "showYearOnCalendar", "yearDisplayOption", "onOverlayOpenChange"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [startDate, setStartDate] = (0, react_1.useState)(null);
     const thisElement = (0, react_1.useRef)(null);
@@ -71,6 +71,12 @@ const FloatingDateRangePicker = react_1.default.forwardRef((props, ref) => {
     const onOverlayOpen = () => {
         setIsOpen(true);
     };
+    (0, react_1.useEffect)(() => {
+        onOverlayOpenChange === null || onOverlayOpenChange === void 0 ? void 0 : onOverlayOpenChange(isOpen);
+        return () => {
+            onOverlayOpenChange === null || onOverlayOpenChange === void 0 ? void 0 : onOverlayOpenChange(false);
+        };
+    }, [isOpen]);
     const inner = (react_1.default.createElement("div", { className: "d-flex align-items-center flex-column" },
         react_1.default.createElement(DateRangePicker_1.default, Object.assign({ selectedStartDate: startDateProp, selectedEndDate: endDateProp, onStartDateChanged: onStartDateChangedHandler, onEndDateChanged: selectedDateChanged, showYearOnCalendar: showYearOnCalendar, yearDisplayOption: yearDisplayOption }, DatePickerProps))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -78,8 +84,11 @@ const FloatingDateRangePicker = react_1.default.forwardRef((props, ref) => {
         react_1.default.createElement(Overlay_1.Overlay, Object.assign({ offset: props.overlayOffset, open: isOpen, onClose: onOverlayClose, container: props.container || ((_b = (_a = thisElement.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement), followElement: props.container || thisElement.current }, (overlay || {}), { className: (0, classnames_1.default)(DateRangePicker_module_scss_1.default['floating-roomstay-calendar'], {
                 [DateRangePicker_module_scss_1.default['--small']]: DatePickerProps.small,
                 [DateRangePicker_module_scss_1.default['--specific']]: props.theme === BookingWizard_1.EBookingWizardTheme.Specific,
+                [DateRangePicker_module_scss_1.default['--images']]: props.theme === BookingWizard_1.EBookingWizardTheme.Images,
                 [DateRangePicker_module_scss_1.default['--single']]: !DatePickerProps.showMultipleMonths,
-            }) }), inner)));
+            }) }),
+            inner,
+            notes)));
 });
 FloatingDateRangePicker.displayName = 'FloatingDateRangePicker';
 exports.default = FloatingDateRangePicker;

package/dist/src/components/generic/DateRangePicker/FloatingDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingDateRangePicker.js","sourceRoot":"/","sources":["src/components/generic/DateRangePicker/FloatingDateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport * as dayjs from 'dayjs';\nimport React, { useRef, useState } from 'react';\n\nimport DateRangePicker, { DatePickerProps } from '@/components/generic/DateRangePicker/DateRangePicker';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\n\nimport { EBookingWizardTheme } from '../BookingWizard/BookingWizard';\nimport styles from './DateRangePicker.module.scss';\n\nexport interface FloatingDateRangePickerProps extends Omit<DatePickerProps, 'selectedStartDate' | 'selectedEndDate' | 'onStartDateChanged' | 'onEndDateChanged'> {\n    children?: React.ReactNode;\n    startDate?: dayjs.Dayjs | null;\n    endDate?: dayjs.Dayjs | null;\n    overlayOffset?: [number, number];\n    fixedStartDate?: boolean;\n    container?: HTMLElement;\n\n    selectedDateChanged?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;\n\n    className?: string;\n\n    overlay?: {\n        placement?: Placement;\n        fallbackPlacements?: Placement;\n    };\n}\n\nexport interface FloatingDateRangePickerHandle {\n    closePicker: () => void;\n    openPicker: () => void;\n    toggle: () => void;\n}\n\nconst FloatingDateRangePicker = React.forwardRef<FloatingDateRangePickerHandle, FloatingDateRangePickerProps>((props, ref) => {\n    const {\n        children,\n        startDate: startDateProp,\n        endDate: endDateProp,\n        selectedDateChanged: selectedDateChangedProp,\n        className,\n        overlay,\n        showYearOnCalendar,\n        yearDisplayOption,\n        ...DatePickerProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [startDate, setStartDate] = useState<dayjs.Dayjs | null>(null);\n\n    const thisElement = useRef<HTMLDivElement | null>(null);\n\n    React.useImperativeHandle(\n        ref,\n        () => ({\n            closePicker: onOverlayClose,\n            openPicker: onOverlayOpen,\n            toggle: () => setIsOpen(!isOpen),\n        }),\n        []\n    );\n\n    const selectedDateChanged = (endDate: dayjs.Dayjs) => {\n        if (selectedDateChangedProp && startDate) {\n            selectedDateChangedProp(startDate, endDate);\n        }\n\n        if (endDate) {\n            setIsOpen(false);\n        }\n    };\n\n    const onStartDateChangedHandler = (date: any) => {\n        setStartDate(date);\n    };\n\n    const onOverlayClose = () => {\n        setIsOpen(false);\n    };\n\n    const onOverlayOpen = () => {\n        setIsOpen(true);\n    };\n\n    const inner = (\n        <div className=\"d-flex align-items-center flex-column\">\n            <DateRangePicker\n                selectedStartDate={startDateProp}\n                selectedEndDate={endDateProp}\n                onStartDateChanged={onStartDateChangedHandler}\n                onEndDateChanged={selectedDateChanged}\n                showYearOnCalendar={showYearOnCalendar}\n                yearDisplayOption={yearDisplayOption}\n                {...DatePickerProps}\n            />\n        </div>\n    );\n\n    return (\n        <>\n            <div ref={thisElement} className={className} onClick={onOverlayOpen}>\n                {children}\n            </div>\n            <Overlay\n                offset={props.overlayOffset}\n                open={isOpen}\n                onClose={onOverlayClose}\n                container={props.container || thisElement.current?.parentElement?.parentElement}\n                followElement={props.container || thisElement.current}\n                {...(overlay || {})}\n                className={classNames(styles['floating-roomstay-calendar'], {\n                    [styles['--small']]: DatePickerProps.small,\n                    [styles['--specific']]: props.theme === EBookingWizardTheme.Specific,\n                    [styles['--single']]: !DatePickerProps.showMultipleMonths,\n                })}\n            >\n                {inner}\n            </Overlay>\n        </>\n    );\n});\n\nFloatingDateRangePicker.displayName = 'FloatingDateRangePicker';\n\nexport default FloatingDateRangePicker;\n"]}
+{"version":3,"file":"FloatingDateRangePicker.js","sourceRoot":"/","sources":["src/components/generic/DateRangePicker/FloatingDateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport * as dayjs from 'dayjs';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport DateRangePicker, { DatePickerProps } from '@/components/generic/DateRangePicker/DateRangePicker';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\n\nimport { EBookingWizardTheme } from '../BookingWizard/BookingWizard';\nimport styles from './DateRangePicker.module.scss';\n\nexport interface FloatingDateRangePickerProps extends Omit<DatePickerProps, 'selectedStartDate' | 'selectedEndDate' | 'onStartDateChanged' | 'onEndDateChanged'> {\n    children?: React.ReactNode;\n    startDate?: dayjs.Dayjs | null;\n    endDate?: dayjs.Dayjs | null;\n    overlayOffset?: [number, number];\n    fixedStartDate?: boolean;\n    container?: HTMLElement;\n\n    selectedDateChanged?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;\n\n    className?: string;\n\n    overlay?: {\n        placement?: Placement;\n        fallbackPlacements?: Placement;\n    };\n    notes?: React.ReactNode;\n    onOverlayOpenChange?: (isOpen: boolean) => void;\n}\n\nexport interface FloatingDateRangePickerHandle {\n    closePicker: () => void;\n    openPicker: () => void;\n    toggle: () => void;\n}\n\nconst FloatingDateRangePicker = React.forwardRef<FloatingDateRangePickerHandle, FloatingDateRangePickerProps>((props, ref) => {\n    const {\n        children,\n        notes,\n        startDate: startDateProp,\n        endDate: endDateProp,\n        selectedDateChanged: selectedDateChangedProp,\n        className,\n        overlay,\n        showYearOnCalendar,\n        yearDisplayOption,\n        onOverlayOpenChange,\n        ...DatePickerProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [startDate, setStartDate] = useState<dayjs.Dayjs | null>(null);\n\n    const thisElement = useRef<HTMLDivElement | null>(null);\n\n    React.useImperativeHandle(\n        ref,\n        () => ({\n            closePicker: onOverlayClose,\n            openPicker: onOverlayOpen,\n            toggle: () => setIsOpen(!isOpen),\n        }),\n        []\n    );\n\n    const selectedDateChanged = (endDate: dayjs.Dayjs) => {\n        if (selectedDateChangedProp && startDate) {\n            selectedDateChangedProp(startDate, endDate);\n        }\n\n        if (endDate) {\n            setIsOpen(false);\n        }\n    };\n\n    const onStartDateChangedHandler = (date: any) => {\n        setStartDate(date);\n    };\n\n    const onOverlayClose = () => {\n        setIsOpen(false);\n    };\n\n    const onOverlayOpen = () => {\n        setIsOpen(true);\n    };\n\n    useEffect(() => {\n        onOverlayOpenChange?.(isOpen);\n        return () => {\n            onOverlayOpenChange?.(false);\n        };\n    }, [isOpen]);\n\n    const inner = (\n        <div className=\"d-flex align-items-center flex-column\">\n            <DateRangePicker\n                selectedStartDate={startDateProp}\n                selectedEndDate={endDateProp}\n                onStartDateChanged={onStartDateChangedHandler}\n                onEndDateChanged={selectedDateChanged}\n                showYearOnCalendar={showYearOnCalendar}\n                yearDisplayOption={yearDisplayOption}\n                {...DatePickerProps}\n            />\n        </div>\n    );\n\n    return (\n        <>\n            <div ref={thisElement} className={className} onClick={onOverlayOpen}>\n                {children}\n            </div>\n            <Overlay\n                offset={props.overlayOffset}\n                open={isOpen}\n                onClose={onOverlayClose}\n                container={props.container || thisElement.current?.parentElement?.parentElement}\n                followElement={props.container || thisElement.current}\n                {...(overlay || {})}\n                className={classNames(styles['floating-roomstay-calendar'], {\n                    [styles['--small']]: DatePickerProps.small,\n                    [styles['--specific']]: props.theme === EBookingWizardTheme.Specific,\n                    [styles['--images']]: props.theme === EBookingWizardTheme.Images,\n                    [styles['--single']]: !DatePickerProps.showMultipleMonths,\n                })}\n            >\n                {inner}\n                {notes}\n            </Overlay>\n        </>\n    );\n});\n\nFloatingDateRangePicker.displayName = 'FloatingDateRangePicker';\n\nexport default FloatingDateRangePicker;\n"]}

package/dist/src/components/steps/hotel/HotelCard.js

@@ -64,7 +64,7 @@ const HotelCard = ({ hotel }) => {
     const { hotel: currentHotel } = (0, hooks_1.useCurrentHotel)();
     const basketContext = (0, contexts_1.useBasket)();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const [images, setImages] = (0, react_1.useState)([hotel.heroImage]);
+    const [images, setImages] = (0, react_1.useState)([]);
     const [modalOpen, setModalOpen] = (0, react_1.useState)(false);
     const hotelCardRef = (0, react_1.useRef)(null);
     const currentPrice = (_a = hotel.lowestPrice) === null || _a === void 0 ? void 0 : _a.value;
@@ -72,7 +72,10 @@ const HotelCard = ({ hotel }) => {
     const showPrice = currentPriceLoading || (!currentPriceLoading && currentPrice > 0);
     const { t } = (0, react_i18next_1.useTranslation)();
     (0, react_1.useEffect)(() => {
-        const newImages = [hotel.heroImage];
+        const newImages = [];
+        if (hotel.heroImage) {
+            newImages.push(hotel.heroImage);
+        }
         if (hotel.rooms) {
             for (const room of Object.values(hotel.rooms)) {
                 room.images.forEach((image) => {
@@ -81,13 +84,13 @@ const HotelCard = ({ hotel }) => {
             }
         }
         setImages(newImages);
-    }, [hotel.rooms]);
+    }, [hotel.rooms, hotel.heroImage, setImages]);
     (0, react_1.useEffect)(() => {
         if (!hotel.hasLoadedDetails) {
             // If we haven't fetched this hotel yet, lets trigger
             ccx.getHotel(hotel.hotelID);
         }
-    }, [hotel.hasLoadedDetails]);
+    }, [hotel.hotelID, hotel.hasLoadedDetails]);
     const [openPerk, setOpenPerk] = (0, react_1.useState)((_d = (_c = hotel.perks) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name);
     const colorProfile = hotel.colors;
     const onViewRoomsClicked = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -177,7 +180,21 @@ const HotelCard = ({ hotel }) => {
                     ${(0, Color_1.getAccentOverrideStyleContent)(colorProfile)}
                 }`),
             content));
-    }, [currentPrice, isLoading, currentPriceLoading, modalOpen, hotelCardRef, openPerk]);
+    }, [
+        isLoading,
+        images,
+        hotel === null || hotel === void 0 ? void 0 : hotel.hotelID,
+        hotel === null || hotel === void 0 ? void 0 : hotel.address,
+        hotel === null || hotel === void 0 ? void 0 : hotel.perks,
+        hotel === null || hotel === void 0 ? void 0 : hotel.lowestPrice,
+        hotel === null || hotel === void 0 ? void 0 : hotel.colors,
+        currentPrice,
+        currentPriceLoading,
+        modalOpen,
+        hotelCardRef,
+        openPerk,
+        showPrice,
+    ]);
 };
 exports.default = HotelCard;
 //# sourceMappingURL=HotelCard.js.map

package/dist/src/components/steps/hotel/HotelCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotelCard.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext, CompanyContext, useBasket } from '@frontend/contexts';\nimport dayjs from 'dayjs';\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport Placeholder from '@/components/generic/Placeholder';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport HotelCardModal from '@/components/steps/hotel/HotelCardModal';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport { useCurrentHotel } from '@/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Color, getAccentOverrideStyleContent, lightOrDark } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport { getPerkIconElement } from '@/util/HotelPerkHelper';\nimport ScreenSize from '@/util/ScreenSize';\n\ninterface HotelCardProps {\n    hotel: Hotel;\n}\n\nconst HotelCard = ({ hotel }: HotelCardProps) => {\n    const beContext = useContext(BookingEngineContext);\n    const ccx = useContext(CompanyContext);\n    const { hotel: currentHotel } = useCurrentHotel();\n    const basketContext = useBasket();\n\n    const navigate = useNavigate();\n\n    const [images, setImages] = useState([hotel.heroImage]);\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const hotelCardRef = useRef<HTMLElement | null>(null);\n\n    const currentPrice = hotel.lowestPrice?.value;\n    const currentPriceLoading = hotel.lowestPrice?.isLoading;\n\n    const showPrice = currentPriceLoading || (!currentPriceLoading && (currentPrice as number) > 0);\n\n    const { t } = useTranslation();\n\n    useEffect(() => {\n        const newImages: string[] = [hotel.heroImage];\n\n        if (hotel.rooms) {\n            for (const room of Object.values(hotel.rooms)) {\n                room.images.forEach((image) => {\n                    newImages.push(image);\n                });\n            }\n        }\n\n        setImages(newImages);\n    }, [hotel.rooms]);\n\n    useEffect(() => {\n        if (!hotel.hasLoadedDetails) {\n            // If we haven't fetched this hotel yet, lets trigger\n            ccx.getHotel(hotel.hotelID);\n        }\n    }, [hotel.hasLoadedDetails]);\n\n    const [openPerk, setOpenPerk] = useState(hotel.perks?.[0]?.name);\n    const colorProfile = hotel.colors;\n\n    const onViewRoomsClicked = async () => {\n        if (currentHotel?.hotelID !== hotel.hotelID) {\n            const appliedBasketRow = basketContext.selectedBasketRow || basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];\n            const row = new BasketRow();\n            row.setStartDate(appliedBasketRow?.getStartDate() || dayjs().add(1, 'day'));\n            row.setEndDate(appliedBasketRow?.getEndDate() || dayjs().add(2, 'day'));\n            row.setAdults(appliedBasketRow?.getAdults() || 1);\n            row.setChildren(appliedBasketRow?.getChildren() || 0);\n            row.setInfants(appliedBasketRow?.getInfants() || 0);\n            row.setPromoCode(appliedBasketRow.getPromoCode() ?? '');\n            basketContext.initBasketRows([row]);\n        }\n        ccx.changeHotel(hotel);\n\n        navigate(getStepRoom().getStepUrl());\n    };\n\n    const onMoreDetailsClicked = async () => {\n        setModalOpen(true);\n    };\n\n    const onModalClose = () => {\n        setModalOpen(false);\n    };\n\n    const isLoading = !hotel.hasLoadedDetails;\n\n    return useMemo(() => {\n        const content = isLoading ? (\n            <div>\n                <div className=\"d-flex flex-column\">\n                    <Placeholder type=\"block\" blockSize=\"sm\" rounded=\"lg\" blink />\n                    <div className=\"u-pad\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <div className=\"u-marg-top\">\n                            <div className=\"u-flex justify-space-between\">\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        ) : (\n            <div className=\"large-hotel-card u-rounded h-100 justify-items-between\">\n                <div className=\"large-hotel-card--image\">\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"large-hotel-card--body u-pad--heavy u-pad-bottom--none container\">\n                    <Headline bold>{hotel?.name}</Headline>\n                    <Text color={Color.DarkGrey} bold className=\"u-marg-bottom--light\">\n                        {hotel?.address?.city}\n                    </Text>\n                    <div className=\"u-flex u-marg-bottom\">\n                        <Text type={TextType.Small}>{[hotel?.address?.line1, hotel?.address?.line2, hotel?.address?.state].filter((line) => !!line).join(', ')}</Text>\n                    </div>\n                    <div className=\"u-marg-bottom--medium large-hotel-card--description\">\n                        <Text className=\"text\" type={TextType.Small}>\n                            <span dangerouslySetInnerHTML={{ __html: hotel.description || '' }}></span>\n                        </Text>\n                    </div>\n                    {!!hotel.perks?.length && (\n                        <Text className=\"u-marg-bottom\" bold type={TextType.Small} color={Color.Accent}>\n                            And these come free...\n                        </Text>\n                    )}\n                    <div className=\"u-flex u-flex-align-center u-marg-bottom--medium\">\n                        {!!hotel.perks?.length && (\n                            <div className=\"u-flex\">\n                                {hotel.perks.slice(0, 5).map((perk) => {\n                                    const openPerkOnClick = () => {\n                                        setOpenPerk(perk.name);\n                                    };\n\n                                    const perkIconElement = getPerkIconElement(perk);\n                                    return (\n                                        <div className=\"u-flex u-flex-align-center\" key={perk.name}>\n                                            <Tooltip\n                                                title={perk.tooltip ?? perk.name}\n                                                overrideContainer={hotelCardRef?.current}\n                                                dark={lightOrDark(hotel.colors.accent2) === 'dark'}\n                                            >\n                                                <div\n                                                    onClick={openPerkOnClick}\n                                                    style={{ backgroundColor: Color.Snow }}\n                                                    className=\"u-rounded u-pad--light u-marg-right--light d-flex justify-center\"\n                                                >\n                                                    <div className=\"u-mw-16 d-flex justify-content-center\">{perkIconElement}</div>\n                                                </div>\n                                            </Tooltip>\n                                            <div\n                                                className={\n                                                    'u-marg-right u-none@l- u-block@m- ' +\n                                                    (beContext.screenSize > ScreenSize.Medium ||\n                                                    beContext.screenSize <= ScreenSize.Mobile ||\n                                                    (beContext.screenSize > ScreenSize.Mobile && beContext.screenSize <= ScreenSize.Medium && openPerk !== perk.name)\n                                                        ? 'u-none-2'\n                                                        : '')\n                                                }\n                                            >\n                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        )}\n                        <BEButton icon={IconType.ArrowRight2} isText primary size=\"tiny\" iconPosition=\"right\" onClick={onMoreDetailsClicked}>\n                            {t(Translation.Step.Room.RoomInfo.MoreDetails)}\n                        </BEButton>\n                    </div>\n                </div>\n                <div className=\"u-pad--heavy u-pad-top--none h-100 justify-content-end u-flex flex-column u-flex-align-flex-start align-items-md-start no-gutters\">\n                    {showPrice ? (\n                        <>\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"u-flex u-flex-flex-start u-flex-align-center flex-row\">\n                                <Headline bold className=\"u-flex\">\n                                    {hotel.lowestPrice?.isLoading ? (\n                                        <SmallSpinner />\n                                    ) : (\n                                        <Currency hideDecimals originalCurrencyCode={hotel.defaultCurrency}>\n                                            {currentPrice}\n                                        </Currency>\n                                    )}\n                                </Headline>\n                                <Text color={Color.DarkGrey} inline>\n                                    /{t(Translation.Misc.Night)}\n                                </Text>\n                            </div>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    {t(Translation.Step.Room.ExcludingTaxes)}\n                                </Text>\n                            </div>\n                        </>\n                    ) : (\n                        <div className=\"u-h-fill d-flex align-items-center\">\n                            <Text type={TextType.Small} color={Color.Alert}>\n                                {t(Translation.Step.Hotel.HotelCard.DatesUnavailable)}\n                            </Text>\n                        </div>\n                    )}\n\n                    <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@m-\">\n                        <BEButton\n                            name=\"ViewRatesNowButton\"\n                            primary\n                            primaryActive\n                            filled\n                            icon={IconType.ArrowRight}\n                            iconPosition=\"right\"\n                            wide={beContext.screenSize <= ScreenSize.Medium}\n                            onClick={onViewRoomsClicked}\n                        >\n                            {t(Translation.Step.Hotel.ViewRooms)}\n                        </BEButton>\n                    </div>\n                </div>\n                <HotelCardModal open={modalOpen} onClose={onModalClose} hotel={hotel} container={hotelCardRef?.current} />\n            </div>\n        );\n\n        return (\n            <span ref={hotelCardRef} id={`hotel-card-${hotel.hotelID}`}>\n                <style>{`#hotel-card-modal-${hotel.hotelID},\n                #hotel-card-${hotel.hotelID} {\n                    ${getAccentOverrideStyleContent(colorProfile)}\n                }`}</style>\n                {content}\n            </span>\n        );\n    }, [currentPrice, isLoading, currentPriceLoading, modalOpen, hotelCardRef, openPerk]);\n};\n\nexport default HotelCard;\n"]}
+{"version":3,"file":"HotelCard.js","sourceRoot":"/","sources":["src/components/steps/hotel/HotelCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAqF;AACrF,kDAA0B;AAC1B,+CAAgF;AAChF,iDAA+C;AAC/C,uDAA+C;AAC/C,0DAAuD;AAEvD,6EAAqD;AACrD,6EAAqD;AACrD,6EAAqD;AACrD,yDAA0D;AAC1D,4FAAoE;AACpE,mFAA2D;AAC3D,kEAA2D;AAC3D,mFAA2D;AAC3D,6FAAqE;AACrE,oGAA4E;AAC5E,mCAA0C;AAC1C,mEAA2C;AAE3C,wCAAiF;AACjF,qEAA6C;AAC7C,4DAA4D;AAC5D,mEAA2C;AAM3C,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAkB,EAAE,EAAE;;IAC5C,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAC;IACvC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAClD,MAAM,aAAa,GAAG,IAAA,oBAAS,GAAE,CAAC;IAElC,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,WAAW,0CAAE,KAAK,CAAC;IAC9C,MAAM,mBAAmB,GAAG,MAAA,KAAK,CAAC,WAAW,0CAAE,SAAS,CAAC;IAEzD,MAAM,SAAS,GAAG,mBAAmB,IAAI,CAAC,CAAC,mBAAmB,IAAK,YAAuB,GAAG,CAAC,CAAC,CAAC;IAEhG,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,SAAS,GAAa,EAAE,CAAC;QAC/B,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;SACnC;QAED,IAAI,KAAK,CAAC,KAAK,EAAE;YACb,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;gBAC3C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC1B,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,CAAC,CAAC;aACN;SACJ;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;YACzB,qDAAqD;YACrD,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE5C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAG,CAAC,CAAC,0CAAE,IAAI,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC;IAElC,MAAM,kBAAkB,GAAG,GAAS,EAAE;;QAClC,IAAI,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,MAAK,KAAK,CAAC,OAAO,EAAE;YACzC,MAAM,gBAAgB,GAAG,aAAa,CAAC,iBAAiB,IAAI,aAAa,CAAC,iBAAiB,CAAC,aAAa,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACxI,MAAM,GAAG,GAAG,IAAI,mBAAS,EAAE,CAAC;YAC5B,GAAG,CAAC,YAAY,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,YAAY,EAAE,KAAI,IAAA,eAAK,GAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;YAC5E,GAAG,CAAC,UAAU,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,UAAU,EAAE,KAAI,IAAA,eAAK,GAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;YACxE,GAAG,CAAC,SAAS,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,SAAS,EAAE,KAAI,CAAC,CAAC,CAAC;YAClD,GAAG,CAAC,WAAW,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC,CAAC;YACtD,GAAG,CAAC,UAAU,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,UAAU,EAAE,KAAI,CAAC,CAAC,CAAC;YACpD,GAAG,CAAC,YAAY,CAAC,MAAA,gBAAgB,CAAC,YAAY,EAAE,mCAAI,EAAE,CAAC,CAAC;YACxD,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SACvC;QACD,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEvB,QAAQ,CAAC,IAAA,qBAAW,GAAE,CAAC,UAAU,EAAE,CAAC,CAAC;IACzC,CAAC,CAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,GAAS,EAAE;QACpC,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAA,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC;IAE1C,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;;QAChB,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CACxB;YACI,uCAAK,SAAS,EAAC,oBAAoB;gBAC/B,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG;gBAC9D,uCAAK,SAAS,EAAC,OAAO;oBAClB,8BAAC,qBAAW,IAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,SAAG;oBAC/C,8BAAC,qBAAW,IAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,SAAG;oBAC/C,uCAAK,SAAS,EAAC,YAAY;wBACvB,uCAAK,SAAS,EAAC,8BAA8B;4BACzC,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG;4BAC9D,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG;4BAC9D,8BAAC,qBAAW,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,SAAG,CAC5D,CACJ,CACJ,CACJ,CACJ,CACT,CAAC,CAAC,CAAC,CACA,uCAAK,SAAS,EAAC,wDAAwD;YACnE,uCAAK,SAAS,EAAC,yBAAyB;gBACpC,8BAAC,4BAAkB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;YACN,uCAAK,SAAS,EAAC,kEAAkE;gBAC7E,8BAAC,kBAAQ,IAAC,IAAI,UAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAY;gBACvC,8BAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,QAAC,SAAS,EAAC,sBAAsB,IAC7D,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,IAAI,CAClB;gBACP,uCAAK,SAAS,EAAC,sBAAsB;oBACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CAC5I;gBACN,uCAAK,SAAS,EAAC,qDAAqD;oBAChE,8BAAC,cAAI,IAAC,SAAS,EAAC,MAAM,EAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACvC,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,WAAW,IAAI,EAAE,EAAE,GAAS,CACxE,CACL;gBACL,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,CAAA,IAAI,CACtB,8BAAC,cAAI,IAAC,SAAS,EAAC,eAAe,EAAC,IAAI,QAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,6BAEvE,CACV;gBACD,uCAAK,SAAS,EAAC,kDAAkD;oBAC5D,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,CAAA,IAAI,CACtB,uCAAK,SAAS,EAAC,QAAQ,IAClB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;;wBAClC,MAAM,eAAe,GAAG,GAAG,EAAE;4BACzB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;wBAC3B,CAAC,CAAC;wBAEF,MAAM,eAAe,GAAG,IAAA,oCAAkB,EAAC,IAAI,CAAC,CAAC;wBACjD,OAAO,CACH,uCAAK,SAAS,EAAC,4BAA4B,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI;4BACtD,8BAAC,iBAAO,IACJ,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC,IAAI,EAChC,iBAAiB,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,EACxC,IAAI,EAAE,IAAA,mBAAW,EAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,MAAM;gCAElD,uCACI,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,EAAE,eAAe,EAAE,aAAK,CAAC,IAAI,EAAE,EACtC,SAAS,EAAC,kEAAkE;oCAE5E,uCAAK,SAAS,EAAC,uCAAuC,IAAE,eAAe,CAAO,CAC5E,CACA;4BACV,uCACI,SAAS,EACL,oCAAoC;oCACpC,CAAC,SAAS,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM;wCACzC,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM;wCACzC,CAAC,SAAS,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM,IAAI,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;wCAC7G,CAAC,CAAC,UAAU;wCACZ,CAAC,CAAC,EAAE,CAAC;gCAGb,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,IAAI,CAAC,IAAI,CAAQ,CAC5C,CACJ,CACT,CAAC;oBACN,CAAC,CAAC,CACA,CACT;oBACD,8BAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,WAAW,EAAE,MAAM,QAAC,OAAO,QAAC,IAAI,EAAC,MAAM,EAAC,YAAY,EAAC,OAAO,EAAC,OAAO,EAAE,oBAAoB,IAC9G,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CACvC,CACT,CACJ;YACN,uCAAK,SAAS,EAAC,mIAAmI;gBAC7I,SAAS,CAAC,CAAC,CAAC,CACT;oBACI,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,MAAM,UAChD,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CACtB;oBACP,uCAAK,SAAS,EAAC,uDAAuD;wBAClE,8BAAC,kBAAQ,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IAC5B,CAAA,MAAA,KAAK,CAAC,WAAW,0CAAE,SAAS,EAAC,CAAC,CAAC,CAC5B,8BAAC,sBAAY,OAAG,CACnB,CAAC,CAAC,CAAC,CACA,8BAAC,kBAAQ,IAAC,YAAY,QAAC,oBAAoB,EAAE,KAAK,CAAC,eAAe,IAC7D,YAAY,CACN,CACd,CACM;wBACX,8BAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,MAAM;;4BAC7B,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,CACL;oBACN,uCAAK,SAAS,EAAC,eAAe;wBAC1B,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,MAAM,QAAC,SAAS,EAAC,UAAU,IACrE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CACrC,CACL,CACP,CACN,CAAC,CAAC,CAAC,CACA,uCAAK,SAAS,EAAC,oCAAoC;oBAC/C,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,KAAK,IACzC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAClD,CACL,CACT;gBAED,uCAAK,SAAS,EAAC,yDAAyD;oBACpE,8BAAC,kBAAQ,IACL,IAAI,EAAC,oBAAoB,EACzB,OAAO,QACP,aAAa,QACb,MAAM,QACN,IAAI,EAAE,eAAQ,CAAC,UAAU,EACzB,YAAY,EAAC,OAAO,EACpB,IAAI,EAAE,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EAC/C,OAAO,EAAE,kBAAkB,IAE1B,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAC7B,CACT,CACJ;YACN,8BAAC,wBAAc,IAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,GAAI,CACxG,CACT,CAAC;QAEF,OAAO,CACH,wCAAM,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,cAAc,KAAK,CAAC,OAAO,EAAE;YACtD,6CAAQ,qBAAqB,KAAK,CAAC,OAAO;8BAC5B,KAAK,CAAC,OAAO;sBACrB,IAAA,qCAA6B,EAAC,YAAY,CAAC;kBAC/C,CAAS;YACV,OAAO,CACL,CACV,CAAC;IACN,CAAC,EAAE;QACC,SAAS;QACT,MAAM;QACN,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;QACd,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;QACd,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK;QACZ,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW;QAClB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM;QACb,YAAY;QACZ,mBAAmB;QACnB,SAAS;QACT,YAAY;QACZ,QAAQ;QACR,SAAS;KACZ,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import { BookingEngineContext, CompanyContext, useBasket } from '@frontend/contexts';\nimport dayjs from 'dayjs';\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useNavigate } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport Placeholder from '@/components/generic/Placeholder';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport HotelCardModal from '@/components/steps/hotel/HotelCardModal';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport { useCurrentHotel } from '@/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Color, getAccentOverrideStyleContent, lightOrDark } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport { getPerkIconElement } from '@/util/HotelPerkHelper';\nimport ScreenSize from '@/util/ScreenSize';\n\ninterface HotelCardProps {\n    hotel: Hotel;\n}\n\nconst HotelCard = ({ hotel }: HotelCardProps) => {\n    const beContext = useContext(BookingEngineContext);\n    const ccx = useContext(CompanyContext);\n    const { hotel: currentHotel } = useCurrentHotel();\n    const basketContext = useBasket();\n\n    const navigate = useNavigate();\n\n    const [images, setImages] = useState<string[]>([]);\n    const [modalOpen, setModalOpen] = useState(false);\n\n    const hotelCardRef = useRef<HTMLElement | null>(null);\n\n    const currentPrice = hotel.lowestPrice?.value;\n    const currentPriceLoading = hotel.lowestPrice?.isLoading;\n\n    const showPrice = currentPriceLoading || (!currentPriceLoading && (currentPrice as number) > 0);\n\n    const { t } = useTranslation();\n\n    useEffect(() => {\n        const newImages: string[] = [];\n        if (hotel.heroImage) {\n            newImages.push(hotel.heroImage);\n        }\n\n        if (hotel.rooms) {\n            for (const room of Object.values(hotel.rooms)) {\n                room.images.forEach((image) => {\n                    newImages.push(image);\n                });\n            }\n        }\n\n        setImages(newImages);\n    }, [hotel.rooms, hotel.heroImage, setImages]);\n\n    useEffect(() => {\n        if (!hotel.hasLoadedDetails) {\n            // If we haven't fetched this hotel yet, lets trigger\n            ccx.getHotel(hotel.hotelID);\n        }\n    }, [hotel.hotelID, hotel.hasLoadedDetails]);\n\n    const [openPerk, setOpenPerk] = useState(hotel.perks?.[0]?.name);\n    const colorProfile = hotel.colors;\n\n    const onViewRoomsClicked = async () => {\n        if (currentHotel?.hotelID !== hotel.hotelID) {\n            const appliedBasketRow = basketContext.selectedBasketRow || basketContext.currentBasketRows[basketContext.currentBasketRows.length - 1];\n            const row = new BasketRow();\n            row.setStartDate(appliedBasketRow?.getStartDate() || dayjs().add(1, 'day'));\n            row.setEndDate(appliedBasketRow?.getEndDate() || dayjs().add(2, 'day'));\n            row.setAdults(appliedBasketRow?.getAdults() || 1);\n            row.setChildren(appliedBasketRow?.getChildren() || 0);\n            row.setInfants(appliedBasketRow?.getInfants() || 0);\n            row.setPromoCode(appliedBasketRow.getPromoCode() ?? '');\n            basketContext.initBasketRows([row]);\n        }\n        ccx.changeHotel(hotel);\n\n        navigate(getStepRoom().getStepUrl());\n    };\n\n    const onMoreDetailsClicked = async () => {\n        setModalOpen(true);\n    };\n\n    const onModalClose = () => {\n        setModalOpen(false);\n    };\n\n    const isLoading = !hotel.hasLoadedDetails;\n\n    return useMemo(() => {\n        const content = isLoading ? (\n            <div>\n                <div className=\"d-flex flex-column\">\n                    <Placeholder type=\"block\" blockSize=\"sm\" rounded=\"lg\" blink />\n                    <div className=\"u-pad\">\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <Placeholder type=\"text\" w=\"md\" h=\"md\" blink />\n                        <div className=\"u-marg-top\">\n                            <div className=\"u-flex justify-space-between\">\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                                <Placeholder type=\"block\" blockSize=\"xs\" rounded=\"lg\" blink />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        ) : (\n            <div className=\"large-hotel-card u-rounded h-100 justify-items-between\">\n                <div className=\"large-hotel-card--image\">\n                    <ImageGallerySlider images={images} />\n                </div>\n                <div className=\"large-hotel-card--body u-pad--heavy u-pad-bottom--none container\">\n                    <Headline bold>{hotel?.name}</Headline>\n                    <Text color={Color.DarkGrey} bold className=\"u-marg-bottom--light\">\n                        {hotel?.address?.city}\n                    </Text>\n                    <div className=\"u-flex u-marg-bottom\">\n                        <Text type={TextType.Small}>{[hotel?.address?.line1, hotel?.address?.line2, hotel?.address?.state].filter((line) => !!line).join(', ')}</Text>\n                    </div>\n                    <div className=\"u-marg-bottom--medium large-hotel-card--description\">\n                        <Text className=\"text\" type={TextType.Small}>\n                            <span dangerouslySetInnerHTML={{ __html: hotel.description || '' }}></span>\n                        </Text>\n                    </div>\n                    {!!hotel.perks?.length && (\n                        <Text className=\"u-marg-bottom\" bold type={TextType.Small} color={Color.Accent}>\n                            And these come free...\n                        </Text>\n                    )}\n                    <div className=\"u-flex u-flex-align-center u-marg-bottom--medium\">\n                        {!!hotel.perks?.length && (\n                            <div className=\"u-flex\">\n                                {hotel.perks.slice(0, 5).map((perk) => {\n                                    const openPerkOnClick = () => {\n                                        setOpenPerk(perk.name);\n                                    };\n\n                                    const perkIconElement = getPerkIconElement(perk);\n                                    return (\n                                        <div className=\"u-flex u-flex-align-center\" key={perk.name}>\n                                            <Tooltip\n                                                title={perk.tooltip ?? perk.name}\n                                                overrideContainer={hotelCardRef?.current}\n                                                dark={lightOrDark(hotel.colors.accent2) === 'dark'}\n                                            >\n                                                <div\n                                                    onClick={openPerkOnClick}\n                                                    style={{ backgroundColor: Color.Snow }}\n                                                    className=\"u-rounded u-pad--light u-marg-right--light d-flex justify-center\"\n                                                >\n                                                    <div className=\"u-mw-16 d-flex justify-content-center\">{perkIconElement}</div>\n                                                </div>\n                                            </Tooltip>\n                                            <div\n                                                className={\n                                                    'u-marg-right u-none@l- u-block@m- ' +\n                                                    (beContext.screenSize > ScreenSize.Medium ||\n                                                    beContext.screenSize <= ScreenSize.Mobile ||\n                                                    (beContext.screenSize > ScreenSize.Mobile && beContext.screenSize <= ScreenSize.Medium && openPerk !== perk.name)\n                                                        ? 'u-none-2'\n                                                        : '')\n                                                }\n                                            >\n                                                <Text type={TextType.Small}>{perk.name}</Text>\n                                            </div>\n                                        </div>\n                                    );\n                                })}\n                            </div>\n                        )}\n                        <BEButton icon={IconType.ArrowRight2} isText primary size=\"tiny\" iconPosition=\"right\" onClick={onMoreDetailsClicked}>\n                            {t(Translation.Step.Room.RoomInfo.MoreDetails)}\n                        </BEButton>\n                    </div>\n                </div>\n                <div className=\"u-pad--heavy u-pad-top--none h-100 justify-content-end u-flex flex-column u-flex-align-flex-start align-items-md-start no-gutters\">\n                    {showPrice ? (\n                        <>\n                            <Text type={TextType.Small} color={Color.Navy} inline>\n                                {t(Translation.Misc.From)}\n                            </Text>\n                            <div className=\"u-flex u-flex-flex-start u-flex-align-center flex-row\">\n                                <Headline bold className=\"u-flex\">\n                                    {hotel.lowestPrice?.isLoading ? (\n                                        <SmallSpinner />\n                                    ) : (\n                                        <Currency hideDecimals originalCurrencyCode={hotel.defaultCurrency}>\n                                            {currentPrice}\n                                        </Currency>\n                                    )}\n                                </Headline>\n                                <Text color={Color.DarkGrey} inline>\n                                    /{t(Translation.Misc.Night)}\n                                </Text>\n                            </div>\n                            <div className=\"u-marg-bottom\">\n                                <Text type={TextType.Small} color={Color.Grey} inline className=\"u-nowrap\">\n                                    {t(Translation.Step.Room.ExcludingTaxes)}\n                                </Text>\n                            </div>\n                        </>\n                    ) : (\n                        <div className=\"u-h-fill d-flex align-items-center\">\n                            <Text type={TextType.Small} color={Color.Alert}>\n                                {t(Translation.Step.Hotel.HotelCard.DatesUnavailable)}\n                            </Text>\n                        </div>\n                    )}\n\n                    <div className=\"u-marg-top--light u-flex justify-content-end u-w-100@m-\">\n                        <BEButton\n                            name=\"ViewRatesNowButton\"\n                            primary\n                            primaryActive\n                            filled\n                            icon={IconType.ArrowRight}\n                            iconPosition=\"right\"\n                            wide={beContext.screenSize <= ScreenSize.Medium}\n                            onClick={onViewRoomsClicked}\n                        >\n                            {t(Translation.Step.Hotel.ViewRooms)}\n                        </BEButton>\n                    </div>\n                </div>\n                <HotelCardModal open={modalOpen} onClose={onModalClose} hotel={hotel} container={hotelCardRef?.current} />\n            </div>\n        );\n\n        return (\n            <span ref={hotelCardRef} id={`hotel-card-${hotel.hotelID}`}>\n                <style>{`#hotel-card-modal-${hotel.hotelID},\n                #hotel-card-${hotel.hotelID} {\n                    ${getAccentOverrideStyleContent(colorProfile)}\n                }`}</style>\n                {content}\n            </span>\n        );\n    }, [\n        isLoading,\n        images,\n        hotel?.hotelID,\n        hotel?.address,\n        hotel?.perks,\n        hotel?.lowestPrice,\n        hotel?.colors,\n        currentPrice,\n        currentPriceLoading,\n        modalOpen,\n        hotelCardRef,\n        openPerk,\n        showPrice,\n    ]);\n};\n\nexport default HotelCard;\n"]}

package/dist/src/components/steps/room/ImageGallerySlider.js

@@ -39,12 +39,14 @@ const ImageProvider_1 = __importStar(require("../../../providers/ImageProvider")
 const Color_1 = require("../../../util/Color");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 function ImageGallerySlider(props) {
-    var _a;
     const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const [{ x }, set] = (0, web_1.useSpring)(() => ({ x: 0 }));
     const [ref, bounds] = (0, react_use_measure_1.default)();
     const [prevReleasePosition, setPrevRelPos] = (0, react_1.useState)(0);
-    const images = (_a = props.images) !== null && _a !== void 0 ? _a : [];
+    const images = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = props.images) !== null && _a !== void 0 ? _a : [];
+    }, [props.images]);
     const [toggler, setToggler] = (0, react_1.useState)(false);
     const [lastReleaseX, setLastReleaseX] = (0, react_1.useState)(0);
     const [lastIndex, setLastIndex] = (0, react_1.useState)(0);
@@ -135,7 +137,7 @@ function ImageGallerySlider(props) {
             react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowLeft2, color: Color_1.Color.White, size: "24px" }))),
         react_1.default.createElement(web_1.animated.div, Object.assign({ className: "room-gallery-slider__animation" }, bind(), { style: { left: x.to((perc) => `${perc * 100 * images.length}%`) }, onClick: toggleClickHandler }),
             react_1.default.createElement("ul", { className: "room-gallery-slider__track", style: { width: `${images.length * 100}%` } }, images.map((image, index) => {
-                return (react_1.default.createElement("li", { key: index, className: "room-gallery-slider__item", style: {
+                return (react_1.default.createElement("li", { key: `${image}-{index}`, className: "room-gallery-slider__item", style: {
                         width: `${100 / images.length}%`,
                         overflow: 'hidden',
                     } },

package/dist/src/components/steps/room/ImageGallerySlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGallerySlider.js","sourceRoot":"/","sources":["src/components/steps/room/ImageGallerySlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext } from '@frontend/contexts';\nimport { animated, useSpring } from '@react-spring/web';\nimport FsLightbox from 'fslightbox-react';\nimport React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useDrag } from 'react-use-gesture';\nimport { FullGestureState, StateKey } from 'react-use-gesture/dist/types';\nimport useMeasure from 'react-use-measure';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport ImageLoader from '@/components/generic/loader/ImageLoader';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\n\ninterface ImageGallerySliderProps {\n    images: string[];\n\n    imageSize?: ImageSize;\n    hideLightboxIcon?: boolean;\n}\n\nexport default function ImageGallerySlider(props: ImageGallerySliderProps) {\n    const context = useContext(BookingEngineContext);\n\n    const [{ x }, set] = useSpring(() => ({ x: 0 }));\n    const [ref, bounds] = useMeasure();\n    const [prevReleasePosition, setPrevRelPos] = useState(0);\n    const images = props.images ?? [];\n\n    const [toggler, setToggler] = useState(false);\n    const [lastReleaseX, setLastReleaseX] = useState(0);\n    const [lastIndex, setLastIndex] = useState(0);\n\n    const [isDragging, setIsDragging] = useState(false);\n\n    let sliderVelocity = 0;\n\n    const handleDrag = ({ down, movement: [mx], velocity }: FullGestureState<StateKey<'drag'>>) => {\n        if (context.screenSize <= ScreenSize.Medium) {\n            velocity = velocity * 0.5;\n            sliderVelocity = velocity > 2 ? 2 : velocity < 1 ? 1 : velocity;\n        } else {\n            sliderVelocity = 1;\n        }\n\n        const cardWidth = bounds.width;\n        const maxX = images.length * cardWidth;\n\n        if (!down) {\n            const releasePosition = lastReleaseX + mx * sliderVelocity;\n\n            let restingLocation = 0;\n            let last = 0;\n\n            if (releasePosition > 0) {\n                restingLocation = 0;\n                last = 0;\n            } else if (releasePosition < -(maxX - cardWidth)) {\n                restingLocation = -(maxX - cardWidth);\n                last = images.length - 1;\n            } else {\n                const magic = -releasePosition / cardWidth;\n                if (releasePosition >= prevReleasePosition) {\n                    last = releasePosition % cardWidth > -cardWidth / 0.001 ? Math.floor(magic) : Math.ceil(magic);\n                    setPrevRelPos(releasePosition + (-releasePosition % cardWidth));\n                    restingLocation = -(last * cardWidth);\n                } else {\n                    last = releasePosition % cardWidth > -cardWidth / 1000 ? Math.floor(magic) : Math.ceil(magic);\n                    setPrevRelPos(releasePosition - (cardWidth - (-releasePosition % cardWidth)));\n                    restingLocation = -(last * cardWidth);\n                }\n            }\n\n            let inPercent = 0;\n            if (restingLocation !== 0) {\n                inPercent = restingLocation / maxX;\n            }\n\n            setLastIndex(last);\n            set({ x: inPercent });\n            setLastReleaseX(restingLocation);\n\n            setTimeout(() => {\n                setIsDragging(false);\n            }, 50);\n        } else {\n            let inPercent = 0;\n            const newReleasePx = lastReleaseX + mx;\n            inPercent = newReleasePx / maxX;\n\n            set({ x: inPercent });\n            if (mx) {\n                setIsDragging(true);\n            }\n        }\n    };\n\n    // Set the drag hook and define component movement based on gesture data\n    const bind = useDrag((event) => {\n        handleDrag(event);\n    });\n\n    const nextImage = () => {\n        handleDrag({ down: false, movement: [-bounds.width, 0], velocity: 1 } as any);\n    };\n\n    const prevImage = () => {\n        handleDrag({ down: false, movement: [bounds.width, 0], velocity: 1 } as any);\n    };\n\n    const onClickPrevImage = () => {\n        return prevImage();\n    };\n    const toggleToggler = () => {\n        return setToggler(!toggler);\n    };\n    const nextImageOnClick = () => {\n        return nextImage();\n    };\n    const toggleClickHandler = () => {\n        if (!isDragging) {\n            setToggler(!toggler);\n        }\n    };\n\n    return (\n        <div ref={ref} className=\"room-gallery-slider\">\n            {images.length > 1 && (\n                <div className=\"room-gallery-slider__icon-left\" onClick={onClickPrevImage}>\n                    <Icon icon={IconType.ArrowLeft2} color={Color.White} size=\"24px\" />\n                </div>\n            )}\n            <animated.div className=\"room-gallery-slider__animation\" {...bind()} style={{ left: x.to((perc) => `${perc * 100 * images.length}%`) }} onClick={toggleClickHandler}>\n                <ul className=\"room-gallery-slider__track\" style={{ width: `${images.length * 100}%` }}>\n                    {images.map((image: any, index: number) => {\n                        return (\n                            <li\n                                key={index}\n                                className=\"room-gallery-slider__item\"\n                                style={{\n                                    width: `${100 / images.length}%`,\n                                    overflow: 'hidden',\n                                }}\n                            >\n                                <ImageLoader\n                                    visible={lastIndex >= index}\n                                    size={props.imageSize}\n                                    draggable={false}\n                                    src={image}\n                                    style={{ objectFit: 'cover', objectPosition: 'center', height: '100%', width: '100%' }}\n                                />\n                            </li>\n                        );\n                    })}\n                </ul>\n            </animated.div>\n            {!!images.length && (\n                <>\n                    {!props.hideLightboxIcon && (\n                        <div className=\"room-gallery-slider__icon-lightbox\" onClick={toggleToggler}>\n                            <Icon icon={IconType.Fullscreen} color={Color.White} size=\"20px\" />\n                        </div>\n                    )}\n                    {createPortal(\n                        <FsLightbox toggler={toggler} sources={images.map((image) => ImageProvider.resizeImage(image, ImageSize.Original))} type=\"image\" loadOnlyCurrentSource />,\n                        document.body\n                    )}\n                </>\n            )}\n            {images.length > 1 && (\n                <div className=\"room-gallery-slider__icon-right\" onClick={nextImageOnClick}>\n                    <Icon icon={IconType.ArrowRight2} color={Color.White} size=\"24px\" />\n                </div>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"ImageGallerySlider.js","sourceRoot":"/","sources":["src/components/steps/room/ImageGallerySlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext } from '@frontend/contexts';\nimport { animated, useSpring } from '@react-spring/web';\nimport FsLightbox from 'fslightbox-react';\nimport React, { useContext, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useDrag } from 'react-use-gesture';\nimport { FullGestureState, StateKey } from 'react-use-gesture/dist/types';\nimport useMeasure from 'react-use-measure';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport ImageLoader from '@/components/generic/loader/ImageLoader';\nimport ImageProvider, { ImageSize } from '@/providers/ImageProvider';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\n\ninterface ImageGallerySliderProps {\n    images: string[];\n\n    imageSize?: ImageSize;\n    hideLightboxIcon?: boolean;\n}\n\nexport default function ImageGallerySlider(props: ImageGallerySliderProps) {\n    const context = useContext(BookingEngineContext);\n\n    const [{ x }, set] = useSpring(() => ({ x: 0 }));\n    const [ref, bounds] = useMeasure();\n    const [prevReleasePosition, setPrevRelPos] = useState(0);\n    const images = useMemo(() => {\n        return props.images ?? [];\n    }, [props.images]);\n\n    const [toggler, setToggler] = useState(false);\n    const [lastReleaseX, setLastReleaseX] = useState(0);\n    const [lastIndex, setLastIndex] = useState(0);\n\n    const [isDragging, setIsDragging] = useState(false);\n\n    let sliderVelocity = 0;\n\n    const handleDrag = ({ down, movement: [mx], velocity }: FullGestureState<StateKey<'drag'>>) => {\n        if (context.screenSize <= ScreenSize.Medium) {\n            velocity = velocity * 0.5;\n            sliderVelocity = velocity > 2 ? 2 : velocity < 1 ? 1 : velocity;\n        } else {\n            sliderVelocity = 1;\n        }\n\n        const cardWidth = bounds.width;\n        const maxX = images.length * cardWidth;\n\n        if (!down) {\n            const releasePosition = lastReleaseX + mx * sliderVelocity;\n\n            let restingLocation = 0;\n            let last = 0;\n\n            if (releasePosition > 0) {\n                restingLocation = 0;\n                last = 0;\n            } else if (releasePosition < -(maxX - cardWidth)) {\n                restingLocation = -(maxX - cardWidth);\n                last = images.length - 1;\n            } else {\n                const magic = -releasePosition / cardWidth;\n                if (releasePosition >= prevReleasePosition) {\n                    last = releasePosition % cardWidth > -cardWidth / 0.001 ? Math.floor(magic) : Math.ceil(magic);\n                    setPrevRelPos(releasePosition + (-releasePosition % cardWidth));\n                    restingLocation = -(last * cardWidth);\n                } else {\n                    last = releasePosition % cardWidth > -cardWidth / 1000 ? Math.floor(magic) : Math.ceil(magic);\n                    setPrevRelPos(releasePosition - (cardWidth - (-releasePosition % cardWidth)));\n                    restingLocation = -(last * cardWidth);\n                }\n            }\n\n            let inPercent = 0;\n            if (restingLocation !== 0) {\n                inPercent = restingLocation / maxX;\n            }\n\n            setLastIndex(last);\n            set({ x: inPercent });\n            setLastReleaseX(restingLocation);\n\n            setTimeout(() => {\n                setIsDragging(false);\n            }, 50);\n        } else {\n            let inPercent = 0;\n            const newReleasePx = lastReleaseX + mx;\n            inPercent = newReleasePx / maxX;\n\n            set({ x: inPercent });\n            if (mx) {\n                setIsDragging(true);\n            }\n        }\n    };\n\n    // Set the drag hook and define component movement based on gesture data\n    const bind = useDrag((event) => {\n        handleDrag(event);\n    });\n\n    const nextImage = () => {\n        handleDrag({ down: false, movement: [-bounds.width, 0], velocity: 1 } as any);\n    };\n\n    const prevImage = () => {\n        handleDrag({ down: false, movement: [bounds.width, 0], velocity: 1 } as any);\n    };\n\n    const onClickPrevImage = () => {\n        return prevImage();\n    };\n    const toggleToggler = () => {\n        return setToggler(!toggler);\n    };\n    const nextImageOnClick = () => {\n        return nextImage();\n    };\n    const toggleClickHandler = () => {\n        if (!isDragging) {\n            setToggler(!toggler);\n        }\n    };\n\n    return (\n        <div ref={ref} className=\"room-gallery-slider\">\n            {images.length > 1 && (\n                <div className=\"room-gallery-slider__icon-left\" onClick={onClickPrevImage}>\n                    <Icon icon={IconType.ArrowLeft2} color={Color.White} size=\"24px\" />\n                </div>\n            )}\n            <animated.div className=\"room-gallery-slider__animation\" {...bind()} style={{ left: x.to((perc) => `${perc * 100 * images.length}%`) }} onClick={toggleClickHandler}>\n                <ul className=\"room-gallery-slider__track\" style={{ width: `${images.length * 100}%` }}>\n                    {images.map((image: any, index: number) => {\n                        return (\n                            <li\n                                key={`${image}-{index}`}\n                                className=\"room-gallery-slider__item\"\n                                style={{\n                                    width: `${100 / images.length}%`,\n                                    overflow: 'hidden',\n                                }}\n                            >\n                                <ImageLoader\n                                    visible={lastIndex >= index}\n                                    size={props.imageSize}\n                                    draggable={false}\n                                    src={image}\n                                    style={{ objectFit: 'cover', objectPosition: 'center', height: '100%', width: '100%' }}\n                                />\n                            </li>\n                        );\n                    })}\n                </ul>\n            </animated.div>\n            {!!images.length && (\n                <>\n                    {!props.hideLightboxIcon && (\n                        <div className=\"room-gallery-slider__icon-lightbox\" onClick={toggleToggler}>\n                            <Icon icon={IconType.Fullscreen} color={Color.White} size=\"20px\" />\n                        </div>\n                    )}\n                    {createPortal(\n                        <FsLightbox toggler={toggler} sources={images.map((image) => ImageProvider.resizeImage(image, ImageSize.Original))} type=\"image\" loadOnlyCurrentSource />,\n                        document.body\n                    )}\n                </>\n            )}\n            {images.length > 1 && (\n                <div className=\"room-gallery-slider__icon-right\" onClick={nextImageOnClick}>\n                    <Icon icon={IconType.ArrowRight2} color={Color.White} size=\"24px\" />\n                </div>\n            )}\n        </div>\n    );\n}\n"]}

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.js

@@ -138,6 +138,12 @@ const UserSearchSummaryRow = ({ row, index }) => {
         layout: 'booking-summary',
         theme: BookingWizard_1.EBookingWizardTheme.Default,
         type: sizeMediumDown ? 'top-sheet' : 'popup',
+        isImagesTheme: false,
+        isImagesThemeMobile: false,
+        activeSection: null,
+        onNextHandler: (currentSection) => { },
+        onPrevHandler: (currentSection) => { },
+        stateSections: BookingWizard_1.StateSectionsDefault,
     };
     if (isValid && !isSelectedRow) {
         return (react_1.default.createElement("div", { className: `${UserSearchSummaryRow_module_scss_1.default['user-completed-summary-row']} u-flex w-100` },
@@ -189,7 +195,7 @@ const UserSearchSummaryRow = ({ row, index }) => {
             react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
                 react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
                     react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-item'] },
-                        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Misc.Who)),
+                        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Misc.Guests)),
                         react_1.default.createElement(BookingWizardContext_1.BookingWizardContext.Provider, { value: bookingWizardContext },
                             react_1.default.createElement(BookingWizardGuestSelector_1.BookingWizardGuestSelector, { defaultValue: {
                                     adults: row.getAdults(),