"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 () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = BEMobileSummaryModal;
const contexts_1 = require("../../contexts/index.js");
const hooks_1 = require("../../hooks/index.js");
const react_1 = __importStar(require("react"));
const react_i18next_1 = require("react-i18next");
const react_router_dom_1 = require("react-router-dom");
const Translation_1 = require("translations/Translation");
const BEButton_1 = __importDefault(require("../generic/BEButton"));
const Currency_1 = __importDefault(require("../generic/Currency"));
const Headline_1 = __importDefault(require("../generic/Headline"));
const Icon_1 = __importStar(require("../generic/Icon/Icon"));
const LineBreak_1 = __importDefault(require("../generic/LineBreak"));
const BEHotelLocationMapBlock_1 = __importDefault(require("../generic/map/BEHotelLocationMapBlock"));
const SimpleModal_1 = __importDefault(require("../generic/modal/SimpleModal"));
const Text_1 = __importStar(require("../generic/Text"));
const ItemisedFeesListing_1 = require("../steps/common/ItemisedFeesListing/ItemisedFeesListing");
const BESummary_1 = require("./BESummary");
const BESummaryAddonRow_1 = __importDefault(require("./BESummaryAddonRow"));
const BESummaryPerkBlock_1 = require("./BESummaryPerkBlock");
const BESummaryPrivacyPolicy_1 = __importDefault(require("./BESummaryPrivacyPolicy"));
const BESummaryRoomRow_1 = __importDefault(require("./BESummaryRoomRow"));
const TransportDistanceFromHotelBlock_1 = __importDefault(require("./TransportDistanceFromHotelBlock"));
const Color_1 = require("../../util/Color");
const GetStepRoom_1 = __importDefault(require("../../util/GetStepRoom"));
const StringHelper_1 = __importDefault(require("../../util/StringHelper"));
const TextAlignment_1 = require("../../util/TextAlignment");
const AddonDiscountCalculator_1 = require("../../utils/AddonDiscountCalculator");
const GroupedCheckInOutTimes_1 = require("../generic/GroupedCheckInOutTimes/GroupedCheckInOutTimes");
const Pill_1 = __importStar(require("../generic/Pill"));
const TaxInclusionNotice_1 = require("../generic/TaxInclusionNotice/TaxInclusionNotice");
function BEMobileSummaryModal(props) {
    var _a, _b, _c, _d;
    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
    const { hotel } = (0, hooks_1.useCurrentHotel)();
    const selectedBasketRows = basketContext.getAllValidRows();
    const addons = basketContext.basketAddonRows;
    const { t } = (0, react_i18next_1.useTranslation)();
    const [mobileLayout, setMobileLayout] = (0, react_1.useState)({});
    (0, react_1.useEffect)(() => {
        // We do this hacky thing since Mobile summary & Desktop summary are almost identical, just blocks are presented differently
        const newLayout = Object.assign({}, BESummary_1.BESummaryLayoutOrder);
        newLayout.TransportDistanceBlock.component = (react_1.default.createElement("div", { className: "u-flex justify-content-center u-marg-top u-marg-bottom" },
            react_1.default.createElement("div", { className: "u-flex flex-row u-w-100" },
                react_1.default.createElement(TransportDistanceFromHotelBlock_1.default, { vertical: true, hotel: hotel }))));
        newLayout.PerksBlock.component = react_1.default.createElement(BESummaryPerkBlock_1.BESummaryPerkBlock, { size: "mobile" });
        setMobileLayout(newLayout);
    }, []);
    const { sortedComponents } = (0, hooks_1.useElementSort)(mobileLayout);
    const totalDays = basketContext.endDate ? basketContext.endDate.diff(basketContext.startDate, 'day') : 0;
    const addressLine1 = [(_a = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _a === void 0 ? void 0 : _a.line1, (_b = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _b === void 0 ? void 0 : _b.city];
    const addressLine2 = [(_c = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _c === void 0 ? void 0 : _c.postalCode, (_d = hotel === null || hotel === void 0 ? void 0 : hotel.address) === null || _d === void 0 ? void 0 : _d.state];
    const getAddressString = (val) => {
        const line = val.filter((it) => !!it && it !== '0').join(', ');
        if (line) {
            return react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, line);
        }
        return null;
    };
    const onCloseModalHandler = () => {
        return props.onClose ? props.onClose() : null;
    };
    const editOnClick = () => {
        var _a;
        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
    };
    const onEditPropertyClickedHandler = () => {
        var _a;
        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
    };
    const totalPrice = basketContext.getTotalPrice();
    const totalPayNow = basketContext.getTotalPayNow();
    const totalFees = basketContext.getTotalFees();
    const itemisedFees = basketContext.getItemisedFees();
    const depositFees = basketContext.getDepositQuoteFees();
    return (react_1.default.createElement(SimpleModal_1.default, { open: props.isOpen, title: t(Translation_1.Translation.Misc.Summary), onClose: onCloseModalHandler, mobileFooter: react_1.default.createElement("div", { className: "row align-items-center" },
            react_1.default.createElement("div", { className: "col-4" },
                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.Total)),
                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
                    react_1.default.createElement("strong", null, StringHelper_1.default.pluralWithDictAndCount(totalDays, Translation_1.Translation.Misc.Night, t)))),
            react_1.default.createElement("div", { className: "col-8 u-flex u-flex-direction-column align-items-end" },
                react_1.default.createElement(Headline_1.default, { bold: true, size: "normal", align: TextAlignment_1.TextAlign.Right },
                    react_1.default.createElement(Currency_1.default, null, totalPrice)),
                hotel && ccx.currentCurrency !== (hotel === null || hotel === void 0 ? void 0 : hotel.defaultCurrency) && (react_1.default.createElement("div", { className: "u-align-right rs-summary-currency-display-enhancements--mobile" },
                    react_1.default.createElement(Pill_1.default, { type: Pill_1.PillType.Grey },
                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, align: TextAlignment_1.TextAlign.Right, inline: true },
                            react_1.default.createElement(Currency_1.default, { toCurrencyCode: hotel.defaultCurrency }, basketContext.getTotalPrice()))))),
                react_1.default.createElement(Text_1.default, { color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right },
                    react_1.default.createElement(TaxInclusionNotice_1.TaxInclusionNotice, null)))) },
        react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: "container" },
                react_1.default.createElement(GroupedCheckInOutTimes_1.GroupedCheckInOutTimes, { hotel: hotel, wrapperClassName: "row u-border-bottom u-pad-top-bottom", colClassName: "col-6", CheckInRender: () => (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey },
                        react_1.default.createElement("strong", null, t(Translation_1.Translation.Misc.CheckIn)))), CheckOutRender: () => (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Grey },
                        react_1.default.createElement("strong", null, t(Translation_1.Translation.Misc.CheckOut)))), LineRender: ({ line }) => react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, line) }),
                react_1.default.createElement("div", { className: "row u-border-bottom u-pad be-mobile-summary-select-date-header", style: { width: 'unset' } },
                    react_1.default.createElement("div", { style: { flex: 1 } },
                        react_1.default.createElement("div", { className: "u-flex u-flex-flex-start" },
                            react_1.default.createElement(Text_1.default, { className: "select-date-header-title" },
                                react_1.default.createElement("span", Object.assign({}, (basketContext.startDate
                                    ? {
                                        style: {
                                            color: Color_1.Color.Accent,
                                            fontWeight: 'bold',
                                        },
                                    }
                                    : {})), basketContext.startDate ? basketContext.startDate.format('MMM D') : t(Translation_1.Translation.Step.Date.Arrival))),
                            react_1.default.createElement("span", { className: "u-marg-left-right--light" },
                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: "18px", color: Color_1.Color.DarkGrey })),
                            react_1.default.createElement(Text_1.default, { className: "select-date-header-title" },
                                react_1.default.createElement("span", Object.assign({}, (basketContext.endDate
                                    ? {
                                        style: {
                                            color: Color_1.Color.Accent,
                                            fontWeight: 'bold',
                                        },
                                    }
                                    : {})), basketContext.endDate ? basketContext.endDate.format('MMM D') : t(Translation_1.Translation.Step.Date.Departure)))),
                        react_1.default.createElement(Text_1.default, { className: "select-date-header-subtitle" },
                            basketContext.getNumberOfAdults(true),
                            ",\u00A0",
                            basketContext.getNumberOfChildren(true),
                            ",\u00A0",
                            basketContext.getNumberOfRooms(true))),
                    react_1.default.createElement("div", { className: "u-align-right" },
                        react_1.default.createElement(react_router_dom_1.Link, { to: (0, GetStepRoom_1.default)().getStepUrl() },
                            react_1.default.createElement(BEButton_1.default, { onClick: editOnClick, size: "tiny" }, t(Translation_1.Translation.Misc.Edit).toUpperCase())))),
                selectedBasketRows && selectedBasketRows.length ? (react_1.default.createElement(react_1.default.Fragment, null,
                    selectedBasketRows.map((row, index) => {
                        if (!row.isValid())
                            return;
                        return (react_1.default.createElement(BESummaryRoomRow_1.default, { row: row, index: index, key: row.getID(), showImages: !!props.showImages, onEditPropertyClicked: onEditPropertyClickedHandler }));
                    }),
                    addons.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(LineBreak_1.default, { noMargins: true, darker: true }),
                        react_1.default.createElement("div", { className: "u-marg-top" },
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Thanks.AddOnItems)))),
                        AddonDiscountCalculator_1.AddonDiscountCalculator.calculateIndividualDiscounts(addons, selectedBasketRows, basketContext.promoCodeDetails).map(({ addon, remainingDiscount }) => {
                            const onRemoveClickHandler = () => {
                                return basketContext.removeBasketAddonRow(addon);
                            };
                            return (react_1.default.createElement(BESummaryAddonRow_1.default, { row: addon, key: addon.getID(), onRemoveClick: onRemoveClickHandler, promoCodeDetails: basketContext.promoCodeDetails, remainingDiscount: remainingDiscount }));
                        }))))) : (react_1.default.createElement("div", { className: "u-marg-bottom--heavy u-marg-top--heavy" },
                    react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Body }, t(Translation_1.Translation.Step.General.YourCartIsEmpty))),
                    react_1.default.createElement("div", { className: "rs-summary-hotel-location-map", style: { height: '150px', position: 'relative' } },
                        react_1.default.createElement(BEHotelLocationMapBlock_1.default, null)),
                    react_1.default.createElement("div", { className: "u-marg-top" },
                        react_1.default.createElement("div", { className: "u-marg-bottom" },
                            react_1.default.createElement(Text_1.default, { bold: true }, hotel === null || hotel === void 0 ? void 0 : hotel.name)),
                        getAddressString(addressLine1),
                        getAddressString(addressLine2)))),
                totalFees > 0 && !(itemisedFees === null || itemisedFees === void 0 ? void 0 : itemisedFees.length) && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("div", { className: "line-break", style: { marginTop: 0, marginBottom: '24px' } }),
                    react_1.default.createElement("div", { className: "u-flex" },
                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                            " ",
                            t(Translation_1.Translation.Step.Room.Summary.CreditCardSurcharge)),
                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                            react_1.default.createElement(Currency_1.default, null, totalFees))))),
                !!(itemisedFees === null || itemisedFees === void 0 ? void 0 : itemisedFees.length) && react_1.default.createElement(ItemisedFeesListing_1.ItemisedFeesListing, { fees: itemisedFees }),
                sortedComponents,
                react_1.default.createElement("div", { className: "u-marg-top--heavy u-marg-bottom--heavy" },
                    react_1.default.createElement(BESummaryPrivacyPolicy_1.default, null)),
                hotel && totalPayNow && (react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                    react_1.default.createElement("div", { className: "row align-items-center" },
                        (hotel === null || hotel === void 0 ? void 0 : hotel.rmsUseDepositQuote) && (react_1.default.createElement(react_1.default.Fragment, null,
                            react_1.default.createElement("div", { className: "col-12 u-marg-top--light" },
                                react_1.default.createElement("div", { className: "u-flex" },
                                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                        " ",
                                        t(Translation_1.Translation.Step.Room.Summary.CreditCardSurcharge)),
                                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                        react_1.default.createElement(Currency_1.default, null, depositFees)))),
                            react_1.default.createElement("div", { className: "line-break", style: { marginTop: 0, marginBottom: '8px' } }))),
                        react_1.default.createElement("div", { className: "col-12 u-marg-top--light u-marg-bottom--light" },
                            react_1.default.createElement("div", { className: "u-flex" },
                                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true }, t(Translation_1.Translation.Misc.PayNow)),
                                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true },
                                    react_1.default.createElement(Currency_1.default, null, totalPayNow)))))))))));
}
//# sourceMappingURL=BEMobileSummaryModal.js.map