@roomstay/frontend 1.6.1 → 2.0.0-2

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

@@ -0,0 +1,201 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentCardInput = void 0;
+const React = require("react");
+const react_1 = require("react");
+const PaymentCardInput_module_scss_1 = require("./PaymentCardInput.module.scss");
+const Text_1 = require("components/generic/Text");
+const Color_1 = require("util/Color");
+const InputGroup_1 = require("components/generic/InputGroup/InputGroup");
+const PaymentCard_1 = require("components/generic/PaymentCard/PaymentCard");
+const CardTypeSelect_1 = require("components/generic/PaymentCard/CardTypeSelect");
+const BEButton_1 = require("../BEButton");
+const AutoAutoHeight_1 = require("animations/AutoAutoHeight");
+const Alert_1 = require("components/generic/Alert");
+const Icon_1 = require("components/generic/Icon/Icon");
+const auth_1 = require("@aws-amplify/auth");
+const VGSHooks_1 = require("hooks/VGSHooks");
+const LoggedInUserHook_1 = require("hooks/LoggedInUserHook");
+const Fade_1 = require("../../../animations/Fade");
+const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {
+    const { user, fullName } = (0, LoggedInUserHook_1.useMember)();
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [cardType, setCardType] = (0, react_1.useState)(null);
+    const [isSavingVGSDetails, setIsSavingVGSDetails] = (0, react_1.useState)(false);
+    const [isDeletingCard, setIsDeletingCard] = (0, react_1.useState)(false);
+    const [isMarkingAsDefault, setIsMarkingAsDefault] = (0, react_1.useState)(false);
+    const isCardDefault = (user === null || user === void 0 ? void 0 : user.defaultCard) === (card === null || card === void 0 ? void 0 : card.cardId);
+    const inputsDisabled = !!(card === null || card === void 0 ? void 0 : card.cardId);
+    const css = {
+        fontSize: '13px',
+        lineHeight: '18px',
+        '&::placeholder': {
+            color: '#8B8F9A',
+            opacity: 1,
+        },
+    };
+    const { fields: [cardNumber, cardHolder, expiryDate, securityCode], triggerFieldUpdate, vgsForm, } = (0, VGSHooks_1.useVgsCollect)([
+        {
+            name: 'credit-card',
+            label: 'Credit Card',
+            type: 'card-number',
+            vgsProps: {
+                validations: ['required', 'validCardNumber'],
+                css,
+                autoComplete: ['cc-number'],
+                successColor: '#4F8A10',
+                errorColor: '#D8000C',
+                showCardIcon: false,
+                placeholder: '5913 2207 9578 4291',
+                disabled: inputsDisabled,
+            },
+        },
+        { name: 'card-name', label: 'Card Name', type: 'text', vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName } },
+        {
+            name: 'expiration-date',
+            label: 'Expiration Date',
+            type: 'card-expiration-date',
+            vgsProps: { validations: ['required', 'validCardExpirationDate'], css, disabled: inputsDisabled, placeholder: '12/27' },
+        },
+        {
+            name: 'security-code',
+            label: 'Security Code',
+            type: 'card-security-code',
+            vgsProps: { validations: ['required', 'validCardSecurityCode'], css, disabled: inputsDisabled, placeholder: '552' },
+        },
+    ]);
+    (0, react_1.useEffect)(() => {
+        triggerFieldUpdate();
+    }, [card]);
+    (0, react_1.useEffect)(() => {
+        if (cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.state.cardType) {
+            setCardType(cardNumber.state.cardType);
+        }
+    }, [cardNumber]);
+    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];
+    const setErrorsOnFaults = (faults) => {
+        const newErrors = {};
+        Object.keys(faults).forEach((input) => {
+            let name = '';
+            switch (input) {
+                case 'credit-card':
+                    name = 'Credit Card';
+                    break;
+                case 'expiration-date':
+                    name = 'Expiration Date';
+                    break;
+                case 'security-code':
+                    name = 'Security Code';
+                    break;
+                default:
+                    name = 'Card Name';
+                    break;
+            }
+            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];
+        });
+        setErrors(newErrors);
+    };
+    const onChangeSubmit = () => {
+        if (vgsForm) {
+            setIsSavingVGSDetails(true);
+            auth_1.Auth.currentAuthenticatedUser().then((cognitoData) => {
+                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;
+                vgsForm.submit('/members/vgs-hide', {
+                    serializer: 'deep',
+                    methods: 'POST',
+                    headers: {
+                        Authorization: jwtToken,
+                    },
+                }, (status, cardData) => __awaiter(void 0, void 0, void 0, function* () {
+                    const expMatch = cardData['expiration-date'].match(/^(\d+)\s*\/\s*(\d+)$/);
+                    if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {
+                        setErrorsOnFaults({
+                            'expiration-date': {
+                                errorMessages: ['Invalid - it must be in the format MM / YY or MM / YYYY'],
+                            },
+                        });
+                        return;
+                    }
+                    console.log(cardData);
+                    const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));
+                    const newCard = {
+                        username: card.username,
+                        cardId: card.cardId,
+                        securityCode: cardData['security-code'],
+                        expiry: expiration,
+                        name: cardData['card-name'],
+                        cardNumber: cardData['credit-card'],
+                        type: cardType,
+                    };
+                    yield onSubmit(newCard);
+                    vgsForm.reset();
+                    setIsSavingVGSDetails(false);
+                }), (error) => {
+                    setErrorsOnFaults(error);
+                    setIsSavingVGSDetails(false);
+                });
+            });
+        }
+        else {
+            console.error('VGS not on element, problem has occurred');
+        }
+    };
+    const onDeleteCardClicked = () => {
+        setIsDeletingCard(true);
+        onDeleteClicked === null || onDeleteClicked === void 0 ? void 0 : onDeleteClicked(card).finally(() => {
+            setIsDeletingCard(false);
+        });
+    };
+    const onMarkAsDefault = () => {
+        setIsMarkingAsDefault(true);
+        onMarkedAsDefaultClicked === null || onMarkedAsDefaultClicked === void 0 ? void 0 : onMarkedAsDefaultClicked(card).finally(() => {
+            setIsMarkingAsDefault(false);
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-inputs'] },
+            React.createElement("div", { className: "u-marg-bottom--medium u-marg-top--heavy@l-" },
+                React.createElement(CardTypeSelect_1.CardTypeSelect, { value: cardType })),
+            React.createElement("div", { className: "u-margin-bottom" }, inputNames.map((name) => {
+                const errorMessage = errors[name];
+                return (React.createElement(AutoAutoHeight_1.default, { open: !!errorMessage, key: name },
+                    React.createElement("div", { className: "u-flex" },
+                        React.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, errorMessage)))));
+            })),
+            React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement("div", { className: "u-marg-bottom--light" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Card Number")),
+                React.createElement("div", { className: cardNumber.getClasses(), ref: cardNumber.ref })),
+            React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                    React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "u-marg-bottom--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Expiry Month / Year")),
+                        React.createElement("div", { className: expiryDate.getClasses(), ref: expiryDate.ref })),
+                    React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "u-marg-bottom--light" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Security code")),
+                        React.createElement("div", { className: securityCode.getClasses(), ref: securityCode.ref })))),
+            React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement("div", { className: "u-marg-bottom--light" },
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Name on Credit Card")),
+                React.createElement("div", { className: cardHolder.getClasses(), ref: cardHolder.ref })),
+            React.createElement("div", { className: "u-marg-bottom" }, (card === null || card === void 0 ? void 0 : card.cardId) ? (React.createElement(BEButton_1.default, { className: "u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center", isLoading: isDeletingCard, textColor: Color_1.Color.Danger, isText: true, icon: Icon_1.IconType.Delete, onClick: onDeleteCardClicked, stopIconAnimation: true }, "Delete Card")) : (React.createElement(BEButton_1.default, { className: "u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center", isLoading: isSavingVGSDetails, rounded: true, primary: true, filled: true, mobileWidth: true, onClick: onChangeSubmit }, "Save Card")))),
+        React.createElement(Fade_1.default, { open: !!(card === null || card === void 0 ? void 0 : card.cardId) },
+            React.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-large'] },
+                React.createElement(PaymentCard_1.PaymentCard, { card: card }),
+                React.createElement("div", { className: "u-marg-top u-marg-top--heavy@l-" },
+                    React.createElement(BEButton_1.default, { onClick: onMarkAsDefault, isLoading: isMarkingAsDefault, disabled: isCardDefault, filled: true, primary: true, size: 'small' }, "Mark as Default"))))));
+};
+exports.PaymentCardInput = PaymentCardInput;
+//# sourceMappingURL=PaymentCardInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { FC, useEffect, useState } from 'react';\nimport styles from './PaymentCardInput.module.scss';\nimport Text, { TextType } from 'components/generic/Text';\nimport { Color } from 'util/Color';\nimport InputGroup from 'components/generic/InputGroup/InputGroup';\nimport { ECardType } from 'models/PaymentCard';\nimport { PaymentCard as GenericPaymentCard } from 'components/generic/PaymentCard/PaymentCard';\nimport { CardTypeSelect } from 'components/generic/PaymentCard/CardTypeSelect';\n\nimport BEButton from '../BEButton';\n\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport Alert, { AlertType } from 'components/generic/Alert';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { Auth } from '@aws-amplify/auth';\nimport { useVgsCollect } from 'hooks/VGSHooks';\nimport { useMember } from 'hooks/LoggedInUserHook';\nimport FadeAnimation from '../../../animations/Fade';\nimport { IRoomstayMemberCardFormInput } from '../../../models/RoomstayMembers/IRoomstayMemberCard';\n\ninterface PaymentCardInputProps {\n    card: IRoomstayMemberCardFormInput;\n    onSubmit?: (card: IRoomstayMemberCards) => Promise<void>;\n    onDeleteClicked: (card: IRoomstayMemberCards) => Promise<void>;\n    onMarkedAsDefaultClicked: (card: IRoomstayMemberCards) => Promise<void>;\n}\n\nexport const PaymentCardInput: FC<PaymentCardInputProps> = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {\n    const { user, fullName } = useMember();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n    const [cardType, setCardType] = useState<ECardType>(null);\n\n    const [isSavingVGSDetails, setIsSavingVGSDetails] = useState(false);\n    const [isDeletingCard, setIsDeletingCard] = useState(false);\n    const [isMarkingAsDefault, setIsMarkingAsDefault] = useState(false);\n\n    const isCardDefault = user?.defaultCard === card?.cardId;\n\n    const inputsDisabled = !!card?.cardId;\n\n    const css = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, cardHolder, expiryDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect([\n        {\n            name: 'credit-card',\n            label: 'Credit Card',\n            type: 'card-number',\n            vgsProps: {\n                validations: ['required', 'validCardNumber'],\n                css,\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: '5913 2207 9578 4291',\n                disabled: inputsDisabled,\n            },\n        },\n        { name: 'card-name', label: 'Card Name', type: 'text', vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName } },\n        {\n            name: 'expiration-date',\n            label: 'Expiration Date',\n            type: 'card-expiration-date',\n            vgsProps: { validations: ['required', 'validCardExpirationDate'], css, disabled: inputsDisabled, placeholder: '12/27' },\n        },\n        {\n            name: 'security-code',\n            label: 'Security Code',\n            type: 'card-security-code',\n            vgsProps: { validations: ['required', 'validCardSecurityCode'], css, disabled: inputsDisabled, placeholder: '552' },\n        },\n    ]);\n\n    useEffect(() => {\n        triggerFieldUpdate();\n    }, [card]);\n\n    useEffect(() => {\n        if (cardNumber?.state.cardType) {\n            setCardType(cardNumber.state.cardType);\n        }\n    }, [cardNumber]);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = 'Credit Card';\n                    break;\n                case 'expiration-date':\n                    name = 'Expiration Date';\n                    break;\n                case 'security-code':\n                    name = 'Security Code';\n                    break;\n                default:\n                    name = 'Card Name';\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    const onChangeSubmit = (): void => {\n        if (vgsForm) {\n            setIsSavingVGSDetails(true);\n            Auth.currentAuthenticatedUser().then((cognitoData) => {\n                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;\n\n                vgsForm.submit(\n                    '/members/vgs-hide',\n                    {\n                        serializer: 'deep',\n                        methods: 'POST',\n                        headers: {\n                            Authorization: jwtToken,\n                        },\n                    },\n                    async (status: any, cardData: any) => {\n                        const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                        if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                            setErrorsOnFaults({\n                                'expiration-date': {\n                                    errorMessages: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\n                                },\n                            });\n                            return;\n                        }\n\n                        console.log(cardData);\n\n                        const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n                        const newCard: IRoomstayMemberCards = {\n                            username: card.username,\n                            cardId: card.cardId,\n                            securityCode: cardData['security-code'],\n                            expiry: expiration,\n                            name: cardData['card-name'],\n\n                            cardNumber: cardData['credit-card'],\n                            type: cardType,\n                        };\n\n                        await onSubmit(newCard);\n                        vgsForm.reset();\n                        setIsSavingVGSDetails(false);\n                    },\n                    (error: any) => {\n                        setErrorsOnFaults(error);\n                        setIsSavingVGSDetails(false);\n                    }\n                );\n            });\n        } else {\n            console.error('VGS not on element, problem has occurred');\n        }\n    };\n\n    const onDeleteCardClicked = () => {\n        setIsDeletingCard(true);\n\n        onDeleteClicked?.(card).finally(() => {\n            setIsDeletingCard(false);\n        });\n    };\n\n    const onMarkAsDefault = () => {\n        setIsMarkingAsDefault(true);\n\n        onMarkedAsDefaultClicked?.(card).finally(() => {\n            setIsMarkingAsDefault(false);\n        });\n    };\n\n    return (\n        <>\n            <div className={styles['card-inputs']}>\n                <div className=\"u-marg-bottom--medium u-marg-top--heavy@l-\">\n                    <CardTypeSelect value={cardType} />\n                </div>\n                <div className=\"u-margin-bottom\">\n                    {inputNames.map((name) => {\n                        const errorMessage = errors[name];\n                        return (\n                            <AutoAutoHeight open={!!errorMessage} key={name}>\n                                <div className=\"u-flex\">\n                                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                        <Text type={TextType.Small}>{errorMessage}</Text>\n                                    </Alert>\n                                </div>\n                            </AutoAutoHeight>\n                        );\n                    })}\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            Card Number\n                        </Text>\n                    </div>\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <InputGroup dimensions=\"2/2\">\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    Expiry Month / Year\n                                </Text>\n                            </div>\n                            <div className={expiryDate.getClasses()} ref={expiryDate.ref} />\n                        </>\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    Security code\n                                </Text>\n                            </div>\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </>\n                    </InputGroup>\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            Name on Credit Card\n                        </Text>\n                    </div>\n                    <div className={cardHolder.getClasses()} ref={cardHolder.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    {card?.cardId ? (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isDeletingCard}\n                            textColor={Color.Danger}\n                            isText={true}\n                            icon={IconType.Delete}\n                            onClick={onDeleteCardClicked}\n                            stopIconAnimation={true}\n                        >\n                            Delete Card\n                        </BEButton>\n                    ) : (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isSavingVGSDetails}\n                            rounded={true}\n                            primary={true}\n                            filled={true}\n                            mobileWidth={true}\n                            onClick={onChangeSubmit}\n                        >\n                            Save Card\n                        </BEButton>\n                    )}\n                </div>\n            </div>\n            <FadeAnimation open={!!card?.cardId}>\n                <div className={styles['card-large']}>\n                    <GenericPaymentCard card={card} />\n                    <div className=\"u-marg-top u-marg-top--heavy@l-\">\n                        <BEButton onClick={onMarkAsDefault} isLoading={isMarkingAsDefault} disabled={isCardDefault} filled={true} primary={true} size={'small'}>\n                            Mark as Default\n                        </BEButton>\n                    </div>\n                </div>\n            </FadeAnimation>\n        </>\n    );\n};\n"]}

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

@@ -1,18 +1,26 @@
-import { IconType } from './Icon';
+import { IconType } from 'components/generic/Icon/Icon';
 import * as React from 'react';
+import { PropsWithChildren } from 'react';
+export declare enum PillVariant {
+    Outlined = "--outlined"
+}
 export declare enum PillType {
     Primary = "--accent",
     Secondary = "--accent-2",
     Warning = "--warning",
     Success = "--success",
     Default = "--default",
-    Grey = "--grey"
+    Grey = "--grey",
+    Danger = "--danger"
 }
-export interface PillProps {
+export interface PillProps extends PropsWithChildren<any> {
     icon?: IconType | React.ReactNode;
+    size?: 'medium' | 'small';
     iconPosition?: 'left' | 'right';
     type?: PillType;
     onClickIcon?: () => void | null;
+    variant?: PillVariant;
+    className?: string;
     [x: string]: React.ReactNode;
 }
 export default function Pill(props: PillProps): JSX.Element;

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

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PillType = void 0;
-const Icon_1 = require("./Icon");
+exports.PillType = exports.PillVariant = void 0;
+const Icon_1 = require("components/generic/Icon/Icon");
 const React = require("react");
 const classNames = require("classnames");
+var PillVariant;
+(function (PillVariant) {
+    PillVariant["Outlined"] = "--outlined";
+})(PillVariant = exports.PillVariant || (exports.PillVariant = {}));
 var PillType;
 (function (PillType) {
     PillType["Primary"] = "--accent";
@@ -12,11 +16,14 @@ var PillType;
     PillType["Success"] = "--success";
     PillType["Default"] = "--default";
     PillType["Grey"] = "--grey";
+    PillType["Danger"] = "--danger";
 })(PillType = exports.PillType || (exports.PillType = {}));
 function Pill(props) {
     var _a, _b;
-    const classes = classNames('c-pill', {
+    const { size = 'medium', variant, className } = props;
+    const classes = classNames('c-pill', variant, className, {
         '--icon-right': props.iconPosition === 'right',
+        '--small': size === 'small',
         [(_a = props.type) !== null && _a !== void 0 ? _a : PillType.Default]: true,
     });
     const icon = typeof props.icon === 'string' ? React.createElement(Icon_1.default, { icon: props.icon, onClick: (_b = props.onClickIcon) !== null && _b !== void 0 ? _b : null }) : props.icon;

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":";;;AAAA,iCAAwC;AACxC,+BAA+B;AAE/B,yCAAyC;AAEzC,IAAY,QAOX;AAPD,WAAY,QAAQ;IAChB,gCAAoB,CAAA;IACpB,oCAAwB,CAAA;IACxB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,2BAAe,CAAA;AACnB,CAAC,EAPW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAOnB;AAYD,SAAwB,IAAI,CAAC,KAAgB;;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE;QACjC,cAAc,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO;QAC9C,OAAC,KAAK,CAAC,IAAI,mCAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI;KACzC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,QAAE,KAAK,CAAC,WAAW,mCAAI,IAAI,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAEtI,OAAO,CACH,8BAAM,SAAS,EAAE,OAAO;QACnB,CAAC,KAAK,CAAC,YAAY,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI;QAC9D,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CACpC,CACV,CAAC;AACN,CAAC;AAfD,uBAeC","sourcesContent":["import Icon, { IconType } from './Icon';\nimport * as React from 'react';\n\nimport * as classNames from 'classnames';\n\nexport enum PillType {\n    Primary = '--accent',\n    Secondary = '--accent-2',\n    Warning = '--warning',\n    Success = '--success',\n    Default = '--default',\n    Grey = '--grey',\n}\n\nexport interface PillProps {\n    icon?: IconType | React.ReactNode;\n    iconPosition?: 'left' | 'right';\n    type?: PillType;\n\n    onClickIcon?: () => void | null;\n\n    [x: string]: React.ReactNode;\n}\n\nexport default function Pill(props: PillProps) {\n    const classes = classNames('c-pill', {\n        '--icon-right': props.iconPosition === 'right',\n        [props.type ?? PillType.Default]: true,\n    });\n\n    const icon = typeof props.icon === 'string' ? <Icon icon={props.icon as IconType} onClick={props.onClickIcon ?? null} /> : props.icon;\n\n    return (\n        <span className={classes}>\n            {(props.iconPosition === 'left' || !props.iconPosition) && icon}\n            {props.children}\n            {props.iconPosition === 'right' && icon}\n        </span>\n    );\n}\n"]}
+{"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":";;;AAAA,uDAA8D;AAC9D,+BAA+B;AAG/B,yCAAyC;AAEzC,IAAY,WAEX;AAFD,WAAY,WAAW;IACnB,sCAAuB,CAAA;AAC3B,CAAC,EAFW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAEtB;AAED,IAAY,QAQX;AARD,WAAY,QAAQ;IAChB,gCAAoB,CAAA;IACpB,oCAAwB,CAAA;IACxB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,2BAAe,CAAA;IACf,+BAAmB,CAAA;AACvB,CAAC,EARW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAQnB;AAeD,SAAwB,IAAI,CAAC,KAAgB;;IACzC,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtD,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;QACrD,cAAc,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO;QAC9C,SAAS,EAAE,IAAI,KAAK,OAAO;QAC3B,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI;KACzC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,IAAI,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAEtI,OAAO,CACH,8BAAM,SAAS,EAAE,OAAO;QACnB,CAAC,KAAK,CAAC,YAAY,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI;QAC9D,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CACpC,CACV,CAAC;AACN,CAAC;AAlBD,uBAkBC","sourcesContent":["import Icon, { IconType } from 'components/generic/Icon/Icon';\nimport * as React from 'react';\nimport { PropsWithChildren } from 'react';\n\nimport * as classNames from 'classnames';\n\nexport enum PillVariant {\n    Outlined = '--outlined',\n}\n\nexport enum PillType {\n    Primary = '--accent',\n    Secondary = '--accent-2',\n    Warning = '--warning',\n    Success = '--success',\n    Default = '--default',\n    Grey = '--grey',\n    Danger = '--danger',\n}\n\nexport interface PillProps extends PropsWithChildren<any> {\n    icon?: IconType | React.ReactNode;\n    size?: 'medium' | 'small';\n    iconPosition?: 'left' | 'right';\n    type?: PillType;\n\n    onClickIcon?: () => void | null;\n    variant?: PillVariant;\n    className?: string;\n\n    [x: string]: React.ReactNode;\n}\n\nexport default function Pill(props: PillProps) {\n    const { size = 'medium', variant, className } = props;\n\n    const classes = classNames('c-pill', variant, className, {\n        '--icon-right': props.iconPosition === 'right',\n        '--small': size === 'small',\n        [props.type ?? PillType.Default]: true,\n    });\n\n    const icon = typeof props.icon === 'string' ? <Icon icon={props.icon as IconType} onClick={props.onClickIcon ?? null} /> : props.icon;\n\n    return (\n        <span className={classes}>\n            {(props.iconPosition === 'left' || !props.iconPosition) && icon}\n            {props.children}\n            {props.iconPosition === 'right' && icon}\n        </span>\n    );\n}\n"]}

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

@@ -1,4 +1,4 @@
-declare type StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface PlaceholderProps {
     type: string;
     w?: StringScreenSize;
@@ -7,6 +7,7 @@ export interface PlaceholderProps {
     blockSize?: string;
     blink?: boolean;
     rounded?: string;
+    noMarg?: boolean;
 }
 export default function Placeholder(props: PlaceholderProps): JSX.Element;
 export {};

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

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const classNames = require("classnames");
 function Placeholder(props) {
-    const classes = classNames('c-placeholder', 'u-marg', {
+    const classes = classNames('c-placeholder', {
         [`--${props.w}--w`]: !!props.w,
         [`--${props.h}--h`]: !!props.h,
+        'u-marg': !props.noMarg,
         '--text': props.type === 'text',
         '--circle': props.type === 'circle',
         '--sm': props.circleSize === 'sm' || props.blockSize === 'sm',

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","sourceRoot":"/","sources":["src/components/generic/Placeholder.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,yCAAyC;AAczC,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE,QAAQ,EAAE;QAClD,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;QAE9B,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM;QAC/B,UAAU,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;QACnC,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,SAAS,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;QACjC,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,SAAS,EAAE,KAAK,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,OAAO,GAAI,CAAC;AACvC,CAAC;AAlBD,8BAkBC","sourcesContent":["import * as React from 'react';\nimport * as classNames from 'classnames';\n\ntype StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface PlaceholderProps {\n    type: string;\n    w?: StringScreenSize;\n    h?: StringScreenSize;\n    circleSize?: string;\n    blockSize?: string;\n    blink?: boolean;\n    rounded?: string;\n}\n\nexport default function Placeholder(props: PlaceholderProps) {\n    const classes = classNames('c-placeholder', 'u-marg', {\n        [`--${props.w}--w`]: !!props.w,\n        [`--${props.h}--h`]: !!props.h,\n\n        '--text': props.type === 'text',\n        '--circle': props.type === 'circle',\n        '--sm': props.circleSize === 'sm' || props.blockSize === 'sm',\n        '--md': props.circleSize === 'md' || props.blockSize === 'md',\n        '--lg': props.circleSize === 'lg' || props.blockSize === 'lg',\n        '--xl': props.circleSize === 'xl' || props.blockSize === 'xl',\n        '--block': props.type === 'block',\n        '--rounded-light': props.rounded === 'md',\n        '--rounded-heavy': props.rounded === 'lg',\n        '--blink': props.blink,\n    });\n\n    return <div className={classes} />;\n}\n"]}
+{"version":3,"file":"Placeholder.js","sourceRoot":"/","sources":["src/components/generic/Placeholder.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,yCAAyC;AAgBzC,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,EAAE;QACxC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;QAC9B,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM;QACvB,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM;QAC/B,UAAU,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;QACnC,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,SAAS,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;QACjC,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,SAAS,EAAE,KAAK,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,OAAO,GAAI,CAAC;AACvC,CAAC;AAlBD,8BAkBC","sourcesContent":["import * as React from 'react';\nimport * as classNames from 'classnames';\n\ntype StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface PlaceholderProps {\n    type: string;\n    w?: StringScreenSize;\n    h?: StringScreenSize;\n    circleSize?: string;\n    blockSize?: string;\n    blink?: boolean;\n    rounded?: string;\n\n    noMarg?: boolean;\n}\n\nexport default function Placeholder(props: PlaceholderProps) {\n    const classes = classNames('c-placeholder', {\n        [`--${props.w}--w`]: !!props.w,\n        [`--${props.h}--h`]: !!props.h,\n        'u-marg': !props.noMarg,\n        '--text': props.type === 'text',\n        '--circle': props.type === 'circle',\n        '--sm': props.circleSize === 'sm' || props.blockSize === 'sm',\n        '--md': props.circleSize === 'md' || props.blockSize === 'md',\n        '--lg': props.circleSize === 'lg' || props.blockSize === 'lg',\n        '--xl': props.circleSize === 'xl' || props.blockSize === 'xl',\n        '--block': props.type === 'block',\n        '--rounded-light': props.rounded === 'md',\n        '--rounded-heavy': props.rounded === 'lg',\n        '--blink': props.blink,\n    });\n\n    return <div className={classes} />;\n}\n"]}

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

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface PlanpayButtonProps extends PropsWithChildren<any> {
+    onClick?: JSX.IntrinsicElements['a']['onClick'];
+}
+export declare const PlanpayButton: FC<PlanpayButtonProps>;
+export {};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlanpayButton = void 0;
+const React = require("react");
+const PlanpayButton_module_scss_1 = require("./PlanpayButton.module.scss");
+const PlanpayButton = ({ onClick, children }) => {
+    return (React.createElement("a", { className: PlanpayButton_module_scss_1.default.root, onClick: onClick }, children));
+};
+exports.PlanpayButton = PlanpayButton;
+exports.PlanpayButton;
+//# sourceMappingURL=PlanpayButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlanpayButton.js","sourceRoot":"/","sources":["src/components/generic/PlanpayButton/PlanpayButton.tsx"],"names":[],"mappings":";;;AACA,+BAA+B;AAC/B,2EAAiD;AAM1C,MAAM,aAAa,GAA2B,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,OAAO,CACH,2BAAG,SAAS,EAAE,mCAAM,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,IACtC,QAAQ,CACT,CACP,CAAC;AACN,CAAC,CAAC;AANW,QAAA,aAAa,iBAMxB;AAEF,qBAAa,CAAC","sourcesContent":["import { FC, PropsWithChildren } from 'react';\nimport * as React from 'react';\nimport styles from './PlanpayButton.module.scss';\n\ninterface PlanpayButtonProps extends PropsWithChildren<any> {\n    onClick?: JSX.IntrinsicElements['a']['onClick'];\n}\n\nexport const PlanpayButton: FC<PlanpayButtonProps> = ({ onClick, children }) => {\n    return (\n        <a className={styles.root} onClick={onClick}>\n            {children}\n        </a>\n    );\n};\n\nPlanpayButton;\n"]}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+type RoomstayPortalProps = {
+    target: HTMLElement;
+    children: ReactNode | ReactNode[];
+    preventZIndex?: boolean;
+};
+export declare const RoomstayPortal: (props: RoomstayPortalProps) => React.ReactPortal;
+export {};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoomstayPortal = void 0;
+const React = require("react");
+const react_dom_1 = require("react-dom");
+const RoomstayPortal = (props) => {
+    return (0, react_dom_1.createPortal)(React.createElement("div", { className: 'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '') }, props.children), props.target);
+};
+exports.RoomstayPortal = RoomstayPortal;
+//# sourceMappingURL=Portal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sourceRoot":"/","sources":["src/components/generic/Portal/Portal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,yCAAyC;AASlC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IACzD,OAAO,IAAA,wBAAY,EAAC,6BAAK,SAAS,EAAE,4BAA4B,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AACrJ,CAAC,CAAC;AAFW,QAAA,cAAc,kBAEzB","sourcesContent":["import * as React from 'react';\nimport { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\ntype RoomstayPortalProps = {\n    target: HTMLElement;\n    children: ReactNode | ReactNode[];\n\n    preventZIndex?: boolean;\n};\n\nexport const RoomstayPortal = (props: RoomstayPortalProps) => {\n    return createPortal(<div className={'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '')}>{props.children}</div>, props.target);\n};\n"]}

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

@@ -1,36 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const TextBox_1 = require("./TextBox");
-const Translation_1 = require("../../translations/Translation");
-const BETooltip_1 = require("./BETooltip");
-const Icon_1 = require("./Icon");
-const Color_1 = require("../../util/Color");
+const TextBox_1 = require("components/generic/TextBox");
+const Translation_1 = require("translations/Translation");
+const Tooltip_1 = require("components/generic/Tooltip/Tooltip");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Color_1 = require("util/Color");
 const react_i18next_1 = require("react-i18next");
 const react_1 = require("react");
-const SmallSpinner_1 = require("./loader/SmallSpinner");
-const Text_1 = require("../generic/Text");
+const SmallSpinner_1 = require("components/generic/loader/SmallSpinner");
+const Text_1 = require("components/generic/Text");
 function PromoCodeInput(props) {
     var _a;
-    const { t } = react_i18next_1.useTranslation();
-    const [promoCode, setPromoCode] = react_1.useState((_a = props.value) !== null && _a !== void 0 ? _a : '');
-    const [showPromoSave, setShowPromoSave] = react_1.useState(false);
-    const [showPromoRemove, setShowPromoRemove] = react_1.useState(false);
-    const [pressedChange, setPressedChange] = react_1.useState(false);
-    const firstUpdate = react_1.useRef();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [promoCode, setPromoCode] = (0, react_1.useState)((_a = props.value) !== null && _a !== void 0 ? _a : '');
+    const [showPromoSave, setShowPromoSave] = (0, react_1.useState)(false);
+    const [showPromoRemove, setShowPromoRemove] = (0, react_1.useState)(false);
+    const [pressedChange, setPressedChange] = (0, react_1.useState)(false);
+    const firstUpdate = (0, react_1.useRef)();
     let promoCodeStatus;
     promoCodeStatus = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : null;
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (props.valid || props.valid === false) {
             setShowPromoRemove(true);
         }
     }, [props.valid]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (showPromoSave || showPromoRemove) {
             setPressedChange(false);
         }
     }, [showPromoSave, showPromoRemove]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (firstUpdate) {
             if (promoCode) {
                 if (promoCode !== props.value) {
@@ -48,7 +48,9 @@ function PromoCodeInput(props) {
             else {
                 setShowPromoSave(false);
                 setShowPromoRemove(false);
-                updatePromoCode('', false);
+                if (promoCode !== '') {
+                    updatePromoCode('', false);
+                }
             }
         }
         else {
@@ -89,13 +91,13 @@ function PromoCodeInput(props) {
     return (React.createElement("div", { ref: firstUpdate },
         React.createElement("div", { className: "u-pos-rel" },
             React.createElement(TextBox_1.default, { value: (props.direct ? props.value : promoCode).toUpperCase().replace(' ', ''), placeholder: t(Translation_1.Translation.Step.Date.PromoCode), wide: true, validationStatus: promoCodeStatus, onChange: setPromoCodeOnChange, onKeyPress: handleKeyPress }),
-            showPromoRemove && (React.createElement(BETooltip_1.default, { title: "Remove Promo code", arrow: true, enterDelay: 500 },
+            showPromoRemove && (React.createElement(Tooltip_1.default, { title: "Remove Promo code" },
                 React.createElement("div", { className: "people-picker--promo-icon", onClick: clearPromoCode },
                     React.createElement(Icon_1.default, { size: "24px", icon: Icon_1.IconType.Close, color: Color_1.Color.Grey })))),
-            showPromoSave && (React.createElement(BETooltip_1.default, { title: "Apply Code", arrow: true, enterDelay: 500 },
+            showPromoSave && (React.createElement(Tooltip_1.default, { title: "Apply Code" },
                 React.createElement("div", { className: "people-picker--promo-icon --success", onClick: setUpdatedPromoCode },
                     React.createElement(Icon_1.default, { size: "24px", icon: Icon_1.IconType.ArrowRight2, color: Color_1.Color.Success })))),
-            pressedChange && (React.createElement(BETooltip_1.default, { title: "Promo code loading", arrow: true, enterDelay: 500 },
+            pressedChange && (React.createElement(Tooltip_1.default, { title: "Promo code loading" },
                 React.createElement("div", { className: "people-picker--promo-icon" },
                     React.createElement(SmallSpinner_1.default, null))))),
         props.valid === true && (React.createElement("div", { className: "u-marg-top" },

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

@@ -1 +1 @@
-{"version":3,"file":"PromoCodeInput.js","sourceRoot":"/","sources":["src/components/generic/PromoCodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport TextBox from './TextBox';\nimport { Translation } from '../../translations/Translation';\nimport BETooltip from './BETooltip';\nimport Icon, { IconType } from './Icon';\nimport { Color } from '../../util/Color';\nimport { useTranslation } from 'react-i18next';\nimport { useState, useRef, useEffect } from 'react';\nimport SmallSpinner from './loader/SmallSpinner';\nimport Text, { TextType } from '../generic/Text';\n\ninterface PromoCodeInputProps {\n    value: string;\n    onChange: (code: string) => void;\n\n    valid?: boolean;\n    direct?: boolean;\n}\n\nexport default function PromoCodeInput(props: PromoCodeInputProps) {\n    const { t } = useTranslation();\n\n    const [promoCode, setPromoCode] = useState(props.value ?? '');\n    const [showPromoSave, setShowPromoSave] = useState(false);\n    const [showPromoRemove, setShowPromoRemove] = useState(false);\n\n    const [pressedChange, setPressedChange] = useState(false);\n\n    const firstUpdate = useRef();\n\n    let promoCodeStatus: 'success' | 'error';\n    promoCodeStatus = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : null;\n\n    useEffect(() => {\n        if (props.valid || props.valid === false) {\n            setShowPromoRemove(true);\n        }\n    }, [props.valid]);\n\n    useEffect(() => {\n        if (showPromoSave || showPromoRemove) {\n            setPressedChange(false);\n        }\n    }, [showPromoSave, showPromoRemove]);\n\n    useEffect(() => {\n        if (firstUpdate) {\n            if (promoCode) {\n                if (promoCode !== props.value) {\n                    if (props.direct) {\n                        updatePromoCode(promoCode, false);\n                    } else {\n                        setShowPromoSave(true);\n                    }\n                } else {\n                    setShowPromoRemove(true);\n                }\n            } else {\n                setShowPromoSave(false);\n                setShowPromoRemove(false);\n\n                updatePromoCode('', false);\n            }\n        } else {\n            if (promoCode) {\n                setShowPromoRemove(true);\n            }\n        }\n    }, [promoCode]);\n\n    const updatePromoCode = (code: string, propagate = true) => {\n        if (code) {\n            if (props.direct) {\n                setShowPromoRemove(true);\n            } else {\n                setPressedChange(true);\n                setShowPromoSave(false);\n            }\n        }\n\n        if (propagate) {\n            setPromoCode(code);\n        }\n\n        props.onChange(code);\n    };\n\n    const handleKeyPress = (event: any) => {\n        if (event.key === 'Enter') {\n            updatePromoCode(promoCode);\n        }\n    };\n    const clearPromoCode = () => {\n        return updatePromoCode('');\n    };\n    const setUpdatedPromoCode = () => {\n        return updatePromoCode(promoCode);\n    };\n    const setPromoCodeOnChange = (val: React.ChangeEvent<HTMLInputElement>) => {\n        setPromoCode(val.target.value);\n    };\n    return (\n        <div ref={firstUpdate}>\n            <div className=\"u-pos-rel\">\n                <TextBox\n                    value={(props.direct ? props.value : promoCode).toUpperCase().replace(' ', '')}\n                    placeholder={t(Translation.Step.Date.PromoCode)}\n                    wide={true}\n                    validationStatus={promoCodeStatus}\n                    onChange={setPromoCodeOnChange}\n                    onKeyPress={handleKeyPress}\n                />\n                {showPromoRemove && (\n                    <BETooltip title=\"Remove Promo code\" arrow={true} enterDelay={500}>\n                        <div className=\"people-picker--promo-icon\" onClick={clearPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.Close} color={Color.Grey} />\n                        </div>\n                    </BETooltip>\n                )}\n                {showPromoSave && (\n                    <BETooltip title=\"Apply Code\" arrow={true} enterDelay={500}>\n                        <div className=\"people-picker--promo-icon --success\" onClick={setUpdatedPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.ArrowRight2} color={Color.Success} />\n                        </div>\n                    </BETooltip>\n                )}\n                {pressedChange && (\n                    <BETooltip title=\"Promo code loading\" arrow={true} enterDelay={500}>\n                        <div className=\"people-picker--promo-icon\">\n                            <SmallSpinner />\n                        </div>\n                    </BETooltip>\n                )}\n            </div>\n            {props.valid === true && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Success}>\n                        Promo Code '{props.value}' applied\n                    </Text>\n                </div>\n            )}\n            {props.valid === false && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Alert}>\n                        Promo Code '{props.value}' is not valid\n                    </Text>\n                </div>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"PromoCodeInput.js","sourceRoot":"/","sources":["src/components/generic/PromoCodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport TextBox from 'components/generic/TextBox';\nimport { Translation } from 'translations/Translation';\nimport Tooltip from 'components/generic/Tooltip/Tooltip';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { Color } from 'util/Color';\nimport { useTranslation } from 'react-i18next';\nimport { useState, useRef, useEffect } from 'react';\nimport SmallSpinner from 'components/generic/loader/SmallSpinner';\nimport Text, { TextType } from 'components/generic/Text';\n\ninterface PromoCodeInputProps {\n    value: string;\n    onChange: (code: string) => void;\n\n    valid?: boolean;\n    direct?: boolean;\n}\n\nexport default function PromoCodeInput(props: PromoCodeInputProps) {\n    const { t } = useTranslation();\n\n    const [promoCode, setPromoCode] = useState(props.value ?? '');\n    const [showPromoSave, setShowPromoSave] = useState(false);\n    const [showPromoRemove, setShowPromoRemove] = useState(false);\n\n    const [pressedChange, setPressedChange] = useState(false);\n\n    const firstUpdate = useRef();\n\n    let promoCodeStatus: 'success' | 'error';\n    promoCodeStatus = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : null;\n\n    useEffect(() => {\n        if (props.valid || props.valid === false) {\n            setShowPromoRemove(true);\n        }\n    }, [props.valid]);\n\n    useEffect(() => {\n        if (showPromoSave || showPromoRemove) {\n            setPressedChange(false);\n        }\n    }, [showPromoSave, showPromoRemove]);\n\n    useEffect(() => {\n        if (firstUpdate) {\n            if (promoCode) {\n                if (promoCode !== props.value) {\n                    if (props.direct) {\n                        updatePromoCode(promoCode, false);\n                    } else {\n                        setShowPromoSave(true);\n                    }\n                } else {\n                    setShowPromoRemove(true);\n                }\n            } else {\n                setShowPromoSave(false);\n                setShowPromoRemove(false);\n\n                if (promoCode !== '') {\n                    updatePromoCode('', false);\n                }\n            }\n        } else {\n            if (promoCode) {\n                setShowPromoRemove(true);\n            }\n        }\n    }, [promoCode]);\n\n    const updatePromoCode = (code: string, propagate = true) => {\n        if (code) {\n            if (props.direct) {\n                setShowPromoRemove(true);\n            } else {\n                setPressedChange(true);\n                setShowPromoSave(false);\n            }\n        }\n\n        if (propagate) {\n            setPromoCode(code);\n        }\n\n        props.onChange(code);\n    };\n\n    const handleKeyPress = (event: any) => {\n        if (event.key === 'Enter') {\n            updatePromoCode(promoCode);\n        }\n    };\n    const clearPromoCode = () => {\n        return updatePromoCode('');\n    };\n    const setUpdatedPromoCode = () => {\n        return updatePromoCode(promoCode);\n    };\n    const setPromoCodeOnChange = (val: React.ChangeEvent<HTMLInputElement>) => {\n        setPromoCode(val.target.value);\n    };\n    return (\n        <div ref={firstUpdate}>\n            <div className=\"u-pos-rel\">\n                <TextBox\n                    value={(props.direct ? props.value : promoCode).toUpperCase().replace(' ', '')}\n                    placeholder={t(Translation.Step.Date.PromoCode)}\n                    wide={true}\n                    validationStatus={promoCodeStatus}\n                    onChange={setPromoCodeOnChange}\n                    onKeyPress={handleKeyPress}\n                />\n                {showPromoRemove && (\n                    <Tooltip title=\"Remove Promo code\">\n                        <div className=\"people-picker--promo-icon\" onClick={clearPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.Close} color={Color.Grey} />\n                        </div>\n                    </Tooltip>\n                )}\n                {showPromoSave && (\n                    <Tooltip title=\"Apply Code\">\n                        <div className=\"people-picker--promo-icon --success\" onClick={setUpdatedPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.ArrowRight2} color={Color.Success} />\n                        </div>\n                    </Tooltip>\n                )}\n                {pressedChange && (\n                    <Tooltip title=\"Promo code loading\">\n                        <div className=\"people-picker--promo-icon\">\n                            <SmallSpinner />\n                        </div>\n                    </Tooltip>\n                )}\n            </div>\n            {props.valid === true && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Success}>\n                        Promo Code '{props.value}' applied\n                    </Text>\n                </div>\n            )}\n            {props.valid === false && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Alert}>\n                        Promo Code '{props.value}' is not valid\n                    </Text>\n                </div>\n            )}\n        </div>\n    );\n}\n"]}

package/dist/src/components/generic/RadioButtonGroup/RadioButton.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+interface RadioButtonProps {
+    checked: boolean;
+    onChange: JSX.IntrinsicElements['input']['onChange'];
+    label?: ReactNode;
+    disabled?: boolean;
+    renderContent?: () => ReactNode;
+    className?: string;
+}
+declare const RadioButton: FC<RadioButtonProps>;
+export { RadioButton };

package/dist/src/components/generic/RadioButtonGroup/RadioButton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const React = require("react");
+const react_1 = require("react");
+const RadioButton_module_scss_1 = require("./RadioButton.module.scss");
+const classNames = require("classnames");
+const RadioButton = ({ checked, onChange, disabled, label, renderContent, className }) => {
+    const id = (0, react_1.useMemo)(() => Math.random().toString(), []);
+    return (React.createElement("label", { htmlFor: id, className: classNames(RadioButton_module_scss_1.default.root, className, {
+            [RadioButton_module_scss_1.default.disabled]: disabled,
+            [RadioButton_module_scss_1.default.checked]: checked,
+        }) },
+        React.createElement("div", { className: RadioButton_module_scss_1.default.header },
+            React.createElement("input", { className: RadioButton_module_scss_1.default.input, hidden: true, disabled: disabled, id: id, onChange: onChange, type: "radio", checked: checked }),
+            React.createElement("div", { className: RadioButton_module_scss_1.default.design }),
+            React.createElement("div", { className: RadioButton_module_scss_1.default.text }, label)),
+        React.createElement("div", null, renderContent && checked && React.createElement("div", { className: RadioButton_module_scss_1.default.content }, renderContent()))));
+};
+exports.RadioButton = RadioButton;
+//# sourceMappingURL=RadioButton.js.map

package/dist/src/components/generic/RadioButtonGroup/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA+C;AAC/C,uEAA+C;AAC/C,yCAAyC;AAWzC,MAAM,WAAW,GAAyB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE;IAC3G,MAAM,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAEvD,OAAO,CACH,+BACI,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,UAAU,CAAC,iCAAM,CAAC,IAAI,EAAE,SAAS,EAAE;YAC1C,CAAC,iCAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,iCAAM,CAAC,OAAO,CAAC,EAAE,OAAO;SAC5B,CAAC;QAEF,6BAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACzB,+BAAO,SAAS,EAAE,iCAAM,CAAC,KAAK,EAAE,MAAM,QAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,GAAI;YACxH,6BAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,GAAI;YACjC,6BAAK,SAAS,EAAE,iCAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CACxC;QACN,iCAAM,aAAa,IAAI,OAAO,IAAI,6BAAK,SAAS,EAAE,iCAAM,CAAC,OAAO,IAAG,aAAa,EAAE,CAAO,CAAO,CAC5F,CACX,CAAC;AACN,CAAC,CAAC;AAEO,kCAAW","sourcesContent":["import * as React from 'react';\nimport { FC, ReactNode, useMemo } from 'react';\nimport styles from './RadioButton.module.scss';\nimport * as classNames from 'classnames';\n\ninterface RadioButtonProps {\n    checked: boolean;\n    onChange: JSX.IntrinsicElements['input']['onChange'];\n    label?: ReactNode;\n    disabled?: boolean;\n    renderContent?: () => ReactNode;\n    className?: string;\n}\n\nconst RadioButton: FC<RadioButtonProps> = ({ checked, onChange, disabled, label, renderContent, className }) => {\n    const id = useMemo(() => Math.random().toString(), []);\n\n    return (\n        <label\n            htmlFor={id}\n            className={classNames(styles.root, className, {\n                [styles.disabled]: disabled,\n                [styles.checked]: checked,\n            })}\n        >\n            <div className={styles.header}>\n                <input className={styles.input} hidden disabled={disabled} id={id} onChange={onChange} type=\"radio\" checked={checked} />\n                <div className={styles.design} />\n                <div className={styles.text}>{label}</div>\n            </div>\n            <div>{renderContent && checked && <div className={styles.content}>{renderContent()}</div>}</div>\n        </label>\n    );\n};\n\nexport { RadioButton };\n"]}