@roomstay/frontend 2.6.78 → 2.6.79-0

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

@@ -42,18 +42,19 @@ function StepConfirmationAcknowledgement() {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const { register, formState } = (0, react_hook_form_1.useFormContext)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "u-marg-bottom" },
+    return (react_1.default.createElement("div", { className: "rs-step-confirmation-acks" },
+        react_1.default.createElement("div", { className: "u-marg-bottom rs-step-confirmation-acks-headline" },
             react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.Acknowledgement))),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(Checkbox_1.default, Object.assign({ label: t(Translation_1.Translation.Step.Confirmation.EmailSpecialOffers) }, register('marketingOptIn', {})))),
-        react_1.default.createElement("div", { className: "u-marg-top--light" },
-            react_1.default.createElement(Checkbox_1.default, Object.assign({}, register('privacyPolicy', { required: true }), { label: react_1.default.createElement("div", null,
-                    t(Translation_1.Translation.Step.Confirmation.IHaveUnderstoodPrivacyPolicy),
-                    ' ',
-                    react_1.default.createElement("a", { style: { color: Color_1.Color.Accent }, className: "--underlined", href: hotel === null || hotel === void 0 ? void 0 : hotel.privacyPolicyUrl, target: "_blank", rel: "noreferrer" }, t(Translation_1.Translation.Step.Confirmation.PrivacyPolicy))) }))),
+        react_1.default.createElement("div", { className: "rs-confirmation-acks-checklist" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(Checkbox_1.default, Object.assign({ label: t(Translation_1.Translation.Step.Confirmation.EmailSpecialOffers) }, register('marketingOptIn', {})))),
+            react_1.default.createElement("div", { className: "u-marg-top--light" },
+                react_1.default.createElement(Checkbox_1.default, Object.assign({}, register('privacyPolicy', { required: true }), { label: react_1.default.createElement("div", null,
+                        t(Translation_1.Translation.Step.Confirmation.IHaveUnderstoodPrivacyPolicy),
+                        ' ',
+                        react_1.default.createElement("a", { style: { color: Color_1.Color.Accent }, className: "--underlined", href: hotel === null || hotel === void 0 ? void 0 : hotel.privacyPolicyUrl, target: "_blank", rel: "noreferrer" }, t(Translation_1.Translation.Step.Confirmation.PrivacyPolicy))) })))),
         react_1.default.createElement(AutoAutoHeight_1.default, { open: !!formState.errors['privacyPolicy'] },
-            react_1.default.createElement("div", { className: "u-flex u-marg-top" },
+            react_1.default.createElement("div", { className: "u-flex u-marg-top rs-confirmation-acks-alert" },
                 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 }, t(Translation_1.Translation.Step.Confirmation.PrivacyPolicyError)))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationAcknowledgement.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationAcknowledgement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAkD;AAClD,kDAA0B;AAC1B,qDAAiD;AACjD,iDAA+C;AAE/C,iFAAyD;AACzD,oEAA8D;AAC9D,sFAA8D;AAC9D,6EAAqD;AACrD,yDAA0D;AAC1D,kEAA2D;AAE3D,4DAAyD;AACzD,wCAAqC;AAErC,SAAwB,+BAA+B;IACnD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAc,GAA0B,CAAC;IAEzE,OAAO,CACH;QACI,uCAAK,SAAS,EAAC,eAAe;YAC1B,8BAAC,kBAAQ,IAAC,IAAI,UAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAY,CAC1E;QACN;YACI,8BAAC,kBAAQ,kBAAC,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAM,QAAQ,CAAC,gBAAgB,EAAE,EAAE,CAAC,EAAI,CAC1G;QACN,uCAAK,SAAS,EAAC,mBAAmB;YAC9B,8BAAC,kBAAQ,oBACD,QAAQ,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IACjD,KAAK,EACD;oBACK,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,4BAA4B,CAAC;oBAAE,GAAG;oBACnE,qCAAG,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,EAAE,EAAE,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,IACtH,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAC/C,CACF,IAEZ,CACA;QACN,8BAAC,wBAAc,IAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;YACrD,uCAAK,SAAS,EAAC,mBAAmB;gBAC9B,8BAAC,eAAK,IAAC,IAAI,EAAE,iBAAS,CAAC,MAAM,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK;oBAC/C,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAQ,CACpF,CACN,CACO,CAClB,CACN,CAAC;AACN,CAAC;AApCD,kDAoCC","sourcesContent":["import { useCurrentHotel } from '@frontend/hooks';\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport Checkbox from '@/components/generic/Checkbox/Checkbox';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nexport default function StepConfirmationAcknowledgement() {\n    const { t } = useTranslation();\n\n    const { hotel } = useCurrentHotel();\n    const { register, formState } = useFormContext<ConfirmationFormValues>();\n\n    return (\n        <>\n            <div className=\"u-marg-bottom\">\n                <Headline bold>{t(Translation.Step.Confirmation.Acknowledgement)}</Headline>\n            </div>\n            <div>\n                <Checkbox label={t(Translation.Step.Confirmation.EmailSpecialOffers)} {...register('marketingOptIn', {})} />\n            </div>\n            <div className=\"u-marg-top--light\">\n                <Checkbox\n                    {...register('privacyPolicy', { required: true })}\n                    label={\n                        <div>\n                            {t(Translation.Step.Confirmation.IHaveUnderstoodPrivacyPolicy)}{' '}\n                            <a style={{ color: Color.Accent }} className=\"--underlined\" href={hotel?.privacyPolicyUrl} target=\"_blank\" rel=\"noreferrer\">\n                                {t(Translation.Step.Confirmation.PrivacyPolicy)}\n                            </a>\n                        </div>\n                    }\n                />\n            </div>\n            <AutoAutoHeight open={!!formState.errors['privacyPolicy']}>\n                <div className=\"u-flex u-marg-top\">\n                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                        <Text type={TextType.Small}>{t(Translation.Step.Confirmation.PrivacyPolicyError)}</Text>\n                    </Alert>\n                </div>\n            </AutoAutoHeight>\n        </>\n    );\n}\n"]}
+{"version":3,"file":"StepConfirmationAcknowledgement.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationAcknowledgement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAkD;AAClD,kDAA0B;AAC1B,qDAAiD;AACjD,iDAA+C;AAE/C,iFAAyD;AACzD,oEAA8D;AAC9D,sFAA8D;AAC9D,6EAAqD;AACrD,yDAA0D;AAC1D,kEAA2D;AAE3D,4DAAyD;AACzD,wCAAqC;AAErC,SAAwB,+BAA+B;IACnD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAc,GAA0B,CAAC;IAEzE,OAAO,CACH,uCAAK,SAAS,EAAC,2BAA2B;QACtC,uCAAK,SAAS,EAAC,kDAAkD;YAC7D,8BAAC,kBAAQ,IAAC,IAAI,UAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAY,CAC1E;QACN,uCAAK,SAAS,EAAC,gCAAgC;YAC3C;gBACI,8BAAC,kBAAQ,kBAAC,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAM,QAAQ,CAAC,gBAAgB,EAAE,EAAE,CAAC,EAAI,CAC1G;YACN,uCAAK,SAAS,EAAC,mBAAmB;gBAC9B,8BAAC,kBAAQ,oBACD,QAAQ,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IACjD,KAAK,EACD;wBACK,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,4BAA4B,CAAC;wBAAE,GAAG;wBACnE,qCAAG,KAAK,EAAE,EAAE,KAAK,EAAE,aAAK,CAAC,MAAM,EAAE,EAAE,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,IACtH,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAC/C,CACF,IAEZ,CACA,CACJ;QACN,8BAAC,wBAAc,IAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;YACrD,uCAAK,SAAS,EAAC,8CAA8C;gBACzD,8BAAC,eAAK,IAAC,IAAI,EAAE,iBAAS,CAAC,MAAM,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK;oBAC/C,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAQ,CACpF,CACN,CACO,CACf,CACT,CAAC;AACN,CAAC;AAtCD,kDAsCC","sourcesContent":["import { useCurrentHotel } from '@frontend/hooks';\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport Checkbox from '@/components/generic/Checkbox/Checkbox';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nexport default function StepConfirmationAcknowledgement() {\n    const { t } = useTranslation();\n\n    const { hotel } = useCurrentHotel();\n    const { register, formState } = useFormContext<ConfirmationFormValues>();\n\n    return (\n        <div className=\"rs-step-confirmation-acks\">\n            <div className=\"u-marg-bottom rs-step-confirmation-acks-headline\">\n                <Headline bold>{t(Translation.Step.Confirmation.Acknowledgement)}</Headline>\n            </div>\n            <div className=\"rs-confirmation-acks-checklist\">\n                <div>\n                    <Checkbox label={t(Translation.Step.Confirmation.EmailSpecialOffers)} {...register('marketingOptIn', {})} />\n                </div>\n                <div className=\"u-marg-top--light\">\n                    <Checkbox\n                        {...register('privacyPolicy', { required: true })}\n                        label={\n                            <div>\n                                {t(Translation.Step.Confirmation.IHaveUnderstoodPrivacyPolicy)}{' '}\n                                <a style={{ color: Color.Accent }} className=\"--underlined\" href={hotel?.privacyPolicyUrl} target=\"_blank\" rel=\"noreferrer\">\n                                    {t(Translation.Step.Confirmation.PrivacyPolicy)}\n                                </a>\n                            </div>\n                        }\n                    />\n                </div>\n            </div>\n            <AutoAutoHeight open={!!formState.errors['privacyPolicy']}>\n                <div className=\"u-flex u-marg-top rs-confirmation-acks-alert\">\n                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                        <Text type={TextType.Small}>{t(Translation.Step.Confirmation.PrivacyPolicyError)}</Text>\n                    </Alert>\n                </div>\n            </AutoAutoHeight>\n        </div>\n    );\n}\n"]}

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

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ConfirmationStepContext_1 = require("contexts/ConfirmationStepContext/ConfirmationStepContext");
 const HistoryConsistentPush_1 = require("hooks/HistoryConsistentPush");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const Translation_1 = require("translations/Translation");
@@ -56,15 +56,19 @@ const PaymentInformation_1 = __importDefault(require("./PaymentInformation"));
 const RoomContactDetails_1 = __importDefault(require("./RoomContactDetails"));
 const StepConfirmationAcknowledgement_1 = __importDefault(require("./StepConfirmationAcknowledgement"));
 const StepConfirmationCommentsComponent_1 = require("./StepConfirmationCommentsComponent");
+const StepConfirmationImportantInformation_1 = __importDefault(require("./StepConfirmationImportantInformation"));
 const StepConfirmationPoliciesSection_1 = __importDefault(require("./StepConfirmationPoliciesSection"));
 const StepConfirmationPolicyBlock_1 = __importDefault(require("./StepConfirmationPolicyBlock"));
+const ConfirmationImportantInformationFeature_1 = __importDefault(require("../../../providers/feature/ConfirmationImportantInformationFeature"));
 const ConfirmationVerifyFeature_1 = __importDefault(require("../../../providers/feature/ConfirmationVerifyFeature"));
 const ShowIATANumberOnCheckoutFeature_1 = __importDefault(require("../../../providers/feature/ShowIATANumberOnCheckoutFeature"));
 const Color_1 = require("../../../util/Color");
 const GetStepRoom_1 = __importDefault(require("../../../util/GetStepRoom"));
 const usePaymentHelper_1 = require("../../../util/usePaymentHelper");
 function StepConfirmationForm() {
-    var _a;
+    var _a, _b;
+    const [confirmationImportantInformationError, setConfirmationImportantInformationError] = (0, react_1.useState)(false);
+    const confirmationImportantInformation = (0, react_1.useRef)(null);
     const { t } = (0, react_i18next_1.useTranslation)();
     const methods = (0, react_hook_form_1.useFormContext)();
     const { isInPaymentMode, isBackFromPlanpay, bookingSource } = (0, ConfirmationStepContext_1.useConfirmationStep)();
@@ -112,6 +116,9 @@ function StepConfirmationForm() {
                             react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Success },
                                 react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.Secured))))),
                     react_1.default.createElement(SSLSecureBadge_1.default, null))),
+            ConfirmationImportantInformationFeature_1.default.isActive() && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(LineBreak_1.default, null),
+                react_1.default.createElement(StepConfirmationImportantInformation_1.default, { ref: confirmationImportantInformation, confirmationError: confirmationImportantInformationError, withCheckbox: !!((_a = ConfirmationImportantInformationFeature_1.default.getOptions()) === null || _a === void 0 ? void 0 : _a.withCheckbox) }))),
             react_1.default.createElement(LineBreak_1.default, null))),
         react_1.default.createElement(StepConfirmationPoliciesSection_1.default, null),
         react_1.default.createElement("div", { className: "u-pad-top--light u-marg-bottom" },
@@ -123,8 +130,8 @@ function StepConfirmationForm() {
     return (react_1.default.createElement("form", null, isBackFromPlanpay ? (react_1.default.createElement(LargeLoader_1.default, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(AutoAutoHeight_1.default, { open: !exclusivePayment || !isInPaymentMode }, prePaymentInfo),
         exclusivePayment && (react_1.default.createElement(AutoAutoHeight_1.default, { open: isInPaymentMode },
-            react_1.default.createElement(ScrollToTop_1.default, null), (_a = exclusivePayment.renderPaymentInput) === null || _a === void 0 ? void 0 :
-            _a.call(exclusivePayment)))))));
+            react_1.default.createElement(ScrollToTop_1.default, null), (_b = exclusivePayment.renderPaymentInput) === null || _b === void 0 ? void 0 :
+            _b.call(exclusivePayment)))))));
 }
 exports.default = StepConfirmationForm;
 //# sourceMappingURL=StepConfirmationForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationForm.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useConfirmationStep } from 'contexts/ConfirmationStepContext/ConfirmationStepContext';\nimport { useHistoryConsistentPush } from 'hooks/HistoryConsistentPush';\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport SSLSecureBadge from '@/components/generic/badging/SSLSecureBadge';\nimport BEButton from '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport LargeLoader from '@/components/generic/loader/LargeLoader';\nimport ScrollToTop from '@/components/generic/ScrollToTop';\nimport Text, { TextType } from '@/components/generic/Text';\nimport TextBox from '@/components/generic/TextBox';\nimport PaymentInformation from '@/components/steps/confirmation/PaymentInformation';\nimport RoomContactDetails from '@/components/steps/confirmation/RoomContactDetails';\nimport StepConfirmationAcknowledgement from '@/components/steps/confirmation/StepConfirmationAcknowledgement';\nimport { StepConfirmationCommentsComponent } from '@/components/steps/confirmation/StepConfirmationCommentsComponent';\nimport StepConfirmationPoliciesSection from '@/components/steps/confirmation/StepConfirmationPoliciesSection';\nimport StepConfirmationPolicyBlock from '@/components/steps/confirmation/StepConfirmationPolicyBlock';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport ConfirmationVerifyFeature from '@/providers/feature/ConfirmationVerifyFeature';\nimport ShowIATANumberOnCheckoutFeature from '@/providers/feature/ShowIATANumberOnCheckoutFeature';\nimport { Color } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport { usePaymentHelper } from '@/util/usePaymentHelper';\n\nexport default function StepConfirmationForm() {\n    const { t } = useTranslation();\n\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { isInPaymentMode, isBackFromPlanpay, bookingSource } = useConfirmationStep();\n\n    const historyConsistentPush = useHistoryConsistentPush();\n\n    const { exclusivePayment } = usePaymentHelper();\n\n    const returnToPickRooms = async () => {\n        historyConsistentPush(getStepRoom().getStepUrl());\n    };\n\n    const prePaymentInfo = (\n        <>\n            <div className=\"u-marg-bottom--heavy\">\n                <div className=\"u-marg-bottom--light\">\n                    <Headline bold>{t(Translation.Step.Confirmation.GuestDetails)}</Headline>\n                </div>\n                <Text type={TextType.Small} color={Color.Success}>\n                    <strong>{t(Translation.Step.Confirmation.AlmostDone, { required: '*' })}</strong>\n                </Text>\n            </div>\n            <RoomContactDetails />\n            {bookingSource === 'inline' ? (\n                <Alert type={AlertType.Accent2} heavyPadding>\n                    <div className=\"u-flex u-w-100 flex-wrap flex-xl-nowrap\">\n                        <div>\n                            <Text color={Color.Accent} bold>\n                                {t(Translation.Step.Confirmation.WantMoreRooms)}\n                            </Text>\n                            <Text color={Color.Navy}>{t(Translation.Step.Confirmation.YouCanAddAndEditRooms)}</Text>\n                        </div>\n                        <div className=\"d-flex align-items-center u-marg-top@xl-\">\n                            <BEButton filled primary icon={IconType.Add} iconPosition=\"left\" onClick={returnToPickRooms}>\n                                {t(Translation.Step.Confirmation.AddMoreRooms)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </Alert>\n            ) : (\n                <></>\n            )}\n            {ShowIATANumberOnCheckoutFeature.isActive() && (\n                <>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <div className=\"u-marg-bottom\">\n                            <Headline bold>{t(Translation.Step.Confirmation.TravelAgent)}</Headline>\n                        </div>\n\n                        <div className=\"u-marg-bottom--light\">\n                            <Text type={TextType.Small}>\n                                <strong>{t(Translation.Step.Confirmation.Inputs.IATANumber)}</strong>\n                            </Text>\n                        </div>\n                        <div className=\"u-marg-bottom--light\">\n                            <Text type={TextType.Small}>{t(Translation.Step.Confirmation.Inputs.IATANumberGuide)}</Text>\n                        </div>\n                        <TextBox placeholder={t(Translation.Step.Confirmation.Inputs.IATANumber)} wide {...methods.register('IATANumber')} />\n                    </div>\n                    <LineBreak />\n                </>\n            )}\n            <StepConfirmationCommentsComponent />\n            <LineBreak />\n            {!exclusivePayment && (\n                <>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <div className=\"u-marg-bottom\">\n                            <Headline bold>{t(Translation.Navigation.Menu.PaymentInformation)}</Headline>\n                        </div>\n\n                        <PaymentInformation />\n                        <div className=\"u-marg-top u-flex align-items-center\">\n                            <div className=\"u-flex align-items-center justify-content-start\">\n                                <Icon icon={IconType.Lock} color={Color.Success} />\n                                <div className=\"u-marg-left--light\">\n                                    <Text type={TextType.Small} color={Color.Success}>\n                                        <strong>{t(Translation.Step.Confirmation.Secured)}</strong>\n                                    </Text>\n                                </div>\n                            </div>\n                            <SSLSecureBadge />\n                        </div>\n                    </div>\n                    <LineBreak />\n                </>\n            )}\n            <StepConfirmationPoliciesSection />\n            <div className=\"u-pad-top--light u-marg-bottom\">\n                <StepConfirmationPolicyBlock />\n            </div>\n            {ConfirmationVerifyFeature.isActive() && (\n                <>\n                    <LineBreak />\n                    <div>\n                        <StepConfirmationAcknowledgement />\n                    </div>\n                </>\n            )}\n        </>\n    );\n\n    return (\n        <form>\n            {isBackFromPlanpay ? (\n                <LargeLoader />\n            ) : (\n                <>\n                    <AutoAutoHeight open={!exclusivePayment || !isInPaymentMode}>{prePaymentInfo}</AutoAutoHeight>\n                    {exclusivePayment && (\n                        <AutoAutoHeight open={isInPaymentMode}>\n                            <ScrollToTop />\n                            {exclusivePayment.renderPaymentInput?.()}\n                        </AutoAutoHeight>\n                    )}\n                </>\n            )}\n        </form>\n    );\n}\n"]}
+{"version":3,"file":"StepConfirmationForm.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useConfirmationStep } from 'contexts/ConfirmationStepContext/ConfirmationStepContext';\nimport { useHistoryConsistentPush } from 'hooks/HistoryConsistentPush';\nimport React, { useRef, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport SSLSecureBadge from '@/components/generic/badging/SSLSecureBadge';\nimport BEButton from '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport LineBreak from '@/components/generic/LineBreak';\nimport LargeLoader from '@/components/generic/loader/LargeLoader';\nimport ScrollToTop from '@/components/generic/ScrollToTop';\nimport Text, { TextType } from '@/components/generic/Text';\nimport TextBox from '@/components/generic/TextBox';\nimport PaymentInformation from '@/components/steps/confirmation/PaymentInformation';\nimport RoomContactDetails from '@/components/steps/confirmation/RoomContactDetails';\nimport StepConfirmationAcknowledgement from '@/components/steps/confirmation/StepConfirmationAcknowledgement';\nimport { StepConfirmationCommentsComponent } from '@/components/steps/confirmation/StepConfirmationCommentsComponent';\nimport StepConfirmationImportantInformation from '@/components/steps/confirmation/StepConfirmationImportantInformation';\nimport StepConfirmationPoliciesSection from '@/components/steps/confirmation/StepConfirmationPoliciesSection';\nimport StepConfirmationPolicyBlock from '@/components/steps/confirmation/StepConfirmationPolicyBlock';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport ConfirmationImportantInformationFeature from '@/providers/feature/ConfirmationImportantInformationFeature';\nimport ConfirmationVerifyFeature from '@/providers/feature/ConfirmationVerifyFeature';\nimport ShowIATANumberOnCheckoutFeature from '@/providers/feature/ShowIATANumberOnCheckoutFeature';\nimport { Color } from '@/util/Color';\nimport getStepRoom from '@/util/GetStepRoom';\nimport { usePaymentHelper } from '@/util/usePaymentHelper';\n\nexport default function StepConfirmationForm() {\n    const [confirmationImportantInformationError, setConfirmationImportantInformationError] = useState(false);\n    const confirmationImportantInformation = useRef<HTMLInputElement | null>(null);\n    const { t } = useTranslation();\n\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { isInPaymentMode, isBackFromPlanpay, bookingSource } = useConfirmationStep();\n\n    const historyConsistentPush = useHistoryConsistentPush();\n\n    const { exclusivePayment } = usePaymentHelper();\n\n    const returnToPickRooms = async () => {\n        historyConsistentPush(getStepRoom().getStepUrl());\n    };\n\n    const prePaymentInfo = (\n        <>\n            <div className=\"u-marg-bottom--heavy\">\n                <div className=\"u-marg-bottom--light\">\n                    <Headline bold>{t(Translation.Step.Confirmation.GuestDetails)}</Headline>\n                </div>\n                <Text type={TextType.Small} color={Color.Success}>\n                    <strong>{t(Translation.Step.Confirmation.AlmostDone, { required: '*' })}</strong>\n                </Text>\n            </div>\n            <RoomContactDetails />\n            {bookingSource === 'inline' ? (\n                <Alert type={AlertType.Accent2} heavyPadding>\n                    <div className=\"u-flex u-w-100 flex-wrap flex-xl-nowrap\">\n                        <div>\n                            <Text color={Color.Accent} bold>\n                                {t(Translation.Step.Confirmation.WantMoreRooms)}\n                            </Text>\n                            <Text color={Color.Navy}>{t(Translation.Step.Confirmation.YouCanAddAndEditRooms)}</Text>\n                        </div>\n                        <div className=\"d-flex align-items-center u-marg-top@xl-\">\n                            <BEButton filled primary icon={IconType.Add} iconPosition=\"left\" onClick={returnToPickRooms}>\n                                {t(Translation.Step.Confirmation.AddMoreRooms)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </Alert>\n            ) : (\n                <></>\n            )}\n            {ShowIATANumberOnCheckoutFeature.isActive() && (\n                <>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <div className=\"u-marg-bottom\">\n                            <Headline bold>{t(Translation.Step.Confirmation.TravelAgent)}</Headline>\n                        </div>\n\n                        <div className=\"u-marg-bottom--light\">\n                            <Text type={TextType.Small}>\n                                <strong>{t(Translation.Step.Confirmation.Inputs.IATANumber)}</strong>\n                            </Text>\n                        </div>\n                        <div className=\"u-marg-bottom--light\">\n                            <Text type={TextType.Small}>{t(Translation.Step.Confirmation.Inputs.IATANumberGuide)}</Text>\n                        </div>\n                        <TextBox placeholder={t(Translation.Step.Confirmation.Inputs.IATANumber)} wide {...methods.register('IATANumber')} />\n                    </div>\n                    <LineBreak />\n                </>\n            )}\n            <StepConfirmationCommentsComponent />\n            <LineBreak />\n            {!exclusivePayment && (\n                <>\n                    <div className=\"u-marg-bottom--heavy\">\n                        <div className=\"u-marg-bottom\">\n                            <Headline bold>{t(Translation.Navigation.Menu.PaymentInformation)}</Headline>\n                        </div>\n\n                        <PaymentInformation />\n                        <div className=\"u-marg-top u-flex align-items-center\">\n                            <div className=\"u-flex align-items-center justify-content-start\">\n                                <Icon icon={IconType.Lock} color={Color.Success} />\n                                <div className=\"u-marg-left--light\">\n                                    <Text type={TextType.Small} color={Color.Success}>\n                                        <strong>{t(Translation.Step.Confirmation.Secured)}</strong>\n                                    </Text>\n                                </div>\n                            </div>\n                            <SSLSecureBadge />\n                        </div>\n                    </div>\n                    {ConfirmationImportantInformationFeature.isActive() && (\n                        <>\n                            <LineBreak />\n                            <StepConfirmationImportantInformation\n                                ref={confirmationImportantInformation}\n                                confirmationError={confirmationImportantInformationError}\n                                withCheckbox={!!ConfirmationImportantInformationFeature.getOptions()?.withCheckbox}\n                            />\n                        </>\n                    )}\n                    <LineBreak />\n                </>\n            )}\n            <StepConfirmationPoliciesSection />\n            <div className=\"u-pad-top--light u-marg-bottom\">\n                <StepConfirmationPolicyBlock />\n            </div>\n            {ConfirmationVerifyFeature.isActive() && (\n                <>\n                    <LineBreak />\n                    <div>\n                        <StepConfirmationAcknowledgement />\n                    </div>\n                </>\n            )}\n        </>\n    );\n\n    return (\n        <form>\n            {isBackFromPlanpay ? (\n                <LargeLoader />\n            ) : (\n                <>\n                    <AutoAutoHeight open={!exclusivePayment || !isInPaymentMode}>{prePaymentInfo}</AutoAutoHeight>\n                    {exclusivePayment && (\n                        <AutoAutoHeight open={isInPaymentMode}>\n                            <ScrollToTop />\n                            {exclusivePayment.renderPaymentInput?.()}\n                        </AutoAutoHeight>\n                    )}\n                </>\n            )}\n        </form>\n    );\n}\n"]}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ImportantInformationProps {
+    withCheckbox: boolean;
+    confirmationError: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<ImportantInformationProps & React.RefAttributes<unknown>>;
+export default _default;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
+const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
+const Alert_1 = __importStar(require("../../generic/Alert"));
+const Checkbox_1 = __importDefault(require("../../generic/Checkbox/Checkbox"));
+const Headline_1 = __importDefault(require("../../generic/Headline"));
+const Icon_1 = require("../../generic/Icon/Icon");
+const Text_1 = __importStar(require("../../generic/Text"));
+const Translation_1 = require("../../../translations/Translation");
+const Color_1 = require("../../../util/Color");
+exports.default = react_1.default.forwardRef(function StepConfirmationImportantInformation({ confirmationError, withCheckbox }, ref) {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return (react_1.default.createElement("div", { className: "u-marg-bottom step-confirmation-important-information" },
+        react_1.default.createElement("div", { className: "u-marg-bottom step-confirmation-important-information-headline" },
+            react_1.default.createElement(Headline_1.default, { bold: true }, t(Translation_1.Translation.Step.Confirmation.ImportantInformation))),
+        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Graphite, bold: true, className: "u-marg-bottom step-confirmation-important-information-notes" }, t(Translation_1.Translation.Step.Confirmation.ImportantInformationNotes)),
+        withCheckbox && (react_1.default.createElement("div", { className: "step-confirmation-important-information-checkbox" },
+            react_1.default.createElement(Checkbox_1.default, { ref: ref, label: react_1.default.createElement("div", null,
+                    t(Translation_1.Translation.Step.Confirmation.ImportantInformationIHaveUnderstood),
+                    " ") }))),
+        react_1.default.createElement(AutoAutoHeight_1.default, { open: confirmationError },
+            react_1.default.createElement("div", { className: "u-flex u-marg-top" },
+                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 }, t(Translation_1.Translation.Step.Confirmation.ImportantInformationError)))))));
+});
+//# sourceMappingURL=StepConfirmationImportantInformation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepConfirmationImportantInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationImportantInformation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,iFAAyD;AACzD,oEAA8D;AAC9D,sFAA8D;AAC9D,6EAAqD;AACrD,yDAA0D;AAC1D,kEAA2D;AAC3D,4DAAyD;AACzD,wCAAqC;AAOrC,kBAAe,eAAK,CAAC,UAAU,CAAC,SAAS,oCAAoC,CAAC,EAAE,iBAAiB,EAAE,YAAY,EAA6B,EAAE,GAAQ;IAClJ,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,CACH,uCAAK,SAAS,EAAC,uDAAuD;QAClE,uCAAK,SAAS,EAAC,gEAAgE;YAC3E,8BAAC,kBAAQ,IAAC,IAAI,UAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAY,CAC/E;QACN,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,QAAC,SAAS,EAAC,6DAA6D,IAC1H,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,yBAAyB,CAAC,CACxD;QACN,YAAY,IAAI,CACb,uCAAK,SAAS,EAAC,kDAAkD;YAC7D,8BAAC,kBAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE;oBAAM,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,mCAAmC,CAAC;wBAAQ,GAAI,CAC/G,CACT;QAED,8BAAC,wBAAc,IAAC,IAAI,EAAE,iBAAiB;YACnC,uCAAK,SAAS,EAAC,mBAAmB;gBAC9B,8BAAC,eAAK,IAAC,IAAI,EAAE,iBAAS,CAAC,MAAM,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK;oBAC/C,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,yBAAyB,CAAC,CAAQ,CAC3F,CACN,CACO,CACf,CACT,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport Checkbox from '@/components/generic/Checkbox/Checkbox';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\ninterface ImportantInformationProps {\n    withCheckbox: boolean;\n    confirmationError: boolean;\n}\n\nexport default React.forwardRef(function StepConfirmationImportantInformation({ confirmationError, withCheckbox }: ImportantInformationProps, ref: any) {\n    const { t } = useTranslation();\n\n    return (\n        <div className=\"u-marg-bottom step-confirmation-important-information\">\n            <div className=\"u-marg-bottom step-confirmation-important-information-headline\">\n                <Headline bold>{t(Translation.Step.Confirmation.ImportantInformation)}</Headline>\n            </div>\n            <Text type={TextType.Small} color={Color.Graphite} bold className=\"u-marg-bottom step-confirmation-important-information-notes\">\n                {t(Translation.Step.Confirmation.ImportantInformationNotes)}\n            </Text>\n            {withCheckbox && (\n                <div className=\"step-confirmation-important-information-checkbox\">\n                    <Checkbox ref={ref} label={<div>{t(Translation.Step.Confirmation.ImportantInformationIHaveUnderstood)} </div>} />\n                </div>\n            )}\n\n            <AutoAutoHeight open={confirmationError}>\n                <div className=\"u-flex u-marg-top\">\n                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                        <Text type={TextType.Small}>{t(Translation.Step.Confirmation.ImportantInformationError)}</Text>\n                    </Alert>\n                </div>\n            </AutoAutoHeight>\n        </div>\n    );\n});\n"]}

package/dist/src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsLabel.d.ts

@@ -0,0 +1,2 @@
+declare const TrueRewardsLabel: () => JSX.Element;
+export default TrueRewardsLabel;

package/dist/src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsLabel.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
+const Text_1 = __importStar(require("../../../generic/Text"));
+const contexts_1 = require("../../../../contexts");
+const Currency_1 = __importDefault(require("../../../../hooks/Currency"));
+const Translation_1 = require("../../../../translations/Translation");
+const Color_1 = require("../../../../util/Color");
+const TextAlignment_1 = require("../../../../util/TextAlignment");
+const TrueRewardsLabel_module_scss_1 = __importDefault(require("./TrueRewardsLabel.module.scss"));
+const TrueRewardsLabel = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getTotalPayNow } = (0, contexts_1.useBasket)();
+    const totalPayNow = getTotalPayNow();
+    const { symbol, prettyValue } = (0, Currency_1.default)({
+        children: totalPayNow,
+    });
+    return (react_1.default.createElement("div", { className: "u-flex u-flex-justify-between w-100 u-flex-align-center" },
+        react_1.default.createElement("div", { className: TrueRewardsLabel_module_scss_1.default.root },
+            react_1.default.createElement(Text_1.default, { align: TextAlignment_1.TextAlign.Left, type: Text_1.TextType.Small, color: Color_1.Color.Navy }, t(Translation_1.Translation.Step.Confirmation.GiftCard))),
+        react_1.default.createElement(Text_1.default, { bold: true, className: "u-flex", color: Color_1.Color.Navy, type: Text_1.TextType.Small },
+            symbol,
+            prettyValue)));
+};
+exports.default = TrueRewardsLabel;
+//# sourceMappingURL=TrueRewardsLabel.js.map

package/dist/src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueRewardsLabel.js","sourceRoot":"/","sources":["src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,kEAA2D;AAC3D,yCAAuC;AACvC,gEAA2C;AAC3C,4DAAyD;AACzD,wCAAqC;AACrC,wDAAiD;AAEjD,kGAAoD;AAEpD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAS,GAAE,CAAC;IACvC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAW,EAAC;QACxC,QAAQ,EAAE,WAAW;KACxB,CAAC,CAAC;IAEH,OAAO,CACH,uCAAK,SAAS,EAAC,yDAAyD;QACpE,uCAAK,SAAS,EAAE,sCAAM,CAAC,IAAI;YACvB,8BAAC,cAAI,IAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IAC/D,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CACvC,CACL;QACN,8BAAC,cAAI,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK;YAChE,MAAM;YACN,WAAW,CACT,CACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useBasket } from '@/contexts';\nimport useCurrency from '@/hooks/Currency';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './TrueRewardsLabel.module.scss';\n\nconst TrueRewardsLabel = () => {\n    const { t } = useTranslation();\n    const { getTotalPayNow } = useBasket();\n    const totalPayNow = getTotalPayNow();\n    const { symbol, prettyValue } = useCurrency({\n        children: totalPayNow,\n    });\n\n    return (\n        <div className=\"u-flex u-flex-justify-between w-100 u-flex-align-center\">\n            <div className={styles.root}>\n                <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                    {t(Translation.Step.Confirmation.GiftCard)}\n                </Text>\n            </div>\n            <Text bold className=\"u-flex\" color={Color.Navy} type={TextType.Small}>\n                {symbol}\n                {prettyValue}\n            </Text>\n        </div>\n    );\n};\n\nexport default TrueRewardsLabel;\n"]}

package/dist/src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsPaymentMethod.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const TrueRewardsPaymentMethod: FC;

package/dist/src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsPaymentMethod.js

@@ -0,0 +1,115 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrueRewardsPaymentMethod = void 0;
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
+const Icon_1 = require("../../../generic/Icon/Icon");
+const Text_1 = __importStar(require("../../../generic/Text"));
+const TextBox_1 = __importDefault(require("../../../generic/TextBox"));
+const Currency_1 = __importDefault(require("../../../../hooks/Currency"));
+const index_1 = require("../../../../index");
+const Translation_1 = require("../../../../translations/Translation");
+const Color_1 = require("../../../../util/Color");
+const TrueRewardsPaymentMethod_module_scss_1 = __importDefault(require("./TrueRewardsPaymentMethod.module.scss"));
+const TrueRewardsPaymentMethod = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { hotel } = (0, index_1.useCurrentHotel)();
+    const { getTotalPayNow } = (0, index_1.useBasket)();
+    const totalPayNow = getTotalPayNow();
+    const [cardReference, setCardReference] = (0, react_1.useState)('');
+    const [cardBalance, setCardBalance] = (0, react_1.useState)(null);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const trimmedReference = cardReference.trim();
+    const canSubmit = trimmedReference.length > 6;
+    const remaining = cardBalance !== null ? cardBalance - totalPayNow : 0;
+    const { symbol, prettyValue: remainingPrettyValue, isLoading: isRemainingLoading } = (0, Currency_1.default)({ children: remaining });
+    const { prettyValue: cardBalancePrettyValue, isLoading: isCardBalanceLoading } = (0, Currency_1.default)({ children: cardBalance });
+    const onSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        setErrorMessage('');
+        setCardBalance(null);
+        if (hotel === null || hotel === void 0 ? void 0 : hotel.hotelID) {
+            try {
+                setIsLoading(true);
+                const balance = yield index_1.API.TrueRewards.fetchBalance(trimmedReference, hotel.hotelID);
+                if (balance === null) {
+                    setErrorMessage(t(Translation_1.Translation.Step.Confirmation.TrueRewardsInvalid));
+                }
+                else {
+                    setCardBalance(balance);
+                }
+            }
+            catch (e) {
+                console.error(e);
+                setErrorMessage(t(Translation_1.Translation.Step.Confirmation.TrueRewardsFailed));
+            }
+            finally {
+                setIsLoading(false);
+            }
+        }
+    });
+    return (react_1.default.createElement("div", { className: TrueRewardsPaymentMethod_module_scss_1.default.container },
+        react_1.default.createElement("div", { className: TrueRewardsPaymentMethod_module_scss_1.default.inputRow },
+            react_1.default.createElement(TextBox_1.default, { value: cardReference, onChange: (val) => {
+                    setCardReference(val.target.value);
+                    setErrorMessage('');
+                }, placeholder: t(Translation_1.Translation.Step.Confirmation.EnterCode) }),
+            react_1.default.createElement(BEButton_1.default, { className: TrueRewardsPaymentMethod_module_scss_1.default.applyCodeButton, isLoading: isLoading, size: "small", onClick: onSubmit, disabled: !canSubmit, icon: cardBalance !== null ? Icon_1.IconType.Check : Icon_1.IconType.ArrowRight, iconPosition: "right", rounded: true }, cardBalance !== null ? t(Translation_1.Translation.Step.Confirmation.CodeApplied) : t(Translation_1.Translation.Step.Confirmation.ApplyCode))),
+        cardBalance !== null && !isCardBalanceLoading && !isRemainingLoading ? (react_1.default.createElement("div", { className: TrueRewardsPaymentMethod_module_scss_1.default.infoBlock },
+            react_1.default.createElement("div", { className: TrueRewardsPaymentMethod_module_scss_1.default.leftContent },
+                react_1.default.createElement(Text_1.default, { bold: true, type: Text_1.TextType.Small }, cardBalance >= totalPayNow ? t(Translation_1.Translation.Step.Confirmation.TrueRewardsCoversFullBooking) : t(Translation_1.Translation.Step.Confirmation.TrueRewardsInsufficient)),
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, cardBalance >= totalPayNow
+                    ? t(Translation_1.Translation.Step.Confirmation.TrueRewardsCoversFullInstructions)
+                    : t(Translation_1.Translation.Step.Confirmation.TrueRewardsInsufficientInstructions))),
+            react_1.default.createElement("div", { className: TrueRewardsPaymentMethod_module_scss_1.default.rightContent },
+                react_1.default.createElement("div", { className: TrueRewardsPaymentMethod_module_scss_1.default.card },
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, t(Translation_1.Translation.Step.Confirmation.YourBalance)),
+                    react_1.default.createElement(Text_1.default, { bold: true, color: Color_1.Color.Navy },
+                        symbol,
+                        cardBalancePrettyValue)),
+                react_1.default.createElement("div", { className: TrueRewardsPaymentMethod_module_scss_1.default.card },
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, t(Translation_1.Translation.Step.Confirmation.Remaining)),
+                    react_1.default.createElement(Text_1.default, { bold: true, color: remaining < 0 ? Color_1.Color.Danger : Color_1.Color.Navy },
+                        symbol,
+                        remainingPrettyValue))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            errorMessage && (react_1.default.createElement(Text_1.default, { color: Color_1.Color.Danger, type: Text_1.TextType.Small, style: { marginTop: '8px' } }, errorMessage)),
+            react_1.default.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small, style: { marginTop: '8px' } }, t(Translation_1.Translation.Step.Confirmation.TrueRewardsInputHelperText))))));
+};
+exports.TrueRewardsPaymentMethod = TrueRewardsPaymentMethod;
+//# sourceMappingURL=TrueRewardsPaymentMethod.js.map

package/dist/src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsPaymentMethod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueRewardsPaymentMethod.js","sourceRoot":"/","sources":["src/components/steps/confirmation/TrueRewardsPaymentOption/TrueRewardsPaymentMethod.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport BEButton from '@/components/generic/BEButton';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport TextBox from '@/components/generic/TextBox';\nimport useCurrency from '@/hooks/Currency';\nimport { API, useBasket, useCurrentHotel } from '@/index';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nimport styles from './TrueRewardsPaymentMethod.module.scss';\n\nexport const TrueRewardsPaymentMethod: FC = () => {\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n    const { getTotalPayNow } = useBasket();\n    const totalPayNow = getTotalPayNow();\n\n    const [cardReference, setCardReference] = useState('');\n    const [cardBalance, setCardBalance] = useState<number | null>(null);\n    const [errorMessage, setErrorMessage] = useState('');\n    const [isLoading, setIsLoading] = useState(false);\n\n    const trimmedReference = cardReference.trim();\n    const canSubmit = trimmedReference.length > 6;\n    const remaining = cardBalance !== null ? cardBalance - totalPayNow : 0;\n\n    const { symbol, prettyValue: remainingPrettyValue, isLoading: isRemainingLoading } = useCurrency({ children: remaining });\n    const { prettyValue: cardBalancePrettyValue, isLoading: isCardBalanceLoading } = useCurrency({ children: cardBalance });\n\n    const onSubmit = async () => {\n        setErrorMessage('');\n        setCardBalance(null);\n\n        if (hotel?.hotelID) {\n            try {\n                setIsLoading(true);\n                const balance = await API.TrueRewards.fetchBalance(trimmedReference, hotel.hotelID);\n\n                if (balance === null) {\n                    setErrorMessage(t(Translation.Step.Confirmation.TrueRewardsInvalid));\n                } else {\n                    setCardBalance(balance);\n                }\n            } catch (e) {\n                console.error(e);\n                setErrorMessage(t(Translation.Step.Confirmation.TrueRewardsFailed));\n            } finally {\n                setIsLoading(false);\n            }\n        }\n    };\n\n    return (\n        <div className={styles.container}>\n            <div className={styles.inputRow}>\n                <TextBox\n                    value={cardReference}\n                    onChange={(val) => {\n                        setCardReference(val.target.value);\n                        setErrorMessage('');\n                    }}\n                    placeholder={t(Translation.Step.Confirmation.EnterCode)}\n                />\n                <BEButton\n                    className={styles.applyCodeButton}\n                    isLoading={isLoading}\n                    size=\"small\"\n                    onClick={onSubmit}\n                    disabled={!canSubmit}\n                    icon={cardBalance !== null ? IconType.Check : IconType.ArrowRight}\n                    iconPosition=\"right\"\n                    rounded\n                >\n                    {cardBalance !== null ? t(Translation.Step.Confirmation.CodeApplied) : t(Translation.Step.Confirmation.ApplyCode)}\n                </BEButton>\n            </div>\n            {cardBalance !== null && !isCardBalanceLoading && !isRemainingLoading ? (\n                <div className={styles.infoBlock}>\n                    <div className={styles.leftContent}>\n                        <Text bold type={TextType.Small}>\n                            {cardBalance >= totalPayNow ? t(Translation.Step.Confirmation.TrueRewardsCoversFullBooking) : t(Translation.Step.Confirmation.TrueRewardsInsufficient)}\n                        </Text>\n                        <Text type={TextType.Small}>\n                            {cardBalance >= totalPayNow\n                                ? t(Translation.Step.Confirmation.TrueRewardsCoversFullInstructions)\n                                : t(Translation.Step.Confirmation.TrueRewardsInsufficientInstructions)}\n                        </Text>\n                    </div>\n                    <div className={styles.rightContent}>\n                        <div className={styles.card}>\n                            <Text type={TextType.Small}>{t(Translation.Step.Confirmation.YourBalance)}</Text>\n                            <Text bold color={Color.Navy}>\n                                {symbol}\n                                {cardBalancePrettyValue}\n                            </Text>\n                        </div>\n                        <div className={styles.card}>\n                            <Text type={TextType.Small}>{t(Translation.Step.Confirmation.Remaining)}</Text>\n                            <Text bold color={remaining < 0 ? Color.Danger : Color.Navy}>\n                                {symbol}\n                                {remainingPrettyValue}\n                            </Text>\n                        </div>\n                    </div>\n                </div>\n            ) : (\n                <>\n                    {errorMessage && (\n                        <Text color={Color.Danger} type={TextType.Small} style={{ marginTop: '8px' }}>\n                            {errorMessage}\n                        </Text>\n                    )}\n                    <Text color={Color.DarkGrey} type={TextType.Small} style={{ marginTop: '8px' }}>\n                        {t(Translation.Step.Confirmation.TrueRewardsInputHelperText)}\n                    </Text>\n                </>\n            )}\n        </div>\n    );\n};\n"]}

package/dist/src/components/steps/room/AvailableUpgradesModal.js

@@ -132,11 +132,6 @@ const AvailableUpgradesModal = () => {
                 DataLayer_1.default.instance.sendUpsellConfirmed({ from: row.getStartDate(), to: row.getEndDate() }, row.getRate(), rate);
                 row.setRate(rate, RoomUpsellFeature_1.default.isActive());
                 basketContext.updateBasketRow(row);
-                // TODO: RE-2211 - Look to refactor globally how we're loading the quote details to account for all other changes.
-                // This is a workaround to force the quote details to be reloaded
-                if (hotel === null || hotel === void 0 ? void 0 : hotel.requireDeposit) {
-                    basketContext.quoteOrPencilReservation(() => true);
-                }
                 closeModal();
             }
             else {

package/dist/src/components/steps/room/AvailableUpgradesModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvailableUpgradesModal.js","sourceRoot":"/","sources":["src/components/steps/room/AvailableUpgradesModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { AddToCartEvent } from '@frontend/events';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport React, { FC, useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport API from '@/api/BookingAPI';\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport SimpleModal from '@/components/generic/modal/SimpleModal';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport LargeRoomCard from '@/components/steps/room/LargeRoomCard';\nimport { useSignedInMember } from '@/hooks/useSignedInMember';\nimport BasketRow from '@/models/BasketRow';\nimport { RoomRate } from '@/models/Room/RoomRate';\nimport RoomUpsellFeature from '@/providers/feature/RoomUpsellFeature';\nimport { Color } from '@/util/Color';\nimport DataLayer from '@/util/DataLayer';\n\nconst AvailableUpgradesModal: FC = () => {\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n    const { memberNumber } = useSignedInMember();\n    const [isOpen, setIsOpen] = useState(false);\n    const [row, setRow] = useState<BasketRow | null>(null);\n\n    const basketContext = useContext(BasketContext);\n\n    const { on } = useEvent();\n\n    const room = row?.getRoom();\n    const selectedRate = row?.getRate();\n\n    const [rates, setRates] = useState<RoomRate[]>();\n\n    useEffect(() => {\n        let cancelled = false;\n\n        on(AddToCartEvent, async (event: AddToCartEvent): Promise<void | boolean> => {\n            if (cancelled) return;\n\n            setRow(event.basketRow);\n            return true;\n        });\n\n        return () => {\n            cancelled = true;\n        };\n    }, []);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        if (row) {\n            API.Availability.fetchAvailabilityData(row, hotel?.hotelID as string, memberNumber, true).then((availableRooms) => {\n                if (cancelled) return;\n\n                const unfilteredRates: RoomRate[] = [];\n                availableRooms\n                    ?.map((availableRoom) => {\n                        return availableRoom.getRates();\n                    })\n                    .forEach((fewRates) => {\n                        fewRates.forEach((oneRate) => {\n                            unfilteredRates.push(oneRate);\n                        });\n                    });\n                const filteredRates = unfilteredRates\n                    .filter((rate) => {\n                        return rate.getAveragePrice() > (selectedRate?.getAveragePrice() as number) && rate.name === selectedRate?.name;\n                    })\n                    .sort((a: RoomRate, b: RoomRate) => {\n                        if (a.getAveragePrice() === selectedRate?.getAveragePrice()) return 1;\n                        if (b.getAveragePrice() === selectedRate?.getAveragePrice()) return -1;\n                        return a.getAveragePrice() - b.getAveragePrice();\n                    })\n                    .slice(0, 3);\n\n                setRates(filteredRates);\n                if (filteredRates.length === 0 && selectedRate) {\n                    // Proceed as if user clicked the nav.\n                    confirmRateOnClick();\n                } else {\n                    setIsOpen(true);\n                }\n            });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, [row, memberNumber]);\n\n    const closeModal = () => {\n        setIsOpen(false);\n        setRow(null);\n    };\n\n    const cancelUpsell = () => {\n        if (row) {\n            DataLayer.instance.sendUpsellCancelled({ from: row.getStartDate(), to: row.getEndDate() }, row.getRate() as RoomRate);\n        }\n\n        closeModal();\n    };\n\n    const confirmRateOnClick = (rate?: RoomRate) => {\n        if (row) {\n            if (rate) {\n                DataLayer.instance.sendUpsellConfirmed({ from: row.getStartDate(), to: row.getEndDate() }, row.getRate() as RoomRate, rate);\n\n                row.setRate(rate, RoomUpsellFeature.isActive());\n                basketContext.updateBasketRow(row);\n\n                // TODO: RE-2211 - Look to refactor globally how we're loading the quote details to account for all other changes.\n                // This is a workaround to force the quote details to be reloaded\n                if (hotel?.requireDeposit) {\n                    basketContext.quoteOrPencilReservation(() => true);\n                }\n                closeModal();\n            } else {\n                cancelUpsell();\n            }\n        }\n    };\n\n    return RoomUpsellFeature.isActive() ? (\n        <SimpleModal open={isOpen} onClose={cancelUpsell} title={t(Translation.Step.Room.AvailableUpgrades)}>\n            <div className=\"upgrades-room-modal\">\n                <div className=\"current-room-block container\">\n                    <div className=\"u-flex u-flex-flex-start row\">\n                        <div className=\"image-wrapper col-md-3 col-12\">\n                            <ImageGallerySlider images={room?.getImages() || []} />\n                        </div>\n                        <div className=\"u-flex info-block col-md-7 col-sm-9\">\n                            <div>\n                                <Text color={Color.DarkGrey} bold>\n                                    {t(Translation.Step.Room.CurrentSelectedRoom)}\n                                </Text>\n                                <Headline bold>{room?.name}</Headline>\n                                <Text type={TextType.Small} color={Color.DarkGrey}>\n                                    {selectedRate?.name}\n                                </Text>\n                            </div>\n                            <div>\n                                <div className=\"room-details--content-price flex-row\">\n                                    <Headline bold>\n                                        <Currency hideDecimals>{selectedRate?.getAveragePrice()}</Currency>\n                                    </Headline>\n                                    <Text color={Color.DarkGrey} inline>\n                                        /{t(Translation.Misc.Night)}\n                                    </Text>\n                                </div>\n                                <div className=\"u-marg-bottom\">\n                                    <Text type={TextType.Small} color={Color.Grey} className=\"u-nowrap\">\n                                        <span dangerouslySetInnerHTML={{ __html: t(Translation.Step.Room.RoomInfo.IncludesTaxes) }}></span>\n                                    </Text>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"u-flex u-flex-align-center col-md-2 col-sm-3\">\n                            <BEButton wide filled primary onClick={() => confirmRateOnClick()}>\n                                {t(Translation.Step.Room.Confirm)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"container\" style={{ backgroundColor: Color.Snow }}>\n                    <div className=\"u-pad-top u-marg-bottom\">\n                        <div className=\"u-marg-bottom--heavy\">\n                            <Headline bold>{t(Translation.Step.Room.CheckOutOtherOptions)}</Headline>\n                        </div>\n                        <div className=\"row no-gutters\">\n                            {rates?.map((rate) => {\n                                const onSelectRate = () => {\n                                    confirmRateOnClick(rate);\n                                };\n\n                                return (\n                                    <div className=\"col-md-6 col-xl-4 u-marg-bottom u-pad-left--light u-pad-right--light\" key={rate.getRoom().name}>\n                                        <LargeRoomCard selectedRate={selectedRate as RoomRate} rate={rate} onSelectRate={onSelectRate} />\n                                    </div>\n                                );\n                            })}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </SimpleModal>\n    ) : null;\n};\n\nexport default AvailableUpgradesModal;\n"]}
+{"version":3,"file":"AvailableUpgradesModal.js","sourceRoot":"/","sources":["src/components/steps/room/AvailableUpgradesModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { AddToCartEvent } from '@frontend/events';\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport React, { FC, useContext, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport API from '@/api/BookingAPI';\nimport BEButton from '@/components/generic/BEButton';\nimport Currency from '@/components/generic/Currency';\nimport Headline from '@/components/generic/Headline';\nimport SimpleModal from '@/components/generic/modal/SimpleModal';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport LargeRoomCard from '@/components/steps/room/LargeRoomCard';\nimport { useSignedInMember } from '@/hooks/useSignedInMember';\nimport BasketRow from '@/models/BasketRow';\nimport { RoomRate } from '@/models/Room/RoomRate';\nimport RoomUpsellFeature from '@/providers/feature/RoomUpsellFeature';\nimport { Color } from '@/util/Color';\nimport DataLayer from '@/util/DataLayer';\n\nconst AvailableUpgradesModal: FC = () => {\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n    const { memberNumber } = useSignedInMember();\n    const [isOpen, setIsOpen] = useState(false);\n    const [row, setRow] = useState<BasketRow | null>(null);\n\n    const basketContext = useContext(BasketContext);\n\n    const { on } = useEvent();\n\n    const room = row?.getRoom();\n    const selectedRate = row?.getRate();\n\n    const [rates, setRates] = useState<RoomRate[]>();\n\n    useEffect(() => {\n        let cancelled = false;\n\n        on(AddToCartEvent, async (event: AddToCartEvent): Promise<void | boolean> => {\n            if (cancelled) return;\n\n            setRow(event.basketRow);\n            return true;\n        });\n\n        return () => {\n            cancelled = true;\n        };\n    }, []);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        if (row) {\n            API.Availability.fetchAvailabilityData(row, hotel?.hotelID as string, memberNumber, true).then((availableRooms) => {\n                if (cancelled) return;\n\n                const unfilteredRates: RoomRate[] = [];\n                availableRooms\n                    ?.map((availableRoom) => {\n                        return availableRoom.getRates();\n                    })\n                    .forEach((fewRates) => {\n                        fewRates.forEach((oneRate) => {\n                            unfilteredRates.push(oneRate);\n                        });\n                    });\n                const filteredRates = unfilteredRates\n                    .filter((rate) => {\n                        return rate.getAveragePrice() > (selectedRate?.getAveragePrice() as number) && rate.name === selectedRate?.name;\n                    })\n                    .sort((a: RoomRate, b: RoomRate) => {\n                        if (a.getAveragePrice() === selectedRate?.getAveragePrice()) return 1;\n                        if (b.getAveragePrice() === selectedRate?.getAveragePrice()) return -1;\n                        return a.getAveragePrice() - b.getAveragePrice();\n                    })\n                    .slice(0, 3);\n\n                setRates(filteredRates);\n                if (filteredRates.length === 0 && selectedRate) {\n                    // Proceed as if user clicked the nav.\n                    confirmRateOnClick();\n                } else {\n                    setIsOpen(true);\n                }\n            });\n        }\n\n        return () => {\n            cancelled = true;\n        };\n    }, [row, memberNumber]);\n\n    const closeModal = () => {\n        setIsOpen(false);\n        setRow(null);\n    };\n\n    const cancelUpsell = () => {\n        if (row) {\n            DataLayer.instance.sendUpsellCancelled({ from: row.getStartDate(), to: row.getEndDate() }, row.getRate() as RoomRate);\n        }\n\n        closeModal();\n    };\n\n    const confirmRateOnClick = (rate?: RoomRate) => {\n        if (row) {\n            if (rate) {\n                DataLayer.instance.sendUpsellConfirmed({ from: row.getStartDate(), to: row.getEndDate() }, row.getRate() as RoomRate, rate);\n\n                row.setRate(rate, RoomUpsellFeature.isActive());\n                basketContext.updateBasketRow(row);\n                closeModal();\n            } else {\n                cancelUpsell();\n            }\n        }\n    };\n\n    return RoomUpsellFeature.isActive() ? (\n        <SimpleModal open={isOpen} onClose={cancelUpsell} title={t(Translation.Step.Room.AvailableUpgrades)}>\n            <div className=\"upgrades-room-modal\">\n                <div className=\"current-room-block container\">\n                    <div className=\"u-flex u-flex-flex-start row\">\n                        <div className=\"image-wrapper col-md-3 col-12\">\n                            <ImageGallerySlider images={room?.getImages() || []} />\n                        </div>\n                        <div className=\"u-flex info-block col-md-7 col-sm-9\">\n                            <div>\n                                <Text color={Color.DarkGrey} bold>\n                                    {t(Translation.Step.Room.CurrentSelectedRoom)}\n                                </Text>\n                                <Headline bold>{room?.name}</Headline>\n                                <Text type={TextType.Small} color={Color.DarkGrey}>\n                                    {selectedRate?.name}\n                                </Text>\n                            </div>\n                            <div>\n                                <div className=\"room-details--content-price flex-row\">\n                                    <Headline bold>\n                                        <Currency hideDecimals>{selectedRate?.getAveragePrice()}</Currency>\n                                    </Headline>\n                                    <Text color={Color.DarkGrey} inline>\n                                        /{t(Translation.Misc.Night)}\n                                    </Text>\n                                </div>\n                                <div className=\"u-marg-bottom\">\n                                    <Text type={TextType.Small} color={Color.Grey} className=\"u-nowrap\">\n                                        <span dangerouslySetInnerHTML={{ __html: t(Translation.Step.Room.RoomInfo.IncludesTaxes) }}></span>\n                                    </Text>\n                                </div>\n                            </div>\n                        </div>\n                        <div className=\"u-flex u-flex-align-center col-md-2 col-sm-3\">\n                            <BEButton wide filled primary onClick={() => confirmRateOnClick()}>\n                                {t(Translation.Step.Room.Confirm)}\n                            </BEButton>\n                        </div>\n                    </div>\n                </div>\n                <div className=\"container\" style={{ backgroundColor: Color.Snow }}>\n                    <div className=\"u-pad-top u-marg-bottom\">\n                        <div className=\"u-marg-bottom--heavy\">\n                            <Headline bold>{t(Translation.Step.Room.CheckOutOtherOptions)}</Headline>\n                        </div>\n                        <div className=\"row no-gutters\">\n                            {rates?.map((rate) => {\n                                const onSelectRate = () => {\n                                    confirmRateOnClick(rate);\n                                };\n\n                                return (\n                                    <div className=\"col-md-6 col-xl-4 u-marg-bottom u-pad-left--light u-pad-right--light\" key={rate.getRoom().name}>\n                                        <LargeRoomCard selectedRate={selectedRate as RoomRate} rate={rate} onSelectRate={onSelectRate} />\n                                    </div>\n                                );\n                            })}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </SimpleModal>\n    ) : null;\n};\n\nexport default AvailableUpgradesModal;\n"]}

package/dist/src/components/steps/room/roomDetails/roomRates/PriceBreakdownBlock.js

@@ -106,7 +106,7 @@ const renderNightPrice = (rate, nightRate) => {
             react_1.default.createElement(Currency_1.default, null, nightRate.cost))));
 };
 function PriceBreakdownBlock(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const { t } = (0, react_i18next_1.useTranslation)();
     const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
     const basketContext = react_1.default.useContext(contexts_1.BasketContext);
@@ -158,7 +158,7 @@ function PriceBreakdownBlock(props) {
                 isLastDay ? (react_1.default.createElement(Text_1.default, { color: Color_1.Color.Success }, t(Translation_1.Translation.Misc.CheckOut))) : (react_1.default.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, className: "u-pos-rel" }, renderNightPrice(rate, nightRate)))));
         }),
         !!totalFees && !(itemisedFees === null || itemisedFees === void 0 ? void 0 : itemisedFees.length) && (react_1.default.createElement("div", { className: "u-flex u-marg-bottom" },
-            react_1.default.createElement(Text_1.default, null, t(Translation_1.Translation.Step.Room.Summary.Fees)),
+            react_1.default.createElement(Text_1.default, null, t(Translation_1.Translation.Step.Room.Summary.Fees, { context: (_c = ccx.selectedHotel) === null || _c === void 0 ? void 0 : _c.languageContext })),
             react_1.default.createElement(Text_1.default, { color: Color_1.Color.DarkGrey },
                 react_1.default.createElement(Currency_1.default, null, totalFees)))),
         !!(itemisedFees === null || itemisedFees === void 0 ? void 0 : itemisedFees.length) && (react_1.default.createElement(react_1.default.Fragment, null,