@roomstay/frontend 2.1.32 → 2.2.0

package/dist/src/components/generic/Event/EventCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventCarousel.js","sourceRoot":"/","sources":["src/components/generic/Event/EventCarousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, PropsWithChildren, useMemo, useState } from 'react';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { Navigation } from 'swiper';\nimport EventCard from '@/components/generic/Event/EventCard';\nimport styles from './EventCarousel.module.scss';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Headline from '@/components/generic/Headline';\nimport { Color } from '@/util/Color';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Text, { TextType } from '@/components/generic/Text';\nimport classNames from 'classnames';\nimport { IRoomstayEvent } from '@roomstay/core';\n\nexport interface EventCarouselProps {\n    small?: boolean;\n    data?: IRoomstayEvent[];\n    defaultExpanded?: boolean;\n}\n\nconst EventCarousel: FC<EventCarouselProps> = ({ small = false, data = [], defaultExpanded = false }) => {\n    const [expanded, setExpanded] = useState<boolean>(defaultExpanded);\n    const commonTitleProps = useMemo(\n        () => ({\n            color: Color.Accent,\n            className: classNames({\n                [styles.titleWidthLimited]: small,\n            }),\n        }),\n        [small]\n    );\n    const headlineProps = useMemo(\n        () =>\n            small\n                ? {\n                      ...commonTitleProps,\n                      type: TextType.Body,\n                      bold: true,\n                  }\n                : {\n                      ...commonTitleProps,\n                      size: 'large',\n                  },\n        [small]\n    );\n\n    const [TitleComponent, titleProps]: [FC, PropsWithChildren<any>] = useMemo(() => [small ? Text : Headline, headlineProps], [small]);\n\n    return (\n        <div className=\"u-w-fluid u-pad-bottom\">\n            <div className=\"container\">\n                <div\n                    className={styles.headline}\n                    onClick={() => {\n                        setExpanded(!expanded);\n                    }}\n                >\n                    <div\n                        className={classNames('u-flex u-w-100', 'u-flex-nowrap', 'u-flex-gap', 'u-flex-align-center', {\n                            'u-flex-justify-flex-start': !small,\n                            'u-flex-justify-space-between': small,\n                        })}\n                    >\n                        <TitleComponent {...titleProps}>We recommend during your stay</TitleComponent>\n                        <Icon icon={!expanded ? IconType.ArrowDown3 : IconType.ArrowUp3} color={Color.Accent} size={small ? '18px' : '32px'} />\n                    </div>\n                </div>\n            </div>\n            <AutoAutoHeight open={expanded} startOpen={expanded}>\n                <div className=\"u-pad-top--medium\">\n                    <div className={styles.swiperContainer}>\n                        <div className=\"container\">\n                            <Swiper navigation={!small} modules={[Navigation]} spaceBetween={small ? 20 : 30} slidesPerView={small ? 1.2 : 'auto'}>\n                                {data.map((event, index) => (\n                                    <SwiperSlide\n                                        style={{\n                                            width: small ? undefined : 524,\n                                        }}\n                                        key={index}\n                                    >\n                                        <EventCard ratio={small ? 380 / 345 : 380 / 524} event={event} />\n                                    </SwiperSlide>\n                                ))}\n                            </Swiper>\n                        </div>\n                    </div>\n                </div>\n            </AutoAutoHeight>\n        </div>\n    );\n};\n\nexport default EventCarousel;\n"]}

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

@@ -5,11 +5,11 @@ import { PropsWithChildren } from 'react';
 export interface HeadlineProps extends PropsWithChildren<any> {
     bold?: boolean;
     lineThrough?: boolean;
-    size?: 'extra-large' | 'large' | 'normal';
+    size?: 'extra-large' | 'large' | 'normal' | 'larger';
     lineHeight?: '1em' | 'normal';
     color?: Color;
-    [x: string]: React.ReactNode;
     align?: TextAlign;
     className?: string;
+    [x: string]: React.ReactNode;
 }
 export default function Headline(props: HeadlineProps): JSX.Element;

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

@@ -18,13 +18,17 @@ function Headline(props) {
     if (props.color) {
         styles.color = props.color;
     }
+    let Component = 'h4';
     if (defaultedProps.size === 'extra-large') {
-        return (react_1.default.createElement("h1", { className: classes, style: styles }, props.children));
+        Component = 'h1';
     }
-    if (defaultedProps.size === 'large') {
-        return (react_1.default.createElement("h2", { className: classes, style: styles }, props.children));
+    else if (defaultedProps.size === 'larger') {
+        Component = 'h2';
     }
-    return (react_1.default.createElement("h3", { className: classes, style: styles }, props.children));
+    else if (defaultedProps.size === 'large') {
+        Component = 'h3';
+    }
+    return (react_1.default.createElement(Component, { className: classes, style: styles }, props.children));
 }
 exports.default = Headline;
 //# sourceMappingURL=Headline.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Headline.js","sourceRoot":"/","sources":["src/components/generic/Headline.tsx"],"names":[],"mappings":";;;;;AAEA,kDAA0B;AAC1B,4DAAoC;AAepC,SAAwB,QAAQ,CAAC,KAAoB;IACjD,MAAM,cAAc,mBAChB,IAAI,EAAE,QAAQ,IACX,KAAK,CACX,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE;QACrD,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,cAAc,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;QAC7D,gBAAgB,EAAE,cAAc,CAAC,WAAW;QAC5C,CAAC,KAAK,cAAc,CAAC,IAAI,EAAE,CAAC,EAAE,cAAc,CAAC,IAAI;QACjD,UAAU,EAAE,KAAK,CAAC,UAAU,KAAK,KAAK;KACzC,CAAC,CAAC;IAEH,MAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,IAAI,KAAK,CAAC,KAAK,EAAE;QACb,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;KAC9B;IAED,IAAI,cAAc,CAAC,IAAI,KAAK,aAAa,EAAE;QACvC,OAAO,CACH,sCAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAChC,KAAK,CAAC,QAAQ,CACd,CACR,CAAC;KACL;IAED,IAAI,cAAc,CAAC,IAAI,KAAK,OAAO,EAAE;QACjC,OAAO,CACH,sCAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAChC,KAAK,CAAC,QAAQ,CACd,CACR,CAAC;KACL;IAED,OAAO,CACH,sCAAI,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAChC,KAAK,CAAC,QAAQ,CACd,CACR,CAAC;AACN,CAAC;AAzCD,2BAyCC","sourcesContent":["import { TextAlign } from '@/util/TextAlignment';\nimport { Color } from '@/util/Color';\nimport React from 'react';\nimport classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nexport interface HeadlineProps extends PropsWithChildren<any> {\n    bold?: boolean;\n    lineThrough?: boolean;\n    size?: 'extra-large' | 'large' | 'normal';\n    lineHeight?: '1em' | 'normal';\n    color?: Color;\n    [x: string]: React.ReactNode;\n    align?: TextAlign;\n\n    className?: string;\n}\n\nexport default function Headline(props: HeadlineProps) {\n    const defaultedProps: HeadlineProps = {\n        size: 'normal',\n        ...props,\n    };\n\n    const classes = classNames(props.className, props.align, {\n        headline: true,\n        '--bold': defaultedProps.bold || props.size === 'extra-large',\n        '--line-through': defaultedProps.lineThrough,\n        [`--${defaultedProps.size}`]: defaultedProps.size,\n        'u-lh-1em': props.lineHeight === '1em',\n    });\n\n    const styles: any = {};\n\n    if (props.color) {\n        styles.color = props.color;\n    }\n\n    if (defaultedProps.size === 'extra-large') {\n        return (\n            <h1 className={classes} style={styles}>\n                {props.children}\n            </h1>\n        );\n    }\n\n    if (defaultedProps.size === 'large') {\n        return (\n            <h2 className={classes} style={styles}>\n                {props.children}\n            </h2>\n        );\n    }\n\n    return (\n        <h3 className={classes} style={styles}>\n            {props.children}\n        </h3>\n    );\n}\n"]}
+{"version":3,"file":"Headline.js","sourceRoot":"/","sources":["src/components/generic/Headline.tsx"],"names":[],"mappings":";;;;;AAEA,kDAAkC;AAClC,4DAAoC;AAepC,SAAwB,QAAQ,CAAC,KAAoB;IACjD,MAAM,cAAc,mBAChB,IAAI,EAAE,QAAQ,IACX,KAAK,CACX,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE;QACrD,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,cAAc,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;QAC7D,gBAAgB,EAAE,cAAc,CAAC,WAAW;QAC5C,CAAC,KAAK,cAAc,CAAC,IAAI,EAAE,CAAC,EAAE,cAAc,CAAC,IAAI;QACjD,UAAU,EAAE,KAAK,CAAC,UAAU,KAAK,KAAK;KACzC,CAAC,CAAC;IAEH,MAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,IAAI,KAAK,CAAC,KAAK,EAAE;QACb,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;KAC9B;IAED,IAAI,SAAS,GAAgC,IAAI,CAAC;IAElD,IAAI,cAAc,CAAC,IAAI,KAAK,aAAa,EAAE;QACvC,SAAS,GAAG,IAAI,CAAC;KACpB;SAAM,IAAI,cAAc,CAAC,IAAI,KAAK,QAAQ,EAAE;QACzC,SAAS,GAAG,IAAI,CAAC;KACpB;SAAM,IAAI,cAAc,CAAC,IAAI,KAAK,OAAO,EAAE;QACxC,SAAS,GAAG,IAAI,CAAC;KACpB;IAED,OAAO,CACH,8BAAC,SAAS,IAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IACvC,KAAK,CAAC,QAAQ,CACP,CACf,CAAC;AACN,CAAC;AAnCD,2BAmCC","sourcesContent":["import { TextAlign } from '@/util/TextAlignment';\nimport { Color } from '@/util/Color';\nimport React, { FC } from 'react';\nimport classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nexport interface HeadlineProps extends PropsWithChildren<any> {\n    bold?: boolean;\n    lineThrough?: boolean;\n    size?: 'extra-large' | 'large' | 'normal' | 'larger';\n    lineHeight?: '1em' | 'normal';\n    color?: Color;\n    align?: TextAlign;\n    className?: string;\n\n    [x: string]: React.ReactNode;\n}\n\nexport default function Headline(props: HeadlineProps) {\n    const defaultedProps: HeadlineProps = {\n        size: 'normal',\n        ...props,\n    };\n\n    const classes = classNames(props.className, props.align, {\n        headline: true,\n        '--bold': defaultedProps.bold || props.size === 'extra-large',\n        '--line-through': defaultedProps.lineThrough,\n        [`--${defaultedProps.size}`]: defaultedProps.size,\n        'u-lh-1em': props.lineHeight === '1em',\n    });\n\n    const styles: any = {};\n\n    if (props.color) {\n        styles.color = props.color;\n    }\n\n    let Component: keyof JSX.IntrinsicElements = 'h4';\n\n    if (defaultedProps.size === 'extra-large') {\n        Component = 'h1';\n    } else if (defaultedProps.size === 'larger') {\n        Component = 'h2';\n    } else if (defaultedProps.size === 'large') {\n        Component = 'h3';\n    }\n\n    return (\n        <Component className={classes} style={styles}>\n            {props.children}\n        </Component>\n    );\n}\n"]}

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

@@ -65,7 +65,11 @@ export declare enum IconType {
     Champagne = "Champagne",
     Eye = "Eye",
     EyeBlocked = "EyeBlocked",
-    Delete = "Delete"
+    Delete = "Delete",
+    ArrowLeft3 = "Arrow-3-Left",
+    ArrowUp3 = "Arrow-3-Up",
+    ArrowRight3 = "Arrow-3-Right",
+    ArrowDown3 = "Arrow-3-Down"
 }
 export interface IconProps {
     icon: IconType;

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

@@ -76,6 +76,10 @@ var IconType;
     IconType["Eye"] = "Eye";
     IconType["EyeBlocked"] = "EyeBlocked";
     IconType["Delete"] = "Delete";
+    IconType["ArrowLeft3"] = "Arrow-3-Left";
+    IconType["ArrowUp3"] = "Arrow-3-Up";
+    IconType["ArrowRight3"] = "Arrow-3-Right";
+    IconType["ArrowDown3"] = "Arrow-3-Down";
 })(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 { Color } from '@/util/Color';\nimport React from 'react';\n\nimport classNames from 'classnames';\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}\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 { Color } from '@/util/Color';\nimport React from 'react';\n\nimport classNames from 'classnames';\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}\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/generic/Overlay/Overlay.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, LegacyRef } from 'react';
+import { LegacyRef, ReactNode } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 export type OverlayProps = {
     children: ReactNode | ReactNode[];
@@ -15,6 +15,7 @@ export type OverlayProps = {
     onClose?: (e: Event) => void;
     offset?: [number, number];
     overlayRef?: LegacyRef<HTMLDivElement>;
+    preventScroll?: boolean;
     isAboveNav?: boolean;
 };
 export declare const Overlay: (props: OverlayProps) => JSX.Element;

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

@@ -1,11 +1,33 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const react_popper_1 = require("react-popper");
 const Overlay_module_scss_1 = __importDefault(require("./Overlay.module.scss"));
 const Portal_1 = require("../Portal/Portal");
@@ -14,12 +36,12 @@ const Fade_1 = __importDefault(require("../../../animations/Fade"));
 const classnames_1 = __importDefault(require("classnames"));
 const Overlay = (props) => {
     var _a, _b, _c;
-    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
-    const [popperElement, setPopperElement] = (0, react_2.useState)(null);
-    const [isOpen, setIsOpen] = (0, react_2.useState)(props.open);
+    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(props.open);
     const { onBodyClickExcept } = (0, hooks_1.useBodyClick)();
     // Used to prevent premature closing of window before it gets a chance to open
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         let timeout;
         let cancelled = false;
         if (props.open) {
@@ -38,7 +60,7 @@ const Overlay = (props) => {
             clearTimeout(timeout);
         };
     }, [props.open]);
-    (0, react_2.useLayoutEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const { remove } = onBodyClickExcept((e) => {
             var _a;
             if (isOpen) {
@@ -51,6 +73,16 @@ const Overlay = (props) => {
             remove();
         };
     }, [isOpen, popperElement]);
+    (0, react_1.useEffect)(() => {
+        if (props.strategy === 'fixed' && props.open && props.preventScroll) {
+            document.body.style.setProperty('overflow', 'hidden');
+        }
+        return () => {
+            if (props.strategy === 'fixed' && props.open && props.preventScroll) {
+                document.body.style.removeProperty('overflow');
+            }
+        };
+    }, [props.open, props.preventScroll, props.strategy]);
     const modifiers = [
         {
             name: 'flip',
@@ -59,6 +91,17 @@ const Overlay = (props) => {
                 fallbackPlacements: props.fallbackPlacements,
             },
         },
+        {
+            name: 'preventOverflow',
+            enabled: true,
+            options: {
+                altAxis: false,
+                altBoundary: false,
+                tether: false,
+                rootBoundary: 'body',
+                padding: 8,
+            },
+        },
     ];
     if (props.offset) {
         modifiers.push({

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

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sourceRoot":"/","sources":["src/components/generic/Overlay/Overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { useState, ReactNode, useEffect, useLayoutEffect, LegacyRef } from 'react';\nimport { Modifier, usePopper } from 'react-popper';\n\nimport styles from './Overlay.module.scss';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport { useBodyClick } from '@frontend/hooks';\nimport FadeAnimation from '@/animations/Fade';\nimport classNames from 'classnames';\nimport { Placement, PositioningStrategy } from '@popperjs/core';\n\nexport type OverlayProps = {\n    children: ReactNode | ReactNode[];\n    open: boolean;\n\n    usePortal?: boolean;\n    container?: HTMLElement | null;\n\n    followElement?: Element | null;\n    className?: string;\n    containerClassName?: string;\n\n    hideStyles?: boolean;\n\n    placement?: Placement;\n    fallbackPlacements?: Placement;\n    strategy?: PositioningStrategy;\n\n    onClose?: (e: Event) => void;\n    offset?: [number, number];\n    overlayRef?: LegacyRef<HTMLDivElement>;\n    isAboveNav?: boolean;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    const [referenceElement, setReferenceElement] = useState<Element | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n\n    const [isOpen, setIsOpen] = useState(props.open);\n\n    const { onBodyClickExcept } = useBodyClick();\n\n    // Used to prevent premature closing of window before it gets a chance to open\n    useEffect(() => {\n        let timeout: NodeJS.Timeout;\n        let cancelled = false;\n\n        if (props.open) {\n            setIsOpen(props.open);\n        } else {\n            // Allow for fade out animation to run before removing element\n            timeout = setTimeout(() => {\n                if (!cancelled) {\n                    setIsOpen(false);\n                }\n            }, 500);\n        }\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeout);\n        };\n    }, [props.open]);\n\n    useLayoutEffect(() => {\n        const { remove } = onBodyClickExcept((e: Event) => {\n            if (isOpen) {\n                e.preventDefault();\n                e.stopPropagation();\n                props.onClose?.(e);\n            }\n        }, popperElement as HTMLDivElement);\n\n        return () => {\n            remove();\n        };\n    }, [isOpen, popperElement]);\n\n    const modifiers: Modifier<any>[] = [\n        {\n            name: 'flip',\n            options: {\n                flipVariations: false,\n                fallbackPlacements: props.fallbackPlacements,\n            },\n        },\n    ];\n    if (props.offset) {\n        modifiers.push({\n            name: 'offset',\n            options: {\n                offset: props.offset,\n            },\n        });\n    }\n\n    const { styles: popperStyles, attributes } = usePopper(props.followElement ?? referenceElement, popperElement, {\n        placement: props.placement ?? 'bottom',\n        strategy: props.strategy ?? 'absolute',\n        modifiers,\n    });\n\n    const overlayClasses = classNames(props.className, {\n        [styles['rs-overlay']]: !props.hideStyles,\n    });\n\n    const overlayElement = (\n        // Here we depend on the props.open as that's the \"intended\" state. Fade animation will handle it going in and out.\n\n        <>\n            {!props.followElement && <span ref={setReferenceElement}></span>}\n\n            <div\n                ref={setPopperElement}\n                style={popperStyles.popper}\n                {...attributes.popper}\n                className={classNames(styles['rs-popper-container'], props.containerClassName, { [styles['--above-nav']]: props.isAboveNav })}\n            >\n                <FadeAnimation open={props.open}>\n                    <div ref={props.overlayRef} className={overlayClasses}>\n                        {props.children}\n                    </div>\n                </FadeAnimation>\n            </div>\n        </>\n    );\n\n    if (!isOpen) {\n        return <></>;\n    }\n\n    if (props.usePortal || props.container) {\n        // PreventZIndex is only enabled if container is not specified, since modal will be appended to body, Roomstay engine by default will overlay it\n        return (\n            <RoomstayPortal target={props.container || document.body} preventZIndex={!!props.container}>\n                {overlayElement}\n            </RoomstayPortal>\n        );\n    }\n\n    return overlayElement;\n};\n"]}
+{"version":3,"file":"Overlay.js","sourceRoot":"/","sources":["src/components/generic/Overlay/Overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { LegacyRef, ReactNode, useEffect, useLayoutEffect, useState } from 'react';\nimport { Modifier, usePopper } from 'react-popper';\n\nimport styles from './Overlay.module.scss';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport { useBodyClick } from '@frontend/hooks';\nimport FadeAnimation from '@/animations/Fade';\nimport classNames from 'classnames';\nimport { Placement, PositioningStrategy } from '@popperjs/core';\n\nexport type OverlayProps = {\n    children: ReactNode | ReactNode[];\n    open: boolean;\n\n    usePortal?: boolean;\n    container?: HTMLElement | null;\n\n    followElement?: Element | null;\n    className?: string;\n    containerClassName?: string;\n\n    hideStyles?: boolean;\n\n    placement?: Placement;\n    fallbackPlacements?: Placement;\n    strategy?: PositioningStrategy;\n\n    onClose?: (e: Event) => void;\n    offset?: [number, number];\n    overlayRef?: LegacyRef<HTMLDivElement>;\n    preventScroll?: boolean;\n    isAboveNav?: boolean;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    const [referenceElement, setReferenceElement] = useState<Element | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n\n    const [isOpen, setIsOpen] = useState(props.open);\n\n    const { onBodyClickExcept } = useBodyClick();\n\n    // Used to prevent premature closing of window before it gets a chance to open\n    useEffect(() => {\n        let timeout: NodeJS.Timeout;\n        let cancelled = false;\n\n        if (props.open) {\n            setIsOpen(props.open);\n        } else {\n            // Allow for fade out animation to run before removing element\n            timeout = setTimeout(() => {\n                if (!cancelled) {\n                    setIsOpen(false);\n                }\n            }, 500);\n        }\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeout);\n        };\n    }, [props.open]);\n\n    useLayoutEffect(() => {\n        const { remove } = onBodyClickExcept((e: Event) => {\n            if (isOpen) {\n                e.preventDefault();\n                e.stopPropagation();\n                props.onClose?.(e);\n            }\n        }, popperElement as HTMLDivElement);\n\n        return () => {\n            remove();\n        };\n    }, [isOpen, popperElement]);\n\n    useEffect(() => {\n        if (props.strategy === 'fixed' && props.open && props.preventScroll) {\n            document.body.style.setProperty('overflow', 'hidden');\n        }\n        return () => {\n            if (props.strategy === 'fixed' && props.open && props.preventScroll) {\n                document.body.style.removeProperty('overflow');\n            }\n        };\n    }, [props.open, props.preventScroll, props.strategy]);\n\n    const modifiers: Modifier<any>[] = [\n        {\n            name: 'flip',\n            options: {\n                flipVariations: false,\n                fallbackPlacements: props.fallbackPlacements,\n            },\n        },\n        {\n            name: 'preventOverflow',\n            enabled: true,\n            options: {\n                altAxis: false,\n                altBoundary: false,\n                tether: false,\n                rootBoundary: 'body',\n                padding: 8,\n            },\n        },\n    ];\n    if (props.offset) {\n        modifiers.push({\n            name: 'offset',\n            options: {\n                offset: props.offset,\n            },\n        });\n    }\n\n    const { styles: popperStyles, attributes } = usePopper(props.followElement ?? referenceElement, popperElement, {\n        placement: props.placement ?? 'bottom',\n        strategy: props.strategy ?? 'absolute',\n        modifiers,\n    });\n\n    const overlayClasses = classNames(props.className, {\n        [styles['rs-overlay']]: !props.hideStyles,\n    });\n\n    const overlayElement = (\n        // Here we depend on the props.open as that's the \"intended\" state. Fade animation will handle it going in and out.\n\n        <>\n            {!props.followElement && <span ref={setReferenceElement}></span>}\n\n            <div\n                ref={setPopperElement}\n                style={popperStyles.popper}\n                {...attributes.popper}\n                className={classNames(styles['rs-popper-container'], props.containerClassName, { [styles['--above-nav']]: props.isAboveNav })}\n            >\n                <FadeAnimation open={props.open}>\n                    <div ref={props.overlayRef} className={overlayClasses}>\n                        {props.children}\n                    </div>\n                </FadeAnimation>\n            </div>\n        </>\n    );\n\n    if (!isOpen) {\n        return <></>;\n    }\n\n    if (props.usePortal || props.container) {\n        // PreventZIndex is only enabled if container is not specified, since modal will be appended to body, Roomstay engine by default will overlay it\n        return (\n            <RoomstayPortal target={props.container || document.body} preventZIndex={!!props.container}>\n                {overlayElement}\n            </RoomstayPortal>\n        );\n    }\n\n    return overlayElement;\n};\n"]}

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

@@ -33,7 +33,7 @@ const Icon_1 = __importStar(require("../Icon/Icon"));
 const TextBox_1 = __importDefault(require("../TextBox"));
 const PasswordBox_module_scss_1 = __importDefault(require("./PasswordBox.module.scss"));
 exports.PasswordBox = (0, react_2.forwardRef)(function PasswordBox(props, ref) {
-    const [canSeePassword, setCanSeePassword] = (0, react_2.useState)(true);
+    const [canSeePassword, setCanSeePassword] = (0, react_2.useState)(false);
     const inputProperties = Object.assign(Object.assign({}, props), { type: canSeePassword ? 'text' : 'password' });
     const onSwitch = () => {
         setCanSeePassword(!canSeePassword);
@@ -41,6 +41,6 @@ exports.PasswordBox = (0, react_2.forwardRef)(function PasswordBox(props, ref) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: PasswordBox_module_scss_1.default.passwordbox },
             react_1.default.createElement(TextBox_1.default, Object.assign({ ref: ref }, inputProperties)),
-            react_1.default.createElement(Icon_1.default, { className: PasswordBox_module_scss_1.default['suffix-icon'], icon: canSeePassword ? Icon_1.IconType.Eye : Icon_1.IconType.EyeBlocked, onClick: onSwitch }))));
+            react_1.default.createElement(Icon_1.default, { className: PasswordBox_module_scss_1.default['suffix-icon'], icon: canSeePassword ? Icon_1.IconType.EyeBlocked : Icon_1.IconType.Eye, onClick: onSwitch }))));
 });
 //# sourceMappingURL=PasswordBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAA6C;AAC7C,uEAAgE;AAChE,yDAAmD;AACnD,wFAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,kBAAU,EAAiC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IACjG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAE3D,MAAM,eAAe,mCACd,KAAK,KACR,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,8BAAC,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,8BAAC,cAAI,IAAC,SAAS,EAAE,iCAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { forwardRef, useState } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport TextBox, { TextBoxProps } from '../TextBox';\nimport styles from './PasswordBox.module.scss';\n\nexport const PasswordBox = forwardRef<HTMLInputElement, TextBoxProps>(function PasswordBox(props, ref) {\n    const [canSeePassword, setCanSeePassword] = useState(true);\n\n    const inputProperties: TextBoxProps = {\n        ...props,\n        type: canSeePassword ? 'text' : 'password',\n    };\n\n    const onSwitch = () => {\n        setCanSeePassword(!canSeePassword);\n    };\n\n    return (\n        <>\n            <div className={styles.passwordbox}>\n                <TextBox ref={ref} {...inputProperties} />\n                <Icon className={styles['suffix-icon']} icon={canSeePassword ? IconType.Eye : IconType.EyeBlocked} onClick={onSwitch} />\n            </div>\n        </>\n    );\n});\n"]}
+{"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAA6C;AAC7C,uEAAgE;AAChE,yDAAmD;AACnD,wFAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,kBAAU,EAAiC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IACjG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,eAAe,mCACd,KAAK,KACR,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,8BAAC,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,8BAAC,cAAI,IAAC,SAAS,EAAE,iCAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { forwardRef, useState } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport TextBox, { TextBoxProps } from '../TextBox';\nimport styles from './PasswordBox.module.scss';\n\nexport const PasswordBox = forwardRef<HTMLInputElement, TextBoxProps>(function PasswordBox(props, ref) {\n    const [canSeePassword, setCanSeePassword] = useState(false);\n\n    const inputProperties: TextBoxProps = {\n        ...props,\n        type: canSeePassword ? 'text' : 'password',\n    };\n\n    const onSwitch = () => {\n        setCanSeePassword(!canSeePassword);\n    };\n\n    return (\n        <>\n            <div className={styles.passwordbox}>\n                <TextBox ref={ref} {...inputProperties} />\n                <Icon className={styles['suffix-icon']} icon={canSeePassword ? IconType.EyeBlocked : IconType.Eye} onClick={onSwitch} />\n            </div>\n        </>\n    );\n});\n"]}

package/dist/src/components/generic/PaymentCard/InlinePaymentCard.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { VGSCardName } from '../../../models/Api/HotelDTO';
+interface InlinePaymentCardProps {
+    vgsCardName?: VGSCardName;
+    large?: boolean;
+}
+declare const InlinePaymentCard: FC<InlinePaymentCardProps>;
+export default InlinePaymentCard;

package/dist/src/components/generic/PaymentCard/InlinePaymentCard.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
+const InlinePaymentCard_module_scss_1 = __importDefault(require("./InlinePaymentCard.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const InlinePaymentCard = ({ vgsCardName, large }) => {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(InlinePaymentCard_module_scss_1.default.root, {
+            [InlinePaymentCard_module_scss_1.default['--large']]: large,
+        }), style: { backgroundImage: `url('${RoomstayThemeEngine_1.default.getImageAssetUrl() + vgsCardName + '.png'}')` } }));
+};
+exports.default = InlinePaymentCard;
+//# sourceMappingURL=InlinePaymentCard.js.map

package/dist/src/components/generic/PaymentCard/InlinePaymentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentCard.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAkC;AAClC,0FAAkE;AAClE,oGAAqD;AAErD,4DAAoC;AAOpC,MAAM,iBAAiB,GAA+B,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAM,CAAC,IAAI,EAAE;YAC/B,CAAE,uCAAc,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK;SACtC,CAAC,EACF,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,WAAW,GAAG,MAAM,IAAI,EAAE,GACvG,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC","sourcesContent":["import React, { FC } from 'react';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport styles from './InlinePaymentCard.module.scss';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport classNames from 'classnames';\n\ninterface InlinePaymentCardProps {\n    vgsCardName?: VGSCardName;\n    large?: boolean;\n}\n\nconst InlinePaymentCard: FC<InlinePaymentCardProps> = ({ vgsCardName, large }) => {\n    return (\n        <div\n            className={classNames(styles.root, {\n                [(styles as any)['--large']]: large,\n            })}\n            style={{ backgroundImage: `url('${RoomstayThemeEngine.getImageAssetUrl() + vgsCardName + '.png'}')` }}\n        />\n    );\n};\n\nexport default InlinePaymentCard;\n"]}

package/dist/src/components/generic/PaymentCard/InlinePaymentOption.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { IRoomstayMemberCards } from '@roomstay/core';
+interface InlinePaymentOptionProps {
+    card?: IRoomstayMemberCards;
+    active?: boolean;
+}
+declare const InlinePaymentOption: FC<InlinePaymentOptionProps>;
+export default InlinePaymentOption;

package/dist/src/components/generic/PaymentCard/InlinePaymentOption.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const InlinePaymentCard_1 = __importDefault(require("./InlinePaymentCard"));
+const Text_1 = __importStar(require("../Text"));
+const Color_1 = require("../../../util/Color");
+const AcceptablePaymentCard_1 = __importDefault(require("../../steps/confirmation/PaymentDetails/AcceptablePaymentCard"));
+const TextAlignment_1 = require("../../../util/TextAlignment");
+const InlinePaymentOption_module_scss_1 = __importDefault(require("./InlinePaymentOption.module.scss"));
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
+const contexts_1 = require("../../../contexts");
+const Pill_1 = __importStar(require("../Pill"));
+const InlinePaymentOption = ({ card, active }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { roomstayMember } = (0, contexts_1.useMemberContext)();
+    const displayExpiry = (expiry) => {
+        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);
+    };
+    return (react_1.default.createElement("div", { className: InlinePaymentOption_module_scss_1.default.root },
+        react_1.default.createElement("div", { className: "flex-shrink-0" }, card ? react_1.default.createElement(InlinePaymentCard_1.default, { vgsCardName: card.type, large: true }) : null),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(Text_1.default, { align: TextAlignment_1.TextAlign.Left, type: Text_1.TextType.Small, color: Color_1.Color.Navy }, card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation_1.Translation.Step.Confirmation.CardLabel)),
+            react_1.default.createElement(Text_1.default, { className: "u-marg-top--lighter", align: TextAlignment_1.TextAlign.Left, type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey }, card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation_1.Translation.Step.Confirmation.CardSubLabel))),
+        !card && (react_1.default.createElement("div", null,
+            react_1.default.createElement(AcceptablePaymentCard_1.default, { style: {
+                    width: 24,
+                    height: 16,
+                    borderRadius: 1.5,
+                    border: '0.5px solid #DFE1E5',
+                }, isCurrent: () => true }))),
+        (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard) && card && card.cardId === roomstayMember.defaultCard && (react_1.default.createElement(Pill_1.default, { size: "small", type: Pill_1.PillType.Primary }, "DEFAULT CARD"))));
+};
+exports.default = InlinePaymentOption;
+//# sourceMappingURL=InlinePaymentOption.js.map

package/dist/src/components/generic/PaymentCard/InlinePaymentOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePaymentOption.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentOption.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAkC;AAElC,2GAAmF;AACnF,kEAA2D;AAC3D,wCAAqC;AACrC,iIAAyG;AAEzG,wDAAiD;AACjD,wGAAuD;AACvD,iDAA+C;AAC/C,4DAAyD;AACzD,yCAA8C;AAC9C,kEAA2D;AAO3D,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,2BAAgB,GAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE;QACrC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,OAAO,CACH,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,CAAC,CAAC,8BAAC,2BAAiB,IAAC,WAAW,EAAE,IAAI,CAAC,IAAmB,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,CAAO;QACvH;YACI,8BAAC,cAAI,IAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IAC/D,IAAI,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAC/F;YACP,8BAAC,cAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IACrG,IAAI,CAAC,CAAC,CAAC,WAAW,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAC5F,CACL;QACL,CAAC,IAAI,IAAI,CACN;YACI,8BAAC,+BAAqB,IAClB,KAAK,EAAE;oBACH,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,GAAG;oBACjB,MAAM,EAAE,qBAAqB;iBAChC,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,GACvB,CACA,CACT;QACA,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,KAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,WAAW,IAAI,CAClF,8BAAC,cAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,mBAElC,CACV,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import React, { FC } from 'react';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport InlinePaymentCard from '@/components/generic/PaymentCard/InlinePaymentCard';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport { TextAlign } from '@/util/TextAlignment';\nimport styles from './InlinePaymentOption.module.scss';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\nimport { useMemberContext } from '@/contexts';\nimport Pill, { PillType } from '@/components/generic/Pill';\n\ninterface InlinePaymentOptionProps {\n    card?: IRoomstayMemberCards;\n    active?: boolean;\n}\n\nconst InlinePaymentOption: FC<InlinePaymentOptionProps> = ({ card, active }) => {\n    const { t } = useTranslation();\n    const { roomstayMember } = useMemberContext();\n    const displayExpiry = (expiry: string) => {\n        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);\n    };\n    return (\n        <div className={styles.root}>\n            <div className=\"flex-shrink-0\">{card ? <InlinePaymentCard vgsCardName={card.type as VGSCardName} large /> : null}</div>\n            <div>\n                <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                    {card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation.Step.Confirmation.CardLabel)}\n                </Text>\n                <Text className=\"u-marg-top--lighter\" align={TextAlign.Left} type={TextType.Caption} color={Color.DarkGrey}>\n                    {card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation.Step.Confirmation.CardSubLabel)}\n                </Text>\n            </div>\n            {!card && (\n                <div>\n                    <AcceptablePaymentCard\n                        style={{\n                            width: 24,\n                            height: 16,\n                            borderRadius: 1.5,\n                            border: '0.5px solid #DFE1E5',\n                        }}\n                        isCurrent={() => true}\n                    />\n                </div>\n            )}\n            {roomstayMember?.defaultCard && card && card.cardId === roomstayMember.defaultCard && (\n                <Pill size=\"small\" type={PillType.Primary}>\n                    DEFAULT CARD\n                </Pill>\n            )}\n        </div>\n    );\n};\n\nexport default InlinePaymentOption;\n"]}

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

@@ -10,7 +10,10 @@ const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/Roomst
 const VGSHooks_1 = require("../../../hooks/VGSHooks");
 const SmallSpinner_1 = __importDefault(require("../loader/SmallSpinner"));
 const PaymentCardHelper_1 = require("../../../util/PaymentCardHelper");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
 const PaymentCard = ({ card }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const labelStyles = {
         '@font-face': {
             src: `url(${RoomstayThemeEngine_1.default.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,
@@ -45,12 +48,12 @@ const PaymentCard = ({ card }) => {
             isCardNumberLoading && react_1.default.createElement(SmallSpinner_1.default, null),
             react_1.default.createElement("span", { ref: cardNumberTargetElement })),
         react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.name },
-            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Card Holder Name"),
-            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.cardholderName },
+            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, t(Translation_1.Translation.Step.Confirmation.PaymentCard.CardHolderName)),
+            react_1.default.createElement("div", null,
                 isCardholderNameLoading && react_1.default.createElement(SmallSpinner_1.default, null),
                 react_1.default.createElement("span", { ref: cardholderNameTargetElement }))),
         react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.date },
-            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Expiry Date"),
+            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, t(Translation_1.Translation.Step.Confirmation.PaymentCard.ExpiryDate)),
             card.expiry ? react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.value }, card.expiry) : react_1.default.createElement("br", { className: PaymentCard_module_scss_1.default.value }))));
 };
 exports.PaymentCard = PaymentCard;

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,wFAA+C;AAC/C,0FAAkE;AAClE,+CAA8C;AAE9C,0EAAkD;AAClD,gEAAgE;AAOzD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,8BAAC,sBAAY,OAAG;YACxC,wCAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,uBAAwB;YACpD,uCAAK,SAAS,EAAE,iCAAM,CAAC,cAAc;gBAChC,uBAAuB,IAAI,8BAAC,sBAAY,OAAG;gBAC5C,wCAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,kBAAmB;YAC9C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,WAAW,eAwDtB","sourcesContent":["import React from 'react';\nimport styles from './PaymentCard.module.scss';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { useVgsShow } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport SmallSpinner from '../loader/SmallSpinner';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { ECardType } from '@/models/PaymentCard';\n\nexport interface PaymentCardProps {\n    card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n    const labelStyles = {\n        '@font-face': {\n            src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n            'font-weight': 'bold',\n            'font-display': 'swap',\n            'font-family': 'Cadiz',\n        },\n        'font-size': '18px',\n        'line-height': '24px',\n        'font-weight': 'bold',\n        'font-family': 'Cadiz',\n        color: 'white',\n    };\n\n    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n        name: 'credit-card',\n        value: card.cardNumber,\n        styles: { ...labelStyles, 'word-spacing': '16px' },\n    });\n\n    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n        name: 'card-name',\n        value: card.name,\n        styles: labelStyles,\n    });\n\n    const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n    return (\n        <div className={styles.card}>\n            <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n            <div className={styles.chip}>\n                <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n            </div>\n            <div className={styles.type}>\n                <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n            </div>\n\n            <div className={styles.number}>\n                {isCardNumberLoading && <SmallSpinner />}\n                <span ref={cardNumberTargetElement}></span>\n            </div>\n            <div className={styles.name}>\n                <div className={styles.label}>Card Holder Name</div>\n                <div className={styles.cardholderName}>\n                    {isCardholderNameLoading && <SmallSpinner />}\n                    <span ref={cardholderNameTargetElement}></span>\n                </div>\n            </div>\n            <div className={styles.date}>\n                <div className={styles.label}>Expiry Date</div>\n                {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,wFAA+C;AAC/C,0FAAkE;AAClE,+CAA8C;AAE9C,0EAAkD;AAClD,gEAAgE;AAEhE,iDAA+C;AAC/C,4DAAyD;AAMlD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,8BAAC,sBAAY,OAAG;YACxC,wCAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,cAAc,CAAC,CAAO;YACjG;gBACK,uBAAuB,IAAI,8BAAC,sBAAY,OAAG;gBAC5C,wCAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,CAAO;YAC5F,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAzDW,QAAA,WAAW,eAyDtB","sourcesContent":["import React from 'react';\nimport styles from './PaymentCard.module.scss';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { useVgsShow } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport SmallSpinner from '../loader/SmallSpinner';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { ECardType } from '@/models/PaymentCard';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\nexport interface PaymentCardProps {\n    card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n    const { t } = useTranslation();\n    const labelStyles = {\n        '@font-face': {\n            src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n            'font-weight': 'bold',\n            'font-display': 'swap',\n            'font-family': 'Cadiz',\n        },\n        'font-size': '18px',\n        'line-height': '24px',\n        'font-weight': 'bold',\n        'font-family': 'Cadiz',\n        color: 'white',\n    };\n\n    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n        name: 'credit-card',\n        value: card.cardNumber,\n        styles: { ...labelStyles, 'word-spacing': '16px' },\n    });\n\n    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n        name: 'card-name',\n        value: card.name,\n        styles: labelStyles,\n    });\n\n    const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n    return (\n        <div className={styles.card}>\n            <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n            <div className={styles.chip}>\n                <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n            </div>\n            <div className={styles.type}>\n                <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n            </div>\n\n            <div className={styles.number}>\n                {isCardNumberLoading && <SmallSpinner />}\n                <span ref={cardNumberTargetElement}></span>\n            </div>\n            <div className={styles.name}>\n                <div className={styles.label}>{t(Translation.Step.Confirmation.PaymentCard.CardHolderName)}</div>\n                <div>\n                    {isCardholderNameLoading && <SmallSpinner />}\n                    <span ref={cardholderNameTargetElement}></span>\n                </div>\n            </div>\n            <div className={styles.date}>\n                <div className={styles.label}>{t(Translation.Step.Confirmation.PaymentCard.ExpiryDate)}</div>\n                {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/components/generic/PaymentCard/PaymentCardInput.d.ts

@@ -1,9 +1,8 @@
 import { FC } from 'react';
 import { IRoomstayMemberCards } from '@roomstay/core';
-import { IRoomstayMemberCardFormInput } from '../../../models/RoomstayMembers/IRoomstayMemberCard';
 export interface PaymentCardInputProps {
-    card: IRoomstayMemberCardFormInput;
-    onSubmit?: (card: IRoomstayMemberCards) => Promise<void>;
+    card: IRoomstayMemberCards;
+    onSubmit?: (card: IRoomstayMemberCards) => Promise<IRoomstayMemberCards>;
     onDeleteClicked: (card: IRoomstayMemberCards) => Promise<void>;
     onMarkedAsDefaultClicked: (card: IRoomstayMemberCards) => Promise<void>;
 }