@roomstay/frontend 2.1.33 → 2.2.1

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

@@ -36,8 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaymentCardInput = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const PaymentCardInput_module_scss_1 = __importDefault(require("./PaymentCardInput.module.scss"));
 const Text_1 = __importStar(require("../Text"));
 const Color_1 = require("../../../util/Color");
@@ -52,13 +51,16 @@ const VGSHooks_1 = require("../../../hooks/VGSHooks");
 const LoggedInUserHook_1 = require("../../../hooks/LoggedInUserHook");
 const Fade_1 = __importDefault(require("../../../animations/Fade"));
 const AsyncAuth_1 = require("../../../util/AsyncAuth");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
 const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {
     const { user, fullName } = (0, LoggedInUserHook_1.useMember)();
-    const [errors, setErrors] = (0, react_2.useState)({});
-    const [cardType, setCardType] = (0, react_2.useState)(null);
-    const [isSavingVGSDetails, setIsSavingVGSDetails] = (0, react_2.useState)(false);
-    const [isDeletingCard, setIsDeletingCard] = (0, react_2.useState)(false);
-    const [isMarkingAsDefault, setIsMarkingAsDefault] = (0, react_2.useState)(false);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    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 = {
@@ -72,7 +74,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
     const { fields: [cardNumber, cardHolder, expiryDate, securityCode], triggerFieldUpdate, vgsForm, } = (0, VGSHooks_1.useVgsCollect)([
         {
             name: 'credit-card',
-            label: 'Credit Card',
+            label: t(Translation_1.Translation.Step.Confirmation.Inputs.CardNumber),
             type: 'card-number',
             vgsProps: {
                 validations: ['required', 'validCardNumber'],
@@ -87,13 +89,13 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
         },
         {
             name: 'card-name',
-            label: 'Card Name',
+            label: t(Translation_1.Translation.Step.Confirmation.Inputs.NameOnCard),
             type: 'text',
             vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName },
         },
         {
             name: 'expiration-date',
-            label: 'Expiration Date',
+            label: t(Translation_1.Translation.Step.Confirmation.Inputs.CardExpiry),
             type: 'card-expiration-date',
             vgsProps: {
                 validations: ['required', 'validCardExpirationDate'],
@@ -104,7 +106,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
         },
         {
             name: 'security-code',
-            label: 'Security Code',
+            label: t(Translation_1.Translation.Step.Confirmation.Inputs.SecurityCode),
             type: 'card-security-code',
             vgsProps: {
                 validations: ['required', 'validCardSecurityCode'],
@@ -113,11 +115,11 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                 placeholder: '552',
             },
         },
-    ]);
-    (0, react_2.useEffect)(() => {
+    ], 'members');
+    (0, react_1.useEffect)(() => {
         triggerFieldUpdate();
     }, [card]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.state.cardType) {
             setCardType(cardNumber.state.cardType);
         }
@@ -129,16 +131,16 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
             let name = '';
             switch (input) {
                 case 'credit-card':
-                    name = 'Credit Card';
+                    name = t(Translation_1.Translation.Step.Confirmation.Inputs.CardNumber);
                     break;
                 case 'expiration-date':
-                    name = 'Expiration Date';
+                    name = t(Translation_1.Translation.Step.Confirmation.Inputs.CardExpiry);
                     break;
                 case 'security-code':
-                    name = 'Security Code';
+                    name = t(Translation_1.Translation.Step.Confirmation.Inputs.SecurityCode);
                     break;
                 default:
-                    name = 'Card Name';
+                    name = t(Translation_1.Translation.Step.Confirmation.Inputs.NameOnCard);
                     break;
             }
             newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];
@@ -162,7 +164,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                     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'],
+                                errorMessages: [t(Translation_1.Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid)],
                             },
                         });
                         return;
@@ -177,7 +179,8 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                         cardNumber: cardData['credit-card'],
                         type: cardType,
                     };
-                    yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newCard));
+                    const newAddedCard = yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newCard));
+                    onMarkAsDefault(newAddedCard);
                     vgsForm.reset();
                     setIsSavingVGSDetails(false);
                 }), (error) => {
@@ -196,12 +199,15 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
             setIsDeletingCard(false);
         });
     };
-    const onMarkAsDefault = () => {
+    const onMarkAsDefault = (newCard) => {
         setIsMarkingAsDefault(true);
-        onMarkedAsDefaultClicked === null || onMarkedAsDefaultClicked === void 0 ? void 0 : onMarkedAsDefaultClicked(card).finally(() => {
+        onMarkedAsDefaultClicked === null || onMarkedAsDefaultClicked === void 0 ? void 0 : onMarkedAsDefaultClicked(newCard).finally(() => {
             setIsMarkingAsDefault(false);
         });
     };
+    const onMarkAsDefaultClicked = () => {
+        onMarkAsDefault(card);
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-inputs'] },
             react_1.default.createElement("div", { className: "u-marg-bottom--medium u-marg-top--heavy@l-" },
@@ -215,28 +221,28 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
             })),
             react_1.default.createElement("div", { className: "u-marg-bottom" },
                 react_1.default.createElement("div", { className: "u-marg-bottom--light" },
-                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Card Number")),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.Step.Confirmation.Inputs.CardNumber))),
                 react_1.default.createElement("div", { className: cardNumber.getClasses(), ref: cardNumber.ref })),
             react_1.default.createElement("div", { className: "u-marg-bottom" },
                 react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
                     react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement("div", { className: "u-marg-bottom--light" },
-                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Expiry Month / Year")),
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.Step.Confirmation.Inputs.CardExpiry))),
                         react_1.default.createElement("div", { className: expiryDate.getClasses(), ref: expiryDate.ref })),
                     react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement("div", { className: "u-marg-bottom--light" },
-                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Security code")),
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.Step.Confirmation.Inputs.SecurityCode))),
                         react_1.default.createElement("div", { className: securityCode.getClasses(), ref: securityCode.ref })))),
             react_1.default.createElement("div", { className: "u-marg-bottom" },
                 react_1.default.createElement("div", { className: "u-marg-bottom--light" },
-                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Name on Credit Card")),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.Step.Confirmation.Inputs.NameOnCard))),
                 react_1.default.createElement("div", { className: cardHolder.getClasses(), ref: cardHolder.ref })),
-            react_1.default.createElement("div", { className: "u-marg-bottom" }, (card === null || card === void 0 ? void 0 : card.cardId) ? (react_1.default.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_1.default.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_1.default.createElement("div", { className: "u-marg-bottom" }, (card === null || card === void 0 ? void 0 : card.cardId) ? (react_1.default.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 }, t(Translation_1.Translation.UserPortal.PaymentInformationScreen.DeleteCard))) : (react_1.default.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 }, t(Translation_1.Translation.UserPortal.PaymentInformationScreen.SaveCard))))),
         react_1.default.createElement(Fade_1.default, { open: !!(card === null || card === void 0 ? void 0 : card.cardId) },
             react_1.default.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-large'] },
                 react_1.default.createElement(PaymentCard_1.PaymentCard, { card: card }),
                 react_1.default.createElement("div", { className: "u-marg-top u-marg-top--heavy@l-" },
-                    react_1.default.createElement(BEButton_1.default, { onClick: onMarkAsDefault, isLoading: isMarkingAsDefault, disabled: isCardDefault, filled: true, primary: true, size: "small" }, "Mark as Default"))))));
+                    react_1.default.createElement(BEButton_1.default, { onClick: onMarkAsDefaultClicked, 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

@@ -1 +1 @@
-{"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } 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 { useVgsCollect } from '@/hooks/VGSHooks';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport FadeAnimation from '../../../animations/Fade';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport { getAuth } from '@/util/AsyncAuth';\n\nexport interface 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>(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        {\n            name: 'card-name',\n            label: 'Card Name',\n            type: 'text',\n            vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName },\n        },\n        {\n            name: 'expiration-date',\n            label: 'Expiration Date',\n            type: 'card-expiration-date',\n            vgsProps: {\n                validations: ['required', 'validCardExpirationDate'],\n                css,\n                disabled: inputsDisabled,\n                placeholder: '12/27',\n            },\n        },\n        {\n            name: 'security-code',\n            label: 'Security Code',\n            type: 'card-security-code',\n            vgsProps: {\n                validations: ['required', 'validCardSecurityCode'],\n                css,\n                disabled: inputsDisabled,\n                placeholder: '552',\n            },\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 = async (): Promise<void> => {\n        const Auth = await getAuth();\n        if (vgsForm) {\n            setIsSavingVGSDetails(true);\n            Auth.currentAuthenticatedUser().then((cognitoData: any) => {\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                        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 as string,\n                            securityCode: cardData['security-code'],\n                            expiry: expiration,\n                            name: cardData['card-name'],\n\n                            cardNumber: cardData['credit-card'],\n                            type: cardType as ECardType,\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 as IRoomstayMemberCards).finally(() => {\n            setIsDeletingCard(false);\n        });\n    };\n\n    const onMarkAsDefault = () => {\n        setIsMarkingAsDefault(true);\n\n        onMarkedAsDefaultClicked?.(card as IRoomstayMemberCards).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 || undefined} />\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\n                            icon={IconType.Delete}\n                            onClick={onDeleteCardClicked}\n                            stopIconAnimation\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\n                            primary\n                            filled\n                            mobileWidth\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 primary size=\"small\">\n                            Mark as Default\n                        </BEButton>\n                    </div>\n                </div>\n            </FadeAnimation>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { 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 { useVgsCollect } from '@/hooks/VGSHooks';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport FadeAnimation from '../../../animations/Fade';\nimport { getAuth } from '@/util/AsyncAuth';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\nexport interface PaymentCardInputProps {\n    card: IRoomstayMemberCards;\n    onSubmit?: (card: IRoomstayMemberCards) => Promise<IRoomstayMemberCards>;\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    const { t } = useTranslation();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n    const [cardType, setCardType] = useState<ECardType | null>(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            {\n                name: 'credit-card',\n                label: t(Translation.Step.Confirmation.Inputs.CardNumber),\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            {\n                name: 'card-name',\n                label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n                type: 'text',\n                vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName },\n            },\n            {\n                name: 'expiration-date',\n                label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n                type: 'card-expiration-date',\n                vgsProps: {\n                    validations: ['required', 'validCardExpirationDate'],\n                    css,\n                    disabled: inputsDisabled,\n                    placeholder: '12/27',\n                },\n            },\n            {\n                name: 'security-code',\n                label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n                type: 'card-security-code',\n                vgsProps: {\n                    validations: ['required', 'validCardSecurityCode'],\n                    css,\n                    disabled: inputsDisabled,\n                    placeholder: '552',\n                },\n            },\n        ],\n        'members'\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 = t(Translation.Step.Confirmation.Inputs.CardNumber);\n                    break;\n                case 'expiration-date':\n                    name = t(Translation.Step.Confirmation.Inputs.CardExpiry);\n                    break;\n                case 'security-code':\n                    name = t(Translation.Step.Confirmation.Inputs.SecurityCode);\n                    break;\n                default:\n                    name = t(Translation.Step.Confirmation.Inputs.NameOnCard);\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 = async (): Promise<void> => {\n        const Auth = await getAuth();\n        if (vgsForm) {\n            setIsSavingVGSDetails(true);\n            Auth.currentAuthenticatedUser().then((cognitoData: any) => {\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: [t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid)],\n                                },\n                            });\n                            return;\n                        }\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 as string,\n                            securityCode: cardData['security-code'],\n                            expiry: expiration,\n                            name: cardData['card-name'],\n\n                            cardNumber: cardData['credit-card'],\n                            type: cardType as ECardType,\n                        };\n\n                        const newAddedCard = await onSubmit?.(newCard);\n                        onMarkAsDefault(newAddedCard as IRoomstayMemberCards);\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 as IRoomstayMemberCards).finally(() => {\n            setIsDeletingCard(false);\n        });\n    };\n\n    const onMarkAsDefault = (newCard: IRoomstayMemberCards) => {\n        setIsMarkingAsDefault(true);\n\n        onMarkedAsDefaultClicked?.(newCard as IRoomstayMemberCards).finally(() => {\n            setIsMarkingAsDefault(false);\n        });\n    };\n\n    const onMarkAsDefaultClicked = () => {\n        onMarkAsDefault(card);\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 || undefined} />\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                            {t(Translation.Step.Confirmation.Inputs.CardNumber)}\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                                    {t(Translation.Step.Confirmation.Inputs.CardExpiry)}\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                                    {t(Translation.Step.Confirmation.Inputs.SecurityCode)}\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                            {t(Translation.Step.Confirmation.Inputs.NameOnCard)}\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\n                            icon={IconType.Delete}\n                            onClick={onDeleteCardClicked}\n                            stopIconAnimation\n                        >\n                            {t(Translation.UserPortal.PaymentInformationScreen.DeleteCard)}\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\n                            primary\n                            filled\n                            mobileWidth\n                            onClick={onChangeSubmit}\n                        >\n                            {t(Translation.UserPortal.PaymentInformationScreen.SaveCard)}\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={onMarkAsDefaultClicked} isLoading={isMarkingAsDefault} disabled={isCardDefault} filled primary size=\"small\">\n                            Mark as Default\n                        </BEButton>\n                    </div>\n                </div>\n            </FadeAnimation>\n        </>\n    );\n};\n"]}

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

@@ -26,36 +26,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const TextBox_1 = __importDefault(require("./TextBox"));
 const Translation_1 = require("translations/Translation");
 const Tooltip_1 = __importDefault(require("./Tooltip/Tooltip"));
 const Icon_1 = __importStar(require("./Icon/Icon"));
 const Color_1 = require("../../util/Color");
 const react_i18next_1 = require("react-i18next");
-const react_2 = require("react");
 const SmallSpinner_1 = __importDefault(require("./loader/SmallSpinner"));
 const Text_1 = __importStar(require("./Text"));
 function PromoCodeInput(props) {
     var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [promoCode, setPromoCode] = (0, react_2.useState)((_a = props.value) !== null && _a !== void 0 ? _a : '');
-    const [showPromoSave, setShowPromoSave] = (0, react_2.useState)(false);
-    const [showPromoRemove, setShowPromoRemove] = (0, react_2.useState)(false);
-    const [pressedChange, setPressedChange] = (0, react_2.useState)(false);
-    const firstUpdate = (0, react_2.useRef)(null);
+    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)(null);
     const promoCodeStatus = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : undefined;
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (props.valid || props.valid === false) {
             setShowPromoRemove(true);
         }
     }, [props.valid]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (showPromoSave || showPromoRemove) {
             setPressedChange(false);
         }
     }, [showPromoSave, showPromoRemove]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (firstUpdate) {
             if (promoCode) {
                 if (promoCode !== props.value) {
@@ -126,15 +125,13 @@ function PromoCodeInput(props) {
                 react_1.default.createElement("div", { className: "people-picker--promo-icon" },
                     react_1.default.createElement(SmallSpinner_1.default, null))))),
         props.valid === true && (react_1.default.createElement("div", { className: "u-marg-top" },
-            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Success },
-                "Promo Code '",
-                props.value,
-                "' applied"))),
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Success }, t(Translation_1.Translation.Step.Date.PromoCodeValidation.Valid, {
+                value: props.value,
+            })))),
         props.valid === false && (react_1.default.createElement("div", { className: "u-marg-top" },
-            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Alert },
-                "Promo Code '",
-                props.value,
-                "' is not valid")))));
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Alert }, t(Translation_1.Translation.Step.Date.PromoCodeValidation.Invalid, {
+                value: props.value,
+            }))))));
 }
 exports.default = PromoCodeInput;
 //# sourceMappingURL=PromoCodeInput.js.map

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 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    className?: string;\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<HTMLDivElement | null>(null);\n\n    const promoCodeStatus: 'success' | 'error' | undefined = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : undefined;\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} className={props.className}>\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\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 &apos;{props.value}&apos; 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 &apos;{props.value}&apos; 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 React, { useEffect, useRef, useState } 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 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    className?: string;\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<HTMLDivElement | null>(null);\n\n    const promoCodeStatus: 'success' | 'error' | undefined = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : undefined;\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} className={props.className}>\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\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                        {t(Translation.Step.Date.PromoCodeValidation.Valid, {\n                            value: props.value,\n                        })}\n                    </Text>\n                </div>\n            )}\n            {props.valid === false && (\n                <div className=\"u-marg-top\">\n                    <Text type={TextType.Small} color={Color.Alert}>\n                        {t(Translation.Step.Date.PromoCodeValidation.Invalid, {\n                            value: props.value,\n                        })}\n                    </Text>\n                </div>\n            )}\n        </div>\n    );\n}\n"]}

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

@@ -1,11 +1,12 @@
-import { FC, ReactNode } from 'react';
+import React, { LegacyRef, ReactNode } from 'react';
 export interface RadioButtonProps {
     checked: boolean;
-    onChange: JSX.IntrinsicElements['input']['onChange'];
+    onChange: JSX.IntrinsicElements['div']['onChange'];
     label?: ReactNode;
     disabled?: boolean;
     renderContent?: () => ReactNode;
     className?: string;
+    headerRef?: LegacyRef<HTMLDivElement>;
 }
-declare const RadioButton: FC<RadioButtonProps>;
-export { RadioButton };
+declare const ForwardedRefRadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
+export { ForwardedRefRadioButton as RadioButton };

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

@@ -1,24 +1,47 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButton = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(require("react"));
 const RadioButton_module_scss_1 = __importDefault(require("./RadioButton.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
-const RadioButton = ({ checked, onChange, disabled, label, renderContent, className }) => {
-    const id = (0, react_2.useMemo)(() => Math.random().toString(), []);
-    return (react_1.default.createElement("label", { htmlFor: id, className: (0, classnames_1.default)(RadioButton_module_scss_1.default.root, className, {
+const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
+const RadioButton = ({ checked, onChange, disabled, label, renderContent, className, headerRef }, ref) => {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(RadioButton_module_scss_1.default.root, className, {
             [RadioButton_module_scss_1.default.disabled]: disabled,
             [RadioButton_module_scss_1.default.checked]: checked,
-        }) },
-        react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.header },
-            react_1.default.createElement("input", { className: RadioButton_module_scss_1.default.input, hidden: true, disabled: disabled, id: id, onChange: onChange, type: "radio", checked: checked }),
+        }), onClick: onChange, ref: ref },
+        react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.header, ref: headerRef },
             react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.design }),
             react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.text }, label)),
-        react_1.default.createElement("div", null, renderContent && checked && react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.content }, renderContent()))));
+        renderContent && checked && (react_1.default.createElement(AutoAutoHeight_1.default, { open: true },
+            react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.content }, renderContent())))));
 };
-exports.RadioButton = RadioButton;
+const ForwardedRefRadioButton = (0, react_1.forwardRef)(RadioButton);
+exports.RadioButton = ForwardedRefRadioButton;
 //# sourceMappingURL=RadioButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,iCAA+C;AAC/C,wFAA+C;AAC/C,4DAAoC;AAWpC,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,yCACI,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,IAAA,oBAAU,EAAC,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,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACzB,yCAAO,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,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,GAAI;YACjC,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CACxC;QACN,2CAAM,aAAa,IAAI,OAAO,IAAI,uCAAK,SAAS,EAAE,iCAAM,CAAC,OAAO,IAAG,aAAa,EAAE,CAAO,CAAO,CAC5F,CACX,CAAC;AACN,CAAC,CAAC;AAEO,kCAAW","sourcesContent":["import React from 'react';\nimport { FC, ReactNode, useMemo } from 'react';\nimport styles from './RadioButton.module.scss';\nimport classNames from 'classnames';\n\nexport interface 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"]}
+{"version":3,"file":"RadioButton.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0F;AAC1F,wFAA+C;AAC/C,4DAAoC;AACpC,iFAAyD;AAYzD,MAAM,WAAW,GAA+D,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACjK,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAM,CAAC,IAAI,EAAE,SAAS,EAAE;YAC1C,CAAC,iCAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,iCAAM,CAAC,OAAO,CAAC,EAAE,OAAO;SAC5B,CAAC,EACF,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,GAAG;QAER,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS;YACzC,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,GAAI;YACjC,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CACxC;QACL,aAAa,IAAI,OAAO,IAAI,CACzB,8BAAC,wBAAc,IAAC,IAAI;YAChB,uCAAK,SAAS,EAAE,iCAAM,CAAC,OAAO,IAAG,aAAa,EAAE,CAAO,CAC1C,CACpB,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAEpB,8CAAW","sourcesContent":["import React, { forwardRef, ForwardRefRenderFunction, LegacyRef, ReactNode } from 'react';\nimport styles from './RadioButton.module.scss';\nimport classNames from 'classnames';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\n\nexport interface RadioButtonProps {\n    checked: boolean;\n    onChange: JSX.IntrinsicElements['div']['onChange'];\n    label?: ReactNode;\n    disabled?: boolean;\n    renderContent?: () => ReactNode;\n    className?: string;\n    headerRef?: LegacyRef<HTMLDivElement>;\n}\n\nconst RadioButton: ForwardRefRenderFunction<HTMLDivElement, RadioButtonProps> = ({ checked, onChange, disabled, label, renderContent, className, headerRef }, ref) => {\n    return (\n        <div\n            className={classNames(styles.root, className, {\n                [styles.disabled]: disabled,\n                [styles.checked]: checked,\n            })}\n            onClick={onChange}\n            ref={ref}\n        >\n            <div className={styles.header} ref={headerRef}>\n                <div className={styles.design} />\n                <div className={styles.text}>{label}</div>\n            </div>\n            {renderContent && checked && (\n                <AutoAutoHeight open>\n                    <div className={styles.content}>{renderContent()}</div>\n                </AutoAutoHeight>\n            )}\n        </div>\n    );\n};\n\nconst ForwardedRefRadioButton = forwardRef(RadioButton);\n\nexport { ForwardedRefRadioButton as RadioButton };\n"]}

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

@@ -1,15 +1,18 @@
 import { ReactElement, ReactNode } from 'react';
-export interface RadioButtonGroupProps<TValue extends string> {
-    options: {
-        value: TValue;
-        label?: ReactNode;
-        disabled?: boolean;
-        /** Enabled a tooltip that gives more info on why the field is disabled */
-        disabledReason?: string;
-        renderContent?: () => ReactNode;
-    }[];
+export interface IRadioButtonOption<TValue extends string = string> {
     value: TValue;
-    onChange: (value: TValue) => void;
+    label?: ReactNode;
+    disabled?: boolean;
+    /** Enabled a tooltip that gives more info on why the field is disabled */
+    disabledReason?: string;
+    renderContent?: () => ReactNode;
+    options?: IRadioButtonOption<TValue>[];
 }
-declare const RadioButtonGroup: <TValue extends string = string>({ options, value: valueProp, onChange }: RadioButtonGroupProps<TValue>) => ReactElement | null;
+export interface IRadioButtonGroupProps<TValue extends string = string> {
+    options?: IRadioButtonOption<TValue>[];
+    value?: TValue;
+    onChange?: (value: TValue) => void;
+    renderChildrenContent?: boolean;
+}
+declare const RadioButtonGroup: <TValue extends string = string>({ options, value: valueProp, onChange, renderChildrenContent, }: IRadioButtonGroupProps<TValue>) => ReactElement | null;
 export default RadioButtonGroup;