@roomstay/frontend 2.3.0-1 → 2.3.0-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/903.bundle.js +1 -1
- package/dist/975.bundle.js +1 -1
- package/dist/main.bundle.js +1 -1
- package/dist/src/components/generic/Select/Select.d.ts +3 -1
- package/dist/src/components/generic/Select/Select.js +6 -2
- package/dist/src/components/generic/Select/Select.js.map +1 -1
- package/dist/src/components/generic/Tooltip/Tooltip.js +4 -1
- package/dist/src/components/generic/Tooltip/Tooltip.js.map +1 -1
- package/dist/src/components/steps/room/TabGroupedRooms/TabGroupedRoomList.js +1 -1
- package/dist/src/components/steps/room/TabGroupedRooms/TabGroupedRoomList.js.map +1 -1
- package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.d.ts +4 -1
- package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.js +6 -4
- package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.js.map +1 -1
- package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.js +20 -16
- package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.js.map +1 -1
- package/dist/src/components/steps/room/roomBuilderProgress/NumberOfAdultsPicker.d.ts +2 -0
- package/dist/src/components/steps/room/roomBuilderProgress/NumberOfAdultsPicker.js +1 -1
- package/dist/src/components/steps/room/roomBuilderProgress/NumberOfAdultsPicker.js.map +1 -1
- package/dist/src/components/steps/room/roomBuilderProgress/NumberOfChildrenPicker.d.ts +2 -0
- package/dist/src/components/steps/room/roomBuilderProgress/NumberOfChildrenPicker.js +1 -1
- package/dist/src/components/steps/room/roomBuilderProgress/NumberOfChildrenPicker.js.map +1 -1
- package/dist/src/components/steps/room/roomDetails/RoomDetailsPriceBlock.d.ts +1 -0
- package/dist/src/components/steps/room/roomDetails/RoomDetailsPriceBlock.js +2 -2
- package/dist/src/components/steps/room/roomDetails/RoomDetailsPriceBlock.js.map +1 -1
- package/dist/src/components/steps/room/roomDetails/roomRates/RoomRateRow.js +11 -8
- package/dist/src/components/steps/room/roomDetails/roomRates/RoomRateRow.js.map +1 -1
- package/dist/src/components/summary/BESummaryRoomRow.js +27 -21
- package/dist/src/components/summary/BESummaryRoomRow.js.map +1 -1
- package/dist/src/hooks/CurrentHotelHook.d.ts +2 -0
- package/dist/src/hooks/CurrentHotelHook.js +19 -3
- package/dist/src/hooks/CurrentHotelHook.js.map +1 -1
- package/dist/src/pages/steps/Step.d.ts +1 -1
- package/dist/src/pages/steps/Step.js.map +1 -1
- package/dist/src/util/Color.js +3 -0
- package/dist/src/util/Color.js.map +1 -1
- package/dist/test.bundle.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { ReactElement, Ref } from 'react';
|
|
2
2
|
import './Select.global.scss';
|
|
3
3
|
import { OverlayProps } from '../Overlay/Overlay';
|
|
4
|
+
import { Color } from '../../../util/Color';
|
|
4
5
|
export type Option<KeyName extends string> = {
|
|
5
6
|
[keyName in KeyName]: string;
|
|
6
7
|
} & Record<any, any> & {
|
|
@@ -27,8 +28,9 @@ export type SelectProps<TOption extends Option<KeyName>, KeyName extends string>
|
|
|
27
28
|
nativeOnMobile?: boolean;
|
|
28
29
|
overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;
|
|
29
30
|
hideExpandIcon?: boolean;
|
|
31
|
+
inputLabelColor?: Color;
|
|
30
32
|
};
|
|
31
|
-
export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, }: SelectProps<TOption, KeyName>, ref: Ref<HTMLDivElement | null>) => JSX.Element;
|
|
33
|
+
export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, inputLabelColor, }: SelectProps<TOption, KeyName>, ref: Ref<HTMLDivElement | null>) => JSX.Element;
|
|
32
34
|
export declare const Select: <TOption extends Option<KeyName>, KeyName extends string>(p: SelectProps<TOption, KeyName> & {
|
|
33
35
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
34
36
|
}) => JSX.Element;
|
|
@@ -38,7 +38,7 @@ const CombineState_1 = require("../../../hooks/CombineState");
|
|
|
38
38
|
const WindowSize_1 = require("../../../hooks/WindowSize");
|
|
39
39
|
const Text_1 = __importStar(require("../Text"));
|
|
40
40
|
const MOBILE_BREAKPOINT = 992;
|
|
41
|
-
const InnerSelect = ({ target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false, overlay, renderLabel, hideExpandIcon, }, ref) => {
|
|
41
|
+
const InnerSelect = ({ target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false, overlay, renderLabel, hideExpandIcon, inputLabelColor, }, ref) => {
|
|
42
42
|
var _a, _b;
|
|
43
43
|
const { width } = (0, WindowSize_1.useWindowSize)();
|
|
44
44
|
const targetRef = (0, react_1.useRef)(null);
|
|
@@ -130,8 +130,12 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
|
|
|
130
130
|
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })))));
|
|
131
131
|
};
|
|
132
132
|
const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;
|
|
133
|
+
const labelProps = {};
|
|
134
|
+
if (inputLabelColor) {
|
|
135
|
+
labelProps.style = { color: inputLabelColor };
|
|
136
|
+
}
|
|
133
137
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
134
|
-
(native || !target) && (react_1.default.createElement("span", { className: (0, classnames_1.default)('be-select', className), onClick: () => _setIsOpen(true), ref: targetRef },
|
|
138
|
+
(native || !target) && (react_1.default.createElement("span", Object.assign({ className: (0, classnames_1.default)('be-select', className), onClick: () => _setIsOpen(true), ref: targetRef }, labelProps),
|
|
135
139
|
native ? (react_1.default.createElement("select", { value: value, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value) }, flattenOptions.map((item) => {
|
|
136
140
|
return react_1.default.createElement("option", { value: value, key: item[keyName], label: _getStringLabel(item[keyName]) });
|
|
137
141
|
}))) : (_getLabel(value)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { Color } from '@/util/Color';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport Text, { TextType } from '@/components/generic/Text';\n\nexport type Option<KeyName extends string> = {\n [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n name: string;\n options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\nexport type SelectProps<TOption extends Option<KeyName>, KeyName extends string> = {\n options: TSelectOptionKey<TOption>[];\n keyName: KeyName;\n\n value?: TOption[KeyName];\n labelName?: TOption[keyof TOption];\n target?: HTMLElement | null;\n open?: boolean;\n onClose?: (e: Event) => void;\n onChange?: (value: TOption[KeyName]) => void;\n className?: string;\n offset?: [number, number];\n renderOption?: (option?: TOption) => ReactElement | null;\n renderLabel?: (option?: TOption | null) => ReactElement | null;\n nativeOnMobile?: boolean;\n overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n hideExpandIcon?: boolean;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n {\n target,\n open,\n onClose,\n options = [],\n value,\n onChange,\n keyName,\n labelName,\n className,\n offset,\n renderOption,\n nativeOnMobile = false,\n overlay,\n renderLabel,\n hideExpandIcon,\n }: SelectProps<TOption, KeyName>,\n ref: Ref<HTMLDivElement | null>\n) => {\n const { width } = useWindowSize();\n const targetRef = useRef<HTMLSpanElement>(null);\n const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n const optionContainerRef = useRef<HTMLDivElement | null>(null);\n const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n const flattenOptions = useMemo<TOption[]>(() => {\n return options.reduce<TOption[]>((result, optionGroupProbably) => {\n if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n return result.concat(optionGroupProbably as TOption);\n }, []);\n }, [options]);\n\n // TODO: Force to fix later\n nativeOnMobile = false;\n\n const _onClose = (e: Event): void => {\n _setIsOpen(false);\n onClose?.(e);\n };\n\n const overlayRef = useRef<HTMLDivElement | null>(null);\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => overlayRef.current);\n\n const _onSelected = (value: TOption[KeyName]) => {\n onChange?.(value);\n _setIsOpen(false);\n };\n\n const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n for (const option of options) {\n if (option.options && Array.isArray(option.options)) {\n for (const childOption of option.options) {\n if (childOption[keyName] === value) {\n return childOption;\n }\n }\n } else {\n // If we're in here it means that this option doesn't have children and is in fact an individual group\n if ((option as TOption)[keyName] === value) {\n return option as TOption;\n }\n }\n }\n };\n\n const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n onSelected: (item) => _onSelected(item[keyName]),\n isEnabled: !!_open,\n options,\n idName: keyName,\n overlayRef: overlayRef.current,\n defaultOption: _getOption(value),\n optionRefs,\n optionContainerRef,\n });\n\n const _getStringLabel = (value?: TOption[KeyName]): string => {\n const option = _getOption(value);\n return option?.[labelName] || value || '';\n };\n\n const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n const option = _getOption(value);\n\n if (renderLabel) {\n return renderLabel(option);\n }\n\n return _getStringLabel(value);\n };\n\n const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n if (!options) return null;\n return options.map((option, index) => {\n const isGroup = option.options;\n\n if (isGroup) {\n return _renderGroup(option.name, option.options);\n }\n\n return _renderOption({ option: option as TOption, key: index });\n });\n };\n\n const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n return (\n <>\n <div className=\"rs-select--suggest-list-item --group-title\">\n <Text type={TextType.Small} color={Color.DarkGrey}>\n {name}\n </Text>\n </div>\n {_renderOptions(options)}\n </>\n );\n };\n\n const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n const isSelected = option[keyName] === value;\n const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n return (\n <div\n ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n key={key}\n className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n onClick={() => _onSelected(option[keyName])}\n onMouseEnter={() => {\n onItemMouseEnter(option);\n }}\n onMouseLeave={() => onItemMouseLeave()}\n onMouseMove={() => onItemMouseMove()}\n >\n <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n </Text>\n {isSelected && (\n <span className=\"rs-select--suggest-list-option-icon\">\n <Icon icon={IconType.Check} />\n </span>\n )}\n </div>\n );\n };\n\n const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n return (\n <>\n {(native || !target) && (\n <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n {native ? (\n <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n {flattenOptions.map((item) => {\n return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n })}\n </select>\n ) : (\n _getLabel(value)\n )}\n {hideExpandIcon ? null : <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />}\n </span>\n )}\n {!native && (\n <Overlay\n offset={offset}\n usePortal={overlay?.usePortal ?? true}\n followElement={target || targetRef.current || undefined}\n placement={overlay?.placement ?? 'bottom-start'}\n strategy={overlay?.strategy}\n open={open === undefined ? !!_open : open}\n onClose={_onClose}\n containerClassName={overlay?.containerClassName}\n overlayRef={overlayRef}\n hideStyles={overlay?.hideStyles}\n >\n <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n {_renderOptions(options)}\n </div>\n </Overlay>\n )}\n </>\n );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n p: SelectProps<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n value: string;\n text: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { Color } from '@/util/Color';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport Text, { TextType } from '@/components/generic/Text';\n\nexport type Option<KeyName extends string> = {\n [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n name: string;\n options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\nexport type SelectProps<TOption extends Option<KeyName>, KeyName extends string> = {\n options: TSelectOptionKey<TOption>[];\n keyName: KeyName;\n\n value?: TOption[KeyName];\n labelName?: TOption[keyof TOption];\n target?: HTMLElement | null;\n open?: boolean;\n onClose?: (e: Event) => void;\n onChange?: (value: TOption[KeyName]) => void;\n className?: string;\n offset?: [number, number];\n renderOption?: (option?: TOption) => ReactElement | null;\n renderLabel?: (option?: TOption | null) => ReactElement | null;\n nativeOnMobile?: boolean;\n overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n hideExpandIcon?: boolean;\n\n inputLabelColor?: Color;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n {\n target,\n open,\n onClose,\n options = [],\n value,\n onChange,\n keyName,\n labelName,\n className,\n offset,\n renderOption,\n nativeOnMobile = false,\n overlay,\n renderLabel,\n hideExpandIcon,\n inputLabelColor,\n }: SelectProps<TOption, KeyName>,\n ref: Ref<HTMLDivElement | null>\n) => {\n const { width } = useWindowSize();\n const targetRef = useRef<HTMLSpanElement>(null);\n const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n const optionContainerRef = useRef<HTMLDivElement | null>(null);\n const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n const flattenOptions = useMemo<TOption[]>(() => {\n return options.reduce<TOption[]>((result, optionGroupProbably) => {\n if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n return result.concat(optionGroupProbably as TOption);\n }, []);\n }, [options]);\n\n // TODO: Force to fix later\n nativeOnMobile = false;\n\n const _onClose = (e: Event): void => {\n _setIsOpen(false);\n onClose?.(e);\n };\n\n const overlayRef = useRef<HTMLDivElement | null>(null);\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => overlayRef.current);\n\n const _onSelected = (value: TOption[KeyName]) => {\n onChange?.(value);\n _setIsOpen(false);\n };\n\n const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n for (const option of options) {\n if (option.options && Array.isArray(option.options)) {\n for (const childOption of option.options) {\n if (childOption[keyName] === value) {\n return childOption;\n }\n }\n } else {\n // If we're in here it means that this option doesn't have children and is in fact an individual group\n if ((option as TOption)[keyName] === value) {\n return option as TOption;\n }\n }\n }\n };\n\n const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n onSelected: (item) => _onSelected(item[keyName]),\n isEnabled: !!_open,\n options,\n idName: keyName,\n overlayRef: overlayRef.current,\n defaultOption: _getOption(value),\n optionRefs,\n optionContainerRef,\n });\n\n const _getStringLabel = (value?: TOption[KeyName]): string => {\n const option = _getOption(value);\n return option?.[labelName] || value || '';\n };\n\n const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n const option = _getOption(value);\n\n if (renderLabel) {\n return renderLabel(option);\n }\n\n return _getStringLabel(value);\n };\n\n const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n if (!options) return null;\n return options.map((option, index) => {\n const isGroup = option.options;\n\n if (isGroup) {\n return _renderGroup(option.name, option.options);\n }\n\n return _renderOption({ option: option as TOption, key: index });\n });\n };\n\n const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n return (\n <>\n <div className=\"rs-select--suggest-list-item --group-title\">\n <Text type={TextType.Small} color={Color.DarkGrey}>\n {name}\n </Text>\n </div>\n {_renderOptions(options)}\n </>\n );\n };\n\n const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n const isSelected = option[keyName] === value;\n const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n return (\n <div\n ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n key={key}\n className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n onClick={() => _onSelected(option[keyName])}\n onMouseEnter={() => {\n onItemMouseEnter(option);\n }}\n onMouseLeave={() => onItemMouseLeave()}\n onMouseMove={() => onItemMouseMove()}\n >\n <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n </Text>\n {isSelected && (\n <span className=\"rs-select--suggest-list-option-icon\">\n <Icon icon={IconType.Check} />\n </span>\n )}\n </div>\n );\n };\n\n const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n const labelProps: any = {};\n\n if (inputLabelColor) {\n labelProps.style = { color: inputLabelColor };\n }\n\n return (\n <>\n {(native || !target) && (\n <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef} {...labelProps}>\n {native ? (\n <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n {flattenOptions.map((item) => {\n return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n })}\n </select>\n ) : (\n _getLabel(value)\n )}\n {hideExpandIcon ? null : <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />}\n </span>\n )}\n {!native && (\n <Overlay\n offset={offset}\n usePortal={overlay?.usePortal ?? true}\n followElement={target || targetRef.current || undefined}\n placement={overlay?.placement ?? 'bottom-start'}\n strategy={overlay?.strategy}\n open={open === undefined ? !!_open : open}\n onClose={_onClose}\n containerClassName={overlay?.containerClassName}\n overlayRef={overlayRef}\n hideStyles={overlay?.hideStyles}\n >\n <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n {_renderOptions(options)}\n </div>\n </Overlay>\n )}\n </>\n );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n p: SelectProps<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n value: string;\n text: string;\n}\n"]}
|
|
@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
const react_2 = require("react");
|
|
8
8
|
const Overlay_1 = require("../Overlay/Overlay");
|
|
9
|
+
const hooks_1 = require("../../../hooks/index.js");
|
|
10
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
11
|
const Tooltip_module_scss_1 = __importDefault(require("./Tooltip.module.scss"));
|
|
10
12
|
function Tooltip(props) {
|
|
11
13
|
var _a, _b;
|
|
12
14
|
const wrapperClass = (_a = props.wrapperClasses) !== null && _a !== void 0 ? _a : '';
|
|
13
15
|
const containerRef = (0, react_2.useRef)(null);
|
|
16
|
+
const { isAccent2ColorDark } = (0, hooks_1.useCurrentHotel)();
|
|
14
17
|
const [isDisplayed, setDisplayed] = (0, react_2.useState)(false);
|
|
15
18
|
const displayFalse = () => {
|
|
16
19
|
setDisplayed(false);
|
|
@@ -20,7 +23,7 @@ function Tooltip(props) {
|
|
|
20
23
|
};
|
|
21
24
|
return (react_1.default.createElement("div", { ref: containerRef, onMouseLeave: displayFalse, onMouseEnter: displayTrue, onMouseDown: displayFalse, className: wrapperClass },
|
|
22
25
|
react_1.default.createElement(Overlay_1.Overlay, { open: isDisplayed && !props.disabled, container: props.overrideContainer, hideStyles: true, followElement: (_b = props.followElement) !== null && _b !== void 0 ? _b : containerRef === null || containerRef === void 0 ? void 0 : containerRef.current },
|
|
23
|
-
react_1.default.createElement("div", { className: Tooltip_module_scss_1.default['rs-tooltip'] },
|
|
26
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)(Tooltip_module_scss_1.default['rs-tooltip'], { [Tooltip_module_scss_1.default['--bg-dark']]: isAccent2ColorDark }) },
|
|
24
27
|
react_1.default.createElement("div", { className: Tooltip_module_scss_1.default['rs-tooltip-arrow'] }),
|
|
25
28
|
props.title)),
|
|
26
29
|
props.children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"/","sources":["src/components/generic/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,iCAAqD;AACrD,kEAA+D;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"/","sources":["src/components/generic/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,iCAAqD;AACrD,kEAA+D;AAC/D,2CAAkD;AAElD,4DAA2C;AAE3C,gFAA2C;AAY3C,SAAwB,OAAO,CAAC,KAAqB;;IACjD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAChD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAElC,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEjD,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,uCAAK,GAAG,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY;QAC7H,8BAAC,iBAAO,IAAC,IAAI,EAAE,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,iBAAiB,EAAE,UAAU,QAAC,aAAa,EAAE,MAAA,KAAK,CAAC,aAAa,mCAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO;YACrJ,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAM,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,6BAAM,CAAC,WAAW,CAAC,CAAC,EAAE,kBAAkB,EAAE,CAAC;gBACnF,uCAAK,SAAS,EAAE,6BAAM,CAAC,kBAAkB,CAAC,GAAQ;gBACjD,KAAK,CAAC,KAAK,CACV,CACA;QACT,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AA3BD,0BA2BC","sourcesContent":["import React from 'react';\n\nimport { useState, useRef, ReactChild } from 'react';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { useCurrentHotel } from '@frontend/hooks';\n\nimport { default as cx } from 'classnames';\n\nimport styles from './Tooltip.module.scss';\n\nexport interface BETooltipProps {\n wrapperClasses?: string;\n followElement?: HTMLElement | null;\n overrideContainer?: HTMLElement | null;\n children: ReactChild | ReactChild[];\n title: string;\n\n disabled?: boolean;\n}\n\nexport default function Tooltip(props: BETooltipProps) {\n const wrapperClass = props.wrapperClasses ?? '';\n const containerRef = useRef(null);\n\n const { isAccent2ColorDark } = useCurrentHotel();\n\n const [isDisplayed, setDisplayed] = useState(false);\n\n const displayFalse = () => {\n setDisplayed(false);\n };\n\n const displayTrue = () => {\n setDisplayed(true);\n };\n\n return (\n <div ref={containerRef} onMouseLeave={displayFalse} onMouseEnter={displayTrue} onMouseDown={displayFalse} className={wrapperClass}>\n <Overlay open={isDisplayed && !props.disabled} container={props.overrideContainer} hideStyles followElement={props.followElement ?? containerRef?.current}>\n <div className={cx(styles['rs-tooltip'], { [styles['--bg-dark']]: isAccent2ColorDark })}>\n <div className={styles['rs-tooltip-arrow']}></div>\n {props.title}\n </div>\n </Overlay>\n {props.children}\n </div>\n );\n}\n"]}
|
|
@@ -75,7 +75,7 @@ const TabGroupedRoomList = (props) => {
|
|
|
75
75
|
return (react_1.default.createElement("div", { className: TabGroupedRoomList_module_scss_1.default.groupedRoomList },
|
|
76
76
|
react_1.default.createElement("div", { className: TabGroupedRoomList_module_scss_1.default.groupedRoomListHeader },
|
|
77
77
|
react_1.default.createElement(Headline_1.default, { bold: true }, group.groupName)),
|
|
78
|
-
!!(filterKeys === null || filterKeys === void 0 ? void 0 : filterKeys.length) && (react_1.default.createElement("div", { className: TabGroupedRoomList_module_scss_1.default.filterContainer }, filterKeys.map((filterKey) => {
|
|
78
|
+
!!(filterKeys === null || filterKeys === void 0 ? void 0 : filterKeys.length) && rooms.length > 1 && (react_1.default.createElement("div", { className: TabGroupedRoomList_module_scss_1.default.filterContainer }, filterKeys.map((filterKey) => {
|
|
79
79
|
var _a, _b, _c;
|
|
80
80
|
const filter = (_a = group.filters) === null || _a === void 0 ? void 0 : _a[filterKey];
|
|
81
81
|
if (filter.type === 'select') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabGroupedRoomList.js","sourceRoot":"/","sources":["src/components/steps/room/TabGroupedRooms/TabGroupedRoomList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AAEjD,6EAAqD;AAGrD,sGAAsD;AACtD,6EAAqD;AACrD,+DAA4D;AAQrD,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACjE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/B,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAwB,EAAE,CAAC,CAAC;IAEhF,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,OAAO,KAAK;aACP,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;;YACb,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;gBAC9C,IAAI,cAAc,GAAU,EAAE,CAAC;gBAE/B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,OAAO,0CAAG,MAAM,CAAC,CAAC;gBAE1C,IAAI,SAAS,CAAC,eAAe,EAAE;oBAC3B,IAAI,QAAQ,GAAG,KAAK,CAAC;oBACrB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpD,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;wBAC1C,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;wBAExC,IAAI,cAAc,CAAC,MAAM,CAAC,KAAK,YAAY,CAAC,KAAK,EAAE;4BAC/C,QAAQ,GAAG,IAAI,CAAC;4BAChB,MAAM;yBACT;qBACJ;oBAED,IAAI,CAAC,QAAQ,EAAE;wBACX,cAAc,GAAG,EAAE,CAAC;qBACvB;iBACJ;qBAAM;oBACH,cAAc,GAAG,MAAA,cAAc,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;iBACjD;gBAED,IAAI,CAAA,MAAA,IAAI,CAAC,eAAe,0CAAG,MAAM,CAAC,KAAI,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,EAAE;oBACpH,OAAO,KAAK,CAAC;iBAChB;aACJ;YAED,OAAO,IAAI,CAAC;QAChB,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACjB,OAAO,8BAAC,qBAAW,IAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,GAAI,CAAC;QACxG,CAAC,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5B,OAAO,CACH,uCAAK,SAAS,EAAE,wCAAM,CAAC,eAAe;QAClC,uCAAK,SAAS,EAAE,wCAAM,CAAC,qBAAqB;YACxC,8BAAC,kBAAQ,IAAC,IAAI,UAAE,KAAK,CAAC,SAAS,CAAY,CACzC;QACL,CAAC,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,CAAA,IAAI,
|
|
1
|
+
{"version":3,"file":"TabGroupedRoomList.js","sourceRoot":"/","sources":["src/components/steps/room/TabGroupedRooms/TabGroupedRoomList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { Room } from '@/models/Room/Room';\nimport RoomDetails from '../roomDetails/RoomDetails';\nimport { HotelRoomGroupsDTO } from '@/models/Api/HotelDTO';\n\nimport styles from './TabGroupedRoomList.module.scss';\nimport Headline from '@/components/generic/Headline';\nimport { Select } from '@/components/generic/Select/Select';\nimport DataLayer from '@/util/DataLayer';\n\ntype TabGroupedRoomListProps = {\n rooms: Room[];\n group: HotelRoomGroupsDTO[number];\n};\n\nexport const TabGroupedRoomList = (props: TabGroupedRoomListProps) => {\n const { rooms, group } = props;\n const [appliedFilters, setAppliedFilters] = useState<{ [id: string]: any }>({});\n\n const filterKeys = useMemo(() => {\n return Object.keys(group.filters || {});\n }, [group.filters]);\n\n const roomList = useMemo(() => {\n return rooms\n .filter((room) => {\n for (const filter of Object.keys(appliedFilters)) {\n let possibleValues: any[] = [];\n\n const auxFilter = group.filters?.[filter];\n\n if (auxFilter.includeAllAbove) {\n let foundKey = false;\n for (let i = auxFilter.options.length - 1; i >= 0; i--) {\n const currentValue = auxFilter.options[i];\n possibleValues.push(currentValue.value);\n\n if (appliedFilters[filter] === currentValue.value) {\n foundKey = true;\n break;\n }\n }\n\n if (!foundKey) {\n possibleValues = [];\n }\n } else {\n possibleValues = appliedFilters[filter] ?? [];\n }\n\n if (room.auxiliaryValues?.[filter] && appliedFilters[filter] && !possibleValues.includes(room.auxiliaryValues[filter])) {\n return false;\n }\n }\n\n return room;\n })\n .map((room, index) => {\n return <RoomDetails key={room.code} room={room} disableMarginBottom={index === rooms.length - 1} />;\n });\n }, [rooms, appliedFilters]);\n\n return (\n <div className={styles.groupedRoomList}>\n <div className={styles.groupedRoomListHeader}>\n <Headline bold>{group.groupName}</Headline>\n </div>\n {!!filterKeys?.length && rooms.length > 1 && (\n <div className={styles.filterContainer}>\n {filterKeys.map((filterKey) => {\n const filter = group.filters?.[filterKey];\n\n if (filter.type === 'select') {\n const options = [{ label: 'All', value: null }, ...filter.options];\n const currentValue = appliedFilters?.[filterKey] ?? options[0]?.value;\n\n const localOnFilterChange = (value: string) => {\n setAppliedFilters((prev) => ({ ...prev, [filterKey]: value }));\n };\n\n return (\n <div key={filterKey} className={styles.filterItem}>\n <div className={styles['filterItem-label']}>{filter.name}:</div>\n <Select keyName=\"value\" labelName=\"label\" options={options} value={currentValue} onChange={localOnFilterChange}></Select>\n </div>\n );\n }\n })}\n </div>\n )}\n {roomList}\n </div>\n );\n};\n"]}
|
package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import BasketRow from '../../../../models/BasketRow';
|
|
2
|
+
import { Color } from '../../../../util/Color';
|
|
2
3
|
type UserSearchSummaryPromocodeInputProps = {
|
|
3
4
|
row: BasketRow;
|
|
4
5
|
onChange: (code: string) => void;
|
|
5
6
|
disabled?: boolean;
|
|
7
|
+
promocodeTextColor?: Color;
|
|
8
|
+
useUpdatedDesign?: boolean;
|
|
6
9
|
};
|
|
7
|
-
export declare const UserSearchSummaryPromocdeInput: ({ row, disabled, onChange }: UserSearchSummaryPromocodeInputProps) => JSX.Element;
|
|
10
|
+
export declare const UserSearchSummaryPromocdeInput: ({ row, disabled, onChange, promocodeTextColor, useUpdatedDesign, }: UserSearchSummaryPromocodeInputProps) => JSX.Element;
|
|
8
11
|
export {};
|
|
@@ -38,7 +38,8 @@ const Color_1 = require("../../../../util/Color");
|
|
|
38
38
|
const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
40
|
const react_i18next_1 = require("react-i18next");
|
|
41
|
-
const
|
|
41
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
const UserSearchSummaryPromocdeInput = ({ row, disabled = false, onChange, promocodeTextColor = Color_1.Color.Navy, useUpdatedDesign = false, }) => {
|
|
42
43
|
const { t } = (0, react_i18next_1.useTranslation)();
|
|
43
44
|
const [isPromoModalOpen, setIsPromoModalOpen] = (0, react_1.useState)(false);
|
|
44
45
|
let promoCodeTooltip = '';
|
|
@@ -73,11 +74,12 @@ const UserSearchSummaryPromocdeInput = ({ row, disabled = false, onChange }) =>
|
|
|
73
74
|
setIsPromoModalOpen(false);
|
|
74
75
|
}
|
|
75
76
|
};
|
|
77
|
+
promocodeTextColor = row.getPromoCode() ? row.getPromoCodeColour() : promocodeTextColor;
|
|
76
78
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
77
79
|
react_1.default.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: "u-w-100@xl- d-flex", disabled: disabled },
|
|
78
|
-
react_1.default.createElement("div", { className:
|
|
79
|
-
react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl-" },
|
|
80
|
-
react_1.default.createElement(Text_1.default, { className: "u-pad-right--light", type: Text_1.TextType.Body, color:
|
|
80
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)('room-builder-progress--value u-cursor-pointer', { '--updated': useUpdatedDesign }), ref: thisElement, onClick: openPromoModalOnClick },
|
|
81
|
+
react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- room-builder-progress--promo" },
|
|
82
|
+
react_1.default.createElement(Text_1.default, { className: "u-pad-right--light", type: Text_1.TextType.Body, color: promocodeTextColor }, row.getPromoCode() ? row.getPromoCode() : t(Translation_1.Translation.Step.Date.PromoCode)),
|
|
81
83
|
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey })))),
|
|
82
84
|
react_1.default.createElement(Overlay_1.Overlay, { open: isPromoModalOpen, followElement: thisElement.current, onClose: setPromoCodeOnClose },
|
|
83
85
|
react_1.default.createElement("div", { className: "u-pad--heavy" },
|
package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserSearchSummaryPromocodeInput.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAqD;AACrD,uEAAgE;AAChE,kEAA+D;AAC/D,yFAAiE;AACjE,kEAA2D;AAC3D,mFAA2D;AAE3D,4DAAyD;AACzD,wCAAqC;AACrC,8DAA+E;AAC/E,+CAAgD;AAChD,iDAA+C;
|
|
1
|
+
{"version":3,"file":"UserSearchSummaryPromocodeInput.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport PromoCodeInput from '@/components/generic/PromoCodeInput';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport React, { useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { default as cx } from 'classnames';\n\ntype UserSearchSummaryPromocodeInputProps = {\n row: BasketRow;\n onChange: (code: string) => void;\n\n disabled?: boolean;\n promocodeTextColor?: Color;\n useUpdatedDesign?: boolean;\n};\n\nexport const UserSearchSummaryPromocdeInput = ({\n row,\n disabled = false,\n onChange,\n promocodeTextColor = Color.Navy,\n useUpdatedDesign = false,\n}: UserSearchSummaryPromocodeInputProps) => {\n const { t } = useTranslation();\n const [isPromoModalOpen, setIsPromoModalOpen] = useState(false);\n\n let promoCodeTooltip = '';\n\n if (row.getPromoCodeStatus() === 'new') {\n promoCodeTooltip = row.getPromoCode() ? t(Translation.Step.Date.PromoCodeTooltip.Checking) : t(Translation.Step.Date.PromoCodeTooltip.NoValue);\n } else {\n if (row.getPromoCodeStatus() === 'valid') {\n promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Valid);\n } else {\n promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Invalid);\n }\n }\n\n const thisElement = useRef<HTMLDivElement | null>(null);\n\n const openPromoModalOnClick = () => {\n if (disabled) {\n return;\n }\n\n setIsPromoModalOpen(true);\n };\n const setPromoCodeOnClose = () => {\n setIsPromoModalOpen(false);\n };\n\n const cancelPromoPopupOnClick = () => {\n DataLayer.instance.sendInteraction('Cancel Promo Popup', InteractionType.BUTTON, InteractionStep.ROOMS);\n setIsPromoModalOpen(false);\n };\n\n const _onChangePromoCode = (code: string) => {\n onChange(code);\n if (code) {\n setIsPromoModalOpen(false);\n }\n };\n\n promocodeTextColor = row.getPromoCode() ? row.getPromoCodeColour() : promocodeTextColor;\n\n return (\n <>\n <Tooltip title={promoCodeTooltip} wrapperClasses=\"u-w-100@xl- d-flex\" disabled={disabled}>\n <div className={cx('room-builder-progress--value u-cursor-pointer', { '--updated': useUpdatedDesign })} ref={thisElement} onClick={openPromoModalOnClick}>\n <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- room-builder-progress--promo\">\n <Text className=\"u-pad-right--light\" type={TextType.Body} color={promocodeTextColor}>\n {row.getPromoCode() ? row.getPromoCode() : t(Translation.Step.Date.PromoCode)}\n </Text>\n <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n </div>\n </div>\n </Tooltip>\n <Overlay open={isPromoModalOpen} followElement={thisElement.current} onClose={setPromoCodeOnClose}>\n <div className=\"u-pad--heavy\">\n <div>\n <PromoCodeInput\n value={row?.getPromoCode()}\n onChange={_onChangePromoCode}\n valid={row?.getPromoCodeStatus() !== 'new' ? row?.getPromoCodeStatus() === 'valid' : undefined}\n />\n </div>\n\n <div className=\"u-flex justify-content-end align-items-center u-marg-top\">\n <BEButton isText size=\"small\" onClick={cancelPromoPopupOnClick}>\n {t(Translation.Misc.Cancel)}\n </BEButton>\n </div>\n </div>\n </Overlay>\n </>\n );\n};\n"]}
|
|
@@ -50,7 +50,7 @@ const hooks_1 = require("../../../../hooks/index.js");
|
|
|
50
50
|
const UserSearchSummaryRow = ({ row, index }) => {
|
|
51
51
|
const { t } = (0, react_i18next_1.useTranslation)();
|
|
52
52
|
const removeButtonRef = (0, react_1.useRef)();
|
|
53
|
-
const {
|
|
53
|
+
const { isAccentColorDark } = (0, hooks_1.useCurrentHotel)();
|
|
54
54
|
const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = (0, react_1.useContext)(contexts_1.BasketContext);
|
|
55
55
|
const engineContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
|
|
56
56
|
const isSelectedRow = (0, react_1.useMemo)(() => {
|
|
@@ -61,9 +61,6 @@ const UserSearchSummaryRow = ({ row, index }) => {
|
|
|
61
61
|
DataLayer_1.default.instance.sendInteraction('Remove Room', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
|
|
62
62
|
removeBasketRow(row);
|
|
63
63
|
};
|
|
64
|
-
const removeButton = (react_1.default.createElement(Tooltip_1.default, { title: canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.', followElement: removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current, wrapperClasses: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove-tooltip'] },
|
|
65
|
-
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove'], onClick: removeRoomOnClick, ref: removeButtonRef },
|
|
66
|
-
react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.Close, iconPosition: "right", stopIconAnimation: true, disabled: !canRemove, onClick: removeRoomOnClick }))));
|
|
67
64
|
const updatePeopleValues = ({ adults, children, updatedPromoCode }) => {
|
|
68
65
|
if (adults && adults !== row.getAdults()) {
|
|
69
66
|
DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
|
|
@@ -114,6 +111,12 @@ const UserSearchSummaryRow = ({ row, index }) => {
|
|
|
114
111
|
};
|
|
115
112
|
const isValid = row.isValid();
|
|
116
113
|
const isLargerThanLarge = engineContext.screenSize > ScreenSize_1.default.ExtraLarge;
|
|
114
|
+
const sizeMediumDown = engineContext.screenSize <= ScreenSize_1.default.Medium;
|
|
115
|
+
const shouldTextBeWhite = isAccentColorDark && isSelectedRow && isValid;
|
|
116
|
+
const textColor = shouldTextBeWhite ? Color_1.Color.White : undefined;
|
|
117
|
+
const removeButton = (react_1.default.createElement(Tooltip_1.default, { title: canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.', followElement: removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current, wrapperClasses: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove-tooltip'] },
|
|
118
|
+
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove'], onClick: removeRoomOnClick, ref: removeButtonRef },
|
|
119
|
+
react_1.default.createElement(BEButton_1.default, { textColor: textColor, isText: true, icon: Icon_1.IconType.Close, iconPosition: "right", stopIconAnimation: true, disabled: !canRemove, onClick: removeRoomOnClick }))));
|
|
117
120
|
if (isValid && !isSelectedRow) {
|
|
118
121
|
return (react_1.default.createElement("div", { className: `${UserSearchSummaryRow_module_scss_1.default['user-completed-summary-row']} u-flex w-100` },
|
|
119
122
|
react_1.default.createElement("div", { className: "u-flex justify-content-start" },
|
|
@@ -137,36 +140,37 @@ const UserSearchSummaryRow = ({ row, index }) => {
|
|
|
137
140
|
react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickEditRoom }, t(Translation_1.Translation.Misc.Edit).toUpperCase())))),
|
|
138
141
|
removeButton)));
|
|
139
142
|
}
|
|
140
|
-
// Commented out for now - need to figure out if all text should go the same colour
|
|
141
|
-
// const shouldTextBeWhite = hotel?.colors && lightOrDark(hotel?.colors.accent) === 'dark' && isValid;
|
|
142
143
|
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(UserSearchSummaryRow_module_scss_1.default['user-search-summary-row'], {
|
|
143
144
|
[UserSearchSummaryRow_module_scss_1.default['--selected']]: isSelectedRow,
|
|
144
145
|
[UserSearchSummaryRow_module_scss_1.default['--valid']]: isValid,
|
|
146
|
+
[UserSearchSummaryRow_module_scss_1.default['--has-dark-bg']]: shouldTextBeWhite,
|
|
145
147
|
}) },
|
|
146
148
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--inner'] },
|
|
147
149
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
|
|
148
|
-
react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'] }, "Dates:"),
|
|
150
|
+
react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'], color: textColor }, "Dates:"),
|
|
149
151
|
react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row.getStartDate(), endDate: row.getEndDate(), selectedDateChanged: updateDateValues, isAboveNav: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
|
|
150
152
|
react_1.default.createElement(Tooltip_1.default, { disabled: !isSelectedRow, title: t(Translation_1.Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere) },
|
|
151
153
|
react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer" },
|
|
152
|
-
react_1.default.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate()),
|
|
153
|
-
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2 }),
|
|
154
|
-
react_1.default.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))),
|
|
154
|
+
react_1.default.createElement(Text_1.default, { color: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate()),
|
|
155
|
+
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, color: shouldTextBeWhite ? Color_1.Color.White : undefined }),
|
|
156
|
+
react_1.default.createElement(Text_1.default, { color: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))),
|
|
155
157
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__divider'] }),
|
|
156
158
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
|
|
157
|
-
react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'] }, "Who:"),
|
|
159
|
+
react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'], color: textColor }, "Who:"),
|
|
158
160
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
|
|
159
|
-
react_1.default.createElement(NumberOfAdultsPicker_1.default, { row: row, onChange: updateNumberOfAdultsOnChange })),
|
|
161
|
+
react_1.default.createElement(NumberOfAdultsPicker_1.default, { row: row, onChange: updateNumberOfAdultsOnChange, labelColor: textColor })),
|
|
160
162
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
|
|
161
|
-
react_1.default.createElement(NumberOfChildrenPicker_1.default, { row: row, onChange: updateNumberOfChildrenOnChange }))),
|
|
163
|
+
react_1.default.createElement(NumberOfChildrenPicker_1.default, { row: row, onChange: updateNumberOfChildrenOnChange, labelColor: textColor }))),
|
|
162
164
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__divider'] }),
|
|
163
165
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
|
|
164
166
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
|
|
165
|
-
react_1.default.createElement(UserSearchSummaryPromocodeInput_1.UserSearchSummaryPromocdeInput, { row: row, onChange: changePromoCode, disabled: !isSelectedRow })))),
|
|
167
|
+
react_1.default.createElement(UserSearchSummaryPromocodeInput_1.UserSearchSummaryPromocdeInput, { row: row, onChange: changePromoCode, disabled: !isSelectedRow, promocodeTextColor: textColor, useUpdatedDesign: true })))),
|
|
166
168
|
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--buttons'] },
|
|
167
169
|
isSelectedRow && isValid && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
168
|
-
react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickCancelRoomChanges }, t(Translation_1.Translation.Misc.Cancel)))),
|
|
169
|
-
removeButton)
|
|
170
|
+
react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickCancelRoomChanges, textColor: textColor }, t(Translation_1.Translation.Misc.Cancel)))),
|
|
171
|
+
removeButton),
|
|
172
|
+
react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--mobile-select-label'] },
|
|
173
|
+
react_1.default.createElement(Text_1.default, { type: sizeMediumDown ? Text_1.TextType.Small : Text_1.TextType.Body, color: textColor, bold: true }, "Select room for"))));
|
|
170
174
|
};
|
|
171
175
|
exports.UserSearchSummaryRow = UserSearchSummaryRow;
|
|
172
176
|
//# sourceMappingURL=UserSearchSummaryRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserSearchSummaryRow.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useMemo, useRef } from 'react';\nimport BasketRow from '@/models/BasketRow';\n\nimport styles from './UserSearchSummaryRow.module.scss';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport { default as cx } from 'classnames';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport FloatingDatePicker from '@/components/generic/date/FloatingDatePicker';\nimport { Color, lightOrDark } from '@/util/Color';\nimport { Translation } from '@/translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport dayjs from 'dayjs';\nimport NumberOfAdultsPicker from '../roomBuilderProgress/NumberOfAdultsPicker';\nimport DataLayer, { InteractionType, InteractionStep } from '@/util/DataLayer';\nimport NumberOfChildrenPicker from '../roomBuilderProgress/NumberOfChildrenPicker';\nimport { UserSearchSummaryPromocdeInput } from './UserSearchSummaryPromocodeInput';\nimport BEButton from '@/components/generic/BEButton';\nimport ScreenSize from '@/util/ScreenSize';\nimport StringHelper from '@/util/StringHelper';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ntype UserSearchSummaryRowProps = {\n row: BasketRow;\n index: number;\n};\n\nexport const UserSearchSummaryRow = ({ row, index }: UserSearchSummaryRowProps) => {\n const { t } = useTranslation();\n const removeButtonRef = useRef<any>();\n const { hotel } = useCurrentHotel();\n\n const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = useContext(BasketContext);\n const engineContext = useContext(BookingEngineContext);\n\n const isSelectedRow = useMemo(() => {\n return selectedBasketRow?.getID() === row?.getID();\n }, [selectedBasketRow]);\n\n const canRemove = currentBasketRows.length > 1;\n const removeRoomOnClick = () => {\n DataLayer.instance.sendInteraction('Remove Room', InteractionType.BUTTON, InteractionStep.ROOMS);\n removeBasketRow(row);\n };\n\n const removeButton = (\n <Tooltip\n title={canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.'}\n followElement={removeButtonRef?.current}\n wrapperClasses={styles['user-search-summary-row__remove-tooltip']}\n >\n <div className={styles['user-search-summary-row__remove']} onClick={removeRoomOnClick} ref={removeButtonRef}>\n <BEButton isText icon={IconType.Close} iconPosition=\"right\" stopIconAnimation disabled={!canRemove} onClick={removeRoomOnClick} />\n </div>\n </Tooltip>\n );\n\n const updatePeopleValues = ({ adults, children, updatedPromoCode }: { adults?: number; children?: number; updatedPromoCode?: string }) => {\n if (adults && adults !== row.getAdults()) {\n DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n row.setAdults(adults);\n }\n\n if ((children || children === 0) && children !== row.getChildren()) {\n DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n row.setChildren(children);\n }\n\n if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {\n DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n row.setPromoCode(updatedPromoCode);\n }\n\n updateBasketRow(row);\n };\n\n const updatePromoCode = (code: string) => {\n DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n\n if (selectedBasketRow) {\n selectedBasketRow.setPromoCode(code);\n updateBasketRow(selectedBasketRow);\n }\n };\n\n const updateDateValues = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {\n if (startDate) {\n row.setStartDate(startDate);\n }\n\n if (endDate) {\n row.setEndDate(endDate);\n }\n\n updateBasketRow(row);\n };\n\n const updateNumberOfAdultsOnChange = (value: string) => {\n updatePeopleValues({ adults: +value });\n };\n const updateNumberOfChildrenOnChange = (value: string) => {\n updatePeopleValues({ children: +value });\n };\n const changePromoCode = (val: any) => {\n updatePromoCode(val);\n };\n\n const onClickCancelRoomChanges = () => {\n DataLayer.instance.sendInteraction('Cancel Room Changes', InteractionType.LINK, InteractionStep.ROOMS);\n selectBasketRow(null);\n };\n const onClickEditRoom = () => {\n DataLayer.instance.sendInteraction('Edit Room', InteractionType.LINK, InteractionStep.ROOMS);\n selectBasketRow(row);\n };\n\n const isValid = row.isValid();\n const isLargerThanLarge = engineContext.screenSize > ScreenSize.ExtraLarge;\n\n if (isValid && !isSelectedRow) {\n return (\n <div className={`${styles['user-completed-summary-row']} u-flex w-100`}>\n <div className=\"u-flex justify-content-start\">\n <div className=\"u-flex flex-column\">\n <span>\n <Text inline={isLargerThanLarge}>\n <strong>{row.getRoom().name}</strong>\n </Text>\n <Text inline={isLargerThanLarge} type={isLargerThanLarge ? TextType.Body : TextType.Small}>\n <span className=\"u-marg-left--light@xl\">\n {StringHelper.pluralWithDictAndCount(row.getAdults(), Translation.Step.Date.Adult, t)}\n , \n {StringHelper.pluralWithDictAndCount(row.getChildren(), Translation.Step.Date.Child, t)}\n </span>\n </Text>\n </span>\n <Text type={TextType.Caption} color={Color.DarkGrey}>\n <strong>{row.getStayDateRange('ddd, MMM D, YYYY', ' -')}</strong>\n </Text>\n </div>\n {row.isPromoCodeValid() && (\n <div className=\"u-marg-left d-flex align-items-center\">\n <Pill type={PillType.Success} icon={IconType.Money}>\n {row.getPromoCode()}\n </Pill>\n </div>\n )}\n </div>\n <div className=\"u-flex align-items-center\">\n <div className=\"u-flex align-items-center room-builder-progress--edit\">\n <Tooltip title={t(Translation.Step.Room.EditThisRoom)}>\n <div className=\"u-flex align-items-center\">\n <BEButton isText size=\"tiny\" onClick={onClickEditRoom}>\n {t(Translation.Misc.Edit).toUpperCase()}\n </BEButton>\n </div>\n </Tooltip>\n </div>\n {removeButton}\n </div>\n </div>\n );\n }\n\n // Commented out for now - need to figure out if all text should go the same colour\n // const shouldTextBeWhite = hotel?.colors && lightOrDark(hotel?.colors.accent) === 'dark' && isValid;\n\n return (\n <div\n className={cx(styles['user-search-summary-row'], {\n [styles['--selected']]: isSelectedRow,\n [styles['--valid']]: isValid,\n })}\n >\n <div className={styles['user-search-summary-row--inner']}>\n <div className={styles['user-search-summary-row__group']}>\n <Text inline bold className={styles['user-search-summary-row__group-label']}>\n Dates:\n </Text>\n <FloatingDatePicker\n startDate={row.getStartDate()}\n endDate={row.getEndDate()}\n selectedDateChanged={updateDateValues}\n isAboveNav\n className={styles['user-search-summary-row__input']}\n >\n <Tooltip disabled={!isSelectedRow} title={t(Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere)}>\n <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer\">\n <Text color={Color.Accent} bold className=\"u-nowrap\">\n {row.getArrivalDate()}\n </Text>\n <Icon icon={IconType.ArrowRight2} />\n <Text color={Color.Accent} bold className=\"u-nowrap\">\n {row.getDepartureDate()}\n </Text>\n </div>\n </Tooltip>\n </FloatingDatePicker>\n </div>\n <div className={styles['user-search-summary-row__divider']} />\n <div className={styles['user-search-summary-row__group']}>\n <Text inline bold className={styles['user-search-summary-row__group-label']}>\n Who:\n </Text>\n <div className={styles['user-search-summary-row__input']}>\n <NumberOfAdultsPicker row={row} onChange={updateNumberOfAdultsOnChange} />\n </div>\n <div className={styles['user-search-summary-row__input']}>\n <NumberOfChildrenPicker row={row} onChange={updateNumberOfChildrenOnChange} />\n </div>\n </div>\n <div className={styles['user-search-summary-row__divider']} />\n <div className={styles['user-search-summary-row__group']}>\n <div className={styles['user-search-summary-row__input']}>\n <UserSearchSummaryPromocdeInput row={row} onChange={changePromoCode} disabled={!isSelectedRow} />\n </div>\n </div>\n </div>\n\n <div className={styles['user-search-summary-row--buttons']}>\n {isSelectedRow && isValid && (\n <>\n <BEButton isText size=\"tiny\" onClick={onClickCancelRoomChanges}>\n {t(Translation.Misc.Cancel)}\n </BEButton>\n </>\n )}\n {removeButton}\n </div>\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"UserSearchSummaryRow.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2D;AAG3D,0GAAwD;AACxD,uEAAgE;AAEhE,4DAA2C;AAC3C,iDAAyE;AACzE,kEAA2D;AAC3D,mFAA2D;AAC3D,sGAA8E;AAC9E,wCAAqC;AACrC,4DAAyD;AACzD,iDAA+C;AAE/C,uGAA+E;AAC/E,8DAA+E;AAC/E,2GAAmF;AACnF,uFAAmF;AACnF,6EAAqD;AACrD,mEAA2C;AAC3C,uEAA+C;AAC/C,kEAA2D;AAC3D,2CAAkD;AAO3C,MAAM,oBAAoB,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC9E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,cAAM,GAAO,CAAC;IACtC,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEhD,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAC9H,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IAEvD,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,OAAO,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,KAAK,EAAE,OAAK,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,EAAE,CAAA,CAAC;IACvD,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,2BAAe,CAAC,MAAM,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QACjG,eAAe,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAqE,EAAE,EAAE;QACrI,IAAI,MAAM,IAAI,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,EAAE;YACtC,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,YAAY,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;YAClG,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACzB;QAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,CAAC,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,WAAW,EAAE,EAAE;YAChE,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,YAAY,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;YAClG,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;SAC7B;QAED,IAAI,CAAC,gBAAgB,IAAI,gBAAgB,KAAK,EAAE,CAAC,IAAI,gBAAgB,KAAK,GAAG,CAAC,YAAY,EAAE,EAAE;YAC1F,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,2BAAe,CAAC,UAAU,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;YACpG,GAAG,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;SACtC;QAED,eAAe,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE;QACrC,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,2BAAe,CAAC,UAAU,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QAEpG,IAAI,iBAAiB,EAAE;YACnB,iBAAiB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACrC,eAAe,CAAC,iBAAiB,CAAC,CAAC;SACtC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,SAAsB,EAAE,OAAoB,EAAE,EAAE;QACtE,IAAI,SAAS,EAAE;YACX,GAAG,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;SAC/B;QAED,IAAI,OAAO,EAAE;YACT,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAC3B;QAED,eAAe,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,4BAA4B,GAAG,CAAC,KAAa,EAAE,EAAE;QACnD,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IACF,MAAM,8BAA8B,GAAG,CAAC,KAAa,EAAE,EAAE;QACrD,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,CAAC,GAAQ,EAAE,EAAE;QACjC,eAAe,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,GAAG,EAAE;QAClC,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,qBAAqB,EAAE,2BAAe,CAAC,IAAI,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QACvG,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,EAAE,2BAAe,CAAC,IAAI,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QAC7F,eAAe,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,MAAM,iBAAiB,GAAG,aAAa,CAAC,UAAU,GAAG,oBAAU,CAAC,UAAU,CAAC;IAE3E,MAAM,cAAc,GAAG,aAAa,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,CAAC;IAErE,MAAM,iBAAiB,GAAG,iBAAiB,IAAI,aAAa,IAAI,OAAO,CAAC;IAExE,MAAM,SAAS,GAAG,iBAAiB,CAAC,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,MAAM,YAAY,GAAG,CACjB,8BAAC,iBAAO,IACJ,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,2DAA2D,EACnG,aAAa,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,EACvC,cAAc,EAAE,0CAAM,CAAC,yCAAyC,CAAC;QAEjE,uCAAK,SAAS,EAAE,0CAAM,CAAC,iCAAiC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,eAAe;YACvG,8BAAC,kBAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,QAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,YAAY,EAAC,OAAO,EAAC,iBAAiB,QAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,iBAAiB,GAAI,CACtJ,CACA,CACb,CAAC;IAEF,IAAI,OAAO,IAAI,CAAC,aAAa,EAAE;QAC3B,OAAO,CACH,uCAAK,SAAS,EAAE,GAAG,0CAAM,CAAC,4BAA4B,CAAC,eAAe;YAClE,uCAAK,SAAS,EAAC,8BAA8B;gBACzC,uCAAK,SAAS,EAAC,oBAAoB;oBAC/B;wBACI,8BAAC,cAAI,IAAC,MAAM,EAAE,iBAAiB;4BAC3B,8CAAS,GAAG,CAAC,OAAO,EAAE,CAAC,IAAI,CAAU,CAClC;wBACP,8BAAC,cAAI,IAAC,MAAM,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,eAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,eAAQ,CAAC,KAAK;4BACrF,wCAAM,SAAS,EAAC,uBAAuB;gCAClC,sBAAY,CAAC,sBAAsB,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;;gCAEpF,sBAAY,CAAC,sBAAsB,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CACpF,CACJ,CACJ;oBACP,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ;wBAC/C,8CAAS,GAAG,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAU,CAC9D,CACL;gBACL,GAAG,CAAC,gBAAgB,EAAE,IAAI,CACvB,uCAAK,SAAS,EAAC,uCAAuC;oBAClD,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IAC7C,GAAG,CAAC,YAAY,EAAE,CAChB,CACL,CACT,CACC;YACN,uCAAK,SAAS,EAAC,2BAA2B;gBACtC,uCAAK,SAAS,EAAC,uDAAuD;oBAClE,8BAAC,iBAAO,IAAC,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;wBACjD,uCAAK,SAAS,EAAC,2BAA2B;4BACtC,8BAAC,kBAAQ,IAAC,MAAM,QAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,eAAe,IAChD,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAChC,CACT,CACA,CACR;gBACL,YAAY,CACX,CACJ,CACT,CAAC;KACL;IAED,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAE,EAAC,0CAAM,CAAC,yBAAyB,CAAC,EAAE;YAC7C,CAAC,0CAAM,CAAC,YAAY,CAAC,CAAC,EAAE,aAAa;YACrC,CAAC,0CAAM,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO;YAC5B,CAAC,0CAAM,CAAC,eAAe,CAAC,CAAC,EAAE,iBAAiB;SAC/C,CAAC;QAEF,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;YACpD,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;gBACpD,8BAAC,cAAI,IAAC,MAAM,QAAC,IAAI,QAAC,SAAS,EAAE,0CAAM,CAAC,sCAAsC,CAAC,EAAE,KAAK,EAAE,SAAS,aAEtF;gBACP,8BAAC,4BAAkB,IACf,SAAS,EAAE,GAAG,CAAC,YAAY,EAAE,EAC7B,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE,EACzB,mBAAmB,EAAE,gBAAgB,EACrC,UAAU,QACV,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;oBAEnD,8BAAC,iBAAO,IAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,4CAA4C,CAAC;wBAC3G,uCAAK,SAAS,EAAC,+EAA+E;4BAC1F,8BAAC,cAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAK,CAAC,MAAM,EAAE,IAAI,QAAC,SAAS,EAAC,UAAU,IACjF,GAAG,CAAC,cAAc,EAAE,CAClB;4BACP,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,WAAW,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAAI;4BACxF,8BAAC,cAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAK,CAAC,MAAM,EAAE,IAAI,QAAC,SAAS,EAAC,UAAU,IACjF,GAAG,CAAC,gBAAgB,EAAE,CACpB,CACL,CACA,CACO,CACnB;YACN,uCAAK,SAAS,EAAE,0CAAM,CAAC,kCAAkC,CAAC,GAAI;YAC9D,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;gBACpD,8BAAC,cAAI,IAAC,MAAM,QAAC,IAAI,QAAC,SAAS,EAAE,0CAAM,CAAC,sCAAsC,CAAC,EAAE,KAAK,EAAE,SAAS,WAEtF;gBACP,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;oBACpD,8BAAC,8BAAoB,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,4BAA4B,EAAE,UAAU,EAAE,SAAS,GAAI,CAC/F;gBACN,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;oBACpD,8BAAC,gCAAsB,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,8BAA8B,EAAE,UAAU,EAAE,SAAS,GAAI,CACnG,CACJ;YACN,uCAAK,SAAS,EAAE,0CAAM,CAAC,kCAAkC,CAAC,GAAI;YAC9D,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;gBACpD,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC;oBACpD,8BAAC,gEAA8B,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,aAAa,EAAE,kBAAkB,EAAE,SAAS,EAAE,gBAAgB,SAAG,CAC/I,CACJ,CACJ;QAEN,uCAAK,SAAS,EAAE,0CAAM,CAAC,kCAAkC,CAAC;YACrD,aAAa,IAAI,OAAO,IAAI,CACzB;gBACI,8BAAC,kBAAQ,IAAC,MAAM,QAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,SAAS,IAC/E,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,CACZ,CACN;YACA,YAAY,CACX;QACN,uCAAK,SAAS,EAAE,0CAAM,CAAC,8CAA8C,CAAC;YAClE,8BAAC,cAAI,IAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,eAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,4BAE5E,CACL,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AArNW,QAAA,oBAAoB,wBAqN/B","sourcesContent":["import React, { useContext, useMemo, useRef } from 'react';\nimport BasketRow from '@/models/BasketRow';\n\nimport styles from './UserSearchSummaryRow.module.scss';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport { default as cx } from 'classnames';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport FloatingDatePicker from '@/components/generic/date/FloatingDatePicker';\nimport { Color } from '@/util/Color';\nimport { Translation } from '@/translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport dayjs from 'dayjs';\nimport NumberOfAdultsPicker from '../roomBuilderProgress/NumberOfAdultsPicker';\nimport DataLayer, { InteractionType, InteractionStep } from '@/util/DataLayer';\nimport NumberOfChildrenPicker from '../roomBuilderProgress/NumberOfChildrenPicker';\nimport { UserSearchSummaryPromocdeInput } from './UserSearchSummaryPromocodeInput';\nimport BEButton from '@/components/generic/BEButton';\nimport ScreenSize from '@/util/ScreenSize';\nimport StringHelper from '@/util/StringHelper';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport { useCurrentHotel } from '@frontend/hooks';\n\ntype UserSearchSummaryRowProps = {\n row: BasketRow;\n index: number;\n};\n\nexport const UserSearchSummaryRow = ({ row, index }: UserSearchSummaryRowProps) => {\n const { t } = useTranslation();\n const removeButtonRef = useRef<any>();\n const { isAccentColorDark } = useCurrentHotel();\n\n const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = useContext(BasketContext);\n const engineContext = useContext(BookingEngineContext);\n\n const isSelectedRow = useMemo(() => {\n return selectedBasketRow?.getID() === row?.getID();\n }, [selectedBasketRow]);\n\n const canRemove = currentBasketRows.length > 1;\n const removeRoomOnClick = () => {\n DataLayer.instance.sendInteraction('Remove Room', InteractionType.BUTTON, InteractionStep.ROOMS);\n removeBasketRow(row);\n };\n\n const updatePeopleValues = ({ adults, children, updatedPromoCode }: { adults?: number; children?: number; updatedPromoCode?: string }) => {\n if (adults && adults !== row.getAdults()) {\n DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n row.setAdults(adults);\n }\n\n if ((children || children === 0) && children !== row.getChildren()) {\n DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n row.setChildren(children);\n }\n\n if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {\n DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n row.setPromoCode(updatedPromoCode);\n }\n\n updateBasketRow(row);\n };\n\n const updatePromoCode = (code: string) => {\n DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n\n if (selectedBasketRow) {\n selectedBasketRow.setPromoCode(code);\n updateBasketRow(selectedBasketRow);\n }\n };\n\n const updateDateValues = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {\n if (startDate) {\n row.setStartDate(startDate);\n }\n\n if (endDate) {\n row.setEndDate(endDate);\n }\n\n updateBasketRow(row);\n };\n\n const updateNumberOfAdultsOnChange = (value: string) => {\n updatePeopleValues({ adults: +value });\n };\n const updateNumberOfChildrenOnChange = (value: string) => {\n updatePeopleValues({ children: +value });\n };\n const changePromoCode = (val: any) => {\n updatePromoCode(val);\n };\n\n const onClickCancelRoomChanges = () => {\n DataLayer.instance.sendInteraction('Cancel Room Changes', InteractionType.LINK, InteractionStep.ROOMS);\n selectBasketRow(null);\n };\n const onClickEditRoom = () => {\n DataLayer.instance.sendInteraction('Edit Room', InteractionType.LINK, InteractionStep.ROOMS);\n selectBasketRow(row);\n };\n\n const isValid = row.isValid();\n const isLargerThanLarge = engineContext.screenSize > ScreenSize.ExtraLarge;\n\n const sizeMediumDown = engineContext.screenSize <= ScreenSize.Medium;\n\n const shouldTextBeWhite = isAccentColorDark && isSelectedRow && isValid;\n\n const textColor = shouldTextBeWhite ? Color.White : undefined;\n\n const removeButton = (\n <Tooltip\n title={canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.'}\n followElement={removeButtonRef?.current}\n wrapperClasses={styles['user-search-summary-row__remove-tooltip']}\n >\n <div className={styles['user-search-summary-row__remove']} onClick={removeRoomOnClick} ref={removeButtonRef}>\n <BEButton textColor={textColor} isText icon={IconType.Close} iconPosition=\"right\" stopIconAnimation disabled={!canRemove} onClick={removeRoomOnClick} />\n </div>\n </Tooltip>\n );\n\n if (isValid && !isSelectedRow) {\n return (\n <div className={`${styles['user-completed-summary-row']} u-flex w-100`}>\n <div className=\"u-flex justify-content-start\">\n <div className=\"u-flex flex-column\">\n <span>\n <Text inline={isLargerThanLarge}>\n <strong>{row.getRoom().name}</strong>\n </Text>\n <Text inline={isLargerThanLarge} type={isLargerThanLarge ? TextType.Body : TextType.Small}>\n <span className=\"u-marg-left--light@xl\">\n {StringHelper.pluralWithDictAndCount(row.getAdults(), Translation.Step.Date.Adult, t)}\n , \n {StringHelper.pluralWithDictAndCount(row.getChildren(), Translation.Step.Date.Child, t)}\n </span>\n </Text>\n </span>\n <Text type={TextType.Caption} color={Color.DarkGrey}>\n <strong>{row.getStayDateRange('ddd, MMM D, YYYY', ' -')}</strong>\n </Text>\n </div>\n {row.isPromoCodeValid() && (\n <div className=\"u-marg-left d-flex align-items-center\">\n <Pill type={PillType.Success} icon={IconType.Money}>\n {row.getPromoCode()}\n </Pill>\n </div>\n )}\n </div>\n <div className=\"u-flex align-items-center\">\n <div className=\"u-flex align-items-center room-builder-progress--edit\">\n <Tooltip title={t(Translation.Step.Room.EditThisRoom)}>\n <div className=\"u-flex align-items-center\">\n <BEButton isText size=\"tiny\" onClick={onClickEditRoom}>\n {t(Translation.Misc.Edit).toUpperCase()}\n </BEButton>\n </div>\n </Tooltip>\n </div>\n {removeButton}\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={cx(styles['user-search-summary-row'], {\n [styles['--selected']]: isSelectedRow,\n [styles['--valid']]: isValid,\n [styles['--has-dark-bg']]: shouldTextBeWhite,\n })}\n >\n <div className={styles['user-search-summary-row--inner']}>\n <div className={styles['user-search-summary-row__group']}>\n <Text inline bold className={styles['user-search-summary-row__group-label']} color={textColor}>\n Dates:\n </Text>\n <FloatingDatePicker\n startDate={row.getStartDate()}\n endDate={row.getEndDate()}\n selectedDateChanged={updateDateValues}\n isAboveNav\n className={styles['user-search-summary-row__input']}\n >\n <Tooltip disabled={!isSelectedRow} title={t(Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere)}>\n <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer\">\n <Text color={shouldTextBeWhite ? Color.White : Color.Accent} bold className=\"u-nowrap\">\n {row.getArrivalDate()}\n </Text>\n <Icon icon={IconType.ArrowRight2} color={shouldTextBeWhite ? Color.White : undefined} />\n <Text color={shouldTextBeWhite ? Color.White : Color.Accent} bold className=\"u-nowrap\">\n {row.getDepartureDate()}\n </Text>\n </div>\n </Tooltip>\n </FloatingDatePicker>\n </div>\n <div className={styles['user-search-summary-row__divider']} />\n <div className={styles['user-search-summary-row__group']}>\n <Text inline bold className={styles['user-search-summary-row__group-label']} color={textColor}>\n Who:\n </Text>\n <div className={styles['user-search-summary-row__input']}>\n <NumberOfAdultsPicker row={row} onChange={updateNumberOfAdultsOnChange} labelColor={textColor} />\n </div>\n <div className={styles['user-search-summary-row__input']}>\n <NumberOfChildrenPicker row={row} onChange={updateNumberOfChildrenOnChange} labelColor={textColor} />\n </div>\n </div>\n <div className={styles['user-search-summary-row__divider']} />\n <div className={styles['user-search-summary-row__group']}>\n <div className={styles['user-search-summary-row__input']}>\n <UserSearchSummaryPromocdeInput row={row} onChange={changePromoCode} disabled={!isSelectedRow} promocodeTextColor={textColor} useUpdatedDesign />\n </div>\n </div>\n </div>\n\n <div className={styles['user-search-summary-row--buttons']}>\n {isSelectedRow && isValid && (\n <>\n <BEButton isText size=\"tiny\" onClick={onClickCancelRoomChanges} textColor={textColor}>\n {t(Translation.Misc.Cancel)}\n </BEButton>\n </>\n )}\n {removeButton}\n </div>\n <div className={styles['user-search-summary-row--mobile-select-label']}>\n <Text type={sizeMediumDown ? TextType.Small : TextType.Body} color={textColor} bold>\n Select room for\n </Text>\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import BasketRow from '../../../../models/BasketRow';
|
|
2
|
+
import { Color } from '../../../../util/Color';
|
|
2
3
|
interface NumberOfAdultsPickerProps {
|
|
3
4
|
row: BasketRow;
|
|
4
5
|
onChange: (value: string) => void;
|
|
6
|
+
labelColor?: Color;
|
|
5
7
|
}
|
|
6
8
|
export default function NumberOfAdultsPicker(props: NumberOfAdultsPickerProps): JSX.Element;
|
|
7
9
|
export {};
|
|
@@ -25,7 +25,7 @@ function NumberOfAdultsPicker(props) {
|
|
|
25
25
|
text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Adult, t),
|
|
26
26
|
value: value.toString(),
|
|
27
27
|
};
|
|
28
|
-
}), value: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString(), onChange: props.onChange, keyName: "value", labelName: "text" }));
|
|
28
|
+
}), value: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString(), onChange: props.onChange, keyName: "value", labelName: "text", inputLabelColor: props.labelColor }));
|
|
29
29
|
}
|
|
30
30
|
exports.default = NumberOfAdultsPicker;
|
|
31
31
|
//# sourceMappingURL=NumberOfAdultsPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberOfAdultsPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfAdultsPicker.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;
|
|
1
|
+
{"version":3,"file":"NumberOfAdultsPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfAdultsPicker.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;AAUlF,SAAwB,oBAAoB,CAAC,KAAgC;;IACzE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,aAAa,GAAG,MAAA,MAAA,KAAK,CAAC,GAAG,0CAAE,SAAS,EAAE,mCAAI,CAAC,CAAC;IAClD,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAuB,KAAG,MAAA,KAAK,CAAC,GAAG,0CAAE,WAAW,EAAE,CAAA,EAAE,aAAa,CAAC,CAAC;IACvG,eAAe;IACf,IAAI,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE;QACzC,YAAY,GAAG,CAAC,CAAC;KACpB;IAED,OAAO,CACH,8BAAC,eAAM,IACH,cAAc,QACd,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,KAAa,EAAE,EAAE;YAC5D,KAAK,IAAI,CAAC,CAAC;YACX,OAAO;gBACH,IAAI,EAAE,sBAAY,CAAC,sBAAsB,CAAC,KAAK,EAAE,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;gBAChF,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;aAC1B,CAAC;QACN,CAAC,CAAC,EACF,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE,EAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,MAAM,EAChB,eAAe,EAAE,KAAK,CAAC,UAAU,GACnC,CACL,CAAC;AACN,CAAC;AA7BD,uCA6BC","sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from 'translations/Translation';\nimport StringHelper from '@/util/StringHelper';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\nimport { Color } from '@/util/Color';\n\ninterface NumberOfAdultsPickerProps {\n row: BasketRow;\n onChange: (value: string) => void;\n\n labelColor?: Color;\n}\n\nexport default function NumberOfAdultsPicker(props: NumberOfAdultsPickerProps) {\n const { hotel } = useCurrentHotel();\n\n const { t } = useTranslation();\n\n const selectedValue = props.row?.getAdults() ?? 1;\n let maxOccupancy = Math.max((hotel?.maxOccupancy as number) - props.row?.getChildren(), selectedValue);\n // Just in Case\n if (maxOccupancy < 1 || isNaN(maxOccupancy)) {\n maxOccupancy = 1;\n }\n\n return (\n <Select<IDefaultSelectOption, 'value'>\n nativeOnMobile\n options={[...Array(maxOccupancy)].map((v: any, value: number) => {\n value += 1;\n return {\n text: StringHelper.pluralWithDictAndCount(value, Translation.Step.Date.Adult, t),\n value: value.toString(),\n };\n })}\n value={selectedValue?.toString()}\n onChange={props.onChange}\n keyName=\"value\"\n labelName=\"text\"\n inputLabelColor={props.labelColor}\n />\n );\n}\n"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import BasketRow from '../../../../models/BasketRow';
|
|
2
|
+
import { Color } from '../../../../util/Color';
|
|
2
3
|
interface NumberOfChildrenPickerProps {
|
|
3
4
|
row: BasketRow;
|
|
4
5
|
onChange: (value: string) => void;
|
|
6
|
+
labelColor?: Color;
|
|
5
7
|
}
|
|
6
8
|
export default function NumberOfChildrenPicker(props: NumberOfChildrenPickerProps): JSX.Element;
|
|
7
9
|
export {};
|
|
@@ -24,7 +24,7 @@ function NumberOfChildrenPicker(props) {
|
|
|
24
24
|
text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Child, t),
|
|
25
25
|
value: value.toString(),
|
|
26
26
|
};
|
|
27
|
-
}), value: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString(), onChange: props.onChange, keyName: "value", labelName: "text" }));
|
|
27
|
+
}), value: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString(), onChange: props.onChange, keyName: "value", labelName: "text", inputLabelColor: props.labelColor }));
|
|
28
28
|
}
|
|
29
29
|
exports.default = NumberOfChildrenPicker;
|
|
30
30
|
//# sourceMappingURL=NumberOfChildrenPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberOfChildrenPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfChildrenPicker.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;
|
|
1
|
+
{"version":3,"file":"NumberOfChildrenPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfChildrenPicker.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;AAUlF,SAAwB,sBAAsB,CAAC,KAAkC;;IAC7E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,aAAa,GAAG,MAAA,MAAA,KAAK,CAAC,GAAG,0CAAE,WAAW,EAAE,mCAAI,CAAC,CAAC;IACpD,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAuB,IAAG,CAAC,IAAG,MAAA,KAAK,CAAC,GAAG,0CAAE,SAAS,EAAE,CAAA,CAAC,CAAC;IAC1F,eAAe;IACf,IAAI,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE;QACzC,YAAY,GAAG,CAAC,CAAC;KACpB;IAED,OAAO,CACH,8BAAC,eAAM,IACH,cAAc,QACd,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,KAAa,EAAE,EAAE;YAC5D,OAAO;gBACH,IAAI,EAAE,sBAAY,CAAC,sBAAsB,CAAC,KAAK,EAAE,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;gBAChF,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;aAC1B,CAAC;QACN,CAAC,CAAC,EACF,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE,EAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,MAAM,EAChB,eAAe,EAAE,KAAK,CAAC,UAAU,GACnC,CACL,CAAC;AACN,CAAC;AA5BD,yCA4BC","sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from 'translations/Translation';\nimport StringHelper from '@/util/StringHelper';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\nimport { Color } from '@/util/Color';\n\ninterface NumberOfChildrenPickerProps {\n row: BasketRow;\n onChange: (value: string) => void;\n\n labelColor?: Color;\n}\n\nexport default function NumberOfChildrenPicker(props: NumberOfChildrenPickerProps) {\n const { hotel } = useCurrentHotel();\n\n const { t } = useTranslation();\n\n const selectedValue = props.row?.getChildren() ?? 1;\n let maxOccupancy = Math.max((hotel?.maxOccupancy as number) + 1 - props.row?.getAdults());\n // Just in Case\n if (maxOccupancy < 1 || isNaN(maxOccupancy)) {\n maxOccupancy = 1;\n }\n\n return (\n <Select<IDefaultSelectOption, 'value'>\n nativeOnMobile\n options={[...Array(maxOccupancy)].map((v: any, value: number) => {\n return {\n text: StringHelper.pluralWithDictAndCount(value, Translation.Step.Date.Child, t),\n value: value.toString(),\n };\n })}\n value={selectedValue?.toString()}\n onChange={props.onChange}\n keyName=\"value\"\n labelName=\"text\"\n inputLabelColor={props.labelColor}\n />\n );\n}\n"]}
|
|
@@ -59,9 +59,9 @@ function RoomDetailsPriceBlock(props) {
|
|
|
59
59
|
"/",
|
|
60
60
|
t(Translation_1.Translation.Misc.Night))))),
|
|
61
61
|
react_1.default.createElement("span", { className: headlineClasses },
|
|
62
|
-
react_1.default.createElement(Headline_1.default, { size: context.screenSize > ScreenSize_1.default.Medium ? 'large' : 'normal', bold: true, className: props.isMemberOnly ? '--success' : '' },
|
|
62
|
+
react_1.default.createElement(Headline_1.default, { size: context.screenSize > ScreenSize_1.default.Medium ? 'large' : 'normal', bold: true, className: props.isMemberOnly ? '--success' : '', color: props.useLightText ? Color_1.Color.Snow : Color_1.Color.Graphite },
|
|
63
63
|
react_1.default.createElement(Currency_1.default, { disableLoading: true, hideDecimals: true }, isLocked ? 321 : averagePrice)),
|
|
64
|
-
!props.hidePerNight && react_1.default.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
|
|
64
|
+
!props.hidePerNight && react_1.default.createElement(Text_1.default, { color: props.useLightText ? Color_1.Color.Snow : Color_1.Color.DarkGrey },
|
|
65
65
|
"/",
|
|
66
66
|
t(Translation_1.Translation.Misc.Night))),
|
|
67
67
|
react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Room.RoomInfo.MemberRateLockedTooltip) },
|