@roomstay/frontend 2.6.21 → 2.6.23

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

@@ -1,5 +1,6 @@
 interface DistanceProps {
     distance: number | string;
+    displayCard?: boolean;
 }
-export default function Distance({ distance }: DistanceProps): JSX.Element;
+export default function Distance({ distance, displayCard }: DistanceProps): JSX.Element;
 export {};

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

@@ -29,14 +29,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const contexts_1 = require("../../contexts/index.js");
 const react_1 = __importStar(require("react"));
 const DistanceProvider_1 = __importDefault(require("../../providers/DistanceProvider"));
-function Distance({ distance }) {
+function Distance({ distance, displayCard }) {
     const hotelOverridesContext = react_1.default.useContext(contexts_1.HotelOverridesContext);
     const distanceString = (() => {
         if (typeof distance === 'string') {
-            return `${distance} ${DistanceProvider_1.default.getMeasurementString(hotelOverridesContext === null || hotelOverridesContext === void 0 ? void 0 : hotelOverridesContext.distanceUnitType)}`;
+            return [distance, DistanceProvider_1.default.getMeasurementString(hotelOverridesContext === null || hotelOverridesContext === void 0 ? void 0 : hotelOverridesContext.distanceUnitType)].join(displayCard ? '' : ' ');
         }
         else {
-            return `${DistanceProvider_1.default.convertTo(hotelOverridesContext === null || hotelOverridesContext === void 0 ? void 0 : hotelOverridesContext.distanceUnitType, distance)} ${DistanceProvider_1.default.getMeasurementString(hotelOverridesContext === null || hotelOverridesContext === void 0 ? void 0 : hotelOverridesContext.distanceUnitType)}`;
+            return [
+                DistanceProvider_1.default.convertTo(hotelOverridesContext === null || hotelOverridesContext === void 0 ? void 0 : hotelOverridesContext.distanceUnitType, distance),
+                DistanceProvider_1.default.getMeasurementString(hotelOverridesContext === null || hotelOverridesContext === void 0 ? void 0 : hotelOverridesContext.distanceUnitType),
+            ].join(displayCard ? '' : ' ');
         }
     })();
     return (0, react_1.useMemo)(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"Distance.js","sourceRoot":"/","sources":["src/components/generic/Distance.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAA2D;AAE3D,+CAAuC;AAEvC,oFAA4D;AAM5D,SAAwB,QAAQ,CAAC,EAAE,QAAQ,EAAiB;IACxD,MAAM,qBAAqB,GAAG,eAAK,CAAC,UAAU,CAAC,gCAAqB,CAAC,CAAC;IAEtE,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAC9B,OAAO,GAAG,QAAQ,IAAI,0BAAgB,CAAC,oBAAoB,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,gBAAoC,CAAC,EAAE,CAAC;SAC9H;aAAM;YACH,OAAO,GAAG,0BAAgB,CAAC,SAAS,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,gBAAoC,EAAE,QAAQ,CAAC,IAAI,0BAAgB,CAAC,oBAAoB,CAChJ,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,gBAAoC,CAC9D,EAAE,CAAC;SACP;IACL,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAChB,OAAO,8DAAG,cAAc,CAAI,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnB,CAAC;AAhBD,2BAgBC","sourcesContent":["import { HotelOverridesContext } from '@frontend/contexts';\nimport { DistanceUnitType } from 'models/Client/Hotel/DistanceUnitType.types';\nimport React, { useMemo } from 'react';\n\nimport DistanceProvider from '@/providers/DistanceProvider';\n\ninterface DistanceProps {\n    distance: number | string;\n}\n\nexport default function Distance({ distance }: DistanceProps) {\n    const hotelOverridesContext = React.useContext(HotelOverridesContext);\n\n    const distanceString = (() => {\n        if (typeof distance === 'string') {\n            return `${distance} ${DistanceProvider.getMeasurementString(hotelOverridesContext?.distanceUnitType as DistanceUnitType)}`;\n        } else {\n            return `${DistanceProvider.convertTo(hotelOverridesContext?.distanceUnitType as DistanceUnitType, distance)} ${DistanceProvider.getMeasurementString(\n                hotelOverridesContext?.distanceUnitType as DistanceUnitType\n            )}`;\n        }\n    })();\n\n    return useMemo(() => {\n        return <>{distanceString}</>;\n    }, [distance]);\n}\n"]}
+{"version":3,"file":"Distance.js","sourceRoot":"/","sources":["src/components/generic/Distance.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAA2D;AAE3D,+CAAuC;AAEvC,oFAA4D;AAO5D,SAAwB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAiB;IACrE,MAAM,qBAAqB,GAAG,eAAK,CAAC,UAAU,CAAC,gCAAqB,CAAC,CAAC;IAEtE,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAC9B,OAAO,CAAC,QAAQ,EAAE,0BAAgB,CAAC,oBAAoB,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,gBAAoC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;SACtJ;aAAM;YACH,OAAO;gBACH,0BAAgB,CAAC,SAAS,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,gBAAoC,EAAE,QAAQ,CAAC;gBACjG,0BAAgB,CAAC,oBAAoB,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,gBAAoC,CAAC;aACrG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;SAClC;IACL,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAChB,OAAO,8DAAG,cAAc,CAAI,CAAC;IACjC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnB,CAAC;AAjBD,2BAiBC","sourcesContent":["import { HotelOverridesContext } from '@frontend/contexts';\nimport { DistanceUnitType } from 'models/Client/Hotel/DistanceUnitType.types';\nimport React, { useMemo } from 'react';\n\nimport DistanceProvider from '@/providers/DistanceProvider';\n\ninterface DistanceProps {\n    distance: number | string;\n    displayCard?: boolean;\n}\n\nexport default function Distance({ distance, displayCard }: DistanceProps) {\n    const hotelOverridesContext = React.useContext(HotelOverridesContext);\n\n    const distanceString = (() => {\n        if (typeof distance === 'string') {\n            return [distance, DistanceProvider.getMeasurementString(hotelOverridesContext?.distanceUnitType as DistanceUnitType)].join(displayCard ? '' : ' ');\n        } else {\n            return [\n                DistanceProvider.convertTo(hotelOverridesContext?.distanceUnitType as DistanceUnitType, distance),\n                DistanceProvider.getMeasurementString(hotelOverridesContext?.distanceUnitType as DistanceUnitType),\n            ].join(displayCard ? '' : ' ');\n        }\n    })();\n\n    return useMemo(() => {\n        return <>{distanceString}</>;\n    }, [distance]);\n}\n"]}

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

@@ -71,7 +71,10 @@ export declare enum IconType {
     ArrowRight3 = "Arrow-3-Right",
     ArrowDown3 = "Arrow-3-Down",
     ProgressHelp = "Progress-Help",
-    Subtitle = "Subtitle"
+    Subtitle = "Subtitle",
+    Car = "Car",
+    Ferry = "Ferry",
+    Location = "Location"
 }
 export interface IconProps {
     icon: IconType;

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

@@ -82,6 +82,9 @@ var IconType;
     IconType["ArrowDown3"] = "Arrow-3-Down";
     IconType["ProgressHelp"] = "Progress-Help";
     IconType["Subtitle"] = "Subtitle";
+    IconType["Car"] = "Car";
+    IconType["Ferry"] = "Ferry";
+    IconType["Location"] = "Location";
 })(IconType = exports.IconType || (exports.IconType = {}));
 function IconDropdown() {
     return react_1.default.createElement(Icon, { icon: IconType.ArrowDown2, size: "1em", color: Color_1.Color.DarkGrey });

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"/","sources":["src/components/generic/Icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\n\nimport { Color } from '@/util/Color';\n\nimport styles from './Icon.module.scss';\n\nexport enum IconType {\n    Email = 'Email',\n    Degrees = 'Degrees',\n    Hotel = 'Hotel',\n    Hotel2 = 'Hotel-2',\n    Map = 'Map',\n    Info = 'Info',\n    Deal = 'Deal',\n    Money = 'Money',\n    Lock = 'Lock',\n    Check = 'Check',\n    CheckCircled = 'Check-Circled',\n    Bed = 'Bed',\n    ApplePay = 'Apple-Pay',\n    PayPal = 'PayPal',\n    Person = 'Person',\n    ChildFriendly = 'Child-Friendly',\n    Fridge = 'Fridge',\n    Smoking = 'Smoking',\n    Gym = 'Gym',\n    Bar = 'Bar',\n    Laundry = 'Laundry',\n    Breakfast = 'Breakfast',\n    Snacks = 'Snacks',\n    Phone = 'Phone',\n    ViewMonth = 'View-Month',\n    Ovolo = 'Ovolo',\n    ViewWeek = 'View-Week',\n    AirCon = 'Air-Con',\n    WiFi = 'Wifi',\n    Time = 'Time',\n    People = 'People',\n    Calendar = 'Calendar',\n    CreditCard = 'Credit-Card',\n    Spinner = 'Spinner',\n    Fullscreen = 'Fullscreen',\n    Star = 'Star',\n    ArrowRight = 'Arrow-Right',\n    ArrowLeft = 'Arrow-Left',\n    ArrowUp = 'Arrow-Up',\n    ArrowDown = 'Arrow-Down',\n    ArrowLeft2 = 'Arrow-2-Left',\n    ArrowUp2 = 'Arrow-2-Up',\n    ArrowRight2 = 'Arrow-2-Right',\n    ArrowDown2 = 'Arrow-2-Down',\n    Close = 'Close',\n    Remove = 'Remove',\n    Add = 'Add',\n    Dropdown = 'Dropdown',\n    Train = 'Train',\n    Taxi = 'Taxi',\n    Share = 'Share',\n    Print = 'Print',\n    LogOut = 'Log-Out',\n    Error = 'Error',\n    Edit = 'Edit',\n    Bus = 'Bus',\n    Airplane = 'Airplane',\n    Menu = 'Menu',\n    LootBag = 'loot-bag',\n    LateCheckout = 'Late-Checkout',\n    RoomSize = 'Room-Size',\n    RoomUpgrade = 'Room-Upgrade',\n    Champagne = 'Champagne',\n    Eye = 'Eye',\n    EyeBlocked = 'EyeBlocked',\n    Delete = 'Delete',\n    ArrowLeft3 = 'Arrow-3-Left',\n    ArrowUp3 = 'Arrow-3-Up',\n    ArrowRight3 = 'Arrow-3-Right',\n    ArrowDown3 = 'Arrow-3-Down',\n    ProgressHelp = 'Progress-Help',\n    Subtitle = 'Subtitle',\n}\n\nexport interface IconProps {\n    icon: IconType;\n    size?: string;\n    name?: string;\n\n    color?: Color;\n    useColorAsBackground?: boolean;\n    backgroundColor?: Color;\n\n    noPadding?: boolean;\n\n    onClick?: () => void;\n    borderRadius?: 'oval' | 'round';\n    className?: string;\n}\n\nexport function IconDropdown() {\n    return <Icon icon={IconType.ArrowDown2} size=\"1em\" color={Color.DarkGrey} />;\n}\n\nexport function IconDropdownFilled() {\n    return <Icon icon={IconType.Dropdown} size=\"1em\" color={Color.DarkGrey} />;\n}\n\nexport default function Icon(props: IconProps) {\n    const defaultProps: IconProps = {\n        size: '18px',\n        ...props,\n    };\n\n    const name = props.name || defaultProps.icon;\n\n    // TODO: remove the diji-icon class from all external uses.\n    const classes = classNames(styles['diji-icon'], props.className, (styles as any)[`diji-icon${defaultProps.icon}`], 'diji-icon', {\n        [styles['--has-bg']]: !!defaultProps.backgroundColor,\n        [styles['--has-custom-bg']]: defaultProps.useColorAsBackground,\n        [styles['--clickable']]: defaultProps.onClick,\n        'u-pad-none': props.noPadding,\n        [(styles as any)[`--border-${defaultProps.borderRadius}`]]: defaultProps.borderRadius,\n    });\n\n    const extraProps: any = {};\n\n    if (defaultProps.onClick) {\n        extraProps.onClick = defaultProps.onClick;\n    }\n\n    const style: any = {\n        fontSize: defaultProps.size,\n    };\n\n    if (defaultProps.color) {\n        style.color = defaultProps.color;\n    }\n\n    if (defaultProps.backgroundColor && !defaultProps.useColorAsBackground) {\n        style.backgroundColor = defaultProps.backgroundColor;\n    }\n\n    if (defaultProps.useColorAsBackground) {\n        style['--custom-bg-color'] = defaultProps.color;\n    }\n\n    return <i className={classes} style={style} {...extraProps} name={name} />;\n}\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"/","sources":["src/components/generic/Icon/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\n\nimport { Color } from '@/util/Color';\n\nimport styles from './Icon.module.scss';\n\nexport enum IconType {\n    Email = 'Email',\n    Degrees = 'Degrees',\n    Hotel = 'Hotel',\n    Hotel2 = 'Hotel-2',\n    Map = 'Map',\n    Info = 'Info',\n    Deal = 'Deal',\n    Money = 'Money',\n    Lock = 'Lock',\n    Check = 'Check',\n    CheckCircled = 'Check-Circled',\n    Bed = 'Bed',\n    ApplePay = 'Apple-Pay',\n    PayPal = 'PayPal',\n    Person = 'Person',\n    ChildFriendly = 'Child-Friendly',\n    Fridge = 'Fridge',\n    Smoking = 'Smoking',\n    Gym = 'Gym',\n    Bar = 'Bar',\n    Laundry = 'Laundry',\n    Breakfast = 'Breakfast',\n    Snacks = 'Snacks',\n    Phone = 'Phone',\n    ViewMonth = 'View-Month',\n    Ovolo = 'Ovolo',\n    ViewWeek = 'View-Week',\n    AirCon = 'Air-Con',\n    WiFi = 'Wifi',\n    Time = 'Time',\n    People = 'People',\n    Calendar = 'Calendar',\n    CreditCard = 'Credit-Card',\n    Spinner = 'Spinner',\n    Fullscreen = 'Fullscreen',\n    Star = 'Star',\n    ArrowRight = 'Arrow-Right',\n    ArrowLeft = 'Arrow-Left',\n    ArrowUp = 'Arrow-Up',\n    ArrowDown = 'Arrow-Down',\n    ArrowLeft2 = 'Arrow-2-Left',\n    ArrowUp2 = 'Arrow-2-Up',\n    ArrowRight2 = 'Arrow-2-Right',\n    ArrowDown2 = 'Arrow-2-Down',\n    Close = 'Close',\n    Remove = 'Remove',\n    Add = 'Add',\n    Dropdown = 'Dropdown',\n    Train = 'Train',\n    Taxi = 'Taxi',\n    Share = 'Share',\n    Print = 'Print',\n    LogOut = 'Log-Out',\n    Error = 'Error',\n    Edit = 'Edit',\n    Bus = 'Bus',\n    Airplane = 'Airplane',\n    Menu = 'Menu',\n    LootBag = 'loot-bag',\n    LateCheckout = 'Late-Checkout',\n    RoomSize = 'Room-Size',\n    RoomUpgrade = 'Room-Upgrade',\n    Champagne = 'Champagne',\n    Eye = 'Eye',\n    EyeBlocked = 'EyeBlocked',\n    Delete = 'Delete',\n    ArrowLeft3 = 'Arrow-3-Left',\n    ArrowUp3 = 'Arrow-3-Up',\n    ArrowRight3 = 'Arrow-3-Right',\n    ArrowDown3 = 'Arrow-3-Down',\n    ProgressHelp = 'Progress-Help',\n    Subtitle = 'Subtitle',\n    Car = 'Car',\n    Ferry = 'Ferry',\n    Location = 'Location',\n}\n\nexport interface IconProps {\n    icon: IconType;\n    size?: string;\n    name?: string;\n\n    color?: Color;\n    useColorAsBackground?: boolean;\n    backgroundColor?: Color;\n\n    noPadding?: boolean;\n\n    onClick?: () => void;\n    borderRadius?: 'oval' | 'round';\n    className?: string;\n}\n\nexport function IconDropdown() {\n    return <Icon icon={IconType.ArrowDown2} size=\"1em\" color={Color.DarkGrey} />;\n}\n\nexport function IconDropdownFilled() {\n    return <Icon icon={IconType.Dropdown} size=\"1em\" color={Color.DarkGrey} />;\n}\n\nexport default function Icon(props: IconProps) {\n    const defaultProps: IconProps = {\n        size: '18px',\n        ...props,\n    };\n\n    const name = props.name || defaultProps.icon;\n\n    // TODO: remove the diji-icon class from all external uses.\n    const classes = classNames(styles['diji-icon'], props.className, (styles as any)[`diji-icon${defaultProps.icon}`], 'diji-icon', {\n        [styles['--has-bg']]: !!defaultProps.backgroundColor,\n        [styles['--has-custom-bg']]: defaultProps.useColorAsBackground,\n        [styles['--clickable']]: defaultProps.onClick,\n        'u-pad-none': props.noPadding,\n        [(styles as any)[`--border-${defaultProps.borderRadius}`]]: defaultProps.borderRadius,\n    });\n\n    const extraProps: any = {};\n\n    if (defaultProps.onClick) {\n        extraProps.onClick = defaultProps.onClick;\n    }\n\n    const style: any = {\n        fontSize: defaultProps.size,\n    };\n\n    if (defaultProps.color) {\n        style.color = defaultProps.color;\n    }\n\n    if (defaultProps.backgroundColor && !defaultProps.useColorAsBackground) {\n        style.backgroundColor = defaultProps.backgroundColor;\n    }\n\n    if (defaultProps.useColorAsBackground) {\n        style['--custom-bg-color'] = defaultProps.color;\n    }\n\n    return <i className={classes} style={style} {...extraProps} name={name} />;\n}\n"]}

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

@@ -86,7 +86,7 @@ const PaymentInformation = ({ tokenizerRef, onChangeCb }) => {
         options.push(Object.assign(Object.assign({}, defaultCardOption), { options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined }));
     }
     (0, react_1.useEffect)(() => {
-        methods.trigger();
+        methods.trigger('paymentMethod');
     }, [currentCurrency]);
     if (hasPricePreview && planpayConfig && planpayConfig.minDaysShowPlanpay && (0, dayjs_1.default)(basketContext.startDate).diff((0, dayjs_1.default)(), 'day') > planpayConfig.minDaysShowPlanpay) {
         options.push({

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentInformation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EBookingPaymentMethod, EHotelCardProcessor } from '@roomstay/core';\nimport dayjs from 'dayjs';\nimport React, { FC, useContext, useEffect, useMemo } from 'react';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentOption from '@/components/generic/PaymentCard/InlinePaymentOption';\nimport RadioButtonGroup, { IRadioButtonOption } from '@/components/generic/RadioButtonGroup/RadioButtonGroup';\nimport { StepConfirmationVGSPaymentInput } from '@/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails';\nimport PlanpayLabel from '@/components/steps/confirmation/PlanpayLabel';\nimport { PlanpayPaymentMethod } from '@/components/steps/confirmation/PlanpayPaymentMethod';\nimport { CompanyContext, useBasket, useMemberContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport usePlanpay from '@/hooks/Planpay';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport { Translation } from '@/translations/Translation';\n\ninterface PaymentInformationProps {\n    tokenizerRef: any;\n    onChangeCb: (code: EBookingPaymentMethod) => void;\n}\n\nconst PaymentInformation: FC<PaymentInformationProps> = ({ tokenizerRef, onChangeCb }) => {\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { hotel } = useCurrentHotel();\n    const basketContext = useBasket();\n    const { hasPricePreview, planpayConfig } = usePlanpay();\n    const { cards = [], roomstayMember } = useMemberContext();\n    const defaultCard = useMemo(() => cards.find((card) => card.cardId === roomstayMember?.defaultCard), [cards, roomstayMember]);\n    const { t } = useTranslation();\n\n    const { currentCurrency } = useContext(CompanyContext);\n\n    const paymentMethod = methods.watch('paymentMethod');\n\n    // TODO: while we figure out how to handle member cards we'll just disable this for non-passthrough paymets\n    const isPassthrough = hotel?.cardProcessor ? hotel.cardProcessor === EHotelCardProcessor.Passthrough : true;\n\n    const vgsCardInputOption: IRadioButtonOption = {\n        value: EBookingPaymentMethod.Card,\n        label: (\n            <InlinePaymentOption\n                active={paymentMethod === EBookingPaymentMethod.Card}\n                overrideSubLabel={isPassthrough ? undefined : t(Translation.Step.Confirmation.CardThirdPartyLabel)}\n            />\n        ),\n        renderContent: isPassthrough ? () => <StepConfirmationVGSPaymentInput ref={tokenizerRef} /> : undefined,\n    };\n\n    const options: IRadioButtonOption[] = [];\n    if (hotel?.paymentMethods?.includes(EBookingPaymentMethod.Card)) {\n        let defaultCardOption: IRadioButtonOption;\n        // Reason this is split up is in case someone doesn't have a default card selected\n        // We still want to select the first card they have, if they have any.\n        if (cards.length && isPassthrough) {\n            const selectedMemberCard = defaultCard ? defaultCard : cards[0];\n\n            defaultCardOption = {\n                value: selectedMemberCard.cardId,\n                label: <InlinePaymentOption card={selectedMemberCard} />,\n            };\n        } else {\n            defaultCardOption = vgsCardInputOption;\n        }\n\n        const selectableStoredCardOptions = [];\n\n        if (cards.length) {\n            for (const memberCard of cards) {\n                selectableStoredCardOptions.push({\n                    value: memberCard.cardId,\n                    label: <InlinePaymentOption card={memberCard} />,\n                });\n            }\n            selectableStoredCardOptions.push(vgsCardInputOption);\n        }\n\n        options.push({\n            ...defaultCardOption,\n            options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined,\n        });\n    }\n\n    useEffect(() => {\n        methods.trigger();\n    }, [currentCurrency]);\n\n    if (hasPricePreview && planpayConfig && planpayConfig.minDaysShowPlanpay && dayjs(basketContext.startDate).diff(dayjs(), 'day') > planpayConfig.minDaysShowPlanpay) {\n        options.push({\n            value: EBookingPaymentMethod.Planpay,\n            label: <PlanpayLabel />,\n            disabled: !methods.formState.isValid,\n            disabledReason: !methods.formState.isValid ? 'You must fill all the above details before proceeding with Planpay' : '',\n            renderContent: () => <PlanpayPaymentMethod />,\n        });\n    }\n\n    return (\n        <Controller\n            control={methods.control}\n            name=\"paymentMethod\"\n            render={({ field: { onChange, value } }) => {\n                return (\n                    <>\n                        <div>\n                            <RadioButtonGroup\n                                options={options}\n                                value={value}\n                                onChange={(code) => {\n                                    onChange(code);\n                                    onChangeCb(code as EBookingPaymentMethod);\n                                }}\n                            />\n                        </div>\n                    </>\n                );\n            }}\n        />\n    );\n};\n\nexport default PaymentInformation;\n"]}
+{"version":3,"file":"PaymentInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentInformation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EBookingPaymentMethod, EHotelCardProcessor } from '@roomstay/core';\nimport dayjs from 'dayjs';\nimport React, { FC, useContext, useEffect, useMemo } from 'react';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentOption from '@/components/generic/PaymentCard/InlinePaymentOption';\nimport RadioButtonGroup, { IRadioButtonOption } from '@/components/generic/RadioButtonGroup/RadioButtonGroup';\nimport { StepConfirmationVGSPaymentInput } from '@/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails';\nimport PlanpayLabel from '@/components/steps/confirmation/PlanpayLabel';\nimport { PlanpayPaymentMethod } from '@/components/steps/confirmation/PlanpayPaymentMethod';\nimport { CompanyContext, useBasket, useMemberContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport usePlanpay from '@/hooks/Planpay';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport { Translation } from '@/translations/Translation';\n\ninterface PaymentInformationProps {\n    tokenizerRef: any;\n    onChangeCb: (code: EBookingPaymentMethod) => void;\n}\n\nconst PaymentInformation: FC<PaymentInformationProps> = ({ tokenizerRef, onChangeCb }) => {\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { hotel } = useCurrentHotel();\n    const basketContext = useBasket();\n    const { hasPricePreview, planpayConfig } = usePlanpay();\n    const { cards = [], roomstayMember } = useMemberContext();\n    const defaultCard = useMemo(() => cards.find((card) => card.cardId === roomstayMember?.defaultCard), [cards, roomstayMember]);\n    const { t } = useTranslation();\n\n    const { currentCurrency } = useContext(CompanyContext);\n\n    const paymentMethod = methods.watch('paymentMethod');\n\n    // TODO: while we figure out how to handle member cards we'll just disable this for non-passthrough paymets\n    const isPassthrough = hotel?.cardProcessor ? hotel.cardProcessor === EHotelCardProcessor.Passthrough : true;\n\n    const vgsCardInputOption: IRadioButtonOption = {\n        value: EBookingPaymentMethod.Card,\n        label: (\n            <InlinePaymentOption\n                active={paymentMethod === EBookingPaymentMethod.Card}\n                overrideSubLabel={isPassthrough ? undefined : t(Translation.Step.Confirmation.CardThirdPartyLabel)}\n            />\n        ),\n        renderContent: isPassthrough ? () => <StepConfirmationVGSPaymentInput ref={tokenizerRef} /> : undefined,\n    };\n\n    const options: IRadioButtonOption[] = [];\n    if (hotel?.paymentMethods?.includes(EBookingPaymentMethod.Card)) {\n        let defaultCardOption: IRadioButtonOption;\n        // Reason this is split up is in case someone doesn't have a default card selected\n        // We still want to select the first card they have, if they have any.\n        if (cards.length && isPassthrough) {\n            const selectedMemberCard = defaultCard ? defaultCard : cards[0];\n\n            defaultCardOption = {\n                value: selectedMemberCard.cardId,\n                label: <InlinePaymentOption card={selectedMemberCard} />,\n            };\n        } else {\n            defaultCardOption = vgsCardInputOption;\n        }\n\n        const selectableStoredCardOptions = [];\n\n        if (cards.length) {\n            for (const memberCard of cards) {\n                selectableStoredCardOptions.push({\n                    value: memberCard.cardId,\n                    label: <InlinePaymentOption card={memberCard} />,\n                });\n            }\n            selectableStoredCardOptions.push(vgsCardInputOption);\n        }\n\n        options.push({\n            ...defaultCardOption,\n            options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined,\n        });\n    }\n\n    useEffect(() => {\n        methods.trigger('paymentMethod');\n    }, [currentCurrency]);\n\n    if (hasPricePreview && planpayConfig && planpayConfig.minDaysShowPlanpay && dayjs(basketContext.startDate).diff(dayjs(), 'day') > planpayConfig.minDaysShowPlanpay) {\n        options.push({\n            value: EBookingPaymentMethod.Planpay,\n            label: <PlanpayLabel />,\n            disabled: !methods.formState.isValid,\n            disabledReason: !methods.formState.isValid ? 'You must fill all the above details before proceeding with Planpay' : '',\n            renderContent: () => <PlanpayPaymentMethod />,\n        });\n    }\n\n    return (\n        <Controller\n            control={methods.control}\n            name=\"paymentMethod\"\n            render={({ field: { onChange, value } }) => {\n                return (\n                    <>\n                        <div>\n                            <RadioButtonGroup\n                                options={options}\n                                value={value}\n                                onChange={(code) => {\n                                    onChange(code);\n                                    onChangeCb(code as EBookingPaymentMethod);\n                                }}\n                            />\n                        </div>\n                    </>\n                );\n            }}\n        />\n    );\n};\n\nexport default PaymentInformation;\n"]}

package/dist/src/components/steps/room/roomDetails/roomRates/MembersOnlyRow.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const contexts_1 = require("../../../../../contexts/index.js");
+const hooks_1 = require("../../../../../hooks/index.js");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
@@ -40,6 +41,7 @@ const Color_1 = require("../../../../../util/Color");
 const DataLayer_1 = __importStar(require("../../../../../util/DataLayer"));
 function MembersOnlyRow() {
     const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
     const { t } = (0, react_i18next_1.useTranslation)();
     const currentRow = (0, react_1.useRef)(null);
     const classes = (0, classnames_1.default)('room-info', {
@@ -54,14 +56,15 @@ function MembersOnlyRow() {
         ccx.openMemberSignupModal();
     };
     return (react_1.default.createElement("div", { className: classes, ref: currentRow },
-        react_1.default.createElement("div", { className: "row" }, isLocked ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "col-md-8" },
+        react_1.default.createElement("div", { className: "row room-info-gated" }, isLocked ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "col-md-8 room-info-gated-left" },
                 react_1.default.createElement("div", { className: "u-flex flex-column h-100" },
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "u-marg-bottom-half" },
+                        (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyImage) && react_1.default.createElement("div", { className: "room-info-gated-left-image", style: { backgroundImage: `url('${hotel.memberOnlyImage}')` } }),
+                        react_1.default.createElement("div", { className: "u-marg-bottom-half room-info-gated-left-prices" },
                             react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Body, color: Color_1.Color.Success },
                                 react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Room.RoomInfo.MemberOnlyRow.MemberOnlyPrices)))),
-                        react_1.default.createElement("div", { className: "u-marg-bottom u-h-ml-2 text-small u-clear-font-weight", dangerouslySetInnerHTML: {
+                        react_1.default.createElement("div", { className: "u-marg-bottom u-h-ml-2 text-small u-clear-font-weight room-info-gated-left-deals", dangerouslySetInnerHTML: {
                                 __html: t(Translation_1.Translation.Step.Room.RoomInfo.MemberOnlyRow.DealsForOnly, {
                                     companyShort: ccx === null || ccx === void 0 ? void 0 : ccx.companyShort,
                                 }),
@@ -71,7 +74,7 @@ function MembersOnlyRow() {
                     react_1.default.createElement("div", { className: "u-flex justify-content-start u-marg-top-bottom@m-" },
                         react_1.default.createElement("div", { className: "u-marg-right u-inline-flex" },
                             react_1.default.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight2, isText: true, primary: true, size: "small", iconPosition: "right", onClick: openSignupModalOnClick }, t(Translation_1.Translation.Step.Room.ReadMore)))))),
-            react_1.default.createElement("div", { className: "col-md-4 u-flex flex-column align-items-start align-items-md-end justify-content-start" },
+            react_1.default.createElement("div", { className: "col-md-4 u-flex flex-column align-items-start align-items-md-end justify-content-start room-info-gated-right" },
                 react_1.default.createElement(RoomDetailsPriceBlock_1.default, { isLocked: isLocked, averagePreDiscount: 321, averagePrice: 321, isMemberOnly: true }),
                 react_1.default.createElement("div", { className: "u-marg-top u-w-100@m-" }, isLocked && (react_1.default.createElement(BEButton_1.default, { filled: true, success: true, mobileWidth: true, onClick: openSignupModalOnClick }, "Reveal Prices Now")))))) : (react_1.default.createElement("div", { className: "d-flex justify-content-center w-100" },
             react_1.default.createElement("div", { className: "d-flex align-items-center" },

package/dist/src/components/steps/room/roomDetails/roomRates/MembersOnlyRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"MembersOnlyRow.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/MembersOnlyRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CompanyContext } from '@frontend/contexts';\nimport classNames from 'classnames';\nimport React, { useContext, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport RoomDetailsPriceBlock from '@/components/steps/room/roomDetails/RoomDetailsPriceBlock';\nimport { Color } from '@/util/Color';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\n\nexport default function MembersOnlyRow() {\n    const ccx = useContext(CompanyContext);\n\n    const { t } = useTranslation();\n\n    const currentRow = useRef(null);\n\n    const classes = classNames('room-info', {\n        '--locked': true,\n    });\n\n    let isLocked = false;\n\n    if (!ccx.signedInUser) {\n        isLocked = true;\n    }\n\n    const openSignupModalOnClick = () => {\n        DataLayer.instance.sendInteraction('Member Signup Modal', InteractionType.BUTTON, InteractionStep.ROOMS);\n        ccx.openMemberSignupModal();\n    };\n\n    return (\n        <div className={classes} ref={currentRow}>\n            <div className=\"row\">\n                {isLocked ? (\n                    <>\n                        <div className=\"col-md-8\">\n                            <div className=\"u-flex flex-column h-100\">\n                                <div>\n                                    <div className=\"u-marg-bottom-half\">\n                                        <Text type={TextType.Body} color={Color.Success}>\n                                            <strong>{t(Translation.Step.Room.RoomInfo.MemberOnlyRow.MemberOnlyPrices)}</strong>\n                                        </Text>\n                                    </div>\n                                    <div\n                                        className=\"u-marg-bottom u-h-ml-2 text-small u-clear-font-weight\"\n                                        dangerouslySetInnerHTML={{\n                                            __html: t(Translation.Step.Room.RoomInfo.MemberOnlyRow.DealsForOnly, {\n                                                companyShort: ccx?.companyShort,\n                                            }),\n                                        }}\n                                    ></div>\n                                    <div className=\"u-marg-bottom\" onClick={openSignupModalOnClick}>\n                                        <Pill icon={IconType.Money} type={PillType.Success}>\n                                            {t(Translation.Step.Room.RoomInfo.SignUpToSee)}\n                                        </Pill>\n                                    </div>\n                                </div>\n                                <div className=\"u-flex justify-content-start u-marg-top-bottom@m-\">\n                                    <div className=\"u-marg-right u-inline-flex\">\n                                        <BEButton icon={IconType.ArrowRight2} isText primary size=\"small\" iconPosition=\"right\" onClick={openSignupModalOnClick}>\n                                            {t(Translation.Step.Room.ReadMore)}\n                                        </BEButton>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"col-md-4 u-flex flex-column align-items-start align-items-md-end justify-content-start\">\n                            <RoomDetailsPriceBlock isLocked={isLocked} averagePreDiscount={321} averagePrice={321} isMemberOnly />\n                            <div className=\"u-marg-top u-w-100@m-\">\n                                {isLocked && (\n                                    <BEButton filled success mobileWidth onClick={openSignupModalOnClick}>\n                                        Reveal Prices Now\n                                    </BEButton>\n                                )}\n                            </div>\n                        </div>\n                    </>\n                ) : (\n                    <div className=\"d-flex justify-content-center w-100\">\n                        <div className=\"d-flex align-items-center\">\n                            <span className=\"room-details--content-price-lock u-marg-right\" style={{ opacity: 1, position: 'unset', transform: 'none' }}>\n                                <Icon icon={IconType.Lock} color={Color.Success} />\n                            </span>\n                            <Text type={TextType.Body} color={Color.Success} inline>\n                                <strong>{t(Translation.Step.Room.RoomInfo.MemberOnlyDealsActivated)}</strong>\n                            </Text>\n                        </div>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"MembersOnlyRow.js","sourceRoot":"/","sources":["src/components/steps/room/roomDetails/roomRates/MembersOnlyRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\nimport React, { useContext, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport RoomDetailsPriceBlock from '@/components/steps/room/roomDetails/RoomDetailsPriceBlock';\nimport { Color } from '@/util/Color';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\n\nexport default function MembersOnlyRow() {\n    const ccx = useContext(CompanyContext);\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const currentRow = useRef(null);\n\n    const classes = classNames('room-info', {\n        '--locked': true,\n    });\n\n    let isLocked = false;\n\n    if (!ccx.signedInUser) {\n        isLocked = true;\n    }\n\n    const openSignupModalOnClick = () => {\n        DataLayer.instance.sendInteraction('Member Signup Modal', InteractionType.BUTTON, InteractionStep.ROOMS);\n        ccx.openMemberSignupModal();\n    };\n\n    return (\n        <div className={classes} ref={currentRow}>\n            <div className=\"row room-info-gated\">\n                {isLocked ? (\n                    <>\n                        <div className=\"col-md-8 room-info-gated-left\">\n                            <div className=\"u-flex flex-column h-100\">\n                                <div>\n                                    {hotel?.memberOnlyImage && <div className=\"room-info-gated-left-image\" style={{ backgroundImage: `url('${hotel.memberOnlyImage}')` }}></div>}\n                                    <div className=\"u-marg-bottom-half room-info-gated-left-prices\">\n                                        <Text type={TextType.Body} color={Color.Success}>\n                                            <strong>{t(Translation.Step.Room.RoomInfo.MemberOnlyRow.MemberOnlyPrices)}</strong>\n                                        </Text>\n                                    </div>\n                                    <div\n                                        className=\"u-marg-bottom u-h-ml-2 text-small u-clear-font-weight room-info-gated-left-deals\"\n                                        dangerouslySetInnerHTML={{\n                                            __html: t(Translation.Step.Room.RoomInfo.MemberOnlyRow.DealsForOnly, {\n                                                companyShort: ccx?.companyShort,\n                                            }),\n                                        }}\n                                    ></div>\n                                    <div className=\"u-marg-bottom\" onClick={openSignupModalOnClick}>\n                                        <Pill icon={IconType.Money} type={PillType.Success}>\n                                            {t(Translation.Step.Room.RoomInfo.SignUpToSee)}\n                                        </Pill>\n                                    </div>\n                                </div>\n                                <div className=\"u-flex justify-content-start u-marg-top-bottom@m-\">\n                                    <div className=\"u-marg-right u-inline-flex\">\n                                        <BEButton icon={IconType.ArrowRight2} isText primary size=\"small\" iconPosition=\"right\" onClick={openSignupModalOnClick}>\n                                            {t(Translation.Step.Room.ReadMore)}\n                                        </BEButton>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"col-md-4 u-flex flex-column align-items-start align-items-md-end justify-content-start room-info-gated-right\">\n                            <RoomDetailsPriceBlock isLocked={isLocked} averagePreDiscount={321} averagePrice={321} isMemberOnly />\n                            <div className=\"u-marg-top u-w-100@m-\">\n                                {isLocked && (\n                                    <BEButton filled success mobileWidth onClick={openSignupModalOnClick}>\n                                        Reveal Prices Now\n                                    </BEButton>\n                                )}\n                            </div>\n                        </div>\n                    </>\n                ) : (\n                    <div className=\"d-flex justify-content-center w-100\">\n                        <div className=\"d-flex align-items-center\">\n                            <span className=\"room-details--content-price-lock u-marg-right\" style={{ opacity: 1, position: 'unset', transform: 'none' }}>\n                                <Icon icon={IconType.Lock} color={Color.Success} />\n                            </span>\n                            <Text type={TextType.Body} color={Color.Success} inline>\n                                <strong>{t(Translation.Step.Room.RoomInfo.MemberOnlyDealsActivated)}</strong>\n                            </Text>\n                        </div>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/src/components/summary/BEMobileSummaryModal.js

@@ -62,7 +62,7 @@ function BEMobileSummaryModal(props) {
         // We do this hacky thing since Mobile summary & Desktop summary are almost identical, just blocks are presented differently
         const newLayout = Object.assign({}, BESummary_1.BESummaryLayoutOrder);
         newLayout.TransportDistanceBlock.component = (react_1.default.createElement("div", { className: "u-flex justify-content-center u-marg-top u-marg-bottom" },
-            react_1.default.createElement("div", { className: "col-10 u-flex flex-row" },
+            react_1.default.createElement("div", { className: "u-flex flex-row" },
                 react_1.default.createElement(TransportDistanceFromHotelBlock_1.default, { vertical: true, hotel: hotel }))));
         newLayout.PerksBlock.component = react_1.default.createElement(BESummaryPerkBlock_1.BESummaryPerkBlock, { size: "mobile" });
         setMobileLayout(newLayout);

package/dist/src/components/summary/BEMobileSummaryModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"BEMobileSummaryModal.js","sourceRoot":"/","sources":["src/components/summary/BEMobileSummaryModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { OrderableReactList, useCurrentHotel, useElementSort } from '@frontend/hooks';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } 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 Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport HotelLocationMap from '@/components/generic/map/HotelLocationMap';\nimport SimpleModal from '@/components/generic/modal/SimpleModal';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { BESummaryLayoutOrder } from '@/components/summary/BESummary';\nimport BESummaryAddonRow from '@/components/summary/BESummaryAddonRow';\nimport { BESummaryPerkBlock } from '@/components/summary/BESummaryPerkBlock';\nimport BESummaryPrivacyPolicy from '@/components/summary/BESummaryPrivacyPolicy';\nimport BESummaryRoomRow from '@/components/summary/BESummaryRoomRow';\nimport TransportDistanceFromHotelBlock from '@/components/summary/TransportDistanceFromHotelBlock';\nimport BasketAddonRow from '@/models/BasketAddonRow';\nimport BasketRow from '@/models/BasketRow';\nimport { Color } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport StringHelper from '@/util/StringHelper';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport interface BEMobileSummaryModalProps {\n    isOpen?: boolean;\n    onClose?: () => void;\n    showImages?: boolean;\n}\n\nexport default function BEMobileSummaryModal(props: BEMobileSummaryModalProps) {\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const selectedBasketRows = basketContext.getAllValidRows();\n\n    const addons = basketContext.basketAddonRows;\n\n    const { t } = useTranslation();\n\n    const [mobileLayout, setMobileLayout] = useState<OrderableReactList>({});\n\n    useEffect(() => {\n        // We do this hacky thing since Mobile summary & Desktop summary are almost identical, just blocks are presented differently\n        const newLayout: typeof BESummaryLayoutOrder = { ...BESummaryLayoutOrder };\n        newLayout.TransportDistanceBlock.component = (\n            <div className=\"u-flex justify-content-center u-marg-top u-marg-bottom\">\n                <div className=\"col-10 u-flex flex-row\">\n                    <TransportDistanceFromHotelBlock vertical hotel={hotel} />\n                </div>\n            </div>\n        );\n        newLayout.PerksBlock.component = <BESummaryPerkBlock size=\"mobile\" />;\n\n        setMobileLayout(newLayout);\n    }, []);\n\n    const { sortedComponents } = useElementSort(mobileLayout);\n\n    const totalDays = basketContext.endDate ? basketContext.endDate.diff(basketContext.startDate, 'day') : 0;\n\n    const addressLine1 = [hotel?.address?.line1, hotel?.address?.city];\n    const addressLine2 = [hotel?.address?.postalCode, hotel?.address?.state];\n\n    const getAddressString = (val: string[]) => {\n        const line = val.filter((it) => !!it && it !== '0').join(', ');\n\n        if (line) {\n            return <Text type={TextType.Small}>{line}</Text>;\n        }\n\n        return null;\n    };\n\n    const onCloseModalHandler = () => {\n        return props.onClose ? props.onClose() : null;\n    };\n\n    const editOnClick = () => {\n        props.onClose?.();\n    };\n\n    const onEditPropertyClickedHandler = () => {\n        props.onClose?.();\n    };\n\n    const originalPrice = basketContext.getTotalPrice(true);\n    const totalPayNow = basketContext.getTotalPayNow();\n    const totalPayLater = basketContext.getTotalPayLater();\n    const totalFees = basketContext.getTotalFees();\n\n    return (\n        <SimpleModal\n            open={props.isOpen}\n            title={t(Translation.Misc.Summary)}\n            onClose={onCloseModalHandler}\n            mobileFooter={\n                <div className=\"row align-items-center\">\n                    <div className=\"col-4\">\n                        <Text type={TextType.Body}>{t(Translation.Misc.Total)}</Text>\n                        <Text type={TextType.Small} color={Color.Accent}>\n                            <strong>{StringHelper.pluralWithDictAndCount(totalDays, Translation.Misc.Night, t)}</strong>\n                        </Text>\n                    </div>\n                    <div className=\"col-8 u-flex u-flex-direction-column align-items-end\">\n                        <Headline bold size=\"normal\" align={TextAlign.Right}>\n                            <Currency>{originalPrice}</Currency>\n                        </Headline>\n                        <Text color={Color.DarkGrey} type={TextType.Small} align={TextAlign.Right}>\n                            <span className=\"u-nowrap\">{t(Translation.Step.Room.RoomInfo.IncludesTaxes)}</span>\n                        </Text>\n                    </div>\n                </div>\n            }\n        >\n            <>\n                <div className=\"container\">\n                    <div className=\"row u-border-bottom u-pad-top-bottom\">\n                        <div className=\"col-6\">\n                            <Text type={TextType.Small} color={Color.Grey}>\n                                <strong>{t(Translation.Misc.CheckIn)}</strong>\n                            </Text>\n                            <Text type={TextType.Small}>\n                                {t(Translation.Misc.After)} {hotel?.checkInTime}\n                            </Text>\n                        </div>\n                        <div className=\"col-6\">\n                            <Text type={TextType.Small} color={Color.Grey}>\n                                <strong>{t(Translation.Misc.CheckOut)}</strong>\n                            </Text>\n                            <Text type={TextType.Small}>\n                                {t(Translation.Misc.Before)} {hotel?.checkOutTime}\n                            </Text>\n                        </div>\n                    </div>\n\n                    <div className=\"row u-border-bottom u-pad be-mobile-summary-select-date-header\" style={{ width: 'unset' }}>\n                        <div style={{ flex: 1 }}>\n                            <div className=\"u-flex u-flex-flex-start\">\n                                <Text className=\"select-date-header-title\">\n                                    <span\n                                        {...(basketContext.startDate\n                                            ? {\n                                                  style: {\n                                                      color: Color.Accent,\n                                                      fontWeight: 'bold',\n                                                  },\n                                              }\n                                            : {})}\n                                    >\n                                        {basketContext.startDate ? basketContext.startDate.format('MMM D') : t(Translation.Step.Date.Arrival)}\n                                    </span>\n                                </Text>\n                                <span className=\"u-marg-left-right--light\">\n                                    <Icon icon={IconType.ArrowRight2} size=\"18px\" color={Color.DarkGrey} />\n                                </span>\n                                <Text className=\"select-date-header-title\">\n                                    <span\n                                        {...(basketContext.endDate\n                                            ? {\n                                                  style: {\n                                                      color: Color.Accent,\n                                                      fontWeight: 'bold',\n                                                  },\n                                              }\n                                            : {})}\n                                    >\n                                        {basketContext.endDate ? basketContext.endDate.format('MMM D') : t(Translation.Step.Date.Departure)}\n                                    </span>\n                                </Text>\n                            </div>\n                            <Text className=\"select-date-header-subtitle\">\n                                {basketContext.getNumberOfAdults(true)},&nbsp;\n                                {basketContext.getNumberOfChildren(true)},&nbsp;\n                                {basketContext.getNumberOfRooms(true)}\n                            </Text>\n                        </div>\n                        <div className=\"u-align-right\">\n                            <Link to={getStepRoom().getStepUrl()}>\n                                <BEButton onClick={editOnClick} size=\"tiny\">\n                                    {t(Translation.Misc.Edit).toUpperCase()}\n                                </BEButton>\n                            </Link>\n                        </div>\n                    </div>\n\n                    {selectedBasketRows && selectedBasketRows.length ? (\n                        <>\n                            {selectedBasketRows.map((row: BasketRow, index: number) => {\n                                if (!row.isValid()) return;\n\n                                return (\n                                    <BESummaryRoomRow\n                                        row={row}\n                                        index={index}\n                                        key={row.getID()}\n                                        showImages={!!props.showImages}\n                                        onEditPropertyClicked={onEditPropertyClickedHandler}\n                                    />\n                                );\n                            })}\n\n                            {addons.length > 0 && (\n                                <>\n                                    <LineBreak noMargins darker />\n\n                                    <div className=\"u-marg-top\">\n                                        <Text type={TextType.Label} color={Color.DarkGrey}>\n                                            <strong>Add-on Items</strong>\n                                        </Text>\n                                    </div>\n\n                                    {addons.map((row: BasketAddonRow, index: number) => {\n                                        const onRemoveClickHandler = () => {\n                                            return basketContext.removeBasketAddonRow(row);\n                                        };\n\n                                        return <BESummaryAddonRow row={row} key={row.getID()} onRemoveClick={onRemoveClickHandler} />;\n                                    })}\n                                </>\n                            )}\n                        </>\n                    ) : (\n                        <div className=\"u-marg-bottom--heavy u-marg-top--heavy\">\n                            <div className=\"u-marg-bottom--heavy\">\n                                <Text type={TextType.Body}>{t(Translation.Step.General.YourCartIsEmpty)}</Text>\n                            </div>\n                            <div style={{ height: '150px', position: 'relative' }}>\n                                <HotelLocationMap />\n                            </div>\n                            <div className=\"u-marg-top\">\n                                <div className=\"u-marg-bottom\">\n                                    <Text bold>{hotel?.name}</Text>\n                                </div>\n                                {getAddressString(addressLine1 as string[])}\n                                {getAddressString(addressLine2 as string[])}\n                            </div>\n                        </div>\n                    )}\n\n                    {/* Fees */}\n                    {hotel?.requireDeposit && (\n                        <>\n                            <div className=\"line-break\" style={{ marginTop: 0, marginBottom: '24px' }} />\n                            <div className=\"u-flex\">\n                                <Text type={TextType.Small}> {t(Translation.Step.Room.Summary.Fees)}</Text>\n                                <Text type={TextType.Small}>\n                                    <Currency>{totalFees}</Currency>\n                                </Text>\n                            </div>\n                        </>\n                    )}\n\n                    {sortedComponents}\n\n                    <div className=\"u-marg-top--heavy u-marg-bottom--heavy\">\n                        <BESummaryPrivacyPolicy />\n                    </div>\n                    {hotel?.requireDeposit && (\n                        <div className=\"u-marg-bottom--heavy\">\n                            <div className=\"row align-items-center\">\n                                <div className=\"col-12 u-marg-top--light\">\n                                    <div className=\"u-flex\">\n                                        <Text type={TextType.Small}> {t(Translation.Step.Room.Summary.Fees)}</Text>\n                                        <Text type={TextType.Small}>\n                                            <Currency>{totalFees}</Currency>\n                                        </Text>\n                                    </div>\n                                </div>\n                                <div className=\"line-break\" style={{ marginTop: 0, marginBottom: '8px' }} />\n                                <div className=\"col-12 u-marg-top--light u-marg-bottom--light\">\n                                    <div className=\"u-flex\">\n                                        <Text type={TextType.Small} bold>\n                                            {t(Translation.Misc.PayNow)}\n                                        </Text>\n                                        <Text type={TextType.Small} bold>\n                                            <Currency>{totalPayNow}</Currency>\n                                        </Text>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </>\n        </SimpleModal>\n    );\n}\n"]}
+{"version":3,"file":"BEMobileSummaryModal.js","sourceRoot":"/","sources":["src/components/summary/BEMobileSummaryModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { OrderableReactList, useCurrentHotel, useElementSort } from '@frontend/hooks';\nimport React, { useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Link } 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 Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport HotelLocationMap from '@/components/generic/map/HotelLocationMap';\nimport SimpleModal from '@/components/generic/modal/SimpleModal';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { BESummaryLayoutOrder } from '@/components/summary/BESummary';\nimport BESummaryAddonRow from '@/components/summary/BESummaryAddonRow';\nimport { BESummaryPerkBlock } from '@/components/summary/BESummaryPerkBlock';\nimport BESummaryPrivacyPolicy from '@/components/summary/BESummaryPrivacyPolicy';\nimport BESummaryRoomRow from '@/components/summary/BESummaryRoomRow';\nimport TransportDistanceFromHotelBlock from '@/components/summary/TransportDistanceFromHotelBlock';\nimport BasketAddonRow from '@/models/BasketAddonRow';\nimport BasketRow from '@/models/BasketRow';\nimport { Color } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport StringHelper from '@/util/StringHelper';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport interface BEMobileSummaryModalProps {\n    isOpen?: boolean;\n    onClose?: () => void;\n    showImages?: boolean;\n}\n\nexport default function BEMobileSummaryModal(props: BEMobileSummaryModalProps) {\n    const basketContext = useContext(BasketContext);\n    const { hotel } = useCurrentHotel();\n\n    const selectedBasketRows = basketContext.getAllValidRows();\n\n    const addons = basketContext.basketAddonRows;\n\n    const { t } = useTranslation();\n\n    const [mobileLayout, setMobileLayout] = useState<OrderableReactList>({});\n\n    useEffect(() => {\n        // We do this hacky thing since Mobile summary & Desktop summary are almost identical, just blocks are presented differently\n        const newLayout: typeof BESummaryLayoutOrder = { ...BESummaryLayoutOrder };\n        newLayout.TransportDistanceBlock.component = (\n            <div className=\"u-flex justify-content-center u-marg-top u-marg-bottom\">\n                <div className=\"u-flex flex-row\">\n                    <TransportDistanceFromHotelBlock vertical hotel={hotel} />\n                </div>\n            </div>\n        );\n        newLayout.PerksBlock.component = <BESummaryPerkBlock size=\"mobile\" />;\n\n        setMobileLayout(newLayout);\n    }, []);\n\n    const { sortedComponents } = useElementSort(mobileLayout);\n\n    const totalDays = basketContext.endDate ? basketContext.endDate.diff(basketContext.startDate, 'day') : 0;\n\n    const addressLine1 = [hotel?.address?.line1, hotel?.address?.city];\n    const addressLine2 = [hotel?.address?.postalCode, hotel?.address?.state];\n\n    const getAddressString = (val: string[]) => {\n        const line = val.filter((it) => !!it && it !== '0').join(', ');\n\n        if (line) {\n            return <Text type={TextType.Small}>{line}</Text>;\n        }\n\n        return null;\n    };\n\n    const onCloseModalHandler = () => {\n        return props.onClose ? props.onClose() : null;\n    };\n\n    const editOnClick = () => {\n        props.onClose?.();\n    };\n\n    const onEditPropertyClickedHandler = () => {\n        props.onClose?.();\n    };\n\n    const originalPrice = basketContext.getTotalPrice(true);\n    const totalPayNow = basketContext.getTotalPayNow();\n    const totalPayLater = basketContext.getTotalPayLater();\n    const totalFees = basketContext.getTotalFees();\n\n    return (\n        <SimpleModal\n            open={props.isOpen}\n            title={t(Translation.Misc.Summary)}\n            onClose={onCloseModalHandler}\n            mobileFooter={\n                <div className=\"row align-items-center\">\n                    <div className=\"col-4\">\n                        <Text type={TextType.Body}>{t(Translation.Misc.Total)}</Text>\n                        <Text type={TextType.Small} color={Color.Accent}>\n                            <strong>{StringHelper.pluralWithDictAndCount(totalDays, Translation.Misc.Night, t)}</strong>\n                        </Text>\n                    </div>\n                    <div className=\"col-8 u-flex u-flex-direction-column align-items-end\">\n                        <Headline bold size=\"normal\" align={TextAlign.Right}>\n                            <Currency>{originalPrice}</Currency>\n                        </Headline>\n                        <Text color={Color.DarkGrey} type={TextType.Small} align={TextAlign.Right}>\n                            <span className=\"u-nowrap\">{t(Translation.Step.Room.RoomInfo.IncludesTaxes)}</span>\n                        </Text>\n                    </div>\n                </div>\n            }\n        >\n            <>\n                <div className=\"container\">\n                    <div className=\"row u-border-bottom u-pad-top-bottom\">\n                        <div className=\"col-6\">\n                            <Text type={TextType.Small} color={Color.Grey}>\n                                <strong>{t(Translation.Misc.CheckIn)}</strong>\n                            </Text>\n                            <Text type={TextType.Small}>\n                                {t(Translation.Misc.After)} {hotel?.checkInTime}\n                            </Text>\n                        </div>\n                        <div className=\"col-6\">\n                            <Text type={TextType.Small} color={Color.Grey}>\n                                <strong>{t(Translation.Misc.CheckOut)}</strong>\n                            </Text>\n                            <Text type={TextType.Small}>\n                                {t(Translation.Misc.Before)} {hotel?.checkOutTime}\n                            </Text>\n                        </div>\n                    </div>\n\n                    <div className=\"row u-border-bottom u-pad be-mobile-summary-select-date-header\" style={{ width: 'unset' }}>\n                        <div style={{ flex: 1 }}>\n                            <div className=\"u-flex u-flex-flex-start\">\n                                <Text className=\"select-date-header-title\">\n                                    <span\n                                        {...(basketContext.startDate\n                                            ? {\n                                                  style: {\n                                                      color: Color.Accent,\n                                                      fontWeight: 'bold',\n                                                  },\n                                              }\n                                            : {})}\n                                    >\n                                        {basketContext.startDate ? basketContext.startDate.format('MMM D') : t(Translation.Step.Date.Arrival)}\n                                    </span>\n                                </Text>\n                                <span className=\"u-marg-left-right--light\">\n                                    <Icon icon={IconType.ArrowRight2} size=\"18px\" color={Color.DarkGrey} />\n                                </span>\n                                <Text className=\"select-date-header-title\">\n                                    <span\n                                        {...(basketContext.endDate\n                                            ? {\n                                                  style: {\n                                                      color: Color.Accent,\n                                                      fontWeight: 'bold',\n                                                  },\n                                              }\n                                            : {})}\n                                    >\n                                        {basketContext.endDate ? basketContext.endDate.format('MMM D') : t(Translation.Step.Date.Departure)}\n                                    </span>\n                                </Text>\n                            </div>\n                            <Text className=\"select-date-header-subtitle\">\n                                {basketContext.getNumberOfAdults(true)},&nbsp;\n                                {basketContext.getNumberOfChildren(true)},&nbsp;\n                                {basketContext.getNumberOfRooms(true)}\n                            </Text>\n                        </div>\n                        <div className=\"u-align-right\">\n                            <Link to={getStepRoom().getStepUrl()}>\n                                <BEButton onClick={editOnClick} size=\"tiny\">\n                                    {t(Translation.Misc.Edit).toUpperCase()}\n                                </BEButton>\n                            </Link>\n                        </div>\n                    </div>\n\n                    {selectedBasketRows && selectedBasketRows.length ? (\n                        <>\n                            {selectedBasketRows.map((row: BasketRow, index: number) => {\n                                if (!row.isValid()) return;\n\n                                return (\n                                    <BESummaryRoomRow\n                                        row={row}\n                                        index={index}\n                                        key={row.getID()}\n                                        showImages={!!props.showImages}\n                                        onEditPropertyClicked={onEditPropertyClickedHandler}\n                                    />\n                                );\n                            })}\n\n                            {addons.length > 0 && (\n                                <>\n                                    <LineBreak noMargins darker />\n\n                                    <div className=\"u-marg-top\">\n                                        <Text type={TextType.Label} color={Color.DarkGrey}>\n                                            <strong>Add-on Items</strong>\n                                        </Text>\n                                    </div>\n\n                                    {addons.map((row: BasketAddonRow, index: number) => {\n                                        const onRemoveClickHandler = () => {\n                                            return basketContext.removeBasketAddonRow(row);\n                                        };\n\n                                        return <BESummaryAddonRow row={row} key={row.getID()} onRemoveClick={onRemoveClickHandler} />;\n                                    })}\n                                </>\n                            )}\n                        </>\n                    ) : (\n                        <div className=\"u-marg-bottom--heavy u-marg-top--heavy\">\n                            <div className=\"u-marg-bottom--heavy\">\n                                <Text type={TextType.Body}>{t(Translation.Step.General.YourCartIsEmpty)}</Text>\n                            </div>\n                            <div style={{ height: '150px', position: 'relative' }}>\n                                <HotelLocationMap />\n                            </div>\n                            <div className=\"u-marg-top\">\n                                <div className=\"u-marg-bottom\">\n                                    <Text bold>{hotel?.name}</Text>\n                                </div>\n                                {getAddressString(addressLine1 as string[])}\n                                {getAddressString(addressLine2 as string[])}\n                            </div>\n                        </div>\n                    )}\n\n                    {/* Fees */}\n                    {hotel?.requireDeposit && (\n                        <>\n                            <div className=\"line-break\" style={{ marginTop: 0, marginBottom: '24px' }} />\n                            <div className=\"u-flex\">\n                                <Text type={TextType.Small}> {t(Translation.Step.Room.Summary.Fees)}</Text>\n                                <Text type={TextType.Small}>\n                                    <Currency>{totalFees}</Currency>\n                                </Text>\n                            </div>\n                        </>\n                    )}\n\n                    {sortedComponents}\n\n                    <div className=\"u-marg-top--heavy u-marg-bottom--heavy\">\n                        <BESummaryPrivacyPolicy />\n                    </div>\n                    {hotel?.requireDeposit && (\n                        <div className=\"u-marg-bottom--heavy\">\n                            <div className=\"row align-items-center\">\n                                <div className=\"col-12 u-marg-top--light\">\n                                    <div className=\"u-flex\">\n                                        <Text type={TextType.Small}> {t(Translation.Step.Room.Summary.Fees)}</Text>\n                                        <Text type={TextType.Small}>\n                                            <Currency>{totalFees}</Currency>\n                                        </Text>\n                                    </div>\n                                </div>\n                                <div className=\"line-break\" style={{ marginTop: 0, marginBottom: '8px' }} />\n                                <div className=\"col-12 u-marg-top--light u-marg-bottom--light\">\n                                    <div className=\"u-flex\">\n                                        <Text type={TextType.Small} bold>\n                                            {t(Translation.Misc.PayNow)}\n                                        </Text>\n                                        <Text type={TextType.Small} bold>\n                                            <Currency>{totalPayNow}</Currency>\n                                        </Text>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/components/summary/TransportDistanceFromHotelBlock.js

@@ -36,43 +36,58 @@ const Color_1 = require("../../util/Color");
 const TextAlignment_1 = require("../../util/TextAlignment");
 function TransportDistanceFromHotelBlock(props) {
     const { transportDistances } = (0, react_1.useContext)(contexts_1.HotelOverridesContext);
+    const { vertical, tightMargins } = props;
     const distanceValues = [
+        { icon: Icon_1.IconType.Airplane, name: 'Airport', distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.plane },
+        { icon: Icon_1.IconType.Train, name: 'Train', distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.train },
+        { icon: Icon_1.IconType.Bus, name: 'Bus', distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.bus },
+        { icon: Icon_1.IconType.Taxi, name: 'Taxi', distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.taxi },
         {
-            icon: Icon_1.IconType.Airplane,
-            name: 'Airport',
-            distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.plane,
+            icon: Icon_1.IconType.Car,
+            name: 'Car',
+            distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.car,
+            title: 'drive',
+            subTitle: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.carSubTitle,
         },
         {
-            icon: Icon_1.IconType.Train,
-            name: 'Train',
-            distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.train,
+            icon: Icon_1.IconType.Ferry,
+            name: 'Ferry',
+            distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.ferry,
+            title: 'ferry',
+            subTitle: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.ferrySubTitle,
         },
         {
-            icon: Icon_1.IconType.Bus,
-            name: 'Bus',
-            distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.bus,
+            icon: Icon_1.IconType.Location,
+            name: 'Location',
+            distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.location,
+            title: 'drive',
+            subTitle: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.locationSubTitle,
         },
-        {
-            icon: Icon_1.IconType.Taxi,
-            name: 'Taxi',
-            distance: transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.taxi,
-        },
-    ].filter((distanceValue) => !!distanceValue.distance);
-    const tightMarginClass = props.tightMargins ? 'u-marg-left-right' : 'u-marg-left-right--heavy';
-    return (react_1.default.createElement(react_1.default.Fragment, null, distanceValues.map((d, index) => {
-        return (react_1.default.createElement("div", { className: props.vertical ? 'u-flex flex-column u-marg-top-bottom' : `${tightMarginClass} u-marg-left-right@l-`, key: index },
-            react_1.default.createElement(Text_1.default, { align: props.vertical ? TextAlignment_1.TextAlign.Center : undefined, type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey },
-                react_1.default.createElement("strong", null, d.name)),
-            react_1.default.createElement("div", { className: (0, classnames_1.default)('u-flex u-marg-top--light', {
-                    'justify-content-start flex-column align-items-center': props.vertical,
-                    'align-items-end': !props.vertical,
-                }) },
-                react_1.default.createElement(Icon_1.default, { icon: d.icon, size: "1.3em" }),
-                react_1.default.createElement("span", { className: props.vertical ? 'u-marg-top--light' : 'u-marg-left--light' },
-                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                        react_1.default.createElement("span", { className: "u-nowrap" },
-                            react_1.default.createElement(Distance_1.default, { distance: d.distance })))))));
-    })));
+    ].filter(({ distance }) => !!distance);
+    const tightMarginClass = tightMargins ? 'u-marg-left-right' : 'u-marg-left-right--heavy';
+    return (transportDistances === null || transportDistances === void 0 ? void 0 : transportDistances.displayCard) ? (react_1.default.createElement("div", { className: "rs-transport-distances d-flex flex-wrap justify-content-between", style: { width: '100%' } }, distanceValues.map((distanceValue) => (react_1.default.createElement(DistanceDisplayCard, Object.assign({ key: distanceValue.name }, distanceValue, { vertical: vertical, totalValues: distanceValues.length })))))) : (react_1.default.createElement(react_1.default.Fragment, null, distanceValues.map((distanceValue) => (react_1.default.createElement(DistanceDisplay, Object.assign({ key: distanceValue.name }, distanceValue, { vertical: vertical, tightMarginClass: tightMarginClass }))))));
 }
 exports.default = TransportDistanceFromHotelBlock;
+const DistanceDisplayCard = ({ icon, distance, title, subTitle, totalValues, vertical }) => (react_1.default.createElement("div", { style: Object.assign({}, (!vertical && {
+        minWidth: `${100 / totalValues}%`,
+    })), className: "d-flex flex-row transport-card" },
+    react_1.default.createElement("div", { style: { paddingRight: '4px' }, className: "transport-card-icon" },
+        react_1.default.createElement(Icon_1.default, { icon: icon, size: "1.3em", color: Color_1.Color.Accent })),
+    react_1.default.createElement("div", { className: "d-flex flex-column transport-card-details" },
+        react_1.default.createElement(Text_1.default, { bold: true, align: TextAlignment_1.TextAlign.Left, type: vertical ? Text_1.TextType.Small : Text_1.TextType.Body, color: Color_1.Color.Accent, className: "transport-card-title" },
+            react_1.default.createElement(Distance_1.default, { distance: distance, displayCard: true }),
+            " ", title !== null && title !== void 0 ? title : ''),
+        react_1.default.createElement(Text_1.default, { align: TextAlignment_1.TextAlign.Left, type: vertical ? Text_1.TextType.Label : Text_1.TextType.Small, color: Color_1.Color.Graphite, className: "transport-card-subtitle" }, subTitle))));
+const DistanceDisplay = ({ name, icon, distance, vertical, tightMarginClass }) => (react_1.default.createElement("div", { className: vertical ? 'u-flex flex-column u-marg-top-bottom' : `${tightMarginClass} u-marg-left-right@l-` },
+    react_1.default.createElement(Text_1.default, { align: vertical ? TextAlignment_1.TextAlign.Center : undefined, type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey },
+        react_1.default.createElement("strong", null, name)),
+    react_1.default.createElement("div", { className: (0, classnames_1.default)('u-flex u-marg-top--light', {
+            'justify-content-start flex-column align-items-center': vertical,
+            'align-items-end': !vertical,
+        }) },
+        react_1.default.createElement(Icon_1.default, { icon: icon, size: "1.3em" }),
+        react_1.default.createElement("span", { className: vertical ? 'u-marg-top--light' : 'u-marg-left--light' },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                react_1.default.createElement("span", { className: "u-nowrap" },
+                    react_1.default.createElement(Distance_1.default, { distance: distance })))))));
 //# sourceMappingURL=TransportDistanceFromHotelBlock.js.map

package/dist/src/components/summary/TransportDistanceFromHotelBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransportDistanceFromHotelBlock.js","sourceRoot":"/","sources":["src/components/summary/TransportDistanceFromHotelBlock.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAA2D;AAC3D,4DAAoC;AACpC,+CAA0C;AAE1C,6EAAqD;AACrD,uEAAgE;AAChE,kEAA2D;AAE3D,wCAAqC;AACrC,wDAAiD;AAWjD,SAAwB,+BAA+B,CAAC,KAA2C;IAC/F,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAEjE,MAAM,cAAc,GAAG;QACnB;YACI,IAAI,EAAE,eAAQ,CAAC,QAAQ;YACvB,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK;SACtC;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,KAAK;YACpB,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK;SACtC;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,GAAG;YAClB,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG;SACpC;QACD;YACI,IAAI,EAAE,eAAQ,CAAC,IAAI;YACnB,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI;SACrC;KACJ,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEtD,MAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,0BAA0B,CAAC;IAE/F,OAAO,CACH,8DACK,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QAC7B,OAAO,CACH,uCAAK,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,GAAG,gBAAgB,uBAAuB,EAAE,GAAG,EAAE,KAAK;YAC5H,8BAAC,cAAI,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,yBAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ;gBACnG,8CAAS,CAAC,CAAC,IAAI,CAAU,CACtB;YACP,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,0BAA0B,EAAE;oBAC9C,sDAAsD,EAAE,KAAK,CAAC,QAAQ;oBACtE,iBAAiB,EAAE,CAAC,KAAK,CAAC,QAAQ;iBACrC,CAAC;gBAEF,8BAAC,cAAI,IAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG;gBACnC,wCAAM,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,oBAAoB;oBACxE,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACtB,wCAAM,SAAS,EAAC,UAAU;4BACtB,8BAAC,kBAAQ,IAAC,QAAQ,EAAE,CAAC,CAAC,QAA2B,GAAI,CAClD,CACJ,CACJ,CACL,CACJ,CACT,CAAC;IACN,CAAC,CAAC,CACH,CACN,CAAC;AACN,CAAC;AAxDD,kDAwDC","sourcesContent":["import { HotelOverridesContext } from '@frontend/contexts';\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\n\nimport Distance from '@/components/generic/Distance';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport type { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\ninterface TransportDistanceFromHotelBlockProps {\n    vertical?: boolean;\n\n    tightMargins?: boolean;\n    distanceOverrides?: any;\n\n    hotel?: Hotel;\n}\n\nexport default function TransportDistanceFromHotelBlock(props: TransportDistanceFromHotelBlockProps) {\n    const { transportDistances } = useContext(HotelOverridesContext);\n\n    const distanceValues = [\n        {\n            icon: IconType.Airplane,\n            name: 'Airport',\n            distance: transportDistances?.plane,\n        },\n        {\n            icon: IconType.Train,\n            name: 'Train',\n            distance: transportDistances?.train,\n        },\n        {\n            icon: IconType.Bus,\n            name: 'Bus',\n            distance: transportDistances?.bus,\n        },\n        {\n            icon: IconType.Taxi,\n            name: 'Taxi',\n            distance: transportDistances?.taxi,\n        },\n    ].filter((distanceValue) => !!distanceValue.distance);\n\n    const tightMarginClass = props.tightMargins ? 'u-marg-left-right' : 'u-marg-left-right--heavy';\n\n    return (\n        <>\n            {distanceValues.map((d, index) => {\n                return (\n                    <div className={props.vertical ? 'u-flex flex-column u-marg-top-bottom' : `${tightMarginClass} u-marg-left-right@l-`} key={index}>\n                        <Text align={props.vertical ? TextAlign.Center : undefined} type={TextType.Small} color={Color.DarkGrey}>\n                            <strong>{d.name}</strong>\n                        </Text>\n                        <div\n                            className={classNames('u-flex u-marg-top--light', {\n                                'justify-content-start flex-column align-items-center': props.vertical,\n                                'align-items-end': !props.vertical,\n                            })}\n                        >\n                            <Icon icon={d.icon} size=\"1.3em\" />\n                            <span className={props.vertical ? 'u-marg-top--light' : 'u-marg-left--light'}>\n                                <Text type={TextType.Small}>\n                                    <span className=\"u-nowrap\">\n                                        <Distance distance={d.distance as string | number} />\n                                    </span>\n                                </Text>\n                            </span>\n                        </div>\n                    </div>\n                );\n            })}\n        </>\n    );\n}\n"]}
+{"version":3,"file":"TransportDistanceFromHotelBlock.js","sourceRoot":"/","sources":["src/components/summary/TransportDistanceFromHotelBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HotelOverridesContext } from '@frontend/contexts';\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\n\nimport Distance from '@/components/generic/Distance';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport type { Hotel } from '@/models/Client/Hotel/Hotel';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\ninterface TransportDistanceFromHotelBlockProps {\n    vertical?: boolean;\n\n    tightMargins?: boolean;\n    distanceOverrides?: any;\n\n    hotel?: Hotel;\n}\ninterface IDistanceValue {\n    icon: IconType;\n    name: string;\n    distance: string | number;\n    title?: string;\n    subTitle?: string;\n}\nexport default function TransportDistanceFromHotelBlock(props: TransportDistanceFromHotelBlockProps) {\n    const { transportDistances } = useContext(HotelOverridesContext);\n    const { vertical, tightMargins } = props;\n\n    const distanceValues = [\n        { icon: IconType.Airplane, name: 'Airport', distance: transportDistances?.plane },\n        { icon: IconType.Train, name: 'Train', distance: transportDistances?.train },\n        { icon: IconType.Bus, name: 'Bus', distance: transportDistances?.bus },\n        { icon: IconType.Taxi, name: 'Taxi', distance: transportDistances?.taxi },\n        {\n            icon: IconType.Car,\n            name: 'Car',\n            distance: transportDistances?.car,\n            title: 'drive',\n            subTitle: transportDistances?.carSubTitle,\n        },\n        {\n            icon: IconType.Ferry,\n            name: 'Ferry',\n            distance: transportDistances?.ferry,\n            title: 'ferry',\n            subTitle: transportDistances?.ferrySubTitle,\n        },\n        {\n            icon: IconType.Location,\n            name: 'Location',\n            distance: transportDistances?.location,\n            title: 'drive',\n            subTitle: transportDistances?.locationSubTitle,\n        },\n    ].filter(({ distance }) => !!distance) as IDistanceValue[];\n\n    const tightMarginClass = tightMargins ? 'u-marg-left-right' : 'u-marg-left-right--heavy';\n\n    return transportDistances?.displayCard ? (\n        <div className=\"rs-transport-distances d-flex flex-wrap justify-content-between\" style={{ width: '100%' }}>\n            {distanceValues.map((distanceValue) => (\n                <DistanceDisplayCard key={distanceValue.name} {...distanceValue} vertical={vertical} totalValues={distanceValues.length} />\n            ))}\n        </div>\n    ) : (\n        <>\n            {distanceValues.map((distanceValue) => (\n                <DistanceDisplay key={distanceValue.name} {...distanceValue} vertical={vertical} tightMarginClass={tightMarginClass} />\n            ))}\n        </>\n    );\n}\n\nconst DistanceDisplayCard = ({ icon, distance, title, subTitle, totalValues, vertical }: IDistanceValue & { totalValues: number; vertical?: boolean }) => (\n    <div\n        style={{\n            ...(!vertical && {\n                minWidth: `${100 / totalValues}%`,\n            }),\n        }}\n        className=\"d-flex flex-row transport-card\"\n    >\n        <div style={{ paddingRight: '4px' }} className=\"transport-card-icon\">\n            <Icon icon={icon} size=\"1.3em\" color={Color.Accent} />\n        </div>\n        <div className=\"d-flex flex-column transport-card-details\">\n            <Text bold align={TextAlign.Left} type={vertical ? TextType.Small : TextType.Body} color={Color.Accent} className=\"transport-card-title\">\n                <Distance distance={distance} displayCard /> {title ?? ''}\n            </Text>\n            <Text align={TextAlign.Left} type={vertical ? TextType.Label : TextType.Small} color={Color.Graphite} className=\"transport-card-subtitle\">\n                {subTitle}\n            </Text>\n        </div>\n    </div>\n);\n\nconst DistanceDisplay = ({ name, icon, distance, vertical, tightMarginClass }: IDistanceValue & { vertical?: boolean; tightMarginClass: string }) => (\n    <div className={vertical ? 'u-flex flex-column u-marg-top-bottom' : `${tightMarginClass} u-marg-left-right@l-`}>\n        <Text align={vertical ? TextAlign.Center : undefined} type={TextType.Small} color={Color.DarkGrey}>\n            <strong>{name}</strong>\n        </Text>\n        <div\n            className={classNames('u-flex u-marg-top--light', {\n                'justify-content-start flex-column align-items-center': vertical,\n                'align-items-end': !vertical,\n            })}\n        >\n            <Icon icon={icon} size=\"1.3em\" />\n            <span className={vertical ? 'u-marg-top--light' : 'u-marg-left--light'}>\n                <Text type={TextType.Small}>\n                    <span className=\"u-nowrap\">\n                        <Distance distance={distance} />\n                    </span>\n                </Text>\n            </span>\n        </div>\n    </div>\n);\n"]}

package/dist/src/index.d.ts

@@ -18,13 +18,13 @@ export * from './components/generic/Select/index';
 export * from './components/generic/Text';
 export { default as TextArea } from './components/generic/TextArea';
 export { default as TextBox } from './components/generic/TextBox';
+export { default as AddonsNotFoundBlock, BE_NO_ADDONS_FOUND_BLOCK } from './components/steps/addons/AddonsNotFoundBlock';
 export * from './components/steps/confirmation/StepConfirmationCommentsComponent';
 export { default as StepConfirmationCountrySelector } from './components/steps/confirmation/StepConfirmationCountrySelector';
 export type { HotelInfoPerkRowProps } from './components/steps/hotel/HotelInfoPerksRow';
 export { BE_HOTEL_INFO_PERK_ROW } from './components/steps/hotel/HotelInfoPerksRow';
 export { default as HotelInfoPerksRow } from './components/steps/hotel/HotelInfoPerksRow';
 export { BE_NO_ROOMS_FOUND_BLOCK } from './components/steps/room/NoRoomsFoundBlock';
-export { default as AddonsNotFoundBlock, BE_NO_ADDONS_FOUND_BLOCK } from './components/steps/addons/AddonsNotFoundBlock';
 export { default as NoRoomsFoundBlock } from './components/steps/room/NoRoomsFoundBlock';
 export type { RoomModalPerkRowProps } from './components/steps/room/RoomModalPerkRow';
 export { BE_ROOM_MODAL_PERK_ROW } from './components/steps/room/RoomModalPerkRow';

package/dist/src/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HotelDataSource = exports.API = exports.useFormContext = exports.DataLayer = exports.SessionProvider = exports.RoomstayThemeEngine = exports.withDI = exports.registerReplacement = exports.ShowIATANumberOnCheckoutFeature = exports.RoomUpsellFeature = exports.RoomRateReadMoreVersionFeature = exports.PlanPayPricePreviewFeature = exports.InlineAddonStepFeature = exports.GuestTitleFieldFeature = exports.FullPageEngineSmallSpacingFeature = exports.FeaturedPromoFeature = exports.E164PhoneNumberFieldFeature = exports.DerbysoftClickTrackingFeature = exports.DatePickerTypeFeature = exports.ConfirmationVerifyFeature = exports.RoomSort = exports.RatePillProvider = exports.FeatureProvider = exports.CurrencyProvider = exports.SmallSpinner = exports.StepNoRoomBestRateAlert = exports.RoomModalPerkRow = exports.BE_ROOM_MODAL_PERK_ROW = exports.NoRoomsFoundBlock = exports.BE_NO_ADDONS_FOUND_BLOCK = exports.AddonsNotFoundBlock = exports.BE_NO_ROOMS_FOUND_BLOCK = exports.HotelInfoPerksRow = exports.BE_HOTEL_INFO_PERK_ROW = exports.StepConfirmationCountrySelector = exports.TextBox = exports.TextArea = exports.RadioFields = exports.LineBreak = exports.InputGroup = exports.Icon = exports.Headline = exports.Currency = exports.Checkbox = exports.BEButton = exports.Alert = exports.AutoAutoHeight = exports.Link = exports.useTranslation = exports.react = void 0;
+exports.HotelDataSource = exports.API = exports.useFormContext = exports.DataLayer = exports.SessionProvider = exports.RoomstayThemeEngine = exports.withDI = exports.registerReplacement = exports.ShowIATANumberOnCheckoutFeature = exports.RoomUpsellFeature = exports.RoomRateReadMoreVersionFeature = exports.PlanPayPricePreviewFeature = exports.InlineAddonStepFeature = exports.GuestTitleFieldFeature = exports.FullPageEngineSmallSpacingFeature = exports.FeaturedPromoFeature = exports.E164PhoneNumberFieldFeature = exports.DerbysoftClickTrackingFeature = exports.DatePickerTypeFeature = exports.ConfirmationVerifyFeature = exports.RoomSort = exports.RatePillProvider = exports.FeatureProvider = exports.CurrencyProvider = exports.SmallSpinner = exports.StepNoRoomBestRateAlert = exports.RoomModalPerkRow = exports.BE_ROOM_MODAL_PERK_ROW = exports.NoRoomsFoundBlock = exports.BE_NO_ROOMS_FOUND_BLOCK = exports.HotelInfoPerksRow = exports.BE_HOTEL_INFO_PERK_ROW = exports.StepConfirmationCountrySelector = exports.BE_NO_ADDONS_FOUND_BLOCK = exports.AddonsNotFoundBlock = exports.TextBox = exports.TextArea = exports.RadioFields = exports.LineBreak = exports.InputGroup = exports.Icon = exports.Headline = exports.Currency = exports.Checkbox = exports.BEButton = exports.Alert = exports.AutoAutoHeight = exports.Link = exports.useTranslation = exports.react = void 0;
 exports.Version = exports.events = exports.RoomstayEventManager = exports.StepManager = exports.StepThanks = exports.StepRoom = exports.StepHotel = exports.StepGroupedRoom = exports.StepDate = exports.StepConfirmation = exports.StepAddon = void 0;
 // TODO: Look into resolving this.
 const react_1 = __importDefault(require("react"));
@@ -61,6 +61,9 @@ var TextArea_1 = require("./components/generic/TextArea");
 Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return __importDefault(TextArea_1).default; } });
 var TextBox_1 = require("./components/generic/TextBox");
 Object.defineProperty(exports, "TextBox", { enumerable: true, get: function () { return __importDefault(TextBox_1).default; } });
+var AddonsNotFoundBlock_1 = require("./components/steps/addons/AddonsNotFoundBlock");
+Object.defineProperty(exports, "AddonsNotFoundBlock", { enumerable: true, get: function () { return __importDefault(AddonsNotFoundBlock_1).default; } });
+Object.defineProperty(exports, "BE_NO_ADDONS_FOUND_BLOCK", { enumerable: true, get: function () { return AddonsNotFoundBlock_1.BE_NO_ADDONS_FOUND_BLOCK; } });
 __exportStar(require("./components/steps/confirmation/StepConfirmationCommentsComponent"), exports);
 var StepConfirmationCountrySelector_1 = require("./components/steps/confirmation/StepConfirmationCountrySelector");
 Object.defineProperty(exports, "StepConfirmationCountrySelector", { enumerable: true, get: function () { return __importDefault(StepConfirmationCountrySelector_1).default; } });
@@ -70,9 +73,6 @@ var HotelInfoPerksRow_2 = require("./components/steps/hotel/HotelInfoPerksRow");
 Object.defineProperty(exports, "HotelInfoPerksRow", { enumerable: true, get: function () { return __importDefault(HotelInfoPerksRow_2).default; } });
 var NoRoomsFoundBlock_1 = require("./components/steps/room/NoRoomsFoundBlock");
 Object.defineProperty(exports, "BE_NO_ROOMS_FOUND_BLOCK", { enumerable: true, get: function () { return NoRoomsFoundBlock_1.BE_NO_ROOMS_FOUND_BLOCK; } });
-var AddonsNotFoundBlock_1 = require("./components/steps/addons/AddonsNotFoundBlock");
-Object.defineProperty(exports, "AddonsNotFoundBlock", { enumerable: true, get: function () { return __importDefault(AddonsNotFoundBlock_1).default; } });
-Object.defineProperty(exports, "BE_NO_ADDONS_FOUND_BLOCK", { enumerable: true, get: function () { return AddonsNotFoundBlock_1.BE_NO_ADDONS_FOUND_BLOCK; } });
 var NoRoomsFoundBlock_2 = require("./components/steps/room/NoRoomsFoundBlock");
 Object.defineProperty(exports, "NoRoomsFoundBlock", { enumerable: true, get: function () { return __importDefault(NoRoomsFoundBlock_2).default; } });
 var RoomModalPerkRow_1 = require("./components/steps/room/RoomModalPerkRow");