@roomstay/frontend 2.1.32 → 2.2.0

package/dist/src/components/steps/confirmation/PaymentDetails/ExistingCardPicker.js

@@ -1,12 +1,31 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExistingCardPicker = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const LoggedInUserHook_1 = require("../../../../hooks/LoggedInUserHook");
-const react_2 = require("react");
 const contexts_1 = require("../../../../contexts/index.js");
 const MemberCardItem_1 = require("../../../pages/Account/Card/MemberCardItem");
 /*
@@ -14,9 +33,9 @@ const MemberCardItem_1 = require("../../../pages/Account/Card/MemberCardItem");
 */
 const ExistingCardPicker = (props) => {
     const { user } = (0, LoggedInUserHook_1.useMember)();
-    const { cards } = (0, react_2.useContext)(contexts_1.RoomstayMemberContext);
-    const [selectedCardId, setSelectedCardId] = (0, react_2.useState)();
-    (0, react_2.useEffect)(() => {
+    const { cards } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
+    const [selectedCardId, setSelectedCardId] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
         if ((user === null || user === void 0 ? void 0 : user.defaultCard) && cards) {
             for (const card of cards) {
                 if (user.defaultCard === card.cardId) {

package/dist/src/components/steps/confirmation/PaymentDetails/ExistingCardPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExistingCardPicker.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/ExistingCardPicker.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+DAAqD;AAGrD,iCAAwD;AACxD,iDAA2D;AAC3D,mFAAgF;AAMhF;;EAEE;AACK,MAAM,kBAAkB,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,4BAAS,GAAE,CAAC;IAE7B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IACpD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,GAAkC,CAAC;IAEvF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,KAAI,KAAK,EAAE;YAC5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACtB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,MAAM,EAAE;oBAClC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;oBACpC,OAAO;iBACV;aACJ;SACJ;QAED,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE;YACf,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACtC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,qBAAqB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC9C,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH;QACI,2CACK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACxB,MAAM,WAAW,GAAG,GAAG,EAAE;gBACrB,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACvC,CAAC,CAAC;YAEF,OAAO,8BAAC,+BAAc,IAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QACtH,CAAC,CAAC,CACA,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAtCW,QAAA,kBAAkB,sBAsC7B","sourcesContent":["import React from 'react';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { Select } from '@/components/generic/Select/Select';\nimport { useContext, useEffect, useState } from 'react';\nimport { RoomstayMemberContext } from '@frontend/contexts';\nimport { MemberCardItem } from '@/components/pages/Account/Card/MemberCardItem';\n\ntype ExistingCardPicker = {\n    onCardSelected: (card: IRoomstayMemberCards) => void;\n};\n\n/*\n    Component assumes that parent checks if member is already logged in\n*/\nexport const ExistingCardPicker = (props: ExistingCardPicker) => {\n    const { user } = useMember();\n\n    const { cards } = useContext(RoomstayMemberContext);\n    const [selectedCardId, setSelectedCardId] = useState<IRoomstayMemberCards['cardId']>();\n\n    useEffect(() => {\n        if (user?.defaultCard && cards) {\n            for (const card of cards) {\n                if (user.defaultCard === card.cardId) {\n                    setSelectedCardId(user.defaultCard);\n                    return;\n                }\n            }\n        }\n\n        if (cards?.length) {\n            setSelectedCardId(cards[0].cardId);\n        }\n    }, [user, cards]);\n\n    const onSelectedCardChanged = (newCard: string) => {\n        setSelectedCardId(newCard);\n    };\n\n    return (\n        <>\n            <div>\n                {cards?.map((card, index) => {\n                    const onClickCard = () => {\n                        onSelectedCardChanged(card.cardId);\n                    };\n\n                    return <MemberCardItem key={index} selected={selectedCardId === card.cardId} onClick={onClickCard} item={card} />;\n                })}\n            </div>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"ExistingCardPicker.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/ExistingCardPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+D;AAC/D,+DAAqD;AAErD,iDAA2D;AAC3D,mFAAgF;AAMhF;;EAEE;AACK,MAAM,kBAAkB,GAAG,CAAC,KAAyB,EAAE,EAAE;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,4BAAS,GAAE,CAAC;IAE7B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IACpD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,GAAkC,CAAC;IAEvF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,KAAI,KAAK,EAAE;YAC5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACtB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,MAAM,EAAE;oBAClC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;oBACpC,OAAO;iBACV;aACJ;SACJ;QAED,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE;YACf,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACtC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,qBAAqB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC9C,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH;QACI,2CACK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACxB,MAAM,WAAW,GAAG,GAAG,EAAE;gBACrB,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACvC,CAAC,CAAC;YAEF,OAAO,8BAAC,+BAAc,IAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;QACtH,CAAC,CAAC,CACA,CACP,CACN,CAAC;AACN,CAAC,CAAC;AAtCW,QAAA,kBAAkB,sBAsC7B","sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { RoomstayMemberContext } from '@frontend/contexts';\nimport { MemberCardItem } from '@/components/pages/Account/Card/MemberCardItem';\n\ntype ExistingCardPicker = {\n    onCardSelected: (card: IRoomstayMemberCards) => void;\n};\n\n/*\n    Component assumes that parent checks if member is already logged in\n*/\nexport const ExistingCardPicker = (props: ExistingCardPicker) => {\n    const { user } = useMember();\n\n    const { cards } = useContext(RoomstayMemberContext);\n    const [selectedCardId, setSelectedCardId] = useState<IRoomstayMemberCards['cardId']>();\n\n    useEffect(() => {\n        if (user?.defaultCard && cards) {\n            for (const card of cards) {\n                if (user.defaultCard === card.cardId) {\n                    setSelectedCardId(user.defaultCard);\n                    return;\n                }\n            }\n        }\n\n        if (cards?.length) {\n            setSelectedCardId(cards[0].cardId);\n        }\n    }, [user, cards]);\n\n    const onSelectedCardChanged = (newCard: string) => {\n        setSelectedCardId(newCard);\n    };\n\n    return (\n        <>\n            <div>\n                {cards?.map((card, index) => {\n                    const onClickCard = () => {\n                        onSelectedCardChanged(card.cardId);\n                    };\n\n                    return <MemberCardItem key={index} selected={selectedCardId === card.cardId} onClick={onClickCard} item={card} />;\n                })}\n            </div>\n        </>\n    );\n};\n"]}

package/dist/src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-export default _default;
+export declare const StepConfirmationVGSPaymentInput: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;

package/dist/src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.js

@@ -26,8 +26,8 @@ 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_2 = require("react");
+exports.StepConfirmationVGSPaymentInput = void 0;
+const react_1 = __importStar(require("react"));
 const InputGroup_1 = __importDefault(require("../../../generic/InputGroup/InputGroup"));
 const AutoAutoHeight_1 = __importDefault(require("../../../../animations/AutoAutoHeight"));
 const Alert_1 = __importStar(require("../../../generic/Alert"));
@@ -38,13 +38,11 @@ const Translation_1 = require("translations/Translation");
 const HotelDTO_1 = require("../../../../models/Api/HotelDTO");
 const hooks_1 = require("../../../../hooks/index.js");
 const VGSHooks_1 = require("../../../../hooks/VGSHooks");
-const ExistingCardPicker_1 = require("./ExistingCardPicker");
 const AcceptablePaymentCard_1 = __importDefault(require("./AcceptablePaymentCard"));
-function StepConfirmationPaymentDetails(props, ref) {
+exports.StepConfirmationVGSPaymentInput = (0, react_1.forwardRef)(function ForwardedStepConfirmationVGSPaymentInput(props, ref) {
     var _a;
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const member = (0, hooks_1.useMember)();
-    const [errors, setErrors] = (0, react_2.useState)({});
+    const [errors, setErrors] = (0, react_1.useState)({});
     const { t } = (0, react_i18next_1.useTranslation)();
     const { focusElement } = (0, hooks_1.useWindowScroll)();
     const vgsInputCss = {
@@ -55,7 +53,7 @@ function StepConfirmationPaymentDetails(props, ref) {
             opacity: 1,
         },
     };
-    const { fields: [cardNumber, nameOnCard, expirationDate, securityCode], triggerFieldUpdate, vgsForm, } = (0, VGSHooks_1.useVgsCollect)([
+    const { fields: [cardNumber, nameOnCard, expirationDate, securityCode], vgsForm, } = (0, VGSHooks_1.useVgsCollect)([
         {
             label: t(Translation_1.Translation.Step.Confirmation.Inputs.CardNumber),
             name: 'credit-card',
@@ -107,29 +105,29 @@ function StepConfirmationPaymentDetails(props, ref) {
             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];
         });
         setErrors(newErrors);
     };
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         var _a, _b;
         if (errors && Object.keys(errors).length !== 0 && ((_a = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.ref) === null || _a === void 0 ? void 0 : _a.current)) {
             focusElement((_b = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.ref) === null || _b === void 0 ? void 0 : _b.current);
         }
     }, [errors]);
-    (0, react_2.useImperativeHandle)(ref, () => ({
+    (0, react_1.useImperativeHandle)(ref, () => ({
         getTokenizedCode: () => new Promise((resolve, reject) => {
             if (vgsForm) {
                 vgsForm.submit('/post', {
@@ -141,10 +139,10 @@ function StepConfirmationPaymentDetails(props, ref) {
                     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)],
                             },
                         });
-                        reject('invalid expiration date');
+                        reject(t(Translation_1.Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid));
                         return;
                     }
                     const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));
@@ -166,7 +164,7 @@ function StepConfirmationPaymentDetails(props, ref) {
             }
         }),
     }));
-    const formRef = (0, react_2.useRef)(null);
+    const formRef = (0, react_1.useRef)(null);
     const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];
     const cardTypes = ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.paymentCardTypes) !== null && _a !== void 0 ? _a : [])
         .map((card) => {
@@ -180,34 +178,28 @@ function StepConfirmationPaymentDetails(props, ref) {
         };
     })
         .filter((obj) => obj);
-    const onMemberCardSelected = (card) => {
-        // TODO:
-    };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", null, !!member.user && react_1.default.createElement(ExistingCardPicker_1.ExistingCardPicker, { onCardSelected: onMemberCardSelected })),
-        react_1.default.createElement("div", null,
-            inputNames.map((name) => {
-                const errorMessage = errors[name];
-                return (react_1.default.createElement(AutoAutoHeight_1.default, { open: !!errorMessage, key: name },
-                    react_1.default.createElement("div", { className: "u-flex" },
-                        react_1.default.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
-                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, errorMessage)))));
-            }),
-            react_1.default.createElement("div", { className: "u-marg-bottom" },
-                react_1.default.createElement(AcceptablePaymentCard_1.default, { isCurrent: (cardKey) => {
-                        var _a;
-                        return cardNumber.state.cardType !== null && ((_a = cardTypes[cardKey]) === null || _a === void 0 ? void 0 : _a.name) === cardNumber.state.cardType;
-                    }, isDefault: (cardKey) => {
-                        return cardNumber.state.cardType === null;
-                    } })),
-            react_1.default.createElement("form", { ref: formRef },
+        inputNames.map((name) => {
+            const errorMessage = errors[name];
+            return (react_1.default.createElement(AutoAutoHeight_1.default, { open: !!errorMessage, key: name },
+                react_1.default.createElement("div", { className: "u-flex" },
+                    react_1.default.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, errorMessage)))));
+        }),
+        react_1.default.createElement("div", { className: "u-marg-bottom" },
+            react_1.default.createElement(AcceptablePaymentCard_1.default, { isCurrent: (cardKey) => {
+                    var _a;
+                    return cardNumber.state.cardType !== null && ((_a = cardTypes[cardKey]) === null || _a === void 0 ? void 0 : _a.name) === cardNumber.state.cardType;
+                }, isDefault: (cardKey) => {
+                    return cardNumber.state.cardType === null;
+                } })),
+        react_1.default.createElement("form", { ref: formRef },
+            react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                react_1.default.createElement("div", { className: cardNumber.getClasses(), ref: cardNumber.ref }),
                 react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
-                    react_1.default.createElement("div", { className: cardNumber.getClasses(), ref: cardNumber.ref }),
-                    react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
-                        react_1.default.createElement("div", { className: expirationDate.getClasses(), ref: expirationDate.ref }),
-                        react_1.default.createElement("div", { className: securityCode.getClasses(), ref: securityCode.ref }))),
-                react_1.default.createElement(InputGroup_1.default, { dimensions: "1" },
-                    react_1.default.createElement("div", { className: nameOnCard.getClasses(), ref: nameOnCard.ref }))))));
-}
-exports.default = (0, react_2.forwardRef)(StepConfirmationPaymentDetails);
+                    react_1.default.createElement("div", { className: expirationDate.getClasses(), ref: expirationDate.ref }),
+                    react_1.default.createElement("div", { className: securityCode.getClasses(), ref: securityCode.ref }))),
+            react_1.default.createElement(InputGroup_1.default, { dimensions: "1" },
+                react_1.default.createElement("div", { className: nameOnCard.getClasses(), ref: nameOnCard.ref })))));
+});
 //# sourceMappingURL=StepConfirmationPaymentDetails.js.map

package/dist/src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationPaymentDetails.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import PaymentCard from '@/models/PaymentCard';\nimport React from 'react';\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\nimport { useCurrentHotel, useMember, useWindowScroll } from '@frontend/hooks';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { ExistingCardPicker } from './ExistingCardPicker';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\n\ntype VGSInputType = 'card-number' | 'text' | 'card-expiration-date' | 'card-security-code';\n\nfunction StepConfirmationPaymentDetails(props: any, ref: any) {\n    const { hotel } = useCurrentHotel();\n    const member = useMember();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n\n    const { t } = useTranslation();\n\n    const { focusElement } = useWindowScroll();\n\n    const vgsInputCss = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, nameOnCard, expirationDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect([\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n            name: 'credit-card',\n            type: 'card-number',\n            vgsProps: {\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardNumber) + ' *',\n                validations: ['required', 'validCardNumber'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n            name: 'card-name',\n            type: 'text',\n            vgsProps: {\n                validations: ['required'],\n                css: vgsInputCss,\n                placeholder: t(Translation.Step.Confirmation.Inputs.NameOnCard) + ' *',\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n            name: 'expiration-date',\n            type: 'card-expiration-date',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardExpiry) + ' *',\n                validations: ['required', 'validCardExpirationDate'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n            name: 'security-code',\n            type: 'card-security-code',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.SecurityCode) + ' *',\n                validations: ['required', 'validCardSecurityCode'],\n                css: vgsInputCss,\n            },\n        },\n    ]);\n\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    useEffect(() => {\n        if (errors && Object.keys(errors).length !== 0 && cardNumber?.ref?.current) {\n            focusElement(cardNumber?.ref?.current);\n        }\n    }, [errors]);\n\n    useImperativeHandle(ref, () => ({\n        getTokenizedCode: () =>\n            new Promise<PaymentCard | IRoomstayMemberCards>((resolve, reject) => {\n                if (vgsForm) {\n                    vgsForm.submit(\n                        '/post',\n                        {\n                            serializer: 'deep',\n                            methods: 'POST',\n                        },\n                        (status: any, response: any) => {\n                            const cardData = JSON.parse(response.data);\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                                reject('invalid expiration date');\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\n                            const card: any = {\n                                CVV: cardData['security-code'],\n                                Expiry: expiration,\n                                Name: cardData['card-name'],\n                                Number: cardData['credit-card'],\n                                Type: cardNumber.state.cardType,\n                            };\n\n                            resolve(card);\n                        },\n                        (error: any) => {\n                            setErrorsOnFaults(error);\n                            reject(error);\n                        }\n                    );\n                } else {\n                    console.error('VGS not on element, problem has occurred');\n                }\n            }),\n    }));\n\n    const formRef = useRef(null);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card: string) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n\n    const onMemberCardSelected = (card: IRoomstayMemberCards) => {\n        // TODO:\n    };\n\n    return (\n        <div>\n            <div>{!!member.user && <ExistingCardPicker onCardSelected={onMemberCardSelected} />}</div>\n            <div>\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 className=\"u-marg-bottom\">\n                    <AcceptablePaymentCard\n                        isCurrent={(cardKey: any) => {\n                            return cardNumber.state.cardType !== null && cardTypes[cardKey]?.name === cardNumber.state.cardType;\n                        }}\n                        isDefault={(cardKey: any) => {\n                            return cardNumber.state.cardType === null;\n                        }}\n                    />\n                </div>\n                <form ref={formRef}>\n                    <InputGroup dimensions=\"2/2\">\n                        <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                        <InputGroup dimensions=\"2/2\">\n                            <div className={expirationDate.getClasses()} ref={expirationDate.ref} />\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </InputGroup>\n                    </InputGroup>\n                    <InputGroup dimensions=\"1\">\n                        <div className={nameOnCard.getClasses()} ref={nameOnCard.ref} />\n                    </InputGroup>\n                </form>\n            </div>\n        </div>\n    );\n}\n\nexport default forwardRef(StepConfirmationPaymentDetails);\n"]}
+{"version":3,"file":"StepConfirmationPaymentDetails.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails.tsx"],"names":[],"mappings":"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","sourcesContent":["import PaymentCard from '@/models/PaymentCard';\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport { SynxisToVGSCardNameMapping } from '@/models/Api/HotelDTO';\nimport { useCurrentHotel, useWindowScroll } from '@frontend/hooks';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\n\nexport const StepConfirmationVGSPaymentInput = forwardRef(function ForwardedStepConfirmationVGSPaymentInput(props: any, ref: any) {\n    const { hotel } = useCurrentHotel();\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n\n    const { t } = useTranslation();\n\n    const { focusElement } = useWindowScroll();\n\n    const vgsInputCss = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, nameOnCard, expirationDate, securityCode],\n        vgsForm,\n    } = useVgsCollect([\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n            name: 'credit-card',\n            type: 'card-number',\n            vgsProps: {\n                autoComplete: ['cc-number'],\n                successColor: '#4F8A10',\n                errorColor: '#D8000C',\n                showCardIcon: false,\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardNumber) + ' *',\n                validations: ['required', 'validCardNumber'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n            name: 'card-name',\n            type: 'text',\n            vgsProps: {\n                validations: ['required'],\n                css: vgsInputCss,\n                placeholder: t(Translation.Step.Confirmation.Inputs.NameOnCard) + ' *',\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n            name: 'expiration-date',\n            type: 'card-expiration-date',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.CardExpiry) + ' *',\n                validations: ['required', 'validCardExpirationDate'],\n                css: vgsInputCss,\n            },\n        },\n        {\n            label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n            name: 'security-code',\n            type: 'card-security-code',\n            vgsProps: {\n                placeholder: t(Translation.Step.Confirmation.Inputs.SecurityCode) + ' *',\n                validations: ['required', 'validCardSecurityCode'],\n                css: vgsInputCss,\n            },\n        },\n    ]);\n\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    useEffect(() => {\n        if (errors && Object.keys(errors).length !== 0 && cardNumber?.ref?.current) {\n            focusElement(cardNumber?.ref?.current);\n        }\n    }, [errors]);\n\n    useImperativeHandle(ref, () => ({\n        getTokenizedCode: () =>\n            new Promise<PaymentCard | IRoomstayMemberCards>((resolve, reject) => {\n                if (vgsForm) {\n                    vgsForm.submit(\n                        '/post',\n                        {\n                            serializer: 'deep',\n                            methods: 'POST',\n                        },\n                        (status: any, response: any) => {\n                            const cardData = JSON.parse(response.data);\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                                reject(t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid));\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\n                            const card: any = {\n                                CVV: cardData['security-code'],\n                                Expiry: expiration,\n                                Name: cardData['card-name'],\n                                Number: cardData['credit-card'],\n                                Type: cardNumber.state.cardType,\n                            };\n\n                            resolve(card);\n                        },\n                        (error: any) => {\n                            setErrorsOnFaults(error);\n                            reject(error);\n                        }\n                    );\n                } else {\n                    console.error('VGS not on element, problem has occurred');\n                }\n            }),\n    }));\n\n    const formRef = useRef(null);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const cardTypes = (hotel?.paymentCardTypes ?? [])\n        .map((card) => {\n            const mapping = SynxisToVGSCardNameMapping[card];\n            if (!mapping) {\n                return null;\n            }\n\n            return {\n                name: SynxisToVGSCardNameMapping[card],\n                status: false,\n            };\n        })\n        .filter((obj) => obj);\n\n    return (\n        <div>\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 className=\"u-marg-bottom\">\n                <AcceptablePaymentCard\n                    isCurrent={(cardKey: any) => {\n                        return cardNumber.state.cardType !== null && cardTypes[cardKey]?.name === cardNumber.state.cardType;\n                    }}\n                    isDefault={(cardKey: any) => {\n                        return cardNumber.state.cardType === null;\n                    }}\n                />\n            </div>\n            <form ref={formRef}>\n                <InputGroup dimensions=\"2/2\">\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                    <InputGroup dimensions=\"2/2\">\n                        <div className={expirationDate.getClasses()} ref={expirationDate.ref} />\n                        <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                    </InputGroup>\n                </InputGroup>\n                <InputGroup dimensions=\"1\">\n                    <div className={nameOnCard.getClasses()} ref={nameOnCard.ref} />\n                </InputGroup>\n            </form>\n        </div>\n    );\n});\n"]}

package/dist/src/components/steps/confirmation/PaymentInformation.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface PaymentInformationProps {
+    tokenizerRef: any;
+    onChangeCb: (code: string) => void;
+}
+declare const PaymentInformation: FC<PaymentInformationProps>;
+export default PaymentInformation;

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

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const RadioButtonGroup_1 = __importDefault(require("../../generic/RadioButtonGroup/RadioButtonGroup"));
+const core_1 = require("@roomstay/core");
+const Translation_1 = require("../../../translations/Translation");
+const StepConfirmationPaymentDetails_1 = require("./PaymentDetails/StepConfirmationPaymentDetails");
+const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
+const Text_1 = __importDefault(require("../../generic/Text"));
+const Color_1 = require("../../../util/Color");
+const Icon_1 = __importStar(require("../../generic/Icon/Icon"));
+const PlanpayPaymentMethod_1 = require("./PlanpayPaymentMethod");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../../hooks");
+const contexts_1 = require("../../../contexts");
+const InlinePaymentOption_1 = __importDefault(require("../../generic/PaymentCard/InlinePaymentOption"));
+const PaymentInformation = ({ tokenizerRef, onChangeCb }) => {
+    var _a, _b;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const methods = (0, react_hook_form_1.useFormContext)();
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const basketContext = (0, contexts_1.useBasket)();
+    const { cards = [], roomstayMember } = (0, contexts_1.useMemberContext)();
+    const defaultCard = (0, react_1.useMemo)(() => cards.find((card) => card.cardId === (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard)), [cards, roomstayMember]);
+    const paymentMethod = methods.watch('paymentMethod');
+    const vgsCardInputOption = {
+        value: core_1.EBookingPaymentMethod.Card,
+        label: react_1.default.createElement(InlinePaymentOption_1.default, { active: paymentMethod === core_1.EBookingPaymentMethod.Card }),
+        renderContent: () => react_1.default.createElement(StepConfirmationPaymentDetails_1.StepConfirmationVGSPaymentInput, { ref: tokenizerRef }),
+    };
+    const options = [];
+    if (hotel === null || hotel === void 0 ? void 0 : hotel.paymentMethods.includes(core_1.EBookingPaymentMethod.Card)) {
+        let defaultCardOption;
+        // Reason this is split up is in case someone doesn't have a default card selected
+        // We still want to select the first card they have, if they have any.
+        if (cards.length) {
+            const selectedMemberCard = defaultCard ? defaultCard : cards[0];
+            defaultCardOption = {
+                value: selectedMemberCard.cardId,
+                label: react_1.default.createElement(InlinePaymentOption_1.default, { card: selectedMemberCard }),
+            };
+        }
+        else {
+            defaultCardOption = vgsCardInputOption;
+        }
+        const selectableStoredCardOptions = [];
+        if (cards.length) {
+            for (const memberCard of cards) {
+                selectableStoredCardOptions.push({
+                    value: memberCard.cardId,
+                    label: react_1.default.createElement(InlinePaymentOption_1.default, { card: memberCard }),
+                });
+            }
+            selectableStoredCardOptions.push(vgsCardInputOption);
+        }
+        options.push(Object.assign(Object.assign({}, defaultCardOption), { options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined }));
+    }
+    if ((hotel === null || hotel === void 0 ? void 0 : hotel.paymentMethods.includes(core_1.EBookingPaymentMethod.Planpay)) &&
+        ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _a === void 0 ? void 0 : _a.minDaysShowPlanpay) &&
+        (0, dayjs_1.default)(basketContext.startDate).diff((0, dayjs_1.default)(), 'day') > ((_b = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _b === void 0 ? void 0 : _b.minDaysShowPlanpay)) {
+        options.push({
+            value: core_1.EBookingPaymentMethod.Planpay,
+            label: (react_1.default.createElement("div", { className: "u-flex u-flex-align-center" },
+                react_1.default.createElement("div", null, t(Translation_1.Translation.Step.Confirmation.PlanpayLabel)),
+                react_1.default.createElement("div", { className: "u-flex u-flex-align-center u-marg-left--light", style: {
+                        borderRadius: '24px',
+                        overflow: 'hidden',
+                    } },
+                    react_1.default.createElement("img", { height: 16, src: RoomstayThemeEngine_1.default.getImageAssetUrl('planpay-logo-small.svg'), alt: "" })),
+                !methods.formState.isValid && (react_1.default.createElement(Text_1.default, { color: Color_1.Color.Graphite, className: "u-flex u-flex-align-center", style: {
+                        color: '#313131',
+                        fontSize: 10,
+                    } },
+                    react_1.default.createElement(Icon_1.default, { color: Color_1.Color.DarkGrey, icon: Icon_1.IconType.Info, className: "u-marg-right--lighter u-marg-left--light" }),
+                    t(Translation_1.Translation.Step.Confirmation.PlanpayHelperText))))),
+            disabled: !methods.formState.isValid,
+            disabledReason: !methods.formState.isValid ? 'You must fill all the above details before proceeding with Planpay' : '',
+            renderContent: () => react_1.default.createElement(PlanpayPaymentMethod_1.PlanpayPaymentMethod, null),
+        });
+    }
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: methods.control, name: "paymentMethod", render: ({ field: { onChange, value } }) => {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(RadioButtonGroup_1.default, { options: options, value: value, onChange: (code) => {
+                            onChange(code);
+                            onChangeCb(code);
+                        } }))));
+        } }));
+};
+exports.default = PaymentInformation;
+//# sourceMappingURL=PaymentInformation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentInformation.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useMemo } from 'react';\nimport RadioButtonGroup, { IRadioButtonOption } from '@/components/generic/RadioButtonGroup/RadioButtonGroup';\nimport { EBookingPaymentMethod } from '@roomstay/core';\nimport { Translation } from '@/translations/Translation';\nimport { StepConfirmationVGSPaymentInput } from '@/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport Text from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { PlanpayPaymentMethod } from '@/components/steps/confirmation/PlanpayPaymentMethod';\nimport dayjs from 'dayjs';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport { useCurrentHotel } from '@/hooks';\nimport { useBasket, useMemberContext } from '@/contexts';\nimport InlinePaymentOption from '@/components/generic/PaymentCard/InlinePaymentOption';\n\ninterface PaymentInformationProps {\n    tokenizerRef: any;\n    onChangeCb: (code: string) => void;\n}\n\nconst PaymentInformation: FC<PaymentInformationProps> = ({ tokenizerRef, onChangeCb }) => {\n    const { t } = useTranslation();\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { hotel } = useCurrentHotel();\n    const basketContext = useBasket();\n\n    const { cards = [], roomstayMember } = useMemberContext();\n    const defaultCard = useMemo(() => cards.find((card) => card.cardId === roomstayMember?.defaultCard), [cards, roomstayMember]);\n\n    const paymentMethod = methods.watch('paymentMethod');\n    const vgsCardInputOption: IRadioButtonOption = {\n        value: EBookingPaymentMethod.Card,\n        label: <InlinePaymentOption active={paymentMethod === EBookingPaymentMethod.Card} />,\n        renderContent: () => <StepConfirmationVGSPaymentInput ref={tokenizerRef} />,\n    };\n\n    const options: IRadioButtonOption[] = [];\n    if (hotel?.paymentMethods.includes(EBookingPaymentMethod.Card)) {\n        let defaultCardOption: IRadioButtonOption;\n        // Reason this is split up is in case someone doesn't have a default card selected\n        // We still want to select the first card they have, if they have any.\n        if (cards.length) {\n            const selectedMemberCard = defaultCard ? defaultCard : cards[0];\n\n            defaultCardOption = {\n                value: selectedMemberCard.cardId,\n                label: <InlinePaymentOption card={selectedMemberCard} />,\n            };\n        } else {\n            defaultCardOption = vgsCardInputOption;\n        }\n\n        const selectableStoredCardOptions = [];\n\n        if (cards.length) {\n            for (const memberCard of cards) {\n                selectableStoredCardOptions.push({\n                    value: memberCard.cardId,\n                    label: <InlinePaymentOption card={memberCard} />,\n                });\n            }\n            selectableStoredCardOptions.push(vgsCardInputOption);\n        }\n\n        options.push({\n            ...defaultCardOption,\n            options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined,\n        });\n    }\n\n    if (\n        hotel?.paymentMethods.includes(EBookingPaymentMethod.Planpay) &&\n        hotel?.planpay?.minDaysShowPlanpay &&\n        dayjs(basketContext.startDate).diff(dayjs(), 'day') > hotel?.planpay?.minDaysShowPlanpay\n    ) {\n        options.push({\n            value: EBookingPaymentMethod.Planpay,\n            label: (\n                <div className=\"u-flex u-flex-align-center\">\n                    <div>{t(Translation.Step.Confirmation.PlanpayLabel)}</div>\n                    <div\n                        className=\"u-flex u-flex-align-center u-marg-left--light\"\n                        style={{\n                            borderRadius: '24px',\n                            overflow: 'hidden',\n                        }}\n                    >\n                        <img height={16} src={RoomstayThemeEngine.getImageAssetUrl('planpay-logo-small.svg')} alt=\"\" />\n                    </div>\n                    {!methods.formState.isValid && (\n                        <Text\n                            color={Color.Graphite}\n                            className=\"u-flex u-flex-align-center\"\n                            style={{\n                                color: '#313131',\n                                fontSize: 10,\n                            }}\n                        >\n                            <Icon color={Color.DarkGrey} icon={IconType.Info} className=\"u-marg-right--lighter u-marg-left--light\" />\n                            {t(Translation.Step.Confirmation.PlanpayHelperText)}\n                        </Text>\n                    )}\n                </div>\n            ),\n            disabled: !methods.formState.isValid,\n            disabledReason: !methods.formState.isValid ? 'You must fill all the above details before proceeding with Planpay' : '',\n            renderContent: () => <PlanpayPaymentMethod />,\n        });\n    }\n\n    return (\n        <Controller\n            control={methods.control}\n            name=\"paymentMethod\"\n            render={({ field: { onChange, value } }) => {\n                return (\n                    <>\n                        <div>\n                            <RadioButtonGroup\n                                options={options}\n                                value={value}\n                                onChange={(code) => {\n                                    onChange(code);\n                                    onChangeCb(code);\n                                }}\n                            />\n                        </div>\n                    </>\n                );\n            }}\n        />\n    );\n};\n\nexport default PaymentInformation;\n"]}

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

@@ -26,13 +26,12 @@ 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 SimpleModal_1 = __importStar(require("../../generic/modal/SimpleModal"));
 const BEButton_1 = __importDefault(require("../../generic/BEButton"));
 const Currency_1 = __importDefault(require("../../generic/Currency"));
 const Text_1 = __importStar(require("../../generic/Text"));
 const Color_1 = require("../../../util/Color");
-const react_2 = require("react");
 const contexts_1 = require("../../../contexts/index.js");
 const Headline_1 = __importDefault(require("../../generic/Headline"));
 const LineBreak_1 = __importDefault(require("../../generic/LineBreak"));
@@ -40,11 +39,14 @@ const Icon_1 = require("../../generic/Icon/Icon");
 const Countdown_1 = __importDefault(require("../../generic/Countdown"));
 const dayjs_1 = __importDefault(require("dayjs"));
 const Pill_1 = __importStar(require("../../generic/Pill"));
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../../translations/Translation");
 function StepConfirmationCheckoutDifferencesModal(props) {
     var _a, _b;
-    const basketContext = (0, react_2.useContext)(contexts_1.BasketContext);
-    const [endTime, setEndTime] = (0, react_2.useState)((0, dayjs_1.default)().add(14, 'minute'));
-    (0, react_2.useEffect)(() => {
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [endTime, setEndTime] = (0, react_1.useState)((0, dayjs_1.default)().add(14, 'minute'));
+    (0, react_1.useEffect)(() => {
         var _a;
         let cancelled = false;
         let timeout = null;
@@ -61,16 +63,16 @@ function StepConfirmationCheckoutDifferencesModal(props) {
         };
     }, [props.differences.length, (_a = props.warnings) === null || _a === void 0 ? void 0 : _a.length]);
     const mobileFooter = (react_1.default.createElement("div", { className: "u-flex" },
-        react_1.default.createElement(BEButton_1.default, { isText: true, size: "small", icon: Icon_1.IconType.ArrowLeft, onClick: props.onClose, isLoading: props.isLoading }, "Take me back"),
-        react_1.default.createElement(BEButton_1.default, { primary: true, filled: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right", onClick: props.onProceed, isLoading: props.isLoading }, "Continue with reservation")));
-    return (react_1.default.createElement(SimpleModal_1.default, { open: !!props.differences.length || !!((_b = props.warnings) === null || _b === void 0 ? void 0 : _b.length), title: "Your total price has Changed!", mobileFooter: mobileFooter, desktopFooter: react_1.default.createElement("div", { className: "u-marg-heavy u-marg@m-" }, mobileFooter), size: SimpleModal_1.SimpleModalSize.Small, alignCenter: true },
+        react_1.default.createElement(BEButton_1.default, { isText: true, size: "small", icon: Icon_1.IconType.ArrowLeft, onClick: props.onClose, isLoading: props.isLoading }, t(Translation_1.Translation.Step.Confirmation.TakeMeBack)),
+        react_1.default.createElement(BEButton_1.default, { primary: true, filled: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right", onClick: props.onProceed, isLoading: props.isLoading }, t(Translation_1.Translation.Step.Confirmation.ContinueWithReservation))));
+    return (react_1.default.createElement(SimpleModal_1.default, { open: !!props.differences.length || !!((_b = props.warnings) === null || _b === void 0 ? void 0 : _b.length), title: t(Translation_1.Translation.Step.Confirmation.YourTotalPriceHasChanged), mobileFooter: mobileFooter, desktopFooter: react_1.default.createElement("div", { className: "u-marg-heavy u-marg@m-" }, mobileFooter), size: SimpleModal_1.SimpleModalSize.Small, alignCenter: true },
         react_1.default.createElement("div", { className: "u-marg-heavy u-marg@m-" },
             react_1.default.createElement("div", { className: "row" },
                 react_1.default.createElement("div", { className: "col-md-8" },
-                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, "We apologize for any inconvenience, but the price for your selected reservation has changed during your checkout, please confirm that you accept the new total shown below.")),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, t(Translation_1.Translation.Step.Confirmation.ConfirmationCheckoutTitle))),
                 react_1.default.createElement("div", { className: "col-md-4" },
                     react_1.default.createElement(Pill_1.default, { icon: Icon_1.IconType.Time, type: Pill_1.PillType.Primary },
-                        react_1.default.createElement("span", { className: "u-marg-right--light" }, "Reverts in"),
+                        react_1.default.createElement("span", { className: "u-marg-right--light" }, t(Translation_1.Translation.Step.Confirmation.RevertsIn)),
                         react_1.default.createElement(Countdown_1.default, { endTimeDate: endTime })))),
             react_1.default.createElement(LineBreak_1.default, null),
             !!(props.differences && props.differences.length) &&

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

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationCheckoutDifferencesModal.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCheckoutDifferencesModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport BEButton from '@/components/generic/BEButton';\nimport BasketRowDifferences from '@/models/BasketRowDifferences';\nimport Currency from '@/components/generic/Currency';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport { useContext, useState, useEffect } from 'react';\nimport { BasketContext } from '@frontend/contexts';\nimport Headline from '@/components/generic/Headline';\nimport LineBreak from '@/components/generic/LineBreak';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Countdown from '@/components/generic/Countdown';\nimport dayjs from 'dayjs';\nimport Pill, { PillType } from '@/components/generic/Pill';\n\ninterface StepConfirmationCheckoutDifferencesModalProps {\n    differences: BasketRowDifferences[];\n    warnings: string[];\n\n    onClose: () => void;\n    onProceed: () => void;\n    isLoading?: boolean;\n}\n\nexport default function StepConfirmationCheckoutDifferencesModal(props: StepConfirmationCheckoutDifferencesModalProps) {\n    const basketContext = useContext(BasketContext);\n\n    const [endTime, setEndTime] = useState(dayjs().add(14, 'minute'));\n\n    useEffect(() => {\n        let cancelled = false;\n        let timeout: any = null;\n\n        if (!!props.differences.length || !!props.warnings?.length) {\n            timeout = setTimeout(() => {\n                if (!cancelled) {\n                    props.onClose();\n                }\n            }, 740000);\n        }\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeout);\n        };\n    }, [props.differences.length, props.warnings?.length]);\n\n    const mobileFooter = (\n        <div className=\"u-flex\">\n            <BEButton isText size=\"small\" icon={IconType.ArrowLeft} onClick={props.onClose} isLoading={props.isLoading}>\n                Take me back\n            </BEButton>\n            <BEButton primary filled icon={IconType.ArrowRight} iconPosition=\"right\" onClick={props.onProceed} isLoading={props.isLoading}>\n                Continue with reservation\n            </BEButton>\n        </div>\n    );\n\n    return (\n        <SimpleModal\n            open={!!props.differences.length || !!props.warnings?.length}\n            title=\"Your total price has Changed!\"\n            mobileFooter={mobileFooter}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{mobileFooter}</div>}\n            size={SimpleModalSize.Small}\n            alignCenter\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <Text type={TextType.Small}>\n                            We apologize for any inconvenience, but the price for your selected reservation has changed during your checkout, please confirm that you accept the new\n                            total shown below.\n                        </Text>\n                    </div>\n                    <div className=\"col-md-4\">\n                        <Pill icon={IconType.Time} type={PillType.Primary}>\n                            <span className=\"u-marg-right--light\">Reverts in</span>\n                            <Countdown endTimeDate={endTime} />\n                        </Pill>\n                    </div>\n                </div>\n                <LineBreak />\n                {!!(props.differences && props.differences.length) &&\n                    props.differences.map((difference) => {\n                        const basketRow = basketContext.getAllValidRows().find((row) => row.getID() === difference.id);\n\n                        return (\n                            <div key={difference.id}>\n                                {!!basketRow && (\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <div className=\"u-marg-bottom--light\">\n                                            <Headline>{basketRow.getRoom().name}</Headline>\n                                        </div>\n                                        <Text>{basketRow.getRate()?.name}</Text>\n                                    </div>\n                                )}\n                                <div className=\"u-flex u-marg-bottom--light\">\n                                    <Text type={TextType.Body}>\n                                        <strong>Displayed price:</strong>\n                                    </Text>\n                                    <Text color={Color.Alert}>\n                                        <Currency>{difference.totalPrice?.before}</Currency>\n                                    </Text>\n                                </div>\n                                <div className=\"u-flex\">\n                                    <Text type={TextType.Body}>\n                                        <strong>Actual price:</strong>\n                                    </Text>\n                                    <Text color={Color.Success}>\n                                        <Currency>{difference.totalPrice?.after}</Currency>\n                                    </Text>\n                                </div>\n                                <LineBreak />\n                            </div>\n                        );\n                    })}\n                {!!(props.warnings && props.warnings.length) &&\n                    props.warnings.map((warning: string, index: number) => {\n                        return <Text key={index}>{warning}</Text>;\n                    })}\n            </div>\n        </SimpleModal>\n    );\n}\n"]}
+{"version":3,"file":"StepConfirmationCheckoutDifferencesModal.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCheckoutDifferencesModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport BEButton from '@/components/generic/BEButton';\nimport BasketRowDifferences from '@/models/BasketRowDifferences';\nimport Currency from '@/components/generic/Currency';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport { BasketContext } from '@frontend/contexts';\nimport Headline from '@/components/generic/Headline';\nimport LineBreak from '@/components/generic/LineBreak';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Countdown from '@/components/generic/Countdown';\nimport dayjs from 'dayjs';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '@/translations/Translation';\n\ninterface StepConfirmationCheckoutDifferencesModalProps {\n    differences: BasketRowDifferences[];\n    warnings: string[];\n\n    onClose: () => void;\n    onProceed: () => void;\n    isLoading?: boolean;\n}\n\nexport default function StepConfirmationCheckoutDifferencesModal(props: StepConfirmationCheckoutDifferencesModalProps) {\n    const basketContext = useContext(BasketContext);\n    const { t } = useTranslation();\n\n    const [endTime, setEndTime] = useState(dayjs().add(14, 'minute'));\n\n    useEffect(() => {\n        let cancelled = false;\n        let timeout: any = null;\n\n        if (!!props.differences.length || !!props.warnings?.length) {\n            timeout = setTimeout(() => {\n                if (!cancelled) {\n                    props.onClose();\n                }\n            }, 740000);\n        }\n\n        return () => {\n            cancelled = true;\n            clearTimeout(timeout);\n        };\n    }, [props.differences.length, props.warnings?.length]);\n\n    const mobileFooter = (\n        <div className=\"u-flex\">\n            <BEButton isText size=\"small\" icon={IconType.ArrowLeft} onClick={props.onClose} isLoading={props.isLoading}>\n                {t(Translation.Step.Confirmation.TakeMeBack)}\n            </BEButton>\n            <BEButton primary filled icon={IconType.ArrowRight} iconPosition=\"right\" onClick={props.onProceed} isLoading={props.isLoading}>\n                {t(Translation.Step.Confirmation.ContinueWithReservation)}\n            </BEButton>\n        </div>\n    );\n\n    return (\n        <SimpleModal\n            open={!!props.differences.length || !!props.warnings?.length}\n            title={t(Translation.Step.Confirmation.YourTotalPriceHasChanged)}\n            mobileFooter={mobileFooter}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{mobileFooter}</div>}\n            size={SimpleModalSize.Small}\n            alignCenter\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <Text type={TextType.Small}>{t(Translation.Step.Confirmation.ConfirmationCheckoutTitle)}</Text>\n                    </div>\n                    <div className=\"col-md-4\">\n                        <Pill icon={IconType.Time} type={PillType.Primary}>\n                            <span className=\"u-marg-right--light\">{t(Translation.Step.Confirmation.RevertsIn)}</span>\n                            <Countdown endTimeDate={endTime} />\n                        </Pill>\n                    </div>\n                </div>\n                <LineBreak />\n                {!!(props.differences && props.differences.length) &&\n                    props.differences.map((difference) => {\n                        const basketRow = basketContext.getAllValidRows().find((row) => row.getID() === difference.id);\n\n                        return (\n                            <div key={difference.id}>\n                                {!!basketRow && (\n                                    <div className=\"u-marg-bottom--heavy\">\n                                        <div className=\"u-marg-bottom--light\">\n                                            <Headline>{basketRow.getRoom().name}</Headline>\n                                        </div>\n                                        <Text>{basketRow.getRate()?.name}</Text>\n                                    </div>\n                                )}\n                                <div className=\"u-flex u-marg-bottom--light\">\n                                    <Text type={TextType.Body}>\n                                        <strong>Displayed price:</strong>\n                                    </Text>\n                                    <Text color={Color.Alert}>\n                                        <Currency>{difference.totalPrice?.before}</Currency>\n                                    </Text>\n                                </div>\n                                <div className=\"u-flex\">\n                                    <Text type={TextType.Body}>\n                                        <strong>Actual price:</strong>\n                                    </Text>\n                                    <Text color={Color.Success}>\n                                        <Currency>{difference.totalPrice?.after}</Currency>\n                                    </Text>\n                                </div>\n                                <LineBreak />\n                            </div>\n                        );\n                    })}\n                {!!(props.warnings && props.warnings.length) &&\n                    props.warnings.map((warning: string, index: number) => {\n                        return <Text key={index}>{warning}</Text>;\n                    })}\n            </div>\n        </SimpleModal>\n    );\n}\n"]}