@roomstay/frontend 2.3.13 → 2.3.14

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

@@ -1,11 +1,2 @@
-interface CurrencyProps {
-    removeCurrencyAfterChar?: number;
-    shortenThousandsAfter?: number;
-    children: any;
-    hideDecimals?: boolean;
-    disableLocalization?: boolean;
-    disableLoading?: boolean;
-    originalCurrencyCode?: string;
-}
-export default function Currency(props: CurrencyProps): JSX.Element;
-export {};
+import { UseCurrencyProps } from '../../hooks/Currency';
+export default function Currency(props: UseCurrencyProps): JSX.Element;

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

@@ -22,72 +22,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 contexts_1 = require("../../contexts/index.js");
-const hooks_1 = require("../../hooks/index.js");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Icon_1 = __importStar(require("./Icon/Icon"));
+const Currency_1 = __importDefault(require("../../hooks/Currency"));
 const Color_1 = require("../../util/Color");
-const currencyHelper = __importStar(require("../../util/CurrencyHelper"));
 function Currency(props) {
-    var _a;
-    const { currentCurrency } = (0, react_1.useContext)(contexts_1.CompanyContext);
-    const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const [value, setValue] = (0, react_1.useState)(0);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const toLocalString = (original, toFixed) => {
-        if (props.disableLocalization) {
-            return original;
-        }
-        if (original) {
-            return original.toLocaleString(undefined, { minimumFractionDigits: toFixed ? 2 : 0 });
-        }
-        return original;
-    };
-    (0, react_1.useEffect)(() => {
-        let isCancelled = false;
-        setIsLoading(true);
-        setTimeout(() => {
-            var _a;
-            if (!isCancelled) {
-                setIsLoading(false);
-                if (isNaN(props.children)) {
-                    setValue(props.children);
-                }
-                else {
-                    const totalValue = currencyHelper.convertPrice(props.children, !props.hideDecimals, currentCurrency, (_a = props.originalCurrencyCode) !== null && _a !== void 0 ? _a : hotel === null || hotel === void 0 ? void 0 : hotel.defaultCurrency);
-                    if (!isCancelled) {
-                        setValue(totalValue);
-                    }
-                }
-            }
-        }, props.disableLoading ? 0 : 200);
-        return () => {
-            setIsLoading(false);
-            isCancelled = true;
-        };
-    }, [props.children, currentCurrency, props.originalCurrencyCode, currencyHelper.getRatesForCurrencyCode((_a = props.originalCurrencyCode) !== null && _a !== void 0 ? _a : hotel === null || hotel === void 0 ? void 0 : hotel.defaultCurrency)]);
-    return (0, react_1.useMemo)(() => {
-        const stringVal = props.disableLocalization ? value.toString() : value === null || value === void 0 ? void 0 : value.toLocaleString();
-        let symbol = currencyHelper.getCurrencySymbol(currentCurrency);
-        if (props.removeCurrencyAfterChar) {
-            const priceLength = String(value).length;
-            if (priceLength + symbol.length > props.removeCurrencyAfterChar) {
-                symbol = currencyHelper.getCurrencyShortSymbol(currentCurrency);
-                if (priceLength + symbol.length > props.removeCurrencyAfterChar) {
-                    symbol = '';
-                }
-            }
-        }
-        let prettyValue = toLocalString(value, !(props.hideDecimals || typeof value !== 'number'));
-        if (props.shortenThousandsAfter && props.shortenThousandsAfter <= String(value).length && props.hideDecimals) {
-            prettyValue = stringVal.substring(0, stringVal.length - 3) + '…';
-        }
-        return isLoading && !props.disableLoading ? (react_1.default.createElement("span", { className: "u-inline-flex a-spin" },
-            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Spinner, size: "1em", color: Color_1.Color.Accent }))) : (react_1.default.createElement("span", { className: "u-ellip-overflow u-nowrap" },
-            symbol && react_1.default.createElement("span", null, symbol),
-            prettyValue));
-    }, [value, isLoading]);
+    const { symbol, isLoading, prettyValue } = (0, Currency_1.default)(props);
+    return isLoading && !props.disableLoading ? (react_1.default.createElement("span", { className: "u-inline-flex a-spin" },
+        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Spinner, size: "1em", color: Color_1.Color.Accent }))) : (react_1.default.createElement("span", { className: "u-ellip-overflow u-nowrap" },
+        symbol && react_1.default.createElement("span", null, symbol),
+        prettyValue));
 }
 exports.default = Currency;
 //# sourceMappingURL=Currency.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","sourceRoot":"/","sources":["src/components/generic/Currency.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAoD;AACpD,2CAAkD;AAClD,+CAAwE;AAExE,uEAAgE;AAChE,wCAAqC;AACrC,sEAAwD;AAgBxD,SAAwB,QAAQ,CAAC,KAAoB;;IACjD,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAC;IACvD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAE,OAAiB,EAAE,EAAE;QAC1D,IAAI,KAAK,CAAC,mBAAmB,EAAE;YAC3B,OAAO,QAAQ,CAAC;SACnB;QAED,IAAI,QAAQ,EAAE;YACV,OAAO,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,qBAAqB,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACzF;QAED,OAAO,QAAQ,CAAC;IACpB,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,WAAW,GAAG,KAAK,CAAC;QAExB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,UAAU,CACN,GAAG,EAAE;;YACD,IAAI,CAAC,WAAW,EAAE;gBACd,YAAY,CAAC,KAAK,CAAC,CAAC;gBAEpB,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;oBACvB,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;iBAC5B;qBAAM;oBACH,MAAM,UAAU,GAAG,cAAc,CAAC,YAAY,CAC1C,KAAK,CAAC,QAAQ,EACd,CAAC,KAAK,CAAC,YAAY,EACnB,eAAe,EACf,MAAA,KAAK,CAAC,oBAAoB,mCAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAA0B,CACnE,CAAC;oBAEF,IAAI,CAAC,WAAW,EAAE;wBACd,QAAQ,CAAC,UAAU,CAAC,CAAC;qBACxB;iBACJ;aACJ;QACL,CAAC,EACD,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CACjC,CAAC;QAEF,OAAO,GAAG,EAAE;YACR,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,WAAW,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,CAAC,oBAAoB,EAAE,cAAc,CAAC,uBAAuB,CAAC,MAAA,KAAK,CAAC,oBAAoB,mCAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAA0B,CAAC,CAAC,CAAC,CAAC;IAE5K,OAAO,IAAA,eAAO,EAAC,GAAG,EAAE;QAChB,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;QAEzF,IAAI,MAAM,GAAG,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;QAC/D,IAAI,KAAK,CAAC,uBAAuB,EAAE;YAC/B,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;YACzC,IAAI,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,uBAAuB,EAAE;gBAC7D,MAAM,GAAG,cAAc,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;gBAChE,IAAI,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,uBAAuB,EAAE;oBAC7D,MAAM,GAAG,EAAE,CAAC;iBACf;aACJ;SACJ;QAED,IAAI,WAAW,GAAG,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;QAE3F,IAAI,KAAK,CAAC,qBAAqB,IAAI,KAAK,CAAC,qBAAqB,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,YAAY,EAAE;YAC1G,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;SACpE;QAED,OAAO,SAAS,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CACxC,wCAAM,SAAS,EAAC,sBAAsB;YAClC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,aAAK,CAAC,MAAM,GAAI,CAC7D,CACV,CAAC,CAAC,CAAC,CACA,wCAAM,SAAS,EAAC,2BAA2B;YACtC,MAAM,IAAI,4CAAO,MAAM,CAAQ;YAC/B,WAAW,CACT,CACV,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;AAC3B,CAAC;AApFD,2BAoFC","sourcesContent":["import { CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport * as currencyHelper from '@/util/CurrencyHelper';\n\ninterface CurrencyProps {\n    removeCurrencyAfterChar?: number;\n    shortenThousandsAfter?: number;\n\n    children: any;\n\n    hideDecimals?: boolean;\n\n    disableLocalization?: boolean;\n    disableLoading?: boolean;\n\n    originalCurrencyCode?: string;\n}\n\nexport default function Currency(props: CurrencyProps) {\n    const { currentCurrency } = useContext(CompanyContext);\n    const { hotel } = useCurrentHotel();\n\n    const [value, setValue] = useState(0);\n    const [isLoading, setIsLoading] = useState(false);\n\n    const toLocalString = (original: number, toFixed?: boolean) => {\n        if (props.disableLocalization) {\n            return original;\n        }\n\n        if (original) {\n            return original.toLocaleString(undefined, { minimumFractionDigits: toFixed ? 2 : 0 });\n        }\n\n        return original;\n    };\n\n    useEffect(() => {\n        let isCancelled = false;\n\n        setIsLoading(true);\n        setTimeout(\n            () => {\n                if (!isCancelled) {\n                    setIsLoading(false);\n\n                    if (isNaN(props.children)) {\n                        setValue(props.children);\n                    } else {\n                        const totalValue = currencyHelper.convertPrice(\n                            props.children,\n                            !props.hideDecimals,\n                            currentCurrency,\n                            props.originalCurrencyCode ?? (hotel?.defaultCurrency as string)\n                        );\n\n                        if (!isCancelled) {\n                            setValue(totalValue);\n                        }\n                    }\n                }\n            },\n            props.disableLoading ? 0 : 200\n        );\n\n        return () => {\n            setIsLoading(false);\n            isCancelled = true;\n        };\n    }, [props.children, currentCurrency, props.originalCurrencyCode, currencyHelper.getRatesForCurrencyCode(props.originalCurrencyCode ?? (hotel?.defaultCurrency as string))]);\n\n    return useMemo(() => {\n        const stringVal = props.disableLocalization ? value.toString() : value?.toLocaleString();\n\n        let symbol = currencyHelper.getCurrencySymbol(currentCurrency);\n        if (props.removeCurrencyAfterChar) {\n            const priceLength = String(value).length;\n            if (priceLength + symbol.length > props.removeCurrencyAfterChar) {\n                symbol = currencyHelper.getCurrencyShortSymbol(currentCurrency);\n                if (priceLength + symbol.length > props.removeCurrencyAfterChar) {\n                    symbol = '';\n                }\n            }\n        }\n\n        let prettyValue = toLocalString(value, !(props.hideDecimals || typeof value !== 'number'));\n\n        if (props.shortenThousandsAfter && props.shortenThousandsAfter <= String(value).length && props.hideDecimals) {\n            prettyValue = stringVal.substring(0, stringVal.length - 3) + '…';\n        }\n\n        return isLoading && !props.disableLoading ? (\n            <span className=\"u-inline-flex a-spin\">\n                <Icon icon={IconType.Spinner} size=\"1em\" color={Color.Accent} />\n            </span>\n        ) : (\n            <span className=\"u-ellip-overflow u-nowrap\">\n                {symbol && <span>{symbol}</span>}\n                {prettyValue}\n            </span>\n        );\n    }, [value, isLoading]);\n}\n"]}
+{"version":3,"file":"Currency.js","sourceRoot":"/","sources":["src/components/generic/Currency.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,uEAAgE;AAChE,gEAAiE;AACjE,wCAAqC;AAErC,SAAwB,QAAQ,CAAC,KAAuB;IACpD,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAW,EAAC,KAAK,CAAC,CAAC;IAC9D,OAAO,SAAS,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CACxC,wCAAM,SAAS,EAAC,sBAAsB;QAClC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,aAAK,CAAC,MAAM,GAAI,CAC7D,CACV,CAAC,CAAC,CAAC,CACA,wCAAM,SAAS,EAAC,2BAA2B;QACtC,MAAM,IAAI,4CAAO,MAAM,CAAQ;QAC/B,WAAW,CACT,CACV,CAAC;AACN,CAAC;AAZD,2BAYC","sourcesContent":["import React from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport useCurrency, { UseCurrencyProps } from '@/hooks/Currency';\nimport { Color } from '@/util/Color';\n\nexport default function Currency(props: UseCurrencyProps) {\n    const { symbol, isLoading, prettyValue } = useCurrency(props);\n    return isLoading && !props.disableLoading ? (\n        <span className=\"u-inline-flex a-spin\">\n            <Icon icon={IconType.Spinner} size=\"1em\" color={Color.Accent} />\n        </span>\n    ) : (\n        <span className=\"u-ellip-overflow u-nowrap\">\n            {symbol && <span>{symbol}</span>}\n            {prettyValue}\n        </span>\n    );\n}\n"]}

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

@@ -33,6 +33,7 @@ const Pill_1 = __importStar(require("../Pill"));
 const Text_1 = __importStar(require("../Text"));
 const AcceptablePaymentCard_1 = __importDefault(require("../../steps/confirmation/PaymentDetails/AcceptablePaymentCard"));
 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");
@@ -43,19 +44,28 @@ const InlinePaymentOption = ({ card, active }) => {
     const displayExpiry = (expiry) => {
         return expiry.slice(0, 2) + ' / ' + expiry.slice(2);
     };
-    return (react_1.default.createElement("div", { className: InlinePaymentOption_module_scss_1.default.root },
-        react_1.default.createElement("div", { className: "flex-shrink-0" }, card ? react_1.default.createElement(InlinePaymentCard_1.default, { vgsCardName: card.type, large: true }) : null),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(Text_1.default, { align: TextAlignment_1.TextAlign.Left, type: Text_1.TextType.Small, color: Color_1.Color.Navy }, card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation_1.Translation.Step.Confirmation.CardLabel)),
-            react_1.default.createElement(Text_1.default, { className: "u-marg-top--lighter", align: TextAlignment_1.TextAlign.Left, type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey }, card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation_1.Translation.Step.Confirmation.CardSubLabel))),
-        !card && (react_1.default.createElement("div", null,
-            react_1.default.createElement(AcceptablePaymentCard_1.default, { style: {
-                    width: 24,
-                    height: 16,
-                    borderRadius: 1.5,
-                    border: '0.5px solid #DFE1E5',
-                }, isCurrent: () => true }))),
-        (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard) && card && card.cardId === roomstayMember.defaultCard && (react_1.default.createElement(Pill_1.default, { size: "small", type: Pill_1.PillType.Primary }, "DEFAULT CARD"))));
+    const { getTotalPrice } = (0, contexts_1.useBasket)();
+    const price = getTotalPrice();
+    const { symbol, prettyValue } = (0, Currency_1.default)({
+        children: price,
+    });
+    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: InlinePaymentOption_module_scss_1.default.root },
+            react_1.default.createElement("div", { className: "flex-shrink-0" }, card ? react_1.default.createElement(InlinePaymentCard_1.default, { vgsCardName: card.type, large: true }) : null),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(Text_1.default, { align: TextAlignment_1.TextAlign.Left, type: Text_1.TextType.Small, color: Color_1.Color.Navy }, card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation_1.Translation.Step.Confirmation.CardLabel)),
+                react_1.default.createElement(Text_1.default, { className: "u-marg-top--lighter", align: TextAlignment_1.TextAlign.Left, type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey }, card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation_1.Translation.Step.Confirmation.CardSubLabel))),
+            !card && (react_1.default.createElement("div", null,
+                react_1.default.createElement(AcceptablePaymentCard_1.default, { style: {
+                        width: 24,
+                        height: 16,
+                        borderRadius: 1.5,
+                        border: '0.5px solid #DFE1E5',
+                    }, isCurrent: () => true }))),
+            (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard) && card && card.cardId === roomstayMember.defaultCard && (react_1.default.createElement(Pill_1.default, { size: "small", type: Pill_1.PillType.Primary }, "DEFAULT CARD"))),
+        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 = InlinePaymentOption;
 //# sourceMappingURL=InlinePaymentOption.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlinePaymentOption.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentOption.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAkC;AAClC,iDAA+C;AAE/C,2GAAmF;AACnF,kEAA2D;AAC3D,kEAA2D;AAC3D,iIAAyG;AACzG,yCAA8C;AAE9C,4DAAyD;AACzD,wCAAqC;AACrC,wDAAiD;AAEjD,wGAAuD;AAOvD,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,2BAAgB,GAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE;QACrC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,OAAO,CACH,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,CAAC,CAAC,8BAAC,2BAAiB,IAAC,WAAW,EAAE,IAAI,CAAC,IAAmB,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,CAAO;QACvH;YACI,8BAAC,cAAI,IAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IAC/D,IAAI,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAC/F;YACP,8BAAC,cAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IACrG,IAAI,CAAC,CAAC,CAAC,WAAW,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAC5F,CACL;QACL,CAAC,IAAI,IAAI,CACN;YACI,8BAAC,+BAAqB,IAClB,KAAK,EAAE;oBACH,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,GAAG;oBACjB,MAAM,EAAE,qBAAqB;iBAChC,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,GACvB,CACA,CACT;QACA,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,KAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,WAAW,IAAI,CAClF,8BAAC,cAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,mBAElC,CACV,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentCard from '@/components/generic/PaymentCard/InlinePaymentCard';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { useMemberContext } from '@/contexts';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './InlinePaymentOption.module.scss';\n\ninterface InlinePaymentOptionProps {\n    card?: IRoomstayMemberCards;\n    active?: boolean;\n}\n\nconst InlinePaymentOption: FC<InlinePaymentOptionProps> = ({ card, active }) => {\n    const { t } = useTranslation();\n    const { roomstayMember } = useMemberContext();\n    const displayExpiry = (expiry: string) => {\n        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);\n    };\n    return (\n        <div className={styles.root}>\n            <div className=\"flex-shrink-0\">{card ? <InlinePaymentCard vgsCardName={card.type as VGSCardName} large /> : null}</div>\n            <div>\n                <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                    {card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation.Step.Confirmation.CardLabel)}\n                </Text>\n                <Text className=\"u-marg-top--lighter\" align={TextAlign.Left} type={TextType.Caption} color={Color.DarkGrey}>\n                    {card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation.Step.Confirmation.CardSubLabel)}\n                </Text>\n            </div>\n            {!card && (\n                <div>\n                    <AcceptablePaymentCard\n                        style={{\n                            width: 24,\n                            height: 16,\n                            borderRadius: 1.5,\n                            border: '0.5px solid #DFE1E5',\n                        }}\n                        isCurrent={() => true}\n                    />\n                </div>\n            )}\n            {roomstayMember?.defaultCard && card && card.cardId === roomstayMember.defaultCard && (\n                <Pill size=\"small\" type={PillType.Primary}>\n                    DEFAULT CARD\n                </Pill>\n            )}\n        </div>\n    );\n};\n\nexport default InlinePaymentOption;\n"]}
+{"version":3,"file":"InlinePaymentOption.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentOption.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,kDAAkC;AAClC,iDAA+C;AAE/C,2GAAmF;AACnF,kEAA2D;AAC3D,kEAA2D;AAC3D,iIAAyG;AACzG,yCAAyD;AACzD,gEAA2C;AAE3C,4DAAyD;AACzD,wCAAqC;AACrC,wDAAiD;AAEjD,wGAAuD;AAOvD,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,2BAAgB,GAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,EAAE;QACrC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,oBAAS,GAAE,CAAC;IACtC,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAW,EAAC;QACxC,QAAQ,EAAE,KAAK;KAClB,CAAC,CAAC;IACH,OAAO,CACH,uCAAK,SAAS,EAAC,yDAAyD;QACpE,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAC,eAAe,IAAE,IAAI,CAAC,CAAC,CAAC,8BAAC,2BAAiB,IAAC,WAAW,EAAE,IAAI,CAAC,IAAmB,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,CAAO;YACvH;gBACI,8BAAC,cAAI,IAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IAC/D,IAAI,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAC/F;gBACP,8BAAC,cAAI,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,yBAAS,CAAC,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IACrG,IAAI,CAAC,CAAC,CAAC,WAAW,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAC5F,CACL;YACL,CAAC,IAAI,IAAI,CACN;gBACI,8BAAC,+BAAqB,IAClB,KAAK,EAAE;wBACH,KAAK,EAAE,EAAE;wBACT,MAAM,EAAE,EAAE;wBACV,YAAY,EAAE,GAAG;wBACjB,MAAM,EAAE,qBAAqB;qBAChC,EACD,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,GACvB,CACA,CACT;YACA,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,KAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc,CAAC,WAAW,IAAI,CAClF,8BAAC,cAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,eAAQ,CAAC,OAAO,mBAElC,CACV,CACC;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,mBAAmB,CAAC","sourcesContent":["import { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentCard from '@/components/generic/PaymentCard/InlinePaymentCard';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { useBasket, useMemberContext } from '@/contexts';\nimport useCurrency from '@/hooks/Currency';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './InlinePaymentOption.module.scss';\n\ninterface InlinePaymentOptionProps {\n    card?: IRoomstayMemberCards;\n    active?: boolean;\n}\n\nconst InlinePaymentOption: FC<InlinePaymentOptionProps> = ({ card, active }) => {\n    const { t } = useTranslation();\n    const { roomstayMember } = useMemberContext();\n    const displayExpiry = (expiry: string) => {\n        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);\n    };\n    const { getTotalPrice } = useBasket();\n    const price = getTotalPrice();\n    const { symbol, prettyValue } = useCurrency({\n        children: price,\n    });\n    return (\n        <div className=\"u-flex u-flex-justify-between w-100 u-flex-align-center\">\n            <div className={styles.root}>\n                <div className=\"flex-shrink-0\">{card ? <InlinePaymentCard vgsCardName={card.type as VGSCardName} large /> : null}</div>\n                <div>\n                    <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                        {card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation.Step.Confirmation.CardLabel)}\n                    </Text>\n                    <Text className=\"u-marg-top--lighter\" align={TextAlign.Left} type={TextType.Caption} color={Color.DarkGrey}>\n                        {card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation.Step.Confirmation.CardSubLabel)}\n                    </Text>\n                </div>\n                {!card && (\n                    <div>\n                        <AcceptablePaymentCard\n                            style={{\n                                width: 24,\n                                height: 16,\n                                borderRadius: 1.5,\n                                border: '0.5px solid #DFE1E5',\n                            }}\n                            isCurrent={() => true}\n                        />\n                    </div>\n                )}\n                {roomstayMember?.defaultCard && card && card.cardId === roomstayMember.defaultCard && (\n                    <Pill size=\"small\" type={PillType.Primary}>\n                        DEFAULT CARD\n                    </Pill>\n                )}\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 InlinePaymentOption;\n"]}

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

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+export interface PlanpayPriceProps extends PropsWithChildren<any> {
+    price: number;
+    checkin: string;
+    currency: string;
+}
+export declare const PlanpayPrice: FC<PlanpayPriceProps>;

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

@@ -0,0 +1,50 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlanpayPrice = void 0;
+const hooks_1 = require("../../../hooks/index.js");
+const web_1 = require("@planpay/web");
+const react_1 = __importStar(require("react"));
+const Debounce_1 = require("../../../util/Debounce");
+web_1.planpay.init({
+    // environment: hotel.planpay.env,
+    environment: 'prod',
+    showDebug: false,
+});
+const debounceReload = (0, Debounce_1.debounce)(() => {
+    web_1.planpay.pricePreview.refresh({});
+}, 150);
+const PlanpayPrice = ({ price, checkin, currency }) => {
+    var _a;
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    (0, react_1.useEffect)(() => {
+        debounceReload();
+    }, [price, currency, checkin]);
+    if (!(hotel === null || hotel === void 0 ? void 0 : hotel.planpay))
+        return null;
+    return (react_1.default.createElement("div", { style: { whiteSpace: 'nowrap', marginRight: -16 }, "data-planpay-data-type": "price-preview", "data-planpay-total-cost": price, "data-planpay-currency-code": currency, "data-planpay-redemption-date": checkin, "data-planpay-payment-deadline": "0", "data-planpay-total-minimum-deposit": "0", "data-planpay-merchant-id": (_a = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _a === void 0 ? void 0 : _a.username }));
+};
+exports.PlanpayPrice = PlanpayPrice;
+//# sourceMappingURL=PlanpayPrice.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlanpayPrice.js","sourceRoot":"/","sources":["src/components/generic/PlanpayPrice/PlanpayPrice.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAAkD;AAClD,sCAAuC;AACvC,+CAAgE;AAEhE,8CAA2C;AAE3C,aAAO,CAAC,IAAI,CAAC;IACT,kCAAkC;IAClC,WAAW,EAAE,MAAM;IACnB,SAAS,EAAE,KAAK;CACnB,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,IAAA,mBAAQ,EAAC,GAAG,EAAE;IACjC,aAAO,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,EAAE,GAAG,CAAC,CAAC;AAQD,MAAM,YAAY,GAA0B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAChF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA;QAAE,OAAO,IAAI,CAAC;IAEjC,OAAO,CACH,uCACI,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,4BAC1B,eAAe,6BACb,KAAK,gCACF,QAAQ,kCACN,OAAO,mCACP,GAAG,wCACE,GAAG,8BACZ,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,GACpD,CACL,CAAC;AACN,CAAC,CAAC;AArBW,QAAA,YAAY,gBAqBvB","sourcesContent":["import { useCurrentHotel } from '@frontend/hooks';\nimport { planpay } from '@planpay/web';\nimport React, { FC, PropsWithChildren, useEffect } from 'react';\n\nimport { debounce } from '@/util/Debounce';\n\nplanpay.init({\n    // environment: hotel.planpay.env,\n    environment: 'prod',\n    showDebug: false,\n});\n\nconst debounceReload = debounce(() => {\n    planpay.pricePreview.refresh({});\n}, 150);\n\nexport interface PlanpayPriceProps extends PropsWithChildren<any> {\n    price: number;\n    checkin: string;\n    currency: string;\n}\n\nexport const PlanpayPrice: FC<PlanpayPriceProps> = ({ price, checkin, currency }) => {\n    const { hotel } = useCurrentHotel();\n\n    useEffect(() => {\n        debounceReload();\n    }, [price, currency, checkin]);\n\n    if (!hotel?.planpay) return null;\n\n    return (\n        <div\n            style={{ whiteSpace: 'nowrap', marginRight: -16 }}\n            data-planpay-data-type=\"price-preview\"\n            data-planpay-total-cost={price}\n            data-planpay-currency-code={currency}\n            data-planpay-redemption-date={checkin}\n            data-planpay-payment-deadline=\"0\"\n            data-planpay-total-minimum-deposit=\"0\"\n            data-planpay-merchant-id={hotel?.planpay?.username}\n        />\n    );\n};\n"]}

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

@@ -43,40 +43,41 @@ const Overlay_1 = require("../Overlay/Overlay");
 const RadioButton_1 = require("./RadioButton");
 const Tooltip_1 = __importDefault(require("../Tooltip/Tooltip"));
 const RadioButtonGroup_module_scss_1 = __importDefault(require("./RadioButtonGroup.module.scss"));
+const Option = ({ option: optionProp, value: valueProp, onChange, renderChildrenContent, }) => {
+    const options = optionProp.options;
+    const isGroup = !!(options === null || options === void 0 ? void 0 : options.length);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const option = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || optionProp : optionProp;
+    const radioButton = (react_1.default.createElement(RadioButton_1.RadioButton, { headerRef: setRef, className: RadioButtonGroup_module_scss_1.default.item, key: option === null || option === void 0 ? void 0 : option.value, checked: !(option === null || option === void 0 ? void 0 : option.disabled) && (option === null || option === void 0 ? void 0 : option.value) === valueProp, onChange: () => {
+            if (option === null || option === void 0 ? void 0 : option.disabled)
+                return;
+            if (isGroup)
+                setOpen(!open);
+            else if ((option === null || option === void 0 ? void 0 : option.value) && (option === null || option === void 0 ? void 0 : option.value) !== valueProp)
+                onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+        }, label: option === null || option === void 0 ? void 0 : option.label, disabled: option === null || option === void 0 ? void 0 : option.disabled, renderContent: option === null || option === void 0 ? void 0 : option.renderContent }));
+    if ((option === null || option === void 0 ? void 0 : option.disabled) && (option === null || option === void 0 ? void 0 : option.disabledReason)) {
+        return (react_1.default.createElement(Tooltip_1.default, { key: option === null || option === void 0 ? void 0 : option.value, wrapperClasses: RadioButtonGroup_module_scss_1.default.wrapper, title: option === null || option === void 0 ? void 0 : option.disabledReason }, radioButton));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { key: option === null || option === void 0 ? void 0 : option.value, className: RadioButtonGroup_module_scss_1.default.wrapper },
+            radioButton,
+            options && (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.childrenIndicator },
+                react_1.default.createElement(Icon_1.default, { size: "24px", icon: Icon_1.IconType.Dropdown })))),
+        options && (react_1.default.createElement(Overlay_1.Overlay, { onClose: () => setOpen(false), className: RadioButtonGroup_module_scss_1.default.overlay, hideStyles: true, containerClassName: "u-w-100", open: open, followElement: ref || undefined, offset: [0, 0], placement: "top-start" },
+            react_1.default.createElement(RadioButtonGroup, { options: options.map((option) => {
+                    const { renderContent } = option, rest = __rest(option, ["renderContent"]);
+                    if (!renderChildrenContent)
+                        return rest;
+                    return option;
+                }), onChange: (value) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                    setOpen(false);
+                }, value: valueProp })))));
+};
 const RadioButtonGroup = ({ options = [], value: valueProp, onChange, renderChildrenContent, }) => {
-    return (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.root }, options.map((rawOption) => {
-        const options = rawOption.options;
-        const isGroup = !!(options === null || options === void 0 ? void 0 : options.length);
-        const [ref, setRef] = (0, react_1.useState)(null);
-        const [open, setOpen] = (0, react_1.useState)(false);
-        const option = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || rawOption : rawOption;
-        const radioButton = (react_1.default.createElement(RadioButton_1.RadioButton, { headerRef: setRef, className: RadioButtonGroup_module_scss_1.default.item, key: option === null || option === void 0 ? void 0 : option.value, checked: !(option === null || option === void 0 ? void 0 : option.disabled) && (option === null || option === void 0 ? void 0 : option.value) === valueProp, onChange: () => {
-                if (option === null || option === void 0 ? void 0 : option.disabled)
-                    return;
-                if (isGroup)
-                    setOpen(!open);
-                else if ((option === null || option === void 0 ? void 0 : option.value) && (option === null || option === void 0 ? void 0 : option.value) !== valueProp)
-                    onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
-            }, label: option === null || option === void 0 ? void 0 : option.label, disabled: option === null || option === void 0 ? void 0 : option.disabled, renderContent: option === null || option === void 0 ? void 0 : option.renderContent }));
-        if ((option === null || option === void 0 ? void 0 : option.disabled) && (option === null || option === void 0 ? void 0 : option.disabledReason)) {
-            return (react_1.default.createElement(Tooltip_1.default, { key: option === null || option === void 0 ? void 0 : option.value, wrapperClasses: RadioButtonGroup_module_scss_1.default.wrapper, title: option === null || option === void 0 ? void 0 : option.disabledReason }, radioButton));
-        }
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { key: option === null || option === void 0 ? void 0 : option.value, className: RadioButtonGroup_module_scss_1.default.wrapper },
-                radioButton,
-                options && (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.childrenIndicator },
-                    react_1.default.createElement(Icon_1.default, { size: "24px", icon: Icon_1.IconType.Dropdown })))),
-            options && (react_1.default.createElement(Overlay_1.Overlay, { onClose: () => setOpen(false), className: RadioButtonGroup_module_scss_1.default.overlay, hideStyles: true, containerClassName: "u-w-100", open: open, followElement: ref || undefined, offset: [0, 0], placement: "top-start" },
-                react_1.default.createElement(RadioButtonGroup, { options: options.map((option) => {
-                        const { renderContent } = option, rest = __rest(option, ["renderContent"]);
-                        if (!renderChildrenContent)
-                            return rest;
-                        return option;
-                    }), onChange: (value) => {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(value);
-                        setOpen(false);
-                    }, value: valueProp })))));
-    })));
+    return (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.root }, options.map((rawOption) => (react_1.default.createElement(Option, { key: rawOption.value, option: rawOption, value: valueProp, onChange: onChange, renderChildrenContent: renderChildrenContent })))));
 };
 exports.default = RadioButtonGroup;
 //# sourceMappingURL=RadioButtonGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactElement, ReactNode, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { RadioButton } from '@/components/generic/RadioButtonGroup/RadioButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nimport styles from './RadioButtonGroup.module.scss';\n\nexport interface IRadioButtonOption<TValue extends string = string> {\n    value: TValue;\n\n    label?: ReactNode;\n    disabled?: boolean;\n    /** Enabled a tooltip that gives more info on why the field is disabled */\n    disabledReason?: string;\n    renderContent?: () => ReactNode;\n    options?: IRadioButtonOption<TValue>[];\n}\n\nexport interface IRadioButtonGroupProps<TValue extends string = string> {\n    options?: IRadioButtonOption<TValue>[];\n    value?: TValue;\n    onChange?: (value: TValue) => void;\n    renderChildrenContent?: boolean;\n}\n\nconst RadioButtonGroup = <TValue extends string = string>({\n    options = [],\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n}: IRadioButtonGroupProps<TValue>): ReactElement | null => {\n    return (\n        <div className={styles.root}>\n            {options.map((rawOption) => {\n                const options = rawOption.options;\n                const isGroup = !!options?.length;\n                const [ref, setRef] = useState<HTMLDivElement | null>(null);\n                const [open, setOpen] = useState<boolean>(false);\n                const option: IRadioButtonOption<TValue> | undefined = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || rawOption : rawOption;\n                const radioButton = (\n                    <RadioButton\n                        headerRef={setRef}\n                        className={styles.item}\n                        key={option?.value}\n                        checked={!option?.disabled && option?.value === valueProp}\n                        onChange={() => {\n                            if (option?.disabled) return;\n                            if (isGroup) setOpen(!open);\n                            else if (option?.value && option?.value !== valueProp) onChange?.(option.value);\n                        }}\n                        label={option?.label}\n                        disabled={option?.disabled}\n                        renderContent={option?.renderContent}\n                    />\n                );\n\n                if (option?.disabled && option?.disabledReason) {\n                    return (\n                        <Tooltip key={option?.value} wrapperClasses={styles.wrapper} title={option?.disabledReason}>\n                            {radioButton}\n                        </Tooltip>\n                    );\n                }\n\n                return (\n                    <>\n                        <div key={option?.value} className={styles.wrapper}>\n                            {radioButton}\n                            {options && (\n                                <div className={styles.childrenIndicator}>\n                                    <Icon size=\"24px\" icon={IconType.Dropdown} />\n                                </div>\n                            )}\n                        </div>\n                        {options && (\n                            <Overlay\n                                onClose={() => setOpen(false)}\n                                className={styles.overlay}\n                                hideStyles\n                                containerClassName=\"u-w-100\"\n                                open={open}\n                                followElement={ref || undefined}\n                                offset={[0, 0]}\n                                placement=\"top-start\"\n                            >\n                                <RadioButtonGroup\n                                    options={options.map((option) => {\n                                        const { renderContent, ...rest } = option;\n                                        if (!renderChildrenContent) return rest;\n                                        return option;\n                                    })}\n                                    onChange={(value) => {\n                                        onChange?.(value);\n                                        setOpen(false);\n                                    }}\n                                    value={valueProp}\n                                />\n                            </Overlay>\n                        )}\n                    </>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}
+{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactElement, ReactNode, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { RadioButton } from '@/components/generic/RadioButtonGroup/RadioButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nimport styles from './RadioButtonGroup.module.scss';\n\nexport interface IRadioButtonOption<TValue extends string = string> {\n    value: TValue;\n    label?: ReactNode;\n    disabled?: boolean;\n    /** Enabled a tooltip that gives more info on why the field is disabled */\n    disabledReason?: string;\n    renderContent?: () => ReactNode;\n    options?: IRadioButtonOption<TValue>[];\n}\n\nexport interface IRadioButtonGroupProps<TValue extends string = string> {\n    options?: IRadioButtonOption<TValue>[];\n    value?: TValue;\n    onChange?: (value: TValue) => void;\n    renderChildrenContent?: boolean;\n}\n\nconst Option = <TValue extends string = string>({\n    option: optionProp,\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n}: {\n    option: IRadioButtonOption<TValue>;\n    value?: TValue;\n    onChange?: (value: TValue) => void;\n    renderChildrenContent?: boolean;\n}): ReactElement | null => {\n    const options = optionProp.options;\n    const isGroup = !!options?.length;\n    const [ref, setRef] = useState<HTMLDivElement | null>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const option: IRadioButtonOption<TValue> | undefined = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || optionProp : optionProp;\n    const radioButton = (\n        <RadioButton\n            headerRef={setRef}\n            className={styles.item}\n            key={option?.value}\n            checked={!option?.disabled && option?.value === valueProp}\n            onChange={() => {\n                if (option?.disabled) return;\n                if (isGroup) setOpen(!open);\n                else if (option?.value && option?.value !== valueProp) onChange?.(option.value);\n            }}\n            label={option?.label}\n            disabled={option?.disabled}\n            renderContent={option?.renderContent}\n        />\n    );\n\n    if (option?.disabled && option?.disabledReason) {\n        return (\n            <Tooltip key={option?.value} wrapperClasses={styles.wrapper} title={option?.disabledReason}>\n                {radioButton}\n            </Tooltip>\n        );\n    }\n\n    return (\n        <>\n            <div key={option?.value} className={styles.wrapper}>\n                {radioButton}\n                {options && (\n                    <div className={styles.childrenIndicator}>\n                        <Icon size=\"24px\" icon={IconType.Dropdown} />\n                    </div>\n                )}\n            </div>\n            {options && (\n                <Overlay\n                    onClose={() => setOpen(false)}\n                    className={styles.overlay}\n                    hideStyles\n                    containerClassName=\"u-w-100\"\n                    open={open}\n                    followElement={ref || undefined}\n                    offset={[0, 0]}\n                    placement=\"top-start\"\n                >\n                    <RadioButtonGroup\n                        options={options.map((option) => {\n                            const { renderContent, ...rest } = option;\n                            if (!renderChildrenContent) return rest;\n                            return option;\n                        })}\n                        onChange={(value) => {\n                            onChange?.(value);\n                            setOpen(false);\n                        }}\n                        value={valueProp}\n                    />\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nconst RadioButtonGroup = <TValue extends string = string>({\n    options = [],\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n}: IRadioButtonGroupProps<TValue>): ReactElement | null => {\n    return (\n        <div className={styles.root}>\n            {options.map((rawOption) => (\n                <Option key={rawOption.value} option={rawOption} value={valueProp} onChange={onChange} renderChildrenContent={renderChildrenContent} />\n            ))}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}

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

@@ -11,6 +11,7 @@ export declare enum TextTransform {
     Uppercase = "u-uppercase"
 }
 export interface TextProps extends PropsWithChildren<any> {
+    [x: string]: React.ReactNode;
     type?: TextType;
     color?: Color;
     align?: TextAlign;
@@ -21,7 +22,6 @@ export interface TextProps extends PropsWithChildren<any> {
     preformatted?: boolean;
     style?: React.CSSProperties;
     lineThrough?: boolean;
-    [x: string]: React.ReactNode;
 }
 export declare const Text: React.ForwardRefExoticComponent<Pick<TextProps, keyof TextProps> & React.RefAttributes<HTMLParagraphElement>>;
 export default Text;

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"/","sources":["src/components/generic/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA6D;AAK7D,IAAY,QAKX;AALD,WAAY,QAAQ;IAChB,yBAAa,CAAA;IACb,2BAAe,CAAA;IACf,+BAAmB,CAAA;IACnB,2BAAe,CAAA;AACnB,CAAC,EALW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAKnB;AAED,yCAAyC;AACzC,IAAY,aAEX;AAFD,WAAY,aAAa;IACrB,0CAAyB,CAAA;AAC7B,CAAC,EAFW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAExB;AAiBY,QAAA,IAAI,GAAG,IAAA,kBAAU,EAAkC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACpF,MAAM,YAAY,mBACd,IAAI,EAAE,QAAQ,CAAC,IAAI,IAChB,KAAK,CACX,CAAC;IAEF,MAAM,gBAAgB,GAAQ,EAAE,CAAC;IAEjC,IAAI,KAAK,CAAC,UAAU,EAAE;QAClB,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACjF;IAED,MAAM,YAAY,GAAQ,EAAE,CAAC;IAE7B,IAAI,KAAK,CAAC,SAAS,EAAE;QACjB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACzE;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,KAAK,gCAClC,CAAC,QAAQ,YAAY,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,EAChD,eAAe,EAAE,KAAK,CAAC,MAAM,EAC7B,aAAa,EAAE,KAAK,CAAC,IAAI,EACzB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,WAAW,IAChC,YAAY,GACZ,gBAAgB,EACrB,CAAC;IAEH,MAAM,MAAM,qBACL,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAChC,CAAC;IAEF,IAAI,YAAY,CAAC,KAAK,EAAE;QACpB,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;KACrC;IAED,OAAO,CACH,qCAAG,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IACzC,KAAK,CAAC,QAAQ,CACf,CACP,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,kBAAe,YAAI,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, PropsWithChildren } from 'react';\n\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport enum TextType {\n    Body = 'body',\n    Small = 'small',\n    Caption = 'caption',\n    Label = 'label',\n}\n\n// Refactor to globalize for Headings too\nexport enum TextTransform {\n    Uppercase = 'u-uppercase',\n}\n\nexport interface TextProps extends PropsWithChildren<any> {\n    type?: TextType;\n    color?: Color;\n    align?: TextAlign;\n    transforms?: TextTransform[];\n    className?: string;\n    inline?: boolean;\n    bold?: boolean;\n    preformatted?: boolean;\n    style?: React.CSSProperties;\n    lineThrough?: boolean;\n\n    [x: string]: React.ReactNode;\n}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(props, ref) {\n    const defaultProps: TextProps = {\n        type: TextType.Body,\n        ...props,\n    };\n\n    const transformClasses: any = {};\n\n    if (props.transforms) {\n        props.transforms.forEach((transform) => (transformClasses[transform] = true));\n    }\n\n    const extraClasses: any = {};\n\n    if (props.className) {\n        props.className.split(' ').forEach((it) => (extraClasses[it] = true));\n    }\n\n    const classes = classNames(props.align, {\n        [`text-${defaultProps.type}`]: defaultProps.type,\n        'u-inline-flex': props.inline,\n        'u-text-bold': props.bold,\n        'u-pre-wrap': props.preformatted,\n        'u-line-through': props.lineThrough,\n        ...extraClasses,\n        ...transformClasses,\n    });\n\n    const styles: any = {\n        ...(defaultProps.style || {}),\n    };\n\n    if (defaultProps.color) {\n        styles.color = defaultProps.color;\n    }\n\n    return (\n        <p className={classes} style={styles} ref={ref}>\n            {props.children}\n        </p>\n    );\n});\n\nexport default Text;\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"/","sources":["src/components/generic/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA6D;AAK7D,IAAY,QAKX;AALD,WAAY,QAAQ;IAChB,yBAAa,CAAA;IACb,2BAAe,CAAA;IACf,+BAAmB,CAAA;IACnB,2BAAe,CAAA;AACnB,CAAC,EALW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAKnB;AAED,yCAAyC;AACzC,IAAY,aAEX;AAFD,WAAY,aAAa;IACrB,0CAAyB,CAAA;AAC7B,CAAC,EAFW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAExB;AAgBY,QAAA,IAAI,GAAG,IAAA,kBAAU,EAAkC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACpF,MAAM,YAAY,mBACd,IAAI,EAAE,QAAQ,CAAC,IAAI,IAChB,KAAK,CACX,CAAC;IAEF,MAAM,gBAAgB,GAAQ,EAAE,CAAC;IAEjC,IAAI,KAAK,CAAC,UAAU,EAAE;QAClB,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACjF;IAED,MAAM,YAAY,GAAQ,EAAE,CAAC;IAE7B,IAAI,KAAK,CAAC,SAAS,EAAE;QACjB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;KACzE;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,CAAC,KAAK,gCAClC,CAAC,QAAQ,YAAY,CAAC,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,EAChD,eAAe,EAAE,KAAK,CAAC,MAAM,EAC7B,aAAa,EAAE,KAAK,CAAC,IAAI,EACzB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,KAAK,CAAC,WAAW,IAChC,YAAY,GACZ,gBAAgB,EACrB,CAAC;IAEH,MAAM,MAAM,qBACL,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAChC,CAAC;IAEF,IAAI,YAAY,CAAC,KAAK,EAAE;QACpB,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;KACrC;IAED,OAAO,CACH,qCAAG,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IACzC,KAAK,CAAC,QAAQ,CACf,CACP,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,kBAAe,YAAI,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, PropsWithChildren } from 'react';\n\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport enum TextType {\n    Body = 'body',\n    Small = 'small',\n    Caption = 'caption',\n    Label = 'label',\n}\n\n// Refactor to globalize for Headings too\nexport enum TextTransform {\n    Uppercase = 'u-uppercase',\n}\n\nexport interface TextProps extends PropsWithChildren<any> {\n    [x: string]: React.ReactNode;\n    type?: TextType;\n    color?: Color;\n    align?: TextAlign;\n    transforms?: TextTransform[];\n    className?: string;\n    inline?: boolean;\n    bold?: boolean;\n    preformatted?: boolean;\n    style?: React.CSSProperties;\n    lineThrough?: boolean;\n}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(props, ref) {\n    const defaultProps: TextProps = {\n        type: TextType.Body,\n        ...props,\n    };\n\n    const transformClasses: any = {};\n\n    if (props.transforms) {\n        props.transforms.forEach((transform) => (transformClasses[transform] = true));\n    }\n\n    const extraClasses: any = {};\n\n    if (props.className) {\n        props.className.split(' ').forEach((it) => (extraClasses[it] = true));\n    }\n\n    const classes = classNames(props.align, {\n        [`text-${defaultProps.type}`]: defaultProps.type,\n        'u-inline-flex': props.inline,\n        'u-text-bold': props.bold,\n        'u-pre-wrap': props.preformatted,\n        'u-line-through': props.lineThrough,\n        ...extraClasses,\n        ...transformClasses,\n    });\n\n    const styles: any = {\n        ...(defaultProps.style || {}),\n    };\n\n    if (defaultProps.color) {\n        styles.color = defaultProps.color;\n    }\n\n    return (\n        <p className={classes} style={styles} ref={ref}>\n            {props.children}\n        </p>\n    );\n});\n\nexport default Text;\n"]}

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

@@ -30,26 +30,23 @@ const core_1 = require("@roomstay/core");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const Icon_1 = __importStar(require("../../generic/Icon/Icon"));
 const InlinePaymentOption_1 = __importDefault(require("../../generic/PaymentCard/InlinePaymentOption"));
 const RadioButtonGroup_1 = __importDefault(require("../../generic/RadioButtonGroup/RadioButtonGroup"));
-const Text_1 = __importDefault(require("../../generic/Text"));
 const StepConfirmationPaymentDetails_1 = require("./PaymentDetails/StepConfirmationPaymentDetails");
+const PlanpayLabel_1 = __importDefault(require("./PlanpayLabel"));
 const PlanpayPaymentMethod_1 = require("./PlanpayPaymentMethod");
 const contexts_1 = require("../../../contexts");
 const hooks_1 = require("../../../hooks");
-const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
-const Translation_1 = require("../../../translations/Translation");
-const Color_1 = require("../../../util/Color");
+const Planpay_1 = __importDefault(require("../../../hooks/Planpay"));
 const PaymentInformation = ({ tokenizerRef, onChangeCb }) => {
-    var _a, _b, _c, _d;
-    const { t } = (0, react_i18next_1.useTranslation)();
+    var _a;
     const methods = (0, react_hook_form_1.useFormContext)();
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const basketContext = (0, contexts_1.useBasket)();
+    const { hasPricePreview, planpayConfig } = (0, Planpay_1.default)();
     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 { currentCurrency } = (0, react_1.useContext)(contexts_1.CompanyContext);
     const paymentMethod = methods.watch('paymentMethod');
     const vgsCardInputOption = {
         value: core_1.EBookingPaymentMethod.Card,
@@ -83,24 +80,13 @@ const PaymentInformation = ({ tokenizerRef, onChangeCb }) => {
         }
         options.push(Object.assign(Object.assign({}, defaultCardOption), { options: selectableStoredCardOptions.length > 0 ? selectableStoredCardOptions : undefined }));
     }
-    if (((_b = hotel === null || hotel === void 0 ? void 0 : hotel.paymentMethods) === null || _b === void 0 ? void 0 : _b.includes(core_1.EBookingPaymentMethod.Planpay)) &&
-        ((_c = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _c === void 0 ? void 0 : _c.minDaysShowPlanpay) &&
-        (0, dayjs_1.default)(basketContext.startDate).diff((0, dayjs_1.default)(), 'day') > ((_d = hotel === null || hotel === void 0 ? void 0 : hotel.planpay) === null || _d === void 0 ? void 0 : _d.minDaysShowPlanpay)) {
+    (0, react_1.useEffect)(() => {
+        methods.trigger();
+    }, [currentCurrency]);
+    if (hasPricePreview && planpayConfig && planpayConfig.minDaysShowPlanpay && (0, dayjs_1.default)(basketContext.startDate).diff((0, dayjs_1.default)(), 'day') > planpayConfig.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))))),
+            label: react_1.default.createElement(PlanpayLabel_1.default, null),
             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),

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentInformation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EBookingPaymentMethod } from '@roomstay/core';\nimport dayjs from 'dayjs';\nimport React, { FC, useMemo } from 'react';\nimport { Controller, useFormContext } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport InlinePaymentOption from '@/components/generic/PaymentCard/InlinePaymentOption';\nimport RadioButtonGroup, { IRadioButtonOption } from '@/components/generic/RadioButtonGroup/RadioButtonGroup';\nimport Text from '@/components/generic/Text';\nimport { StepConfirmationVGSPaymentInput } from '@/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails';\nimport { PlanpayPaymentMethod } from '@/components/steps/confirmation/PlanpayPaymentMethod';\nimport { useBasket, useMemberContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\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"]}
+{"version":3,"file":"PaymentInformation.js","sourceRoot":"/","sources":["src/components/steps/confirmation/PaymentInformation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yCAAuD;AACvD,kDAA0B;AAC1B,+CAAkE;AAClE,qDAA6D;AAE7D,+GAAuF;AACvF,8GAA8G;AAC9G,kIAAgI;AAChI,gGAAwE;AACxE,+FAA4F;AAC5F,yCAAyE;AACzE,mCAA0C;AAC1C,8DAAyC;AAQzC,MAAM,kBAAkB,GAAgC,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE;;IACrF,MAAM,OAAO,GAAG,IAAA,gCAAc,GAA0B,CAAC;IACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,aAAa,GAAG,IAAA,oBAAS,GAAE,CAAC;IAClC,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,GAAG,IAAA,iBAAU,GAAE,CAAC;IACxD,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,cAAc,EAAE,GAAG,IAAA,2BAAgB,GAAE,CAAC;IAC1D,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,MAAK,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,CAAA,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IAE9H,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAC;IAEvD,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,kBAAkB,GAAuB;QAC3C,KAAK,EAAE,4BAAqB,CAAC,IAAI;QACjC,KAAK,EAAE,8BAAC,6BAAmB,IAAC,MAAM,EAAE,aAAa,KAAK,4BAAqB,CAAC,IAAI,GAAI;QACpF,aAAa,EAAE,GAAG,EAAE,CAAC,8BAAC,gEAA+B,IAAC,GAAG,EAAE,YAAY,GAAI;KAC9E,CAAC;IAEF,MAAM,OAAO,GAAyB,EAAE,CAAC;IACzC,IAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,0CAAE,QAAQ,CAAC,4BAAqB,CAAC,IAAI,CAAC,EAAE;QAC7D,IAAI,iBAAqC,CAAC;QAC1C,kFAAkF;QAClF,sEAAsE;QACtE,IAAI,KAAK,CAAC,MAAM,EAAE;YACd,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAEhE,iBAAiB,GAAG;gBAChB,KAAK,EAAE,kBAAkB,CAAC,MAAM;gBAChC,KAAK,EAAE,8BAAC,6BAAmB,IAAC,IAAI,EAAE,kBAAkB,GAAI;aAC3D,CAAC;SACL;aAAM;YACH,iBAAiB,GAAG,kBAAkB,CAAC;SAC1C;QAED,MAAM,2BAA2B,GAAG,EAAE,CAAC;QAEvC,IAAI,KAAK,CAAC,MAAM,EAAE;YACd,KAAK,MAAM,UAAU,IAAI,KAAK,EAAE;gBAC5B,2BAA2B,CAAC,IAAI,CAAC;oBAC7B,KAAK,EAAE,UAAU,CAAC,MAAM;oBACxB,KAAK,EAAE,8BAAC,6BAAmB,IAAC,IAAI,EAAE,UAAU,GAAI;iBACnD,CAAC,CAAC;aACN;YACD,2BAA2B,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SACxD;QAED,OAAO,CAAC,IAAI,iCACL,iBAAiB,KACpB,OAAO,EAAE,2BAA2B,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS,IAC3F,CAAC;KACN;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,OAAO,CAAC,OAAO,EAAE,CAAC;IACtB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,eAAe,IAAI,aAAa,IAAI,aAAa,CAAC,kBAAkB,IAAI,IAAA,eAAK,EAAC,aAAa,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAA,eAAK,GAAE,EAAE,KAAK,CAAC,GAAG,aAAa,CAAC,kBAAkB,EAAE;QAChK,OAAO,CAAC,IAAI,CAAC;YACT,KAAK,EAAE,4BAAqB,CAAC,OAAO;YACpC,KAAK,EAAE,8BAAC,sBAAY,OAAG;YACvB,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO;YACpC,cAAc,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,oEAAoE,CAAC,CAAC,CAAC,EAAE;YACtH,aAAa,EAAE,GAAG,EAAE,CAAC,8BAAC,2CAAoB,OAAG;SAChD,CAAC,CAAC;KACN;IAED,OAAO,CACH,8BAAC,4BAAU,IACP,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,IAAI,EAAC,eAAe,EACpB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;YACvC,OAAO,CACH;gBACI;oBACI,8BAAC,0BAAgB,IACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;4BACf,QAAQ,CAAC,IAAI,CAAC,CAAC;4BACf,UAAU,CAAC,IAAI,CAAC,CAAC;wBACrB,CAAC,GACH,CACA,CACP,CACN,CAAC;QACN,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import { EBookingPaymentMethod } from '@roomstay/core';\nimport dayjs from 'dayjs';\nimport React, { FC, useContext, useEffect, useMemo } from 'react';\nimport { Controller, useFormContext } from 'react-hook-form';\n\nimport InlinePaymentOption from '@/components/generic/PaymentCard/InlinePaymentOption';\nimport RadioButtonGroup, { IRadioButtonOption } from '@/components/generic/RadioButtonGroup/RadioButtonGroup';\nimport { StepConfirmationVGSPaymentInput } from '@/components/steps/confirmation/PaymentDetails/StepConfirmationPaymentDetails';\nimport PlanpayLabel from '@/components/steps/confirmation/PlanpayLabel';\nimport { PlanpayPaymentMethod } from '@/components/steps/confirmation/PlanpayPaymentMethod';\nimport { CompanyContext, useBasket, useMemberContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport usePlanpay from '@/hooks/Planpay';\nimport { ConfirmationFormValues } from '@/models/Confirmation';\n\ninterface PaymentInformationProps {\n    tokenizerRef: any;\n    onChangeCb: (code: string) => void;\n}\n\nconst PaymentInformation: FC<PaymentInformationProps> = ({ tokenizerRef, onChangeCb }) => {\n    const methods = useFormContext<ConfirmationFormValues>();\n    const { hotel } = useCurrentHotel();\n    const basketContext = useBasket();\n    const { hasPricePreview, planpayConfig } = usePlanpay();\n    const { cards = [], roomstayMember } = useMemberContext();\n    const defaultCard = useMemo(() => cards.find((card) => card.cardId === roomstayMember?.defaultCard), [cards, roomstayMember]);\n\n    const { currentCurrency } = useContext(CompanyContext);\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    useEffect(() => {\n        methods.trigger();\n    }, [currentCurrency]);\n\n    if (hasPricePreview && planpayConfig && planpayConfig.minDaysShowPlanpay && dayjs(basketContext.startDate).diff(dayjs(), 'day') > planpayConfig.minDaysShowPlanpay) {\n        options.push({\n            value: EBookingPaymentMethod.Planpay,\n            label: <PlanpayLabel />,\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/PlanpayLabel.d.ts

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