@roomstay/frontend 1.6.0 → 2.0.0-1

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

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { IconProps } from 'components/generic/Icon/Icon';
+import { TextProps } from 'components/generic/Text';
+interface IconTextProps extends PropsWithChildren<any> {
+    IconProps?: Omit<IconProps, 'icon'>;
+    TextProps?: Omit<TextProps, 'children'>;
+    icon?: IconProps['icon'];
+}
+declare const IconText: FC<IconTextProps>;
+export default IconText;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Text_1 = require("components/generic/Text");
+const IconText_module_scss_1 = require("./IconText.module.scss");
+const classnames_1 = require("classnames");
+const Color_1 = require("util/Color");
+const defaultTextProps = {
+    type: Text_1.TextType.Small,
+};
+const defaultIconProps = {
+    color: Color_1.Color.Grey,
+};
+const IconText = ({ IconProps, TextProps, icon, children }) => {
+    return (React.createElement("div", { className: (0, classnames_1.default)('u-flex', 'u-flex-flex-start', IconText_module_scss_1.default.root) },
+        icon && React.createElement("div", { className: IconText_module_scss_1.default.icon }, React.createElement(Icon_1.default, Object.assign({ icon: icon }, Object.assign(Object.assign({}, defaultIconProps), IconProps)))),
+        React.createElement(Text_1.default, Object.assign({}, Object.assign(Object.assign({}, defaultTextProps), (TextProps || {}))), children)));
+};
+exports.default = IconText;
+//# sourceMappingURL=IconText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconText.js","sourceRoot":"/","sources":["src/components/generic/IconText/IconText.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAE/B,uDAA+D;AAC/D,kDAAoE;AACpE,iEAA4C;AAC5C,2CAAoC;AACpC,sCAAmC;AAEnC,MAAM,gBAAgB,GAAgC;IAClD,IAAI,EAAE,eAAQ,CAAC,KAAK;CACvB,CAAC;AAEF,MAAM,gBAAgB,GAA4B;IAC9C,KAAK,EAAE,aAAK,CAAC,IAAI;CACpB,CAAC;AAQF,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7E,OAAO,CACH,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,QAAQ,EAAE,mBAAmB,EAAE,8BAAM,CAAC,IAAI,CAAC;QACjE,IAAI,IAAI,6BAAK,SAAS,EAAE,8BAAM,CAAC,IAAI,IAAG,oBAAC,cAAI,kBAAC,IAAI,EAAE,IAAI,oCAAW,gBAAgB,GAAK,SAAS,GAAM,CAAO;QAC7G,oBAAC,cAAI,oDAAU,gBAAgB,GAAK,CAAC,SAAS,IAAI,EAAE,CAAC,IAAK,QAAQ,CAAQ,CACxE,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { FC, PropsWithChildren } from 'react';\nimport Icon, { IconProps } from 'components/generic/Icon/Icon';\nimport Text, { TextProps, TextType } from 'components/generic/Text';\nimport styles from './IconText.module.scss';\nimport classNames from 'classnames';\nimport { Color } from 'util/Color';\n\nconst defaultTextProps: Omit<TextProps, 'children'> = {\n    type: TextType.Small,\n};\n\nconst defaultIconProps: Omit<IconProps, 'icon'> = {\n    color: Color.Grey,\n};\n\ninterface IconTextProps extends PropsWithChildren<any> {\n    IconProps?: Omit<IconProps, 'icon'>;\n    TextProps?: Omit<TextProps, 'children'>;\n    icon?: IconProps['icon'];\n}\n\nconst IconText: FC<IconTextProps> = ({ IconProps, TextProps, icon, children }) => {\n    return (\n        <div className={classNames('u-flex', 'u-flex-flex-start', styles.root)}>\n            {icon && <div className={styles.icon}>{<Icon icon={icon} {...{ ...defaultIconProps, ...IconProps }} />}</div>}\n            <Text {...{ ...defaultTextProps, ...(TextProps || {}) }}>{children}</Text>\n        </div>\n    );\n};\n\nexport default IconText;\n"]}

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { InputGroupDimensions } from './InputGroup.types';
+import { InputGroupDimensions } from 'components/generic/InputGroup/InputGroup.types';
 export interface InputGroupProps {
     children: ReactNode | ReactNode[];
     dimensions?: InputGroupDimensions;

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

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sourceRoot":"/","sources":["src/components/generic/InputGroup/InputGroup.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAE/B,yCAAyC;AASzC,SAAwB,UAAU,CAAC,KAAsB;IACrD,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE;QACxC,CAAC,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU;KAChD,CAAC,CAAC;IAEH,IAAI,WAAW,CAAC;IAEhB,MAAM,aAAa,GAAU,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpE,QAAQ,KAAK,CAAC,UAAU,EAAE;QACtB,KAAK,KAAK,CAAC;QACX,KAAK,KAAK;YACN,WAAW,GAAG,CACV;gBACI,iCAAM,aAAa,CAAC,CAAC,CAAC,CAAO;gBAC7B,6BAAK,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAG,aAAa,CAAC,CAAC,CAAC,CAAO,CAC1G,CACN,CAAC;YAEF,MAAM;QACV,KAAK,GAAG,CAAC;QACT;YACI,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;YAC7B,MAAM;KACb;IAED,OAAO,6BAAK,SAAS,EAAE,OAAO,IAAG,WAAW,CAAO,CAAC;AACxD,CAAC;AA1BD,6BA0BC","sourcesContent":["import * as React from 'react';\nimport { ReactNode } from 'react';\nimport * as classNames from 'classnames';\nimport { InputGroupDimensions } from './InputGroup.types';\n\nexport interface InputGroupProps {\n    children: ReactNode | ReactNode[];\n\n    dimensions?: InputGroupDimensions;\n}\n\nexport default function InputGroup(props: InputGroupProps) {\n    const classes = classNames('be-form-group', {\n        [`s-${props.dimensions}`]: !!props.dimensions,\n    });\n\n    let innerLayout;\n\n    const childrenArray: any[] = React.Children.toArray(props.children);\n    switch (props.dimensions) {\n        case '3/1':\n        case '2/2':\n            innerLayout = (\n                <>\n                    <div>{childrenArray[0]}</div>\n                    <div className={childrenArray[1].type.name === InputGroup.name ? 'no-marg' : ''}>{childrenArray[1]}</div>\n                </>\n            );\n\n            break;\n        case '1':\n        default:\n            innerLayout = props.children;\n            break;\n    }\n\n    return <div className={classes}>{innerLayout}</div>;\n}\n"]}
+{"version":3,"file":"InputGroup.js","sourceRoot":"/","sources":["src/components/generic/InputGroup/InputGroup.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAE/B,yCAAyC;AASzC,SAAwB,UAAU,CAAC,KAAsB;IACrD,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE;QACxC,CAAC,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU;KAChD,CAAC,CAAC;IAEH,IAAI,WAAW,CAAC;IAEhB,MAAM,aAAa,GAAU,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpE,QAAQ,KAAK,CAAC,UAAU,EAAE;QACtB,KAAK,KAAK,CAAC;QACX,KAAK,KAAK;YACN,WAAW,GAAG,CACV;gBACI,iCAAM,aAAa,CAAC,CAAC,CAAC,CAAO;gBAC7B,6BAAK,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAG,aAAa,CAAC,CAAC,CAAC,CAAO,CAC1G,CACN,CAAC;YAEF,MAAM;QACV,KAAK,GAAG,CAAC;QACT;YACI,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;YAC7B,MAAM;KACb;IAED,OAAO,6BAAK,SAAS,EAAE,OAAO,IAAG,WAAW,CAAO,CAAC;AACxD,CAAC;AA1BD,6BA0BC","sourcesContent":["import * as React from 'react';\nimport { ReactNode } from 'react';\nimport * as classNames from 'classnames';\nimport { InputGroupDimensions } from 'components/generic/InputGroup/InputGroup.types';\n\nexport interface InputGroupProps {\n    children: ReactNode | ReactNode[];\n\n    dimensions?: InputGroupDimensions;\n}\n\nexport default function InputGroup(props: InputGroupProps) {\n    const classes = classNames('be-form-group', {\n        [`s-${props.dimensions}`]: !!props.dimensions,\n    });\n\n    let innerLayout;\n\n    const childrenArray: any[] = React.Children.toArray(props.children);\n    switch (props.dimensions) {\n        case '3/1':\n        case '2/2':\n            innerLayout = (\n                <>\n                    <div>{childrenArray[0]}</div>\n                    <div className={childrenArray[1].type.name === InputGroup.name ? 'no-marg' : ''}>{childrenArray[1]}</div>\n                </>\n            );\n\n            break;\n        case '1':\n        default:\n            innerLayout = props.children;\n            break;\n    }\n\n    return <div className={classes}>{innerLayout}</div>;\n}\n"]}

package/dist/src/components/generic/InputGroup/InputGroup.types.d.ts

@@ -1 +1 @@
-export declare type InputGroupDimensions = '1' | '2/2' | '3/1' | '1/3';
+export type InputGroupDimensions = '1' | '2/2' | '3/1' | '1/3';

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

@@ -2,5 +2,6 @@ export interface LineBreakProps {
     darker?: boolean;
     noMargins?: boolean;
     smallMargins?: boolean;
+    fullBleed?: boolean;
 }
 export default function LineBreak(props: LineBreakProps): JSX.Element;

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

@@ -7,6 +7,7 @@ function LineBreak(props) {
         '--darker': props.darker,
         '--smaller': props.smallMargins,
         'u-marg-none': props.noMargins,
+        '--full-bleed': props.fullBleed,
     });
     return React.createElement("div", { className: classes });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LineBreak.js","sourceRoot":"/","sources":["src/components/generic/LineBreak.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,yCAAyC;AAQzC,SAAwB,SAAS,CAAC,KAAqB;IACnD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,EAAE;QACrC,UAAU,EAAE,KAAK,CAAC,MAAM;QACxB,WAAW,EAAE,KAAK,CAAC,YAAY;QAC/B,aAAa,EAAE,KAAK,CAAC,SAAS;KACjC,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,OAAO,GAAI,CAAC;AACvC,CAAC;AARD,4BAQC","sourcesContent":["import * as React from 'react';\nimport * as classNames from 'classnames';\n\nexport interface LineBreakProps {\n    darker?: boolean;\n    noMargins?: boolean;\n    smallMargins?: boolean;\n}\n\nexport default function LineBreak(props: LineBreakProps) {\n    const classes = classNames('line-break', {\n        '--darker': props.darker,\n        '--smaller': props.smallMargins,\n        'u-marg-none': props.noMargins,\n    });\n\n    return <div className={classes} />;\n}\n"]}
+{"version":3,"file":"LineBreak.js","sourceRoot":"/","sources":["src/components/generic/LineBreak.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,yCAAyC;AASzC,SAAwB,SAAS,CAAC,KAAqB;IACnD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,EAAE;QACrC,UAAU,EAAE,KAAK,CAAC,MAAM;QACxB,WAAW,EAAE,KAAK,CAAC,YAAY;QAC/B,aAAa,EAAE,KAAK,CAAC,SAAS;QAC9B,cAAc,EAAE,KAAK,CAAC,SAAS;KAClC,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,OAAO,GAAI,CAAC;AACvC,CAAC;AATD,4BASC","sourcesContent":["import * as React from 'react';\nimport * as classNames from 'classnames';\n\nexport interface LineBreakProps {\n    darker?: boolean;\n    noMargins?: boolean;\n    smallMargins?: boolean;\n    fullBleed?: boolean;\n}\n\nexport default function LineBreak(props: LineBreakProps) {\n    const classes = classNames('line-break', {\n        '--darker': props.darker,\n        '--smaller': props.smallMargins,\n        'u-marg-none': props.noMargins,\n        '--full-bleed': props.fullBleed,\n    });\n\n    return <div className={classes} />;\n}\n"]}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IconType } from './Icon';
+import { IconType } from 'components/generic/Icon/Icon';
 export interface NotificationType {
     icon?: IconType;
     children?: React.ReactNode;

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Icon_1 = require("./Icon");
-const Color_1 = require("../../util/Color");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
 const web_1 = require("@react-spring/web");
 const react_1 = require("react");
 function Notification(props) {
     const { icon, children, ttl } = props.data;
-    const [goAway, setGoAway] = react_1.useState(false);
-    const right = web_1.useSpring({
+    const [goAway, setGoAway] = (0, react_1.useState)(false);
+    const right = (0, web_1.useSpring)({
         delay: 1200,
         config: { mass: 50, tension: 170, friction: 200 },
         to: {
@@ -19,7 +19,7 @@ function Notification(props) {
         },
         onRest: () => setGoAway(true),
     });
-    const outAnim = web_1.useSpring({
+    const outAnim = (0, web_1.useSpring)({
         from: {
             opacity: 1,
         },

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sourceRoot":"/","sources":["src/components/generic/Notification.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAAwC;AACxC,4CAAyC;AACzC,2CAAwD;AACxD,iCAAiC;AAgBjC,SAAwB,YAAY,CAAC,KAAwB;IACzD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAE3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,eAAS,CAAC;QACpB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE;QACjD,EAAE,EAAE;YACA,KAAK,EAAE,GAAG;SACb;QACD,IAAI,EAAE;YACF,KAAK,EAAE,MAAM;SAChB;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;KAChC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,eAAS,CAAC;QACtB,IAAI,EAAE;YACF,OAAO,EAAE,CAAC;SACb;QACD,EAAE,EAAE;YACA,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;KACvC,CAAC,CAAC;IACV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,OAAO,CACH,oBAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,OAAO;QACtE,6BAAK,SAAS,EAAC,uBAAuB;YAClC,oBAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAI;YACjF,6BAAK,SAAS,EAAC,QAAQ;gBACnB,6BAAK,SAAS,EAAC,cAAc;oBACzB,oBAAC,cAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,GAAI;oBACzC,6BAAK,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAO,CACpD;gBACN,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,kBAAkB,GAAI,CACrE,CACJ,CACK,CAClB,CAAC;AACN,CAAC;AA3CD,+BA2CC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from './Icon';\nimport { Color } from '../../util/Color';\nimport { useSpring, animated } from '@react-spring/web';\nimport { useState } from 'react';\n\nexport interface NotificationType {\n    icon?: IconType;\n    children?: React.ReactNode;\n    // in milliseconds\n    ttl: number;\n\n    id?: number;\n}\n\ninterface NotificationProps {\n    data: NotificationType;\n    onRemove?: (id: number) => void;\n}\n\nexport default function Notification(props: NotificationProps) {\n    const { icon, children, ttl } = props.data;\n\n    const [goAway, setGoAway] = useState(false);\n\n    const right = useSpring({\n        delay: 1200,\n        config: { mass: 50, tension: 170, friction: 200 },\n        to: {\n            right: '0',\n        },\n        from: {\n            right: '100%',\n        },\n        onRest: () => setGoAway(true),\n    });\n\n    const outAnim = useSpring({\n        from: {\n            opacity: 1,\n        },\n        to: {\n            opacity: goAway ? 0 : 1,\n        },\n        onRest: () => props.onRemove(props.data.id),\n    } as any);\n    const iconOnClickHandler = () => {\n        setGoAway(true);\n    };\n    return (\n        <animated.div className=\"c-notification a-bounce-down-left\" style={outAnim}>\n            <div className=\"c-notification__inner\">\n                <animated.div className=\"c-notification__timer\" style={{ right: right.right }} />\n                <div className=\"u-flex\">\n                    <div className=\"u-flex__item\">\n                        <Icon icon={icon} color={Color.Accent} />\n                        <div className=\"u-inline u-marg-left\">{children}</div>\n                    </div>\n                    <Icon icon={IconType.Close} size=\"24px\" onClick={iconOnClickHandler} />\n                </div>\n            </div>\n        </animated.div>\n    );\n}\n"]}
+{"version":3,"file":"Notification.js","sourceRoot":"/","sources":["src/components/generic/Notification.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,uDAA8D;AAC9D,sCAAmC;AACnC,2CAAwD;AACxD,iCAAiC;AAgBjC,SAAwB,YAAY,CAAC,KAAwB;IACzD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAE3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,IAAA,eAAS,EAAC;QACpB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE;QACjD,EAAE,EAAE;YACA,KAAK,EAAE,GAAG;SACb;QACD,IAAI,EAAE;YACF,KAAK,EAAE,MAAM;SAChB;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;KAChC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,eAAS,EAAC;QACtB,IAAI,EAAE;YACF,OAAO,EAAE,CAAC;SACb;QACD,EAAE,EAAE;YACA,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;KACvC,CAAC,CAAC;IACV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,OAAO,CACH,oBAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,OAAO;QACtE,6BAAK,SAAS,EAAC,uBAAuB;YAClC,oBAAC,cAAQ,CAAC,GAAG,IAAC,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAI;YACjF,6BAAK,SAAS,EAAC,QAAQ;gBACnB,6BAAK,SAAS,EAAC,cAAc;oBACzB,oBAAC,cAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,GAAI;oBACzC,6BAAK,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAO,CACpD;gBACN,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,kBAAkB,GAAI,CACrE,CACJ,CACK,CAClB,CAAC;AACN,CAAC;AA3CD,+BA2CC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport { useSpring, animated } from '@react-spring/web';\nimport { useState } from 'react';\n\nexport interface NotificationType {\n    icon?: IconType;\n    children?: React.ReactNode;\n    // in milliseconds\n    ttl: number;\n\n    id?: number;\n}\n\ninterface NotificationProps {\n    data: NotificationType;\n    onRemove?: (id: number) => void;\n}\n\nexport default function Notification(props: NotificationProps) {\n    const { icon, children, ttl } = props.data;\n\n    const [goAway, setGoAway] = useState(false);\n\n    const right = useSpring({\n        delay: 1200,\n        config: { mass: 50, tension: 170, friction: 200 },\n        to: {\n            right: '0',\n        },\n        from: {\n            right: '100%',\n        },\n        onRest: () => setGoAway(true),\n    });\n\n    const outAnim = useSpring({\n        from: {\n            opacity: 1,\n        },\n        to: {\n            opacity: goAway ? 0 : 1,\n        },\n        onRest: () => props.onRemove(props.data.id),\n    } as any);\n    const iconOnClickHandler = () => {\n        setGoAway(true);\n    };\n    return (\n        <animated.div className=\"c-notification a-bounce-down-left\" style={outAnim}>\n            <div className=\"c-notification__inner\">\n                <animated.div className=\"c-notification__timer\" style={{ right: right.right }} />\n                <div className=\"u-flex\">\n                    <div className=\"u-flex__item\">\n                        <Icon icon={icon} color={Color.Accent} />\n                        <div className=\"u-inline u-marg-left\">{children}</div>\n                    </div>\n                    <Icon icon={IconType.Close} size=\"24px\" onClick={iconOnClickHandler} />\n                </div>\n            </div>\n        </animated.div>\n    );\n}\n"]}

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Text_1 = require("./Text");
-const Icon_1 = require("./Icon");
-const BETooltip_1 = require("./BETooltip");
+const Text_1 = require("components/generic/Text");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Tooltip_1 = require("components/generic/Tooltip/Tooltip");
 function NumberIncrement(props) {
     const currentNumber = props.number ? props.number : 0;
     const setNumber = (newNumber) => {
@@ -32,12 +32,12 @@ function NumberIncrement(props) {
         updateCurrentNumber(true);
     };
     return (React.createElement("div", { className: "number-increment" },
-        React.createElement(BETooltip_1.default, { title: currentNumber <= (props.min || 0) ? 'Minimum reached' : 'Decrease', arrow: true, enterDelay: 500 },
+        React.createElement(Tooltip_1.default, { title: currentNumber <= (props.min || 0) ? 'Minimum reached' : 'Decrease' },
             React.createElement("div", { className: 'number-increment--button' + (currentNumber <= (props.min || 0) ? ' disabled' : ''), onClick: decrementCurrentNumber },
                 React.createElement(Icon_1.default, { icon: Icon_1.IconType.Remove, size: '24px' }))),
         React.createElement("div", { className: "number-increment--value" },
             React.createElement(Text_1.default, null, currentNumber)),
-        React.createElement(BETooltip_1.default, { title: currentNumber >= (props.max || 0) ? 'Maximum reached' : 'Add', arrow: true, enterDelay: 500 },
+        React.createElement(Tooltip_1.default, { title: currentNumber >= (props.max || 0) ? 'Maximum reached' : 'Add' },
             React.createElement("div", { className: 'number-increment--button' + (currentNumber >= (props.max || 0) ? ' disabled' : ''), onClick: incrementCurrentNumber },
                 React.createElement(Icon_1.default, { icon: Icon_1.IconType.Add, size: '24px' })))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"NumberIncrement.js","sourceRoot":"/","sources":["src/components/generic/NumberIncrement.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,iCAA0B;AAC1B,iCAAwC;AAExC,2CAAoC;AASpC,SAAwB,eAAe,CAAC,KAA2B;IAC/D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAE,EAAE;QACpC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;SAC7B;IACL,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC/C,IAAI,SAAS,GAAG,aAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErD,IAAI,SAAS,EAAE;YACX,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;aAAM;YACH,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,kBAAkB;QAC7B,oBAAC,mBAAS,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG;YAC9G,6BAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,GAAI,CAC3C,CACE;QACZ,6BAAK,SAAS,EAAC,yBAAyB;YACpC,oBAAC,cAAI,QAAE,aAAa,CAAQ,CAC1B;QACN,oBAAC,mBAAS,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG;YACzG,6BAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,GAAI,CACxC,CACE,CACV,CACT,CAAC;AACN,CAAC;AA/CD,kCA+CC","sourcesContent":["import * as React from 'react';\nimport Text from './Text';\nimport Icon, { IconType } from './Icon';\n\nimport BETooltip from './BETooltip';\n\nexport interface NumberIncrementProps {\n    number?: number;\n    onChange?: (value: number) => void;\n    min?: number;\n    max?: number;\n}\n\nexport default function NumberIncrement(props: NumberIncrementProps) {\n    const currentNumber = props.number ? props.number : 0;\n\n    const setNumber = (newNumber: number) => {\n        if (props.onChange) {\n            props.onChange(newNumber);\n        }\n    };\n\n    const updateCurrentNumber = (increment: boolean) => {\n        let newNumber = currentNumber + (increment ? 1 : -1);\n\n        if (increment) {\n            if (typeof props.max === 'number' && newNumber >= props.max) {\n                newNumber = props.max;\n            }\n        } else {\n            if (typeof props.min === 'number' && newNumber <= props.min) {\n                newNumber = props.min;\n            }\n        }\n\n        setNumber(newNumber);\n    };\n    const decrementCurrentNumber = () => {\n        updateCurrentNumber(false);\n    };\n    const incrementCurrentNumber = () => {\n        updateCurrentNumber(true);\n    };\n    return (\n        <div className=\"number-increment\">\n            <BETooltip title={currentNumber <= (props.min || 0) ? 'Minimum reached' : 'Decrease'} arrow={true} enterDelay={500}>\n                <div className={'number-increment--button' + (currentNumber <= (props.min || 0) ? ' disabled' : '')} onClick={decrementCurrentNumber}>\n                    <Icon icon={IconType.Remove} size={'24px'} />\n                </div>\n            </BETooltip>\n            <div className=\"number-increment--value\">\n                <Text>{currentNumber}</Text>\n            </div>\n            <BETooltip title={currentNumber >= (props.max || 0) ? 'Maximum reached' : 'Add'} arrow={true} enterDelay={500}>\n                <div className={'number-increment--button' + (currentNumber >= (props.max || 0) ? ' disabled' : '')} onClick={incrementCurrentNumber}>\n                    <Icon icon={IconType.Add} size={'24px'} />\n                </div>\n            </BETooltip>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"NumberIncrement.js","sourceRoot":"/","sources":["src/components/generic/NumberIncrement.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,kDAA2C;AAC3C,uDAA8D;AAE9D,gEAAyD;AASzD,SAAwB,eAAe,CAAC,KAA2B;IAC/D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAE,EAAE;QACpC,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;SAC7B;IACL,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC/C,IAAI,SAAS,GAAG,aAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErD,IAAI,SAAS,EAAE;YACX,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;aAAM;YACH,IAAI,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAC,GAAG,EAAE;gBACzD,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC;aACzB;SACJ;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,kBAAkB;QAC7B,oBAAC,iBAAO,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU;YAC9E,6BAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,GAAI,CAC3C,CACA;QACV,6BAAK,SAAS,EAAC,yBAAyB;YACpC,oBAAC,cAAI,QAAE,aAAa,CAAQ,CAC1B;QACN,oBAAC,iBAAO,IAAC,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK;YACzE,6BAAK,SAAS,EAAE,0BAA0B,GAAG,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB;gBAChI,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,GAAI,CACxC,CACA,CACR,CACT,CAAC;AACN,CAAC;AA/CD,kCA+CC","sourcesContent":["import * as React from 'react';\nimport Text from 'components/generic/Text';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\n\nimport Tooltip from 'components/generic/Tooltip/Tooltip';\n\nexport interface NumberIncrementProps {\n    number?: number;\n    onChange?: (value: number) => void;\n    min?: number;\n    max?: number;\n}\n\nexport default function NumberIncrement(props: NumberIncrementProps) {\n    const currentNumber = props.number ? props.number : 0;\n\n    const setNumber = (newNumber: number) => {\n        if (props.onChange) {\n            props.onChange(newNumber);\n        }\n    };\n\n    const updateCurrentNumber = (increment: boolean) => {\n        let newNumber = currentNumber + (increment ? 1 : -1);\n\n        if (increment) {\n            if (typeof props.max === 'number' && newNumber >= props.max) {\n                newNumber = props.max;\n            }\n        } else {\n            if (typeof props.min === 'number' && newNumber <= props.min) {\n                newNumber = props.min;\n            }\n        }\n\n        setNumber(newNumber);\n    };\n    const decrementCurrentNumber = () => {\n        updateCurrentNumber(false);\n    };\n    const incrementCurrentNumber = () => {\n        updateCurrentNumber(true);\n    };\n    return (\n        <div className=\"number-increment\">\n            <Tooltip title={currentNumber <= (props.min || 0) ? 'Minimum reached' : 'Decrease'}>\n                <div className={'number-increment--button' + (currentNumber <= (props.min || 0) ? ' disabled' : '')} onClick={decrementCurrentNumber}>\n                    <Icon icon={IconType.Remove} size={'24px'} />\n                </div>\n            </Tooltip>\n            <div className=\"number-increment--value\">\n                <Text>{currentNumber}</Text>\n            </div>\n            <Tooltip title={currentNumber >= (props.max || 0) ? 'Maximum reached' : 'Add'}>\n                <div className={'number-increment--button' + (currentNumber >= (props.max || 0) ? ' disabled' : '')} onClick={incrementCurrentNumber}>\n                    <Icon icon={IconType.Add} size={'24px'} />\n                </div>\n            </Tooltip>\n        </div>\n    );\n}\n"]}

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

@@ -0,0 +1,18 @@
+import { ReactNode, LegacyRef } from 'react';
+import { Placement, PositioningStrategy } from '@popperjs/core';
+type OverlayProps = {
+    children: ReactNode | ReactNode[];
+    open: boolean;
+    usePortal?: boolean;
+    container?: HTMLElement;
+    followElement?: Element;
+    className?: string;
+    hideStyles?: boolean;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    onClose?: (e: MouseEvent) => void;
+    offset?: [number, number];
+    overlayRef?: LegacyRef<HTMLDivElement>;
+};
+export declare const Overlay: (props: OverlayProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+const React = require("react");
+const react_1 = require("react");
+const react_popper_1 = require("react-popper");
+const Overlay_module_scss_1 = require("./Overlay.module.scss");
+const Portal_1 = require("components/generic/Portal/Portal");
+const hooks_1 = require("@frontend/hooks");
+const Fade_1 = require("animations/Fade");
+const classNames = require("classnames");
+const Overlay = (props) => {
+    var _a, _b, _c;
+    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_1.useEffect)(() => {
+        let timeout = null;
+        let cancelled = false;
+        if (props.open) {
+            setIsOpen(props.open);
+        }
+        else {
+            // Allow for fade out animation to run before removing element
+            timeout = setTimeout(() => {
+                if (!cancelled) {
+                    setIsOpen(false);
+                }
+            }, 500);
+        }
+        return () => {
+            cancelled = true;
+            clearTimeout(timeout);
+        };
+    }, [props.open]);
+    (0, react_1.useLayoutEffect)(() => {
+        const { remove } = onBodyClickExcept((e) => {
+            var _a;
+            if (isOpen) {
+                e.preventDefault();
+                e.stopPropagation();
+                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        }, popperElement);
+        return () => {
+            remove();
+        };
+    }, [isOpen, popperElement]);
+    const modifiers = [
+        {
+            name: 'flip',
+            options: {
+                flipVariations: false,
+            },
+        },
+    ];
+    if (props.offset) {
+        modifiers.push({
+            name: 'offset',
+            options: {
+                offset: props.offset,
+            },
+        });
+    }
+    const { styles: popperStyles, attributes } = (0, react_popper_1.usePopper)((_a = props.followElement) !== null && _a !== void 0 ? _a : referenceElement, popperElement, {
+        placement: (_b = props.placement) !== null && _b !== void 0 ? _b : 'bottom',
+        strategy: (_c = props.strategy) !== null && _c !== void 0 ? _c : 'absolute',
+        modifiers,
+    });
+    const overlayClasses = classNames({
+        [Overlay_module_scss_1.default['rs-overlay']]: !props.hideStyles,
+        [props.className]: !!props.className,
+    });
+    const overlayElement = (
+    // Here we depend on the props.open as that's the "intended" state. Fade animation will handle it going in and out.
+    React.createElement(React.Fragment, null,
+        !props.followElement && React.createElement("span", { ref: setReferenceElement }),
+        React.createElement("div", Object.assign({ ref: setPopperElement, style: popperStyles.popper }, attributes.popper, { className: Overlay_module_scss_1.default['rs-popper-container'] }),
+            React.createElement(Fade_1.default, { open: props.open },
+                React.createElement("div", { ref: props.overlayRef, className: overlayClasses }, props.children)))));
+    if (!isOpen) {
+        return React.createElement(React.Fragment, null);
+    }
+    if (props.usePortal || props.container) {
+        // PreventZIndex is only enabled if container is not specified, since modal will be appended to body, Roomstay engine by default will overlay it
+        return (React.createElement(Portal_1.RoomstayPortal, { target: props.container || document.body, preventZIndex: !!props.container }, overlayElement));
+    }
+    return overlayElement;
+};
+exports.Overlay = Overlay;
+//# sourceMappingURL=Overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sourceRoot":"/","sources":["src/components/generic/Overlay/Overlay.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAmF;AACnF,+CAAmD;AAEnD,+DAA2C;AAC3C,6DAAkE;AAClE,2CAA+C;AAC/C,0CAA4C;AAC5C,yCAAyC;AAuBlC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;;IAC3C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAc,IAAI,CAAC,CAAC;IAEtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE7C,8EAA8E;IAC9E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,GAAmB,IAAI,CAAC;QACnC,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,IAAI,KAAK,CAAC,IAAI,EAAE;YACZ,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACH,8DAA8D;YAC9D,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACtB,IAAI,CAAC,SAAS,EAAE;oBACZ,SAAS,CAAC,KAAK,CAAC,CAAC;iBACpB;YACL,CAAC,EAAE,GAAG,CAAC,CAAC;SACX;QAED,OAAO,GAAG,EAAE;YACR,SAAS,GAAG,IAAI,CAAC;YACjB,YAAY,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjB,IAAA,uBAAe,EAAC,GAAG,EAAE;QACjB,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAa,EAAE,EAAE;;YACnD,IAAI,MAAM,EAAE;gBACR,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,MAAA,KAAK,CAAC,OAAO,sDAAG,CAAC,CAAC,CAAC;aACtB;QACL,CAAC,EAAE,aAAa,CAAC,CAAC;QAElB,OAAO,GAAG,EAAE;YACR,MAAM,EAAE,CAAC;QACb,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAoB;QAC/B;YACI,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE;gBACL,cAAc,EAAE,KAAK;aACxB;SACJ;KACJ,CAAC;IACF,IAAI,KAAK,CAAC,MAAM,EAAE;QACd,SAAS,CAAC,IAAI,CAAC;YACX,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACL,MAAM,EAAE,KAAK,CAAC,MAAM;aACvB;SACJ,CAAC,CAAC;KACN;IAED,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAA,wBAAS,EAAC,MAAA,KAAK,CAAC,aAAa,mCAAI,gBAAgB,EAAE,aAAa,EAAE;QAC3G,SAAS,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,QAAQ;QACtC,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,UAAU;QACtC,SAAS;KACZ,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC;QAC9B,CAAC,6BAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU;QACzC,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS;KACvC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG;IACnB,mHAAmH;IAEnH;QACK,CAAC,KAAK,CAAC,aAAa,IAAI,8BAAM,GAAG,EAAE,mBAAmB,GAAS;QAEhE,2CAAK,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,CAAC,MAAM,IAAM,UAAU,CAAC,MAAM,IAAE,SAAS,EAAE,6BAAM,CAAC,qBAAqB,CAAC;YACnH,oBAAC,cAAa,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI;gBAC3B,6BAAK,GAAG,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,IAChD,KAAK,CAAC,QAAQ,CACb,CACM,CACd,CACP,CACN,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE;QACT,OAAO,yCAAK,CAAC;KAChB;IAED,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,EAAE;QACpC,gJAAgJ;QAChJ,OAAO,CACH,oBAAC,uBAAc,IAAC,MAAM,EAAE,KAAK,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,IACrF,cAAc,CACF,CACpB,CAAC;KACL;IAED,OAAO,cAAc,CAAC;AAC1B,CAAC,CAAC;AAtGW,QAAA,OAAO,WAsGlB","sourcesContent":["import * as 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 * as classNames from 'classnames';\nimport { Placement, PositioningStrategy } from '@popperjs/core';\n\ntype OverlayProps = {\n    children: ReactNode | ReactNode[];\n    open: boolean;\n\n    usePortal?: boolean;\n    container?: HTMLElement;\n\n    followElement?: Element;\n    className?: string;\n\n    hideStyles?: boolean;\n\n    placement?: Placement;\n    strategy?: PositioningStrategy;\n\n    onClose?: (e: MouseEvent) => void;\n    offset?: [number, number];\n    overlayRef?: LegacyRef<HTMLDivElement>;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    const [referenceElement, setReferenceElement] = useState<Element>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement>(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 = null;\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: MouseEvent) => {\n            if (isOpen) {\n                e.preventDefault();\n                e.stopPropagation();\n                props.onClose?.(e);\n            }\n        }, popperElement);\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            },\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({\n        [styles['rs-overlay']]: !props.hideStyles,\n        [props.className]: !!props.className,\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 ref={setPopperElement} style={popperStyles.popper} {...attributes.popper} className={styles['rs-popper-container']}>\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.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TextBoxProps } from '../TextBox';
+export declare const PasswordBox: React.ForwardRefExoticComponent<TextBoxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PasswordBox = void 0;
+const React = require("react");
+const react_1 = require("react");
+const Icon_1 = require("components/generic/Icon/Icon");
+const TextBox_1 = require("../TextBox");
+const PasswordBox_module_scss_1 = require("./PasswordBox.module.scss");
+exports.PasswordBox = (0, react_1.forwardRef)(function PasswordBox(props, ref) {
+    const [canSeePassword, setCanSeePassword] = (0, react_1.useState)(true);
+    const inputProperties = Object.assign(Object.assign({}, props), { type: canSeePassword ? 'text' : 'password' });
+    const onSwitch = () => {
+        setCanSeePassword(!canSeePassword);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: PasswordBox_module_scss_1.default.passwordbox },
+            React.createElement(TextBox_1.default, Object.assign({ ref: ref }, inputProperties)),
+            React.createElement(Icon_1.default, { className: PasswordBox_module_scss_1.default['suffix-icon'], icon: canSeePassword ? Icon_1.IconType.Eye : Icon_1.IconType.EyeBlocked, onClick: onSwitch }))));
+});
+//# sourceMappingURL=PasswordBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA6C;AAC7C,uDAA8D;AAC9D,wCAAmD;AACnD,uEAA+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,6BAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,oBAAC,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,oBAAC,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 * as 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"]}

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

@@ -0,0 +1,9 @@
+import { FC, FormEvent } from 'react';
+import { ECardType } from 'models/PaymentCard';
+interface CardTypeSelectProps {
+    value?: ECardType;
+    onChange?: (e: FormEvent<HTMLDivElement>) => void;
+    name?: string;
+}
+export declare const CardTypeSelect: FC<CardTypeSelectProps>;
+export {};

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardTypeSelect = void 0;
+const React = require("react");
+const PaymentCard_1 = require("models/PaymentCard");
+const CardTypeSelect_module_scss_1 = require("./CardTypeSelect.module.scss");
+const classNames = require("classnames");
+const PaymentCardHelper_1 = require("util/PaymentCardHelper");
+const hooks_1 = require("@frontend/hooks");
+const Hotel_1 = require("models/Client/Hotel/Hotel");
+const cardType2HotelCardType = {
+    [PaymentCard_1.ECardType.Visa]: Hotel_1.EPaymentCardType.Visa,
+    [PaymentCard_1.ECardType.Mastercard]: Hotel_1.EPaymentCardType.Mastercard,
+    [PaymentCard_1.ECardType.AmericanExpress]: Hotel_1.EPaymentCardType.AmericanExpress,
+    [PaymentCard_1.ECardType.JCB]: Hotel_1.EPaymentCardType.JCB,
+};
+const CardTypeSelect = ({ value, onChange }) => {
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    return (React.createElement("div", { className: CardTypeSelect_module_scss_1.default.root, onChange: onChange }, Object.values(PaymentCard_1.ECardType)
+        .filter((cardType) => { var _a; return (_a = hotel.paymentCardTypes) === null || _a === void 0 ? void 0 : _a.includes(cardType2HotelCardType[cardType]); })
+        .map((cardType) => {
+        const iconUrl = (0, PaymentCardHelper_1.mapCardTypeToGraphic)(cardType).cardIconUrl;
+        return (React.createElement("div", { key: cardType, className: classNames(CardTypeSelect_module_scss_1.default.icon, {
+                [CardTypeSelect_module_scss_1.default.isSelected]: value === cardType,
+            }) },
+            React.createElement("img", { src: iconUrl, alt: cardType })));
+    })));
+};
+exports.CardTypeSelect = CardTypeSelect;
+//# sourceMappingURL=CardTypeSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardTypeSelect.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/CardTypeSelect.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,oDAA+C;AAC/C,6EAAkD;AAClD,yCAAyC;AACzC,8DAA8D;AAC9D,2CAAkD;AAClD,qDAA6D;AAQ7D,MAAM,sBAAsB,GAExB;IACA,CAAC,uBAAS,CAAC,IAAI,CAAC,EAAE,wBAAgB,CAAC,IAAI;IACvC,CAAC,uBAAS,CAAC,UAAU,CAAC,EAAE,wBAAgB,CAAC,UAAU;IACnD,CAAC,uBAAS,CAAC,eAAe,CAAC,EAAE,wBAAgB,CAAC,eAAe;IAC7D,CAAC,uBAAS,CAAC,GAAG,CAAC,EAAE,wBAAgB,CAAC,GAAG;CACxC,CAAC;AACK,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,OAAO,CACH,6BAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAC1C,MAAM,CAAC,MAAM,CAAC,uBAAS,CAAC;SACpB,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,CAAA,EAAA,CAAC;SACxF,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QACd,MAAM,OAAO,GAAG,IAAA,wCAAoB,EAAC,QAAQ,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,CACH,6BACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,oCAAM,CAAC,IAAI,EAAE;gBAC/B,CAAC,oCAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,QAAQ;aAC1C,CAAC;YAEF,6BAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAI,CAClC,CACT,CAAC;IACN,CAAC,CAAC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAvBW,QAAA,cAAc,kBAuBzB","sourcesContent":["import * as React from 'react';\nimport { FC, FormEvent } from 'react';\nimport { ECardType } from 'models/PaymentCard';\nimport styles from './CardTypeSelect.module.scss';\nimport * as classNames from 'classnames';\nimport { mapCardTypeToGraphic } from 'util/PaymentCardHelper';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { EPaymentCardType } from 'models/Client/Hotel/Hotel';\n\ninterface CardTypeSelectProps {\n    value?: ECardType;\n    onChange?: (e: FormEvent<HTMLDivElement>) => void;\n    name?: string;\n}\n\nconst cardType2HotelCardType: {\n    [cardType in ECardType]?: EPaymentCardType;\n} = {\n    [ECardType.Visa]: EPaymentCardType.Visa,\n    [ECardType.Mastercard]: EPaymentCardType.Mastercard,\n    [ECardType.AmericanExpress]: EPaymentCardType.AmericanExpress,\n    [ECardType.JCB]: EPaymentCardType.JCB,\n};\nexport const CardTypeSelect: FC<CardTypeSelectProps> = ({ value, onChange }) => {\n    const { hotel } = useCurrentHotel();\n\n    return (\n        <div className={styles.root} onChange={onChange}>\n            {Object.values(ECardType)\n                .filter((cardType) => hotel.paymentCardTypes?.includes(cardType2HotelCardType[cardType]))\n                .map((cardType) => {\n                    const iconUrl = mapCardTypeToGraphic(cardType).cardIconUrl;\n\n                    return (\n                        <div\n                            key={cardType}\n                            className={classNames(styles.icon, {\n                                [styles.isSelected]: value === cardType,\n                            })}\n                        >\n                            <img src={iconUrl} alt={cardType} />\n                        </div>\n                    );\n                })}\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,6 @@
+import { IRoomstayMemberCardFormInput } from '../../../models/RoomstayMembers/IRoomstayMemberCard';
+interface PaymentCardProps {
+    card: IRoomstayMemberCardFormInput;
+}
+export declare const PaymentCard: ({ card }: PaymentCardProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentCard = void 0;
+const React = require("react");
+const PaymentCard_module_scss_1 = require("./PaymentCard.module.scss");
+const RoomstayThemeEngine_1 = require("providers/RoomstayThemeEngine");
+const VGSHooks_1 = require("hooks/VGSHooks");
+const SmallSpinner_1 = require("../loader/SmallSpinner");
+const PaymentCardHelper_1 = require("util/PaymentCardHelper");
+const PaymentCard = ({ card }) => {
+    const labelStyles = {
+        '@font-face': {
+            src: `url(${RoomstayThemeEngine_1.default.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,
+            'font-weight': 'bold',
+            'font-display': 'swap',
+            'font-family': 'Cadiz',
+        },
+        'font-size': '18px',
+        'line-height': '24px',
+        'font-weight': 'bold',
+        'font-family': 'Cadiz',
+        color: 'white',
+    };
+    const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = (0, VGSHooks_1.useVgsShow)({
+        name: 'credit-card',
+        value: card.cardNumber,
+        styles: Object.assign(Object.assign({}, labelStyles), { 'word-spacing': '16px' }),
+    });
+    const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = (0, VGSHooks_1.useVgsShow)({
+        name: 'card-name',
+        value: card.name,
+        styles: labelStyles,
+    });
+    const cardGraphic = (0, PaymentCardHelper_1.mapCardTypeToGraphic)(card.type);
+    return (React.createElement("div", { className: PaymentCard_module_scss_1.default.card },
+        React.createElement("img", { className: "u-w-100", src: cardGraphic.backgroundUrl, alt: "Payment card background color" }),
+        React.createElement("div", { className: PaymentCard_module_scss_1.default.chip },
+            React.createElement("img", { src: RoomstayThemeEngine_1.default.getImageAssetUrl() + 'chip.svg', alt: "Chip" })),
+        React.createElement("div", { className: PaymentCard_module_scss_1.default.type },
+            React.createElement("img", { src: cardGraphic.cardNameIconUrl, alt: `Payment card type ${card.type}` })),
+        React.createElement("div", { className: PaymentCard_module_scss_1.default.number },
+            isCardNumberLoading && React.createElement(SmallSpinner_1.default, null),
+            React.createElement("span", { ref: cardNumberTargetElement })),
+        React.createElement("div", { className: PaymentCard_module_scss_1.default.name },
+            React.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Card Holder Name"),
+            React.createElement("div", { className: PaymentCard_module_scss_1.default.cardholderName },
+                isCardholderNameLoading && React.createElement(SmallSpinner_1.default, null),
+                React.createElement("span", { ref: cardholderNameTargetElement }))),
+        React.createElement("div", { className: PaymentCard_module_scss_1.default.date },
+            React.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Expiry Date"),
+            card.expiry ? React.createElement("div", { className: PaymentCard_module_scss_1.default.value }, card.expiry) : React.createElement("br", { className: PaymentCard_module_scss_1.default.value }))));
+};
+exports.PaymentCard = PaymentCard;
+//# sourceMappingURL=PaymentCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,uEAA+C;AAC/C,uEAAgE;AAChE,6CAA4C;AAE5C,yDAAkD;AAClD,8DAA8D;AAOvD,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,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,6BAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,6BAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,oBAAC,sBAAY,OAAG;YACxC,8BAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,uBAAwB;YACpD,6BAAK,SAAS,EAAE,iCAAM,CAAC,cAAc;gBAChC,uBAAuB,IAAI,oBAAC,sBAAY,OAAG;gBAC5C,8BAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,kBAAmB;YAC9C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,WAAW,eAwDtB","sourcesContent":["import * as 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\ninterface 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"]}

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

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