@almatar/smart-booking-dashboard 0.0.2-alpha.6 → 0.0.2-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/hotel-cancel/components/almatar-hotel-auto-cancellation-result-overlay/almatar-hotel-auto-cancellation-result-overlay.component.mjs +16 -19
- package/esm2022/lib/components/hotel-cancel/components/almatar-hotel-auto-cancellation-select-rooms/almatar-hotel-auto-cancellation-select-rooms.component.mjs +3 -3
- package/fesm2022/almatar-smart-booking-dashboard.mjs +17 -20
- package/fesm2022/almatar-smart-booking-dashboard.mjs.map +1 -1
- package/lib/components/cancel-dialog/cancel-dialog.component.d.ts +2 -2
- package/lib/components/hotel-cancel/almatar-hotel-auto-cancellation.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -4107,7 +4107,7 @@ class AlmatarHotelAutoCancellationSelectRoomsComponent {
|
|
|
4107
4107
|
};
|
|
4108
4108
|
}
|
|
4109
4109
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationSelectRoomsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationSelectRoomsComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: { packages: { classPropertyName: "packages", publicName: "packages", isSignal: true, isRequired: true, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", isSignal: true, isRequired: true, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, hotelId: { classPropertyName: "hotelId", publicName: "hotelId", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continueToCancel: "continueToCancel", closeModal: "closeModal", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess", chatWithAgent: "chatWithAgent" }, ngImport: i0, template: "<div class=\"select-rooms\">\n <div class=\"select-rooms__content\">\n @if (hotelInfo(); as hotel) {\n <div class=\"hotel-info-card\">\n <h3 class=\"hotel-info-card__name\">{{ hotel.hotelName }}</h3>\n\n <div class=\"hotel-info-card__content\">\n @if (hotel.hotelImage) {\n <div class=\"hotel-info-card__image\">\n <img [src]=\"hotel.hotelImage\" [alt]=\"hotel.hotelName\" />\n </div>\n }\n\n <div class=\"hotel-info-card__dates\">\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-IN</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkIn).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkIn).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkIn).dayName\n }}</span>\n <span class=\"date-box__time\"\n >From\n {{ hotel?.checkInTime }}</span\n >\n </div>\n\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-OUT</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkOut).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkOut).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkOut).dayName\n }}</span>\n <span class=\"date-box__time\"\n >Until\n {{ hotel?.checkOutTime }}</span\n >\n </div>\n </div>\n\n <div class=\"hotel-info-card__stats\">\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">Rooms</span>\n <span class=\"stat-box__value\">{{ totalRoomsCount() }}</span>\n </div>\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">NIGHTS</span>\n <span class=\"stat-box__value\">{{ hotel.nights }}</span>\n </div>\n </div>\n </div>\n </div>\n }\n\n <div class=\"select-rooms__notice select-rooms__notice--default\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n />\n <path\n d=\"M12 11v5.5M12 8v.01\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span>\n Some rooms in each package, share one booking reference, so they will be cancelled together.</span\n >\n </div>\n\n <div class=\"rooms-list\">\n @for (package of displayPackages(); track $index) {\n @if (!package.manualRefundRequest && !package.isCancelled) {\n <almatar-hotel-auto-cancellation-refundable-room\n [package]=\"package\"\n [hideCheckbox]=\"isSinglePackage()\"\n (togglePackage)=\"togglePackage($event)\"\n />\n } @else {\n <almatar-hotel-auto-cancellation-non-refundable-room\n [package]=\"package\"\n [allPackages]=\"displayPackages()\"\n [hotelInfo]=\"hotelInfo()\"\n [hotelId]=\"hotelId()\"\n [currencyCode]=\"currencyCode()\"\n [allPackagesNonRefundable]=\"allPackagesNonRefundable()\"\n (closeModal)=\"onClose()\"\n (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n />\n }\n }\n </div>\n\n @if (allPackagesNonRefundable()) {\n <div class=\"select-rooms__notice select-rooms__notice--warning\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <!-- warning triangle icon -->\n <path\n d=\"M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <span>Sorry, we couldn't process your refund right now. Please chat with our Customer Service team for help.</span>\n </div>\n }\n </div>\n\n <div class=\"select-rooms__footer\">\n @if (allPackagesNonRefundable()) {\n <button\n class=\"main_btn main_btn--chat-with-us\"\n type=\"button\"\n (click)=\"onChatWithAgent()\"\n >\n Chat with customer service\n </button>\n } @else {\n @if (!hasSelectedPackages()) {\n <p class=\"select-rooms__hint\">\n Select at least one room to continue\n </p>\n }\n <button\n class=\"main_btn\"\n type=\"button\"\n [disabled]=\"!hasSelectedPackages()\"\n (click)=\"onContinue()\"\n >\n Continue to cancel\n </button>\n }\n </div>\n</div>\n", styles: [".select-rooms{display:flex;flex-direction:column;height:100%;background-color:#fff}.select-rooms__header{padding:16px;border-bottom:1px solid var(--almatar-neutral-border-default)}.select-rooms__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin:12px 0}.select-rooms__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.select-rooms__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.select-rooms__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.select-rooms__notice--default{background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f;border-radius:12px}.select-rooms__notice--default svg{color:#1b1a1f}.select-rooms__notice--warning{background:#faedcc;border:1px solid rgb(137,99,42);color:#89632a;border-radius:12px}.select-rooms__notice--warning svg{color:#89632a}.select-rooms__title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);margin-bottom:4px}.select-rooms__subtitle{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.select-rooms__content{flex:1;overflow-y:auto;padding:12px}.select-rooms__footer{padding:16px;background:var(--almatar-neutral-surface-card);border-top:1px solid rgb(217,217,222)}.select-rooms__hint{text-align:center;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);margin-bottom:12px}.hotel-info-card{background:var(--almatar-neutral-surface-card);border-radius:12px;padding:12px;margin-bottom:12px;border:1px solid rgb(217,217,222)}.hotel-info-card__name{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);margin-bottom:12px}.hotel-info-card__content{display:flex;align-items:stretch;gap:0}.hotel-info-card__image{width:120px;overflow:hidden;flex-shrink:0;padding-inline-end:12px;border-inline-end:1px solid rgb(217,217,222)}.hotel-info-card__image img{border-radius:5px;width:100%;height:100%;object-fit:cover;max-height:100px}.hotel-info-card__dates{display:flex;flex:1;border-inline-start:1px solid var(--almatar-neutral-border-default)}.hotel-info-card__stats{display:flex;flex-direction:column;justify-content:center;border-inline-start:1px solid var(--almatar-neutral-border-default);padding-inline-start:12px;margin-inline-start:0;min-width:70px}.date-box{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:0 12px;border-inline-end:1px solid rgb(217,217,222);gap:4px}.date-box__label{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px}.date-box__day{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#491d95;line-height:1.2}.date-box__month{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.date-box__day-name{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.date-box__time{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.stat-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0;border-bottom:1px solid rgb(217,217,222)}.stat-box:last-child{border-bottom:none}.stat-box__label{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-box__value{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);line-height:1.3;color:#491d95}.rooms-list{display:flex;flex-direction:column;gap:12px}.main_btn{font-weight:var(--almatar-font-weight-medium);padding:17.5px;border-radius:6px;display:block;width:100%}.main_btn:disabled{opacity:.5;cursor:not-allowed}.main_btn--chat-with-us{background-color:#fff;border:1px solid rgb(217,217,222);color:#1b1a1f}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{background-color:#747583;color:#b8b9c1;border-radius:12px}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlmatarHotelAutoCancellationRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-refundable-room", inputs: ["package", "hideCheckbox"], outputs: ["togglePackage"] }, { kind: "component", type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-non-refundable-room", inputs: ["package", "allPackages", "hotelInfo", "hotelId", "currencyCode", "allPackagesNonRefundable"], outputs: ["closeModal", "nonRefundableSubmitSuccess"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationSelectRoomsComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-select-rooms", inputs: { packages: { classPropertyName: "packages", publicName: "packages", isSignal: true, isRequired: true, transformFunction: null }, hotelInfo: { classPropertyName: "hotelInfo", publicName: "hotelInfo", isSignal: true, isRequired: true, transformFunction: null }, bookingId: { classPropertyName: "bookingId", publicName: "bookingId", isSignal: true, isRequired: false, transformFunction: null }, hotelId: { classPropertyName: "hotelId", publicName: "hotelId", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continueToCancel: "continueToCancel", closeModal: "closeModal", nonRefundableSubmitSuccess: "nonRefundableSubmitSuccess", chatWithAgent: "chatWithAgent" }, ngImport: i0, template: "<div class=\"select-rooms\">\n <div class=\"select-rooms__content\">\n @if (hotelInfo(); as hotel) {\n <div class=\"hotel-info-card\">\n <h3 class=\"hotel-info-card__name\">{{ hotel.hotelName }}</h3>\n\n <div class=\"hotel-info-card__content\">\n @if (hotel.hotelImage) {\n <div class=\"hotel-info-card__image\">\n <img [src]=\"hotel.hotelImage\" [alt]=\"hotel.hotelName\" />\n </div>\n }\n\n <div class=\"hotel-info-card__dates\">\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-IN</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkIn).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkIn).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkIn).dayName\n }}</span>\n <span class=\"date-box__time\"\n >From\n {{ hotel?.checkInTime }}</span\n >\n </div>\n\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-OUT</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkOut).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkOut).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkOut).dayName\n }}</span>\n <span class=\"date-box__time\"\n >Until\n {{ hotel?.checkOutTime }}</span\n >\n </div>\n </div>\n\n <div class=\"hotel-info-card__stats\">\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">Rooms</span>\n <span class=\"stat-box__value\">{{ totalRoomsCount() }}</span>\n </div>\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">NIGHTS</span>\n <span class=\"stat-box__value\">{{ hotel.nights }}</span>\n </div>\n </div>\n </div>\n </div>\n }\n\n <div class=\"select-rooms__notice select-rooms__notice--default\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n />\n <path\n d=\"M12 11v5.5M12 8v.01\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span>\n Some rooms in each package, share one booking reference, so they will be cancelled together.</span\n >\n </div>\n\n <div class=\"rooms-list\">\n @for (package of displayPackages(); track $index) {\n @if (!package.manualRefundRequest && !package.isCancelled) {\n <almatar-hotel-auto-cancellation-refundable-room\n [package]=\"package\"\n [hideCheckbox]=\"isSinglePackage()\"\n (togglePackage)=\"togglePackage($event)\"\n />\n } @else {\n <almatar-hotel-auto-cancellation-non-refundable-room\n [package]=\"package\"\n [allPackages]=\"displayPackages()\"\n [hotelInfo]=\"hotelInfo()\"\n [hotelId]=\"hotelId()\"\n [currencyCode]=\"currencyCode()\"\n [allPackagesNonRefundable]=\"allPackagesNonRefundable()\"\n (closeModal)=\"onClose()\"\n (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n />\n }\n }\n </div>\n\n @if (allPackagesNonRefundable()) {\n <div class=\"select-rooms__notice select-rooms__notice--warning\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <!-- warning triangle icon -->\n <path\n d=\"M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <span>Sorry, we couldn't process your refund right now. Please chat with our Customer Service team for help.</span>\n </div>\n }\n </div>\n\n <div class=\"select-rooms__footer\">\n @if (allPackagesNonRefundable()) {\n \n } @else {\n @if (!hasSelectedPackages()) {\n <p class=\"select-rooms__hint\">\n Select at least one room to continue\n </p>\n }\n <button\n class=\"main_btn\"\n type=\"button\"\n [disabled]=\"!hasSelectedPackages()\"\n (click)=\"onContinue()\"\n >\n Continue to cancel\n </button>\n }\n </div>\n</div>\n", styles: [".select-rooms{display:flex;flex-direction:column;height:100%;background-color:#fff}.select-rooms__header{padding:16px;border-bottom:1px solid var(--almatar-neutral-border-default)}.select-rooms__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin:12px 0}.select-rooms__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.select-rooms__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.select-rooms__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.select-rooms__notice--default{background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f;border-radius:12px}.select-rooms__notice--default svg{color:#1b1a1f}.select-rooms__notice--warning{background:#faedcc;border:1px solid rgb(137,99,42);color:#89632a;border-radius:12px}.select-rooms__notice--warning svg{color:#89632a}.select-rooms__title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);margin-bottom:4px}.select-rooms__subtitle{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.select-rooms__content{flex:1;overflow-y:auto;padding:12px}.select-rooms__footer{padding:16px;background:var(--almatar-neutral-surface-card);border-top:1px solid rgb(217,217,222)}.select-rooms__hint{text-align:center;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);margin-bottom:12px}.hotel-info-card{background:var(--almatar-neutral-surface-card);border-radius:12px;padding:12px;margin-bottom:12px;border:1px solid rgb(217,217,222)}.hotel-info-card__name{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);margin-bottom:12px}.hotel-info-card__content{display:flex;align-items:stretch;gap:0}.hotel-info-card__image{width:120px;overflow:hidden;flex-shrink:0;padding-inline-end:12px;border-inline-end:1px solid rgb(217,217,222)}.hotel-info-card__image img{border-radius:5px;width:100%;height:100%;object-fit:cover;max-height:100px}.hotel-info-card__dates{display:flex;flex:1;border-inline-start:1px solid var(--almatar-neutral-border-default)}.hotel-info-card__stats{display:flex;flex-direction:column;justify-content:center;border-inline-start:1px solid var(--almatar-neutral-border-default);padding-inline-start:12px;margin-inline-start:0;min-width:70px}.date-box{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:0 12px;border-inline-end:1px solid rgb(217,217,222);gap:4px}.date-box__label{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px}.date-box__day{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#491d95;line-height:1.2}.date-box__month{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.date-box__day-name{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.date-box__time{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.stat-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0;border-bottom:1px solid rgb(217,217,222)}.stat-box:last-child{border-bottom:none}.stat-box__label{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-box__value{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);line-height:1.3;color:#491d95}.rooms-list{display:flex;flex-direction:column;gap:12px}.main_btn{font-weight:var(--almatar-font-weight-medium);padding:17.5px;border-radius:6px;display:block;width:100%}.main_btn:disabled{opacity:.5;cursor:not-allowed}.main_btn--chat-with-us{background-color:#fff;border:1px solid rgb(217,217,222);color:#1b1a1f}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{background-color:#747583;color:#b8b9c1;border-radius:12px}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AlmatarHotelAutoCancellationRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-refundable-room", inputs: ["package", "hideCheckbox"], outputs: ["togglePackage"] }, { kind: "component", type: AlmatarHotelAutoCancellationNonRefundableRoomComponent, selector: "almatar-hotel-auto-cancellation-non-refundable-room", inputs: ["package", "allPackages", "hotelInfo", "hotelId", "currencyCode", "allPackagesNonRefundable"], outputs: ["closeModal", "nonRefundableSubmitSuccess"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4111
4111
|
}
|
|
4112
4112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationSelectRoomsComponent, decorators: [{
|
|
4113
4113
|
type: Component,
|
|
@@ -4115,7 +4115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
4115
4115
|
CommonModule,
|
|
4116
4116
|
AlmatarHotelAutoCancellationRefundableRoomComponent,
|
|
4117
4117
|
AlmatarHotelAutoCancellationNonRefundableRoomComponent,
|
|
4118
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-rooms\">\n <div class=\"select-rooms__content\">\n @if (hotelInfo(); as hotel) {\n <div class=\"hotel-info-card\">\n <h3 class=\"hotel-info-card__name\">{{ hotel.hotelName }}</h3>\n\n <div class=\"hotel-info-card__content\">\n @if (hotel.hotelImage) {\n <div class=\"hotel-info-card__image\">\n <img [src]=\"hotel.hotelImage\" [alt]=\"hotel.hotelName\" />\n </div>\n }\n\n <div class=\"hotel-info-card__dates\">\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-IN</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkIn).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkIn).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkIn).dayName\n }}</span>\n <span class=\"date-box__time\"\n >From\n {{ hotel?.checkInTime }}</span\n >\n </div>\n\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-OUT</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkOut).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkOut).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkOut).dayName\n }}</span>\n <span class=\"date-box__time\"\n >Until\n {{ hotel?.checkOutTime }}</span\n >\n </div>\n </div>\n\n <div class=\"hotel-info-card__stats\">\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">Rooms</span>\n <span class=\"stat-box__value\">{{ totalRoomsCount() }}</span>\n </div>\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">NIGHTS</span>\n <span class=\"stat-box__value\">{{ hotel.nights }}</span>\n </div>\n </div>\n </div>\n </div>\n }\n\n <div class=\"select-rooms__notice select-rooms__notice--default\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n />\n <path\n d=\"M12 11v5.5M12 8v.01\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span>\n Some rooms in each package, share one booking reference, so they will be cancelled together.</span\n >\n </div>\n\n <div class=\"rooms-list\">\n @for (package of displayPackages(); track $index) {\n @if (!package.manualRefundRequest && !package.isCancelled) {\n <almatar-hotel-auto-cancellation-refundable-room\n [package]=\"package\"\n [hideCheckbox]=\"isSinglePackage()\"\n (togglePackage)=\"togglePackage($event)\"\n />\n } @else {\n <almatar-hotel-auto-cancellation-non-refundable-room\n [package]=\"package\"\n [allPackages]=\"displayPackages()\"\n [hotelInfo]=\"hotelInfo()\"\n [hotelId]=\"hotelId()\"\n [currencyCode]=\"currencyCode()\"\n [allPackagesNonRefundable]=\"allPackagesNonRefundable()\"\n (closeModal)=\"onClose()\"\n (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n />\n }\n }\n </div>\n\n @if (allPackagesNonRefundable()) {\n <div class=\"select-rooms__notice select-rooms__notice--warning\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <!-- warning triangle icon -->\n <path\n d=\"M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <span>Sorry, we couldn't process your refund right now. Please chat with our Customer Service team for help.</span>\n </div>\n }\n </div>\n\n <div class=\"select-rooms__footer\">\n @if (allPackagesNonRefundable()) {\n <button\n class=\"main_btn main_btn--chat-with-us\"\n type=\"button\"\n (click)=\"onChatWithAgent()\"\n >\n Chat with customer service\n </button>\n } @else {\n @if (!hasSelectedPackages()) {\n <p class=\"select-rooms__hint\">\n Select at least one room to continue\n </p>\n }\n <button\n class=\"main_btn\"\n type=\"button\"\n [disabled]=\"!hasSelectedPackages()\"\n (click)=\"onContinue()\"\n >\n Continue to cancel\n </button>\n }\n </div>\n</div>\n", styles: [".select-rooms{display:flex;flex-direction:column;height:100%;background-color:#fff}.select-rooms__header{padding:16px;border-bottom:1px solid var(--almatar-neutral-border-default)}.select-rooms__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin:12px 0}.select-rooms__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.select-rooms__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.select-rooms__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.select-rooms__notice--default{background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f;border-radius:12px}.select-rooms__notice--default svg{color:#1b1a1f}.select-rooms__notice--warning{background:#faedcc;border:1px solid rgb(137,99,42);color:#89632a;border-radius:12px}.select-rooms__notice--warning svg{color:#89632a}.select-rooms__title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);margin-bottom:4px}.select-rooms__subtitle{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.select-rooms__content{flex:1;overflow-y:auto;padding:12px}.select-rooms__footer{padding:16px;background:var(--almatar-neutral-surface-card);border-top:1px solid rgb(217,217,222)}.select-rooms__hint{text-align:center;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);margin-bottom:12px}.hotel-info-card{background:var(--almatar-neutral-surface-card);border-radius:12px;padding:12px;margin-bottom:12px;border:1px solid rgb(217,217,222)}.hotel-info-card__name{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);margin-bottom:12px}.hotel-info-card__content{display:flex;align-items:stretch;gap:0}.hotel-info-card__image{width:120px;overflow:hidden;flex-shrink:0;padding-inline-end:12px;border-inline-end:1px solid rgb(217,217,222)}.hotel-info-card__image img{border-radius:5px;width:100%;height:100%;object-fit:cover;max-height:100px}.hotel-info-card__dates{display:flex;flex:1;border-inline-start:1px solid var(--almatar-neutral-border-default)}.hotel-info-card__stats{display:flex;flex-direction:column;justify-content:center;border-inline-start:1px solid var(--almatar-neutral-border-default);padding-inline-start:12px;margin-inline-start:0;min-width:70px}.date-box{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:0 12px;border-inline-end:1px solid rgb(217,217,222);gap:4px}.date-box__label{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px}.date-box__day{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#491d95;line-height:1.2}.date-box__month{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.date-box__day-name{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.date-box__time{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.stat-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0;border-bottom:1px solid rgb(217,217,222)}.stat-box:last-child{border-bottom:none}.stat-box__label{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-box__value{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);line-height:1.3;color:#491d95}.rooms-list{display:flex;flex-direction:column;gap:12px}.main_btn{font-weight:var(--almatar-font-weight-medium);padding:17.5px;border-radius:6px;display:block;width:100%}.main_btn:disabled{opacity:.5;cursor:not-allowed}.main_btn--chat-with-us{background-color:#fff;border:1px solid rgb(217,217,222);color:#1b1a1f}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{background-color:#747583;color:#b8b9c1;border-radius:12px}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}\n"] }]
|
|
4118
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select-rooms\">\n <div class=\"select-rooms__content\">\n @if (hotelInfo(); as hotel) {\n <div class=\"hotel-info-card\">\n <h3 class=\"hotel-info-card__name\">{{ hotel.hotelName }}</h3>\n\n <div class=\"hotel-info-card__content\">\n @if (hotel.hotelImage) {\n <div class=\"hotel-info-card__image\">\n <img [src]=\"hotel.hotelImage\" [alt]=\"hotel.hotelName\" />\n </div>\n }\n\n <div class=\"hotel-info-card__dates\">\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-IN</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkIn).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkIn).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkIn).dayName\n }}</span>\n <span class=\"date-box__time\"\n >From\n {{ hotel?.checkInTime }}</span\n >\n </div>\n\n <div class=\"date-box\">\n <span class=\"date-box__label\">CHECK-OUT</span>\n <span class=\"date-box__day\">{{\n formatDate(hotel.checkOut).day\n }}</span>\n <span class=\"date-box__month\">{{\n formatDate(hotel.checkOut).month\n }}</span>\n <span class=\"date-box__day-name\">{{\n formatDate(hotel.checkOut).dayName\n }}</span>\n <span class=\"date-box__time\"\n >Until\n {{ hotel?.checkOutTime }}</span\n >\n </div>\n </div>\n\n <div class=\"hotel-info-card__stats\">\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">Rooms</span>\n <span class=\"stat-box__value\">{{ totalRoomsCount() }}</span>\n </div>\n <div class=\"stat-box\">\n <span class=\"stat-box__label\">NIGHTS</span>\n <span class=\"stat-box__value\">{{ hotel.nights }}</span>\n </div>\n </div>\n </div>\n </div>\n }\n\n <div class=\"select-rooms__notice select-rooms__notice--default\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n />\n <path\n d=\"M12 11v5.5M12 8v.01\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n />\n </svg>\n <span>\n Some rooms in each package, share one booking reference, so they will be cancelled together.</span\n >\n </div>\n\n <div class=\"rooms-list\">\n @for (package of displayPackages(); track $index) {\n @if (!package.manualRefundRequest && !package.isCancelled) {\n <almatar-hotel-auto-cancellation-refundable-room\n [package]=\"package\"\n [hideCheckbox]=\"isSinglePackage()\"\n (togglePackage)=\"togglePackage($event)\"\n />\n } @else {\n <almatar-hotel-auto-cancellation-non-refundable-room\n [package]=\"package\"\n [allPackages]=\"displayPackages()\"\n [hotelInfo]=\"hotelInfo()\"\n [hotelId]=\"hotelId()\"\n [currencyCode]=\"currencyCode()\"\n [allPackagesNonRefundable]=\"allPackagesNonRefundable()\"\n (closeModal)=\"onClose()\"\n (nonRefundableSubmitSuccess)=\"onNonRefundableSubmitSuccess($event)\"\n />\n }\n }\n </div>\n\n @if (allPackagesNonRefundable()) {\n <div class=\"select-rooms__notice select-rooms__notice--warning\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n <!-- warning triangle icon -->\n <path\n d=\"M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <span>Sorry, we couldn't process your refund right now. Please chat with our Customer Service team for help.</span>\n </div>\n }\n </div>\n\n <div class=\"select-rooms__footer\">\n @if (allPackagesNonRefundable()) {\n \n } @else {\n @if (!hasSelectedPackages()) {\n <p class=\"select-rooms__hint\">\n Select at least one room to continue\n </p>\n }\n <button\n class=\"main_btn\"\n type=\"button\"\n [disabled]=\"!hasSelectedPackages()\"\n (click)=\"onContinue()\"\n >\n Continue to cancel\n </button>\n }\n </div>\n</div>\n", styles: [".select-rooms{display:flex;flex-direction:column;height:100%;background-color:#fff}.select-rooms__header{padding:16px;border-bottom:1px solid var(--almatar-neutral-border-default)}.select-rooms__notice{display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:400;margin:12px 0}.select-rooms__notice svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.select-rooms__notice--info{background:var(--almatar-info-surface, #eaf2ff);border:1px solid var(--almatar-info-border, #b9d6ff);color:var(--almatar-info-text, #1a56db);border-radius:12px}.select-rooms__notice--info svg{color:var(--almatar-info-icon, #1a56db)}.select-rooms__notice--default{background:#f7f7f8;border:1px solid rgb(217,217,222);color:#1b1a1f;border-radius:12px}.select-rooms__notice--default svg{color:#1b1a1f}.select-rooms__notice--warning{background:#faedcc;border:1px solid rgb(137,99,42);color:#89632a;border-radius:12px}.select-rooms__notice--warning svg{color:#89632a}.select-rooms__title{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:var(--almatar-neutral-text-primary-static);margin-bottom:4px}.select-rooms__subtitle{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static)}.select-rooms__content{flex:1;overflow-y:auto;padding:12px}.select-rooms__footer{padding:16px;background:var(--almatar-neutral-surface-card);border-top:1px solid rgb(217,217,222)}.select-rooms__hint{text-align:center;font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);margin-bottom:12px}.hotel-info-card{background:var(--almatar-neutral-surface-card);border-radius:12px;padding:12px;margin-bottom:12px;border:1px solid rgb(217,217,222)}.hotel-info-card__name{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);margin-bottom:12px}.hotel-info-card__content{display:flex;align-items:stretch;gap:0}.hotel-info-card__image{width:120px;overflow:hidden;flex-shrink:0;padding-inline-end:12px;border-inline-end:1px solid rgb(217,217,222)}.hotel-info-card__image img{border-radius:5px;width:100%;height:100%;object-fit:cover;max-height:100px}.hotel-info-card__dates{display:flex;flex:1;border-inline-start:1px solid var(--almatar-neutral-border-default)}.hotel-info-card__stats{display:flex;flex-direction:column;justify-content:center;border-inline-start:1px solid var(--almatar-neutral-border-default);padding-inline-start:12px;margin-inline-start:0;min-width:70px}.date-box{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:0 12px;border-inline-end:1px solid rgb(217,217,222);gap:4px}.date-box__label{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px}.date-box__day{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#491d95;line-height:1.2}.date-box__month{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.date-box__day-name{font-size:calc(10 * var(--almatar-font-size-ratio, 1) * 1px);color:#747583}.date-box__time{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-regular);color:var(--almatar-neutral-text-primary-static)}.stat-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0;border-bottom:1px solid rgb(217,217,222)}.stat-box:last-child{border-bottom:none}.stat-box__label{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);color:var(--almatar-neutral-text-secondary-static);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-box__value{font-size:calc(18 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:var(--almatar-neutral-text-primary-static);line-height:1.3;color:#491d95}.rooms-list{display:flex;flex-direction:column;gap:12px}.main_btn{font-weight:var(--almatar-font-weight-medium);padding:17.5px;border-radius:6px;display:block;width:100%}.main_btn:disabled{opacity:.5;cursor:not-allowed}.main_btn--chat-with-us{background-color:#fff;border:1px solid rgb(217,217,222);color:#1b1a1f}button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{background-color:#747583;color:#b8b9c1;border-radius:12px}.info-banner{display:flex;gap:8px;border:1px solid rgb(11,84,194);border-radius:12px;padding:14px;align-items:flex-start;transition:all .3s cubic-bezier(.4,0,.2,1)}.info-banner__icon{color:#0b54c2;flex-shrink:0;width:20px;height:20px}.info-banner__content{flex:1}.info-banner__text{font-size:calc(12 * var(--almatar-font-size-ratio, 1) * 1px);color:#0b54c2;margin:0 0 4px;font-weight:var(--almatar-font-weight-regular);line-height:16px}.info-banner__subtext{font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);color:#1b1a1f;margin:0;line-height:1.4}\n"] }]
|
|
4119
4119
|
}], ctorParameters: () => [] });
|
|
4120
4120
|
|
|
4121
4121
|
class ExchangePipe {
|
|
@@ -5044,17 +5044,17 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5044
5044
|
// Add wallet points as first sub-item if there are loyalty programs
|
|
5045
5045
|
if (hasLoyaltyPrograms && breakdown.wallet > 0) {
|
|
5046
5046
|
loyaltySubItems.push({
|
|
5047
|
-
label:
|
|
5047
|
+
label: 'Almatar wallet points',
|
|
5048
5048
|
value: breakdown.wallet,
|
|
5049
5049
|
});
|
|
5050
5050
|
}
|
|
5051
5051
|
// Add all loyalty programs as sub-items
|
|
5052
5052
|
loyaltySubItems.push(...loyaltyPrograms);
|
|
5053
5053
|
rows.push({
|
|
5054
|
-
label:
|
|
5054
|
+
label: 'Your Almatar Wallet',
|
|
5055
5055
|
value: walletTotal,
|
|
5056
5056
|
instant: true,
|
|
5057
|
-
badgeKey: '
|
|
5057
|
+
badgeKey: 'Instant',
|
|
5058
5058
|
isWallet: true,
|
|
5059
5059
|
hasLoyaltyNote: hasLoyaltyPrograms,
|
|
5060
5060
|
loyaltySubItems: loyaltySubItems.length > 1 ? loyaltySubItems : undefined,
|
|
@@ -5063,10 +5063,10 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5063
5063
|
// Card refund
|
|
5064
5064
|
if (breakdown.card > 0) {
|
|
5065
5065
|
rows.push({
|
|
5066
|
-
label:
|
|
5066
|
+
label: 'Original Payment Method',
|
|
5067
5067
|
value: breakdown.card,
|
|
5068
5068
|
instant: false,
|
|
5069
|
-
badgeKey: '
|
|
5069
|
+
badgeKey: 'Up to 15 business days, bank policy',
|
|
5070
5070
|
isWallet: false,
|
|
5071
5071
|
isInstallment: false,
|
|
5072
5072
|
});
|
|
@@ -5077,7 +5077,7 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5077
5077
|
label: this.getPaymentMethodLabel(PaymentGatewayCode.Tabby) || 'Tabby',
|
|
5078
5078
|
value: breakdown.tabby,
|
|
5079
5079
|
instant: false,
|
|
5080
|
-
badgeKey: '
|
|
5080
|
+
badgeKey: 'From 5-7 business days',
|
|
5081
5081
|
isWallet: false,
|
|
5082
5082
|
isInstallment: true,
|
|
5083
5083
|
});
|
|
@@ -5088,7 +5088,7 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5088
5088
|
label: this.getPaymentMethodLabel(PaymentGatewayCode.Tamara) || 'Tamara',
|
|
5089
5089
|
value: breakdown.tamara,
|
|
5090
5090
|
instant: false,
|
|
5091
|
-
badgeKey: '
|
|
5091
|
+
badgeKey: 'Up to 10 business days',
|
|
5092
5092
|
isWallet: false,
|
|
5093
5093
|
isInstallment: true,
|
|
5094
5094
|
});
|
|
@@ -5098,13 +5098,13 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5098
5098
|
const isWallet = preferredMethod === 'wallet';
|
|
5099
5099
|
rows.push({
|
|
5100
5100
|
label: isWallet
|
|
5101
|
-
?
|
|
5102
|
-
:
|
|
5101
|
+
? 'Your Almatar Wallet'
|
|
5102
|
+
: 'Original Payment Method',
|
|
5103
5103
|
value: response.data.refund.amount,
|
|
5104
5104
|
instant: isWallet,
|
|
5105
5105
|
badgeKey: isWallet
|
|
5106
|
-
? '
|
|
5107
|
-
: '
|
|
5106
|
+
? 'Instant'
|
|
5107
|
+
: 'Up to 15 business days, bank policy',
|
|
5108
5108
|
isWallet,
|
|
5109
5109
|
});
|
|
5110
5110
|
}
|
|
@@ -5131,8 +5131,7 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5131
5131
|
return loyaltyPrograms;
|
|
5132
5132
|
}
|
|
5133
5133
|
getLoyaltyProgramLabel(code, fallbackName) {
|
|
5134
|
-
const
|
|
5135
|
-
const pointsLabel = isArabic ? 'نقاط' : 'points';
|
|
5134
|
+
const pointsLabel = 'points';
|
|
5136
5135
|
const gatewayLabel = this.getPaymentMethodLabel(code);
|
|
5137
5136
|
const programName = gatewayLabel || fallbackName;
|
|
5138
5137
|
return `${programName} ${pointsLabel}`;
|
|
@@ -5145,9 +5144,7 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5145
5144
|
if (!entry) {
|
|
5146
5145
|
return '';
|
|
5147
5146
|
}
|
|
5148
|
-
return
|
|
5149
|
-
? entry.ar
|
|
5150
|
-
: entry.en;
|
|
5147
|
+
return entry.en;
|
|
5151
5148
|
}
|
|
5152
5149
|
isWalletRow(row) {
|
|
5153
5150
|
return row.isWallet === true;
|
|
@@ -5162,7 +5159,7 @@ class AlmatarHotelAutoCancellationResultOverlayComponent {
|
|
|
5162
5159
|
this.done.emit();
|
|
5163
5160
|
}
|
|
5164
5161
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationResultOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationResultOverlayComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-result-overlay", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, currencyObj: { classPropertyName: "currencyObj", publicName: "currencyObj", isSignal: true, isRequired: false, transformFunction: null }, refundMethod: { classPropertyName: "refundMethod", publicName: "refundMethod", isSignal: true, isRequired: false, transformFunction: null }, apiResponse: { classPropertyName: "apiResponse", publicName: "apiResponse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { done: "done" }, ngImport: i0, template: "<div class=\"result-overlay\" [class.result-overlay--visible]=\"visible()\">\n <div class=\"result-overlay__backdrop\"></div>\n <div class=\"result-overlay__modal\">\n <div class=\"result-overlay__hero\">\n <span class=\"result-overlay__icon result-overlay__icon--green\">\n <svg\n width=\"114\"\n height=\"114\"\n viewBox=\"0 0 114 114\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"57\" cy=\"57\" r=\"42\" fill=\"#6DE197\" />\n <path\n d=\"M71.417 43.5774C73.169 41.8254 76.0097 41.8254 77.7617 43.5774C79.5134 45.3294 79.5136 48.1702 77.7617 49.9221L55.4248 72.2581C54.5835 73.0992 53.4426 73.5715 52.2529 73.5715C51.0632 73.5715 49.9224 73.0992 49.0811 72.2581L36.3174 59.4944C34.5654 57.7424 34.5654 54.9017 36.3174 53.1497C38.0694 51.3978 40.9102 51.3977 42.6621 53.1497L52.041 62.5286C52.0973 62.5848 52.1734 62.6165 52.2529 62.6165C52.3325 62.6164 52.4086 62.5848 52.4648 62.5286L71.417 43.5774Z\"\n fill=\"url(#paint0_linear_hotel_result)\"\n fill-opacity=\"0.9\"\n stroke=\"url(#paint1_linear_hotel_result)\"\n stroke-width=\"0.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_hotel_result\"\n x1=\"41.6842\"\n y1=\"54.1291\"\n x2=\"111.486\"\n y2=\"62.3784\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_hotel_result\"\n x1=\"42.6803\"\n y1=\"51.352\"\n x2=\"61.1185\"\n y2=\"79.3662\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n <h3 class=\"result-overlay__title\">\n {{ isNilRefund() ? 'Cancellation Confirmed' : 'Refund Confirmed' }}\n </h3>\n </div>\n\n @for (row of refundRows(); track $index) {\n <div\n class=\"result-overlay__row\"\n [class.result-overlay__row--with-breakdown]=\"\n row.loyaltySubItems?.length\n \"\n >\n <!-- Wallet Icon -->\n @if (isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 22 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_wallet_result)\">\n <path\n d=\"M2.67627 20.8852C1.74854 20.8852 1.04655 20.6533 0.570312 20.1894C0.10026 19.7256 -0.134766 19.0359 -0.134766 18.1206V8.51852C-0.134766 7.77015 0.0260417 7.1764 0.347656 6.73727C0.675456 6.29815 1.1888 5.97344 1.8877 5.76315L13.7812 2.3027C14.4554 2.11097 15.0584 2.06149 15.5903 2.15427C16.1284 2.24704 16.549 2.49443 16.8521 2.89645C17.1613 3.29229 17.3159 3.85511 17.3159 4.58493V6.25485L15.8037 6.38473V4.45505C15.8037 4.04684 15.6893 3.76543 15.4604 3.61081C15.2316 3.45619 14.8945 3.44382 14.4492 3.5737L7.27783 5.55905C7.19124 5.5776 7.15104 5.61471 7.15723 5.67038C7.16341 5.71986 7.20671 5.7446 7.28711 5.7446H17.5942C18.5282 5.7446 19.2271 5.97962 19.6909 6.44968C20.161 6.91354 20.396 7.60316 20.396 8.51852V10.8564H18.8931V8.60202C18.8931 8.15671 18.7786 7.81963 18.5498 7.59079C18.321 7.36195 17.9932 7.24753 17.5664 7.24753H2.69482C2.26807 7.24753 1.94027 7.36195 1.71143 7.59079C1.48877 7.81963 1.37744 8.15671 1.37744 8.60202V18.0371C1.37744 18.4824 1.48877 18.8164 1.71143 19.039C1.94027 19.2679 2.26807 19.3823 2.69482 19.3823H17.5664C17.9932 19.3823 18.321 19.2679 18.5498 19.039C18.7786 18.8164 18.8931 18.4824 18.8931 18.0371V15.4394H20.396V18.1206C20.396 19.0359 20.161 19.7256 19.6909 20.1894C19.2271 20.6533 18.5282 20.8852 17.5942 20.8852H2.67627ZM16.7686 14.2334C16.5088 14.2334 16.2861 14.1437 16.1006 13.9643C15.9212 13.7788 15.8315 13.5561 15.8315 13.2964C15.8315 13.0366 15.9212 12.817 16.1006 12.6377C16.2861 12.4521 16.5088 12.3593 16.7686 12.3593C17.0283 12.3593 17.2479 12.4521 17.4272 12.6377C17.6128 12.817 17.7056 13.0366 17.7056 13.2964C17.7056 13.5561 17.6128 13.7788 17.4272 13.9643C17.2479 14.1437 17.0283 14.2334 16.7686 14.2334ZM16.6758 16.2187C15.7419 16.2187 14.9873 15.9775 14.4121 15.4951C13.8369 15.0065 13.5493 14.2767 13.5493 13.3056C13.5493 12.3346 13.8369 11.6079 14.4121 11.1255C14.9873 10.643 15.7419 10.4018 16.6758 10.4018H20.1084C20.6898 10.4018 21.1475 10.5812 21.4814 10.9399C21.8216 11.2986 21.9917 11.7439 21.9917 12.2758V14.3354C21.9917 14.8673 21.8216 15.3157 21.4814 15.6806C21.1475 16.0394 20.6898 16.2187 20.1084 16.2187H16.6758ZM16.7686 14.9756H19.7837C20.1053 14.9756 20.3465 14.8921 20.5073 14.7251C20.6743 14.5519 20.7578 14.3138 20.7578 14.0107V12.6006C20.7578 12.2975 20.6743 12.0625 20.5073 11.8955C20.3465 11.7223 20.1053 11.6357 19.7837 11.6357H16.7686C16.1191 11.6357 15.6367 11.7841 15.3213 12.081C15.012 12.3779 14.8574 12.7861 14.8574 13.3056C14.8574 13.8252 15.012 14.2334 15.3213 14.5302C15.6367 14.8271 16.1191 14.9756 16.7686 14.9756Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_wallet_result\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n\n <!-- Card Icon -->\n @if (!isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n stroke=\"#1B1A1F\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n\n <span class=\"result-overlay__body\">\n <span class=\"result-overlay__method-name\">\n <span class=\"result-overlay__method-block\">\n {{ row.label }}\n\n @if (!isWalletRow(row) && !row?.isInstallment) {\n <span class=\"mada-logo\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"43\"\n height=\"15\"\n viewBox=\"0 0 43 15\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_19158_27303)\">\n <path\n d=\"M18.1894 8.65527H0V14.9943H18.1894V8.65527Z\"\n fill=\"#84B740\"\n />\n <path\n d=\"M18.1894 0H0V6.34463H18.1894V0Z\"\n fill=\"#259BD6\"\n />\n <path\n d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M41.651 13.7375L41.5754 13.7601L41.3053 13.8336C41.0515 13.9014 40.8247 13.9409 40.6519 13.9409C40.236 13.9409 39.9876 13.7262 39.9876 13.359C39.9876 13.1217 40.0902 12.7206 40.7707 12.7206H41.651V13.7375ZM41.0299 9.74316C40.4844 9.74316 39.9228 9.84486 39.2261 10.0708L38.7724 10.2121L38.9236 11.2855L39.3665 11.133C39.831 10.9748 40.4088 10.8731 40.8409 10.8731C41.0353 10.8731 41.6294 10.8731 41.6294 11.5454V11.8392H40.8031C39.2963 11.8392 38.5996 12.342 38.5996 13.4211C38.5996 14.342 39.2423 14.8957 40.3224 14.8957C40.6573 14.8957 41.1217 14.8279 41.5214 14.7262L41.543 14.7206L41.5646 14.7262L41.6996 14.7488C42.1208 14.8279 42.5583 14.907 42.9849 14.9918V11.4663C42.9849 10.3251 42.3261 9.74316 41.0299 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M31.1529 13.7375L31.0773 13.7601L30.8073 13.8336C30.5535 13.9014 30.332 13.9409 30.1538 13.9409C29.738 13.9409 29.4895 13.7262 29.4895 13.359C29.4895 13.1217 29.5921 12.7206 30.2672 12.7206H31.1475L31.1529 13.7375ZM30.5373 9.74316C29.9864 9.74316 29.4301 9.84486 28.7334 10.0708L28.2798 10.2121L28.431 11.2855L28.8739 11.133C29.3383 10.9748 29.9162 10.8731 30.3482 10.8731C30.5427 10.8731 31.1367 10.8731 31.1367 11.5454V11.8392H30.3104C28.8036 11.8392 28.1016 12.342 28.1016 13.4211C28.1016 14.342 28.7442 14.8957 29.8298 14.8957C30.1646 14.8957 30.6291 14.8279 31.0287 14.7262L31.0503 14.7206L31.0719 14.7262L31.2015 14.7488C31.6282 14.8279 32.0602 14.907 32.4869 14.9974V11.472C32.4923 10.3194 31.8334 9.74316 30.5373 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M28.4189 5.9087H28.4837C29.9905 5.9087 30.6925 5.38893 30.6925 4.10644C30.6925 3.18554 30.0499 2.45108 28.9697 2.45108H27.5818C27.1659 2.45108 26.9175 2.20249 26.9175 1.78441C26.9175 1.50192 27.0201 1.15164 27.7006 1.15164H30.7357C30.8006 0.739211 30.833 0.479324 30.8924 0.0668945H27.7384C26.2694 0.0668945 25.5295 0.710962 25.5295 1.78441C25.5295 2.84656 26.1722 3.40023 27.2523 3.40023H28.6403C29.0561 3.40023 29.3046 3.74486 29.3046 4.10644C29.3046 4.34373 29.202 4.83526 28.5269 4.83526H28.2947L23.8499 4.82396H23.0398C22.3539 4.82396 21.8733 4.41718 21.8733 3.47367V2.82396C21.8733 1.84091 22.2459 1.23074 23.0398 1.23074H24.3576C24.417 0.812657 24.4548 0.547121 24.5088 0.15164H22.867H22.7104C21.3656 0.15164 20.4367 1.09514 20.4043 2.73921V2.80136V3.47367C20.4367 5.11774 21.3656 5.90305 22.7104 5.90305H22.867H24.0227L26.4314 5.9087H27.868H28.4189Z\"\n fill=\"#747583\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_19158_27303\">\n <rect width=\"43\" height=\"15\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n </span>\n\n <strong class=\"result-overlay__amount\">\n {{\n row.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </strong>\n </span>\n\n <!-- Loyalty breakdown sub-items -->\n @if (row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-breakdown\">\n @for (subItem of row.loyaltySubItems; track $index) {\n <div class=\"result-overlay__loyalty-item\">\n <span class=\"result-overlay__loyalty-label\">{{\n subItem.label\n }}</span>\n <span class=\"result-overlay__loyalty-value\">\n {{\n subItem.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </span>\n </div>\n }\n </div>\n }\n\n <span\n class=\"result-overlay__badge\"\n [class.result-overlay__badge--instant]=\"row.instant\"\n [class.result-overlay__badge--days]=\"!row.instant\"\n >\n {{ row.badgeKey }}\n </span>\n\n <!-- Loyalty note -->\n @if (row.hasLoyaltyNote && row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-note\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n fill=\"#0B54C2\"\n />\n </svg>\n <span>Loyalty points will be refunded instantly to your account</span>\n </div>\n }\n </span>\n </div>\n }\n\n <button\n class=\"btn btn--primary result-overlay__done\"\n type=\"button\"\n (click)=\"onDone()\"\n >\n {{ 'GOT IT!' }}\n </button>\n </div>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.result-overlay{display:none;position:fixed;inset:0;z-index:99999999;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.result-overlay--visible{display:flex;animation:fadeIn .3s ease-out}.result-overlay :is(strong,span):has(>app-currency-code-icon){direction:ltr;display:inline-flex;align-items:center;gap:4px}.result-overlay__backdrop{position:absolute;inset:0;background:linear-gradient(135deg,#0009,#00000073);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.result-overlay__modal{position:relative;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:32px 28px;border-radius:24px;background:linear-gradient(180deg,#fff,#fafafa);box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.result-overlay__modal::-webkit-scrollbar{width:8px}.result-overlay__modal::-webkit-scrollbar-track{background:transparent;border-radius:10px;margin:8px 0}.result-overlay__modal::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px}.result-overlay__modal::-webkit-scrollbar-thumb:hover{background:#00000040}.result-overlay__hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 20px}.result-overlay__icon{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) .2s both}.result-overlay__icon--green:before{content:\"\";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,#6de19726,#6de19700 70%);animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1) .3s both}.result-overlay__icon svg{filter:drop-shadow(0 4px 12px rgba(109,225,151,.3))}.result-overlay__title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;margin:0;text-align:center;letter-spacing:-.02em}.result-overlay__row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.result-overlay__row:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aedcc,#10b981cc);transform:translate(-100%);transition:transform .3s ease}.result-overlay__row:hover{border-color:#7c3aed33;box-shadow:0 4px 12px #0000000d,0 0 0 1px #7c3aed0d;transform:translateY(-2px)}.result-overlay__row:hover:before{transform:translate(0)}.result-overlay__row--with-breakdown{padding:20px}.result-overlay__method-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid rgba(0,0,0,.06);color:#1a1a1a;box-shadow:0 2px 4px #0000000a}.result-overlay__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.result-overlay__method-name{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1a1a1a}.result-overlay__method-block{display:inline-flex;align-items:center;font-weight:500;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:#4a5568}.result-overlay__amount{display:inline-flex;align-items:center;gap:5px;font-size:calc(20 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}.result-overlay__badge{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:24px;transition:all .2s ease}.result-overlay__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid rgba(21,128,60,.2);box-shadow:0 2px 4px #15803c1a}.result-overlay__badge--days{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;border:1px solid rgba(30,64,175,.2);box-shadow:0 2px 4px #1e40af1a}.result-overlay__loyalty-breakdown{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px;background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-radius:12px;border:1px solid rgba(0,0,0,.05)}.result-overlay__loyalty-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 4px}.result-overlay__loyalty-label{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#6b7280}.result-overlay__loyalty-value{display:inline-flex;align-items:center;gap:4px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#374151;font-variant-numeric:tabular-nums;white-space:nowrap}.result-overlay__loyalty-note{display:flex;align-items:flex-start;gap:10px;width:100%;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#edf9ff,#e0f2fe);font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#0b54c2;line-height:1.5;border:1.5px solid rgba(11,84,194,.3);box-shadow:0 2px 8px #0b54c214}.result-overlay__loyalty-note svg{flex-shrink:0;margin-top:1px;width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(11,84,194,.2))}.result-overlay__done{min-height:56px;width:100%;border-radius:16px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);transition:all .3s cubic-bezier(.4,0,.2,1);border:none;letter-spacing:.01em}.result-overlay__done:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59}.result-overlay__done:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40}.btn{padding:16px 24px;border-radius:14px;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;border:none;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 4px 16px #7c3aed40,0 2px 4px #7c3aed26}.btn--primary:hover{background:linear-gradient(135deg,#6d28d9,#5b21b6);transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59,0 4px 8px #7c3aed33;color:#fff}.btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40,0 2px 4px #7c3aed26}.mada-logo{margin-inline-start:12px;display:inline-flex;align-items:center;padding:4px 8px;background:#ffffffe6;border-radius:6px;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ExchangePipeModule }, { kind: "pipe", type: ExchangeRoundPipe, name: "exchange_round" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5162
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlmatarHotelAutoCancellationResultOverlayComponent, isStandalone: true, selector: "almatar-hotel-auto-cancellation-result-overlay", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, currencyObj: { classPropertyName: "currencyObj", publicName: "currencyObj", isSignal: true, isRequired: false, transformFunction: null }, refundMethod: { classPropertyName: "refundMethod", publicName: "refundMethod", isSignal: true, isRequired: false, transformFunction: null }, apiResponse: { classPropertyName: "apiResponse", publicName: "apiResponse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { done: "done" }, ngImport: i0, template: "<div class=\"result-overlay\" [class.result-overlay--visible]=\"visible()\">\n <div class=\"result-overlay__backdrop\"></div>\n <div class=\"result-overlay__modal\">\n <div class=\"result-overlay__hero\">\n <span class=\"result-overlay__icon result-overlay__icon--green\">\n <svg\n width=\"114\"\n height=\"114\"\n viewBox=\"0 0 114 114\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"57\" cy=\"57\" r=\"42\" fill=\"#6DE197\" />\n <path\n d=\"M71.417 43.5774C73.169 41.8254 76.0097 41.8254 77.7617 43.5774C79.5134 45.3294 79.5136 48.1702 77.7617 49.9221L55.4248 72.2581C54.5835 73.0992 53.4426 73.5715 52.2529 73.5715C51.0632 73.5715 49.9224 73.0992 49.0811 72.2581L36.3174 59.4944C34.5654 57.7424 34.5654 54.9017 36.3174 53.1497C38.0694 51.3978 40.9102 51.3977 42.6621 53.1497L52.041 62.5286C52.0973 62.5848 52.1734 62.6165 52.2529 62.6165C52.3325 62.6164 52.4086 62.5848 52.4648 62.5286L71.417 43.5774Z\"\n fill=\"url(#paint0_linear_hotel_result)\"\n fill-opacity=\"0.9\"\n stroke=\"url(#paint1_linear_hotel_result)\"\n stroke-width=\"0.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_hotel_result\"\n x1=\"41.6842\"\n y1=\"54.1291\"\n x2=\"111.486\"\n y2=\"62.3784\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_hotel_result\"\n x1=\"42.6803\"\n y1=\"51.352\"\n x2=\"61.1185\"\n y2=\"79.3662\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n <h3 class=\"result-overlay__title\">\n {{ isNilRefund() ? 'Cancel Confirmed' : 'Refund Confirmed' }}\n </h3>\n </div>\n\n @for (row of refundRows(); track $index) {\n <div\n class=\"result-overlay__row\"\n [class.result-overlay__row--with-breakdown]=\"\n row.loyaltySubItems?.length\n \"\n >\n <!-- Wallet Icon -->\n @if (isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 22 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_wallet_result)\">\n <path\n d=\"M2.67627 20.8852C1.74854 20.8852 1.04655 20.6533 0.570312 20.1894C0.10026 19.7256 -0.134766 19.0359 -0.134766 18.1206V8.51852C-0.134766 7.77015 0.0260417 7.1764 0.347656 6.73727C0.675456 6.29815 1.1888 5.97344 1.8877 5.76315L13.7812 2.3027C14.4554 2.11097 15.0584 2.06149 15.5903 2.15427C16.1284 2.24704 16.549 2.49443 16.8521 2.89645C17.1613 3.29229 17.3159 3.85511 17.3159 4.58493V6.25485L15.8037 6.38473V4.45505C15.8037 4.04684 15.6893 3.76543 15.4604 3.61081C15.2316 3.45619 14.8945 3.44382 14.4492 3.5737L7.27783 5.55905C7.19124 5.5776 7.15104 5.61471 7.15723 5.67038C7.16341 5.71986 7.20671 5.7446 7.28711 5.7446H17.5942C18.5282 5.7446 19.2271 5.97962 19.6909 6.44968C20.161 6.91354 20.396 7.60316 20.396 8.51852V10.8564H18.8931V8.60202C18.8931 8.15671 18.7786 7.81963 18.5498 7.59079C18.321 7.36195 17.9932 7.24753 17.5664 7.24753H2.69482C2.26807 7.24753 1.94027 7.36195 1.71143 7.59079C1.48877 7.81963 1.37744 8.15671 1.37744 8.60202V18.0371C1.37744 18.4824 1.48877 18.8164 1.71143 19.039C1.94027 19.2679 2.26807 19.3823 2.69482 19.3823H17.5664C17.9932 19.3823 18.321 19.2679 18.5498 19.039C18.7786 18.8164 18.8931 18.4824 18.8931 18.0371V15.4394H20.396V18.1206C20.396 19.0359 20.161 19.7256 19.6909 20.1894C19.2271 20.6533 18.5282 20.8852 17.5942 20.8852H2.67627ZM16.7686 14.2334C16.5088 14.2334 16.2861 14.1437 16.1006 13.9643C15.9212 13.7788 15.8315 13.5561 15.8315 13.2964C15.8315 13.0366 15.9212 12.817 16.1006 12.6377C16.2861 12.4521 16.5088 12.3593 16.7686 12.3593C17.0283 12.3593 17.2479 12.4521 17.4272 12.6377C17.6128 12.817 17.7056 13.0366 17.7056 13.2964C17.7056 13.5561 17.6128 13.7788 17.4272 13.9643C17.2479 14.1437 17.0283 14.2334 16.7686 14.2334ZM16.6758 16.2187C15.7419 16.2187 14.9873 15.9775 14.4121 15.4951C13.8369 15.0065 13.5493 14.2767 13.5493 13.3056C13.5493 12.3346 13.8369 11.6079 14.4121 11.1255C14.9873 10.643 15.7419 10.4018 16.6758 10.4018H20.1084C20.6898 10.4018 21.1475 10.5812 21.4814 10.9399C21.8216 11.2986 21.9917 11.7439 21.9917 12.2758V14.3354C21.9917 14.8673 21.8216 15.3157 21.4814 15.6806C21.1475 16.0394 20.6898 16.2187 20.1084 16.2187H16.6758ZM16.7686 14.9756H19.7837C20.1053 14.9756 20.3465 14.8921 20.5073 14.7251C20.6743 14.5519 20.7578 14.3138 20.7578 14.0107V12.6006C20.7578 12.2975 20.6743 12.0625 20.5073 11.8955C20.3465 11.7223 20.1053 11.6357 19.7837 11.6357H16.7686C16.1191 11.6357 15.6367 11.7841 15.3213 12.081C15.012 12.3779 14.8574 12.7861 14.8574 13.3056C14.8574 13.8252 15.012 14.2334 15.3213 14.5302C15.6367 14.8271 16.1191 14.9756 16.7686 14.9756Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_wallet_result\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n\n <!-- Card Icon -->\n @if (!isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n stroke=\"#1B1A1F\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n\n <span class=\"result-overlay__body\">\n <span class=\"result-overlay__method-name\">\n <span class=\"result-overlay__method-block\">\n {{ row.label }}\n\n @if (!isWalletRow(row) && !row?.isInstallment) {\n <span class=\"mada-logo\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"43\"\n height=\"15\"\n viewBox=\"0 0 43 15\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_19158_27303)\">\n <path\n d=\"M18.1894 8.65527H0V14.9943H18.1894V8.65527Z\"\n fill=\"#84B740\"\n />\n <path\n d=\"M18.1894 0H0V6.34463H18.1894V0Z\"\n fill=\"#259BD6\"\n />\n <path\n d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M41.651 13.7375L41.5754 13.7601L41.3053 13.8336C41.0515 13.9014 40.8247 13.9409 40.6519 13.9409C40.236 13.9409 39.9876 13.7262 39.9876 13.359C39.9876 13.1217 40.0902 12.7206 40.7707 12.7206H41.651V13.7375ZM41.0299 9.74316C40.4844 9.74316 39.9228 9.84486 39.2261 10.0708L38.7724 10.2121L38.9236 11.2855L39.3665 11.133C39.831 10.9748 40.4088 10.8731 40.8409 10.8731C41.0353 10.8731 41.6294 10.8731 41.6294 11.5454V11.8392H40.8031C39.2963 11.8392 38.5996 12.342 38.5996 13.4211C38.5996 14.342 39.2423 14.8957 40.3224 14.8957C40.6573 14.8957 41.1217 14.8279 41.5214 14.7262L41.543 14.7206L41.5646 14.7262L41.6996 14.7488C42.1208 14.8279 42.5583 14.907 42.9849 14.9918V11.4663C42.9849 10.3251 42.3261 9.74316 41.0299 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M31.1529 13.7375L31.0773 13.7601L30.8073 13.8336C30.5535 13.9014 30.332 13.9409 30.1538 13.9409C29.738 13.9409 29.4895 13.7262 29.4895 13.359C29.4895 13.1217 29.5921 12.7206 30.2672 12.7206H31.1475L31.1529 13.7375ZM30.5373 9.74316C29.9864 9.74316 29.4301 9.84486 28.7334 10.0708L28.2798 10.2121L28.431 11.2855L28.8739 11.133C29.3383 10.9748 29.9162 10.8731 30.3482 10.8731C30.5427 10.8731 31.1367 10.8731 31.1367 11.5454V11.8392H30.3104C28.8036 11.8392 28.1016 12.342 28.1016 13.4211C28.1016 14.342 28.7442 14.8957 29.8298 14.8957C30.1646 14.8957 30.6291 14.8279 31.0287 14.7262L31.0503 14.7206L31.0719 14.7262L31.2015 14.7488C31.6282 14.8279 32.0602 14.907 32.4869 14.9974V11.472C32.4923 10.3194 31.8334 9.74316 30.5373 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M28.4189 5.9087H28.4837C29.9905 5.9087 30.6925 5.38893 30.6925 4.10644C30.6925 3.18554 30.0499 2.45108 28.9697 2.45108H27.5818C27.1659 2.45108 26.9175 2.20249 26.9175 1.78441C26.9175 1.50192 27.0201 1.15164 27.7006 1.15164H30.7357C30.8006 0.739211 30.833 0.479324 30.8924 0.0668945H27.7384C26.2694 0.0668945 25.5295 0.710962 25.5295 1.78441C25.5295 2.84656 26.1722 3.40023 27.2523 3.40023H28.6403C29.0561 3.40023 29.3046 3.74486 29.3046 4.10644C29.3046 4.34373 29.202 4.83526 28.5269 4.83526H28.2947L23.8499 4.82396H23.0398C22.3539 4.82396 21.8733 4.41718 21.8733 3.47367V2.82396C21.8733 1.84091 22.2459 1.23074 23.0398 1.23074H24.3576C24.417 0.812657 24.4548 0.547121 24.5088 0.15164H22.867H22.7104C21.3656 0.15164 20.4367 1.09514 20.4043 2.73921V2.80136V3.47367C20.4367 5.11774 21.3656 5.90305 22.7104 5.90305H22.867H24.0227L26.4314 5.9087H27.868H28.4189Z\"\n fill=\"#747583\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_19158_27303\">\n <rect width=\"43\" height=\"15\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n </span>\n\n <strong class=\"result-overlay__amount\">\n {{\n row.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </strong>\n </span>\n\n <!-- Loyalty breakdown sub-items -->\n @if (row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-breakdown\">\n @for (subItem of row.loyaltySubItems; track $index) {\n <div class=\"result-overlay__loyalty-item\">\n <span class=\"result-overlay__loyalty-label\">{{\n subItem.label\n }}</span>\n <span class=\"result-overlay__loyalty-value\">\n {{\n subItem.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </span>\n </div>\n }\n </div>\n }\n\n <span\n class=\"result-overlay__badge\"\n [class.result-overlay__badge--instant]=\"row.instant\"\n [class.result-overlay__badge--days]=\"!row.instant\"\n >\n {{ row.badgeKey }}\n </span>\n\n <!-- Loyalty note -->\n @if (row.hasLoyaltyNote && row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-note\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n fill=\"#0B54C2\"\n />\n </svg>\n <span>External loyalty points are refunded to your Almatar Wallet as permanent points and ready to use in your next booking.</span>\n </div>\n }\n </span>\n </div>\n }\n\n <button\n class=\"btn btn--primary result-overlay__done\"\n type=\"button\"\n (click)=\"onDone()\"\n >\n Back to My Trips\n </button>\n </div>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.result-overlay{display:none;position:fixed;inset:0;z-index:99999999;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.result-overlay--visible{display:flex;animation:fadeIn .3s ease-out}.result-overlay :is(strong,span):has(>app-currency-code-icon){direction:ltr;display:inline-flex;align-items:center;gap:4px}.result-overlay__backdrop{position:absolute;inset:0;background:linear-gradient(135deg,#0009,#00000073);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.result-overlay__modal{position:relative;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:32px 28px;border-radius:24px;background:linear-gradient(180deg,#fff,#fafafa);box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.result-overlay__modal::-webkit-scrollbar{width:8px}.result-overlay__modal::-webkit-scrollbar-track{background:transparent;border-radius:10px;margin:8px 0}.result-overlay__modal::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px}.result-overlay__modal::-webkit-scrollbar-thumb:hover{background:#00000040}.result-overlay__hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 20px}.result-overlay__icon{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) .2s both}.result-overlay__icon--green:before{content:\"\";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,#6de19726,#6de19700 70%);animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1) .3s both}.result-overlay__icon svg{filter:drop-shadow(0 4px 12px rgba(109,225,151,.3))}.result-overlay__title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;margin:0;text-align:center;letter-spacing:-.02em}.result-overlay__row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.result-overlay__row:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aedcc,#10b981cc);transform:translate(-100%);transition:transform .3s ease}.result-overlay__row:hover{border-color:#7c3aed33;box-shadow:0 4px 12px #0000000d,0 0 0 1px #7c3aed0d;transform:translateY(-2px)}.result-overlay__row:hover:before{transform:translate(0)}.result-overlay__row--with-breakdown{padding:20px}.result-overlay__method-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid rgba(0,0,0,.06);color:#1a1a1a;box-shadow:0 2px 4px #0000000a}.result-overlay__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.result-overlay__method-name{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1a1a1a}.result-overlay__method-block{display:inline-flex;align-items:center;font-weight:500;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:#4a5568}.result-overlay__amount{display:inline-flex;align-items:center;gap:5px;font-size:calc(20 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}.result-overlay__badge{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:24px;transition:all .2s ease}.result-overlay__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid rgba(21,128,60,.2);box-shadow:0 2px 4px #15803c1a}.result-overlay__badge--days{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;border:1px solid rgba(30,64,175,.2);box-shadow:0 2px 4px #1e40af1a}.result-overlay__loyalty-breakdown{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px;background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-radius:12px;border:1px solid rgba(0,0,0,.05)}.result-overlay__loyalty-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 4px}.result-overlay__loyalty-label{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#6b7280}.result-overlay__loyalty-value{display:inline-flex;align-items:center;gap:4px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#374151;font-variant-numeric:tabular-nums;white-space:nowrap}.result-overlay__loyalty-note{display:flex;align-items:flex-start;gap:10px;width:100%;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#edf9ff,#e0f2fe);font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#0b54c2;line-height:1.5;border:1.5px solid rgba(11,84,194,.3);box-shadow:0 2px 8px #0b54c214}.result-overlay__loyalty-note svg{flex-shrink:0;margin-top:1px;width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(11,84,194,.2))}.result-overlay__done{min-height:56px;width:100%;border-radius:16px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);transition:all .3s cubic-bezier(.4,0,.2,1);border:none;letter-spacing:.01em}.result-overlay__done:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59}.result-overlay__done:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40}.btn{padding:16px 24px;border-radius:14px;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;border:none;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 4px 16px #7c3aed40,0 2px 4px #7c3aed26}.btn--primary:hover{background:linear-gradient(135deg,#6d28d9,#5b21b6);transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59,0 4px 8px #7c3aed33;color:#fff}.btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40,0 2px 4px #7c3aed26}.mada-logo{margin-inline-start:12px;display:inline-flex;align-items:center;padding:4px 8px;background:#ffffffe6;border-radius:6px;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ExchangePipeModule }, { kind: "pipe", type: ExchangeRoundPipe, name: "exchange_round" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5166
5163
|
}
|
|
5167
5164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlmatarHotelAutoCancellationResultOverlayComponent, decorators: [{
|
|
5168
5165
|
type: Component,
|
|
@@ -5170,7 +5167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5170
5167
|
CommonModule,
|
|
5171
5168
|
CurrencyCodeIconComponent,
|
|
5172
5169
|
ExchangePipeModule,
|
|
5173
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"result-overlay\" [class.result-overlay--visible]=\"visible()\">\n <div class=\"result-overlay__backdrop\"></div>\n <div class=\"result-overlay__modal\">\n <div class=\"result-overlay__hero\">\n <span class=\"result-overlay__icon result-overlay__icon--green\">\n <svg\n width=\"114\"\n height=\"114\"\n viewBox=\"0 0 114 114\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"57\" cy=\"57\" r=\"42\" fill=\"#6DE197\" />\n <path\n d=\"M71.417 43.5774C73.169 41.8254 76.0097 41.8254 77.7617 43.5774C79.5134 45.3294 79.5136 48.1702 77.7617 49.9221L55.4248 72.2581C54.5835 73.0992 53.4426 73.5715 52.2529 73.5715C51.0632 73.5715 49.9224 73.0992 49.0811 72.2581L36.3174 59.4944C34.5654 57.7424 34.5654 54.9017 36.3174 53.1497C38.0694 51.3978 40.9102 51.3977 42.6621 53.1497L52.041 62.5286C52.0973 62.5848 52.1734 62.6165 52.2529 62.6165C52.3325 62.6164 52.4086 62.5848 52.4648 62.5286L71.417 43.5774Z\"\n fill=\"url(#paint0_linear_hotel_result)\"\n fill-opacity=\"0.9\"\n stroke=\"url(#paint1_linear_hotel_result)\"\n stroke-width=\"0.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_hotel_result\"\n x1=\"41.6842\"\n y1=\"54.1291\"\n x2=\"111.486\"\n y2=\"62.3784\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_hotel_result\"\n x1=\"42.6803\"\n y1=\"51.352\"\n x2=\"61.1185\"\n y2=\"79.3662\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n <h3 class=\"result-overlay__title\">\n {{ isNilRefund() ? 'Cancellation Confirmed' : 'Refund Confirmed' }}\n </h3>\n </div>\n\n @for (row of refundRows(); track $index) {\n <div\n class=\"result-overlay__row\"\n [class.result-overlay__row--with-breakdown]=\"\n row.loyaltySubItems?.length\n \"\n >\n <!-- Wallet Icon -->\n @if (isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 22 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_wallet_result)\">\n <path\n d=\"M2.67627 20.8852C1.74854 20.8852 1.04655 20.6533 0.570312 20.1894C0.10026 19.7256 -0.134766 19.0359 -0.134766 18.1206V8.51852C-0.134766 7.77015 0.0260417 7.1764 0.347656 6.73727C0.675456 6.29815 1.1888 5.97344 1.8877 5.76315L13.7812 2.3027C14.4554 2.11097 15.0584 2.06149 15.5903 2.15427C16.1284 2.24704 16.549 2.49443 16.8521 2.89645C17.1613 3.29229 17.3159 3.85511 17.3159 4.58493V6.25485L15.8037 6.38473V4.45505C15.8037 4.04684 15.6893 3.76543 15.4604 3.61081C15.2316 3.45619 14.8945 3.44382 14.4492 3.5737L7.27783 5.55905C7.19124 5.5776 7.15104 5.61471 7.15723 5.67038C7.16341 5.71986 7.20671 5.7446 7.28711 5.7446H17.5942C18.5282 5.7446 19.2271 5.97962 19.6909 6.44968C20.161 6.91354 20.396 7.60316 20.396 8.51852V10.8564H18.8931V8.60202C18.8931 8.15671 18.7786 7.81963 18.5498 7.59079C18.321 7.36195 17.9932 7.24753 17.5664 7.24753H2.69482C2.26807 7.24753 1.94027 7.36195 1.71143 7.59079C1.48877 7.81963 1.37744 8.15671 1.37744 8.60202V18.0371C1.37744 18.4824 1.48877 18.8164 1.71143 19.039C1.94027 19.2679 2.26807 19.3823 2.69482 19.3823H17.5664C17.9932 19.3823 18.321 19.2679 18.5498 19.039C18.7786 18.8164 18.8931 18.4824 18.8931 18.0371V15.4394H20.396V18.1206C20.396 19.0359 20.161 19.7256 19.6909 20.1894C19.2271 20.6533 18.5282 20.8852 17.5942 20.8852H2.67627ZM16.7686 14.2334C16.5088 14.2334 16.2861 14.1437 16.1006 13.9643C15.9212 13.7788 15.8315 13.5561 15.8315 13.2964C15.8315 13.0366 15.9212 12.817 16.1006 12.6377C16.2861 12.4521 16.5088 12.3593 16.7686 12.3593C17.0283 12.3593 17.2479 12.4521 17.4272 12.6377C17.6128 12.817 17.7056 13.0366 17.7056 13.2964C17.7056 13.5561 17.6128 13.7788 17.4272 13.9643C17.2479 14.1437 17.0283 14.2334 16.7686 14.2334ZM16.6758 16.2187C15.7419 16.2187 14.9873 15.9775 14.4121 15.4951C13.8369 15.0065 13.5493 14.2767 13.5493 13.3056C13.5493 12.3346 13.8369 11.6079 14.4121 11.1255C14.9873 10.643 15.7419 10.4018 16.6758 10.4018H20.1084C20.6898 10.4018 21.1475 10.5812 21.4814 10.9399C21.8216 11.2986 21.9917 11.7439 21.9917 12.2758V14.3354C21.9917 14.8673 21.8216 15.3157 21.4814 15.6806C21.1475 16.0394 20.6898 16.2187 20.1084 16.2187H16.6758ZM16.7686 14.9756H19.7837C20.1053 14.9756 20.3465 14.8921 20.5073 14.7251C20.6743 14.5519 20.7578 14.3138 20.7578 14.0107V12.6006C20.7578 12.2975 20.6743 12.0625 20.5073 11.8955C20.3465 11.7223 20.1053 11.6357 19.7837 11.6357H16.7686C16.1191 11.6357 15.6367 11.7841 15.3213 12.081C15.012 12.3779 14.8574 12.7861 14.8574 13.3056C14.8574 13.8252 15.012 14.2334 15.3213 14.5302C15.6367 14.8271 16.1191 14.9756 16.7686 14.9756Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_wallet_result\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n\n <!-- Card Icon -->\n @if (!isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n stroke=\"#1B1A1F\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n\n <span class=\"result-overlay__body\">\n <span class=\"result-overlay__method-name\">\n <span class=\"result-overlay__method-block\">\n {{ row.label }}\n\n @if (!isWalletRow(row) && !row?.isInstallment) {\n <span class=\"mada-logo\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"43\"\n height=\"15\"\n viewBox=\"0 0 43 15\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_19158_27303)\">\n <path\n d=\"M18.1894 8.65527H0V14.9943H18.1894V8.65527Z\"\n fill=\"#84B740\"\n />\n <path\n d=\"M18.1894 0H0V6.34463H18.1894V0Z\"\n fill=\"#259BD6\"\n />\n <path\n d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M41.651 13.7375L41.5754 13.7601L41.3053 13.8336C41.0515 13.9014 40.8247 13.9409 40.6519 13.9409C40.236 13.9409 39.9876 13.7262 39.9876 13.359C39.9876 13.1217 40.0902 12.7206 40.7707 12.7206H41.651V13.7375ZM41.0299 9.74316C40.4844 9.74316 39.9228 9.84486 39.2261 10.0708L38.7724 10.2121L38.9236 11.2855L39.3665 11.133C39.831 10.9748 40.4088 10.8731 40.8409 10.8731C41.0353 10.8731 41.6294 10.8731 41.6294 11.5454V11.8392H40.8031C39.2963 11.8392 38.5996 12.342 38.5996 13.4211C38.5996 14.342 39.2423 14.8957 40.3224 14.8957C40.6573 14.8957 41.1217 14.8279 41.5214 14.7262L41.543 14.7206L41.5646 14.7262L41.6996 14.7488C42.1208 14.8279 42.5583 14.907 42.9849 14.9918V11.4663C42.9849 10.3251 42.3261 9.74316 41.0299 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M31.1529 13.7375L31.0773 13.7601L30.8073 13.8336C30.5535 13.9014 30.332 13.9409 30.1538 13.9409C29.738 13.9409 29.4895 13.7262 29.4895 13.359C29.4895 13.1217 29.5921 12.7206 30.2672 12.7206H31.1475L31.1529 13.7375ZM30.5373 9.74316C29.9864 9.74316 29.4301 9.84486 28.7334 10.0708L28.2798 10.2121L28.431 11.2855L28.8739 11.133C29.3383 10.9748 29.9162 10.8731 30.3482 10.8731C30.5427 10.8731 31.1367 10.8731 31.1367 11.5454V11.8392H30.3104C28.8036 11.8392 28.1016 12.342 28.1016 13.4211C28.1016 14.342 28.7442 14.8957 29.8298 14.8957C30.1646 14.8957 30.6291 14.8279 31.0287 14.7262L31.0503 14.7206L31.0719 14.7262L31.2015 14.7488C31.6282 14.8279 32.0602 14.907 32.4869 14.9974V11.472C32.4923 10.3194 31.8334 9.74316 30.5373 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M28.4189 5.9087H28.4837C29.9905 5.9087 30.6925 5.38893 30.6925 4.10644C30.6925 3.18554 30.0499 2.45108 28.9697 2.45108H27.5818C27.1659 2.45108 26.9175 2.20249 26.9175 1.78441C26.9175 1.50192 27.0201 1.15164 27.7006 1.15164H30.7357C30.8006 0.739211 30.833 0.479324 30.8924 0.0668945H27.7384C26.2694 0.0668945 25.5295 0.710962 25.5295 1.78441C25.5295 2.84656 26.1722 3.40023 27.2523 3.40023H28.6403C29.0561 3.40023 29.3046 3.74486 29.3046 4.10644C29.3046 4.34373 29.202 4.83526 28.5269 4.83526H28.2947L23.8499 4.82396H23.0398C22.3539 4.82396 21.8733 4.41718 21.8733 3.47367V2.82396C21.8733 1.84091 22.2459 1.23074 23.0398 1.23074H24.3576C24.417 0.812657 24.4548 0.547121 24.5088 0.15164H22.867H22.7104C21.3656 0.15164 20.4367 1.09514 20.4043 2.73921V2.80136V3.47367C20.4367 5.11774 21.3656 5.90305 22.7104 5.90305H22.867H24.0227L26.4314 5.9087H27.868H28.4189Z\"\n fill=\"#747583\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_19158_27303\">\n <rect width=\"43\" height=\"15\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n </span>\n\n <strong class=\"result-overlay__amount\">\n {{\n row.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </strong>\n </span>\n\n <!-- Loyalty breakdown sub-items -->\n @if (row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-breakdown\">\n @for (subItem of row.loyaltySubItems; track $index) {\n <div class=\"result-overlay__loyalty-item\">\n <span class=\"result-overlay__loyalty-label\">{{\n subItem.label\n }}</span>\n <span class=\"result-overlay__loyalty-value\">\n {{\n subItem.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </span>\n </div>\n }\n </div>\n }\n\n <span\n class=\"result-overlay__badge\"\n [class.result-overlay__badge--instant]=\"row.instant\"\n [class.result-overlay__badge--days]=\"!row.instant\"\n >\n {{ row.badgeKey }}\n </span>\n\n <!-- Loyalty note -->\n @if (row.hasLoyaltyNote && row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-note\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n fill=\"#0B54C2\"\n />\n </svg>\n <span>Loyalty points will be refunded instantly to your account</span>\n </div>\n }\n </span>\n </div>\n }\n\n <button\n class=\"btn btn--primary result-overlay__done\"\n type=\"button\"\n (click)=\"onDone()\"\n >\n {{ 'GOT IT!' }}\n </button>\n </div>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.result-overlay{display:none;position:fixed;inset:0;z-index:99999999;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.result-overlay--visible{display:flex;animation:fadeIn .3s ease-out}.result-overlay :is(strong,span):has(>app-currency-code-icon){direction:ltr;display:inline-flex;align-items:center;gap:4px}.result-overlay__backdrop{position:absolute;inset:0;background:linear-gradient(135deg,#0009,#00000073);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.result-overlay__modal{position:relative;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:32px 28px;border-radius:24px;background:linear-gradient(180deg,#fff,#fafafa);box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.result-overlay__modal::-webkit-scrollbar{width:8px}.result-overlay__modal::-webkit-scrollbar-track{background:transparent;border-radius:10px;margin:8px 0}.result-overlay__modal::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px}.result-overlay__modal::-webkit-scrollbar-thumb:hover{background:#00000040}.result-overlay__hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 20px}.result-overlay__icon{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) .2s both}.result-overlay__icon--green:before{content:\"\";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,#6de19726,#6de19700 70%);animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1) .3s both}.result-overlay__icon svg{filter:drop-shadow(0 4px 12px rgba(109,225,151,.3))}.result-overlay__title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;margin:0;text-align:center;letter-spacing:-.02em}.result-overlay__row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.result-overlay__row:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aedcc,#10b981cc);transform:translate(-100%);transition:transform .3s ease}.result-overlay__row:hover{border-color:#7c3aed33;box-shadow:0 4px 12px #0000000d,0 0 0 1px #7c3aed0d;transform:translateY(-2px)}.result-overlay__row:hover:before{transform:translate(0)}.result-overlay__row--with-breakdown{padding:20px}.result-overlay__method-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid rgba(0,0,0,.06);color:#1a1a1a;box-shadow:0 2px 4px #0000000a}.result-overlay__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.result-overlay__method-name{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1a1a1a}.result-overlay__method-block{display:inline-flex;align-items:center;font-weight:500;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:#4a5568}.result-overlay__amount{display:inline-flex;align-items:center;gap:5px;font-size:calc(20 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}.result-overlay__badge{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:24px;transition:all .2s ease}.result-overlay__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid rgba(21,128,60,.2);box-shadow:0 2px 4px #15803c1a}.result-overlay__badge--days{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;border:1px solid rgba(30,64,175,.2);box-shadow:0 2px 4px #1e40af1a}.result-overlay__loyalty-breakdown{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px;background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-radius:12px;border:1px solid rgba(0,0,0,.05)}.result-overlay__loyalty-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 4px}.result-overlay__loyalty-label{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#6b7280}.result-overlay__loyalty-value{display:inline-flex;align-items:center;gap:4px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#374151;font-variant-numeric:tabular-nums;white-space:nowrap}.result-overlay__loyalty-note{display:flex;align-items:flex-start;gap:10px;width:100%;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#edf9ff,#e0f2fe);font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#0b54c2;line-height:1.5;border:1.5px solid rgba(11,84,194,.3);box-shadow:0 2px 8px #0b54c214}.result-overlay__loyalty-note svg{flex-shrink:0;margin-top:1px;width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(11,84,194,.2))}.result-overlay__done{min-height:56px;width:100%;border-radius:16px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);transition:all .3s cubic-bezier(.4,0,.2,1);border:none;letter-spacing:.01em}.result-overlay__done:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59}.result-overlay__done:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40}.btn{padding:16px 24px;border-radius:14px;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;border:none;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 4px 16px #7c3aed40,0 2px 4px #7c3aed26}.btn--primary:hover{background:linear-gradient(135deg,#6d28d9,#5b21b6);transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59,0 4px 8px #7c3aed33;color:#fff}.btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40,0 2px 4px #7c3aed26}.mada-logo{margin-inline-start:12px;display:inline-flex;align-items:center;padding:4px 8px;background:#ffffffe6;border-radius:6px;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f}\n"] }]
|
|
5170
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"result-overlay\" [class.result-overlay--visible]=\"visible()\">\n <div class=\"result-overlay__backdrop\"></div>\n <div class=\"result-overlay__modal\">\n <div class=\"result-overlay__hero\">\n <span class=\"result-overlay__icon result-overlay__icon--green\">\n <svg\n width=\"114\"\n height=\"114\"\n viewBox=\"0 0 114 114\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"57\" cy=\"57\" r=\"42\" fill=\"#6DE197\" />\n <path\n d=\"M71.417 43.5774C73.169 41.8254 76.0097 41.8254 77.7617 43.5774C79.5134 45.3294 79.5136 48.1702 77.7617 49.9221L55.4248 72.2581C54.5835 73.0992 53.4426 73.5715 52.2529 73.5715C51.0632 73.5715 49.9224 73.0992 49.0811 72.2581L36.3174 59.4944C34.5654 57.7424 34.5654 54.9017 36.3174 53.1497C38.0694 51.3978 40.9102 51.3977 42.6621 53.1497L52.041 62.5286C52.0973 62.5848 52.1734 62.6165 52.2529 62.6165C52.3325 62.6164 52.4086 62.5848 52.4648 62.5286L71.417 43.5774Z\"\n fill=\"url(#paint0_linear_hotel_result)\"\n fill-opacity=\"0.9\"\n stroke=\"url(#paint1_linear_hotel_result)\"\n stroke-width=\"0.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_hotel_result\"\n x1=\"41.6842\"\n y1=\"54.1291\"\n x2=\"111.486\"\n y2=\"62.3784\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_hotel_result\"\n x1=\"42.6803\"\n y1=\"51.352\"\n x2=\"61.1185\"\n y2=\"79.3662\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n <h3 class=\"result-overlay__title\">\n {{ isNilRefund() ? 'Cancel Confirmed' : 'Refund Confirmed' }}\n </h3>\n </div>\n\n @for (row of refundRows(); track $index) {\n <div\n class=\"result-overlay__row\"\n [class.result-overlay__row--with-breakdown]=\"\n row.loyaltySubItems?.length\n \"\n >\n <!-- Wallet Icon -->\n @if (isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 22 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_wallet_result)\">\n <path\n d=\"M2.67627 20.8852C1.74854 20.8852 1.04655 20.6533 0.570312 20.1894C0.10026 19.7256 -0.134766 19.0359 -0.134766 18.1206V8.51852C-0.134766 7.77015 0.0260417 7.1764 0.347656 6.73727C0.675456 6.29815 1.1888 5.97344 1.8877 5.76315L13.7812 2.3027C14.4554 2.11097 15.0584 2.06149 15.5903 2.15427C16.1284 2.24704 16.549 2.49443 16.8521 2.89645C17.1613 3.29229 17.3159 3.85511 17.3159 4.58493V6.25485L15.8037 6.38473V4.45505C15.8037 4.04684 15.6893 3.76543 15.4604 3.61081C15.2316 3.45619 14.8945 3.44382 14.4492 3.5737L7.27783 5.55905C7.19124 5.5776 7.15104 5.61471 7.15723 5.67038C7.16341 5.71986 7.20671 5.7446 7.28711 5.7446H17.5942C18.5282 5.7446 19.2271 5.97962 19.6909 6.44968C20.161 6.91354 20.396 7.60316 20.396 8.51852V10.8564H18.8931V8.60202C18.8931 8.15671 18.7786 7.81963 18.5498 7.59079C18.321 7.36195 17.9932 7.24753 17.5664 7.24753H2.69482C2.26807 7.24753 1.94027 7.36195 1.71143 7.59079C1.48877 7.81963 1.37744 8.15671 1.37744 8.60202V18.0371C1.37744 18.4824 1.48877 18.8164 1.71143 19.039C1.94027 19.2679 2.26807 19.3823 2.69482 19.3823H17.5664C17.9932 19.3823 18.321 19.2679 18.5498 19.039C18.7786 18.8164 18.8931 18.4824 18.8931 18.0371V15.4394H20.396V18.1206C20.396 19.0359 20.161 19.7256 19.6909 20.1894C19.2271 20.6533 18.5282 20.8852 17.5942 20.8852H2.67627ZM16.7686 14.2334C16.5088 14.2334 16.2861 14.1437 16.1006 13.9643C15.9212 13.7788 15.8315 13.5561 15.8315 13.2964C15.8315 13.0366 15.9212 12.817 16.1006 12.6377C16.2861 12.4521 16.5088 12.3593 16.7686 12.3593C17.0283 12.3593 17.2479 12.4521 17.4272 12.6377C17.6128 12.817 17.7056 13.0366 17.7056 13.2964C17.7056 13.5561 17.6128 13.7788 17.4272 13.9643C17.2479 14.1437 17.0283 14.2334 16.7686 14.2334ZM16.6758 16.2187C15.7419 16.2187 14.9873 15.9775 14.4121 15.4951C13.8369 15.0065 13.5493 14.2767 13.5493 13.3056C13.5493 12.3346 13.8369 11.6079 14.4121 11.1255C14.9873 10.643 15.7419 10.4018 16.6758 10.4018H20.1084C20.6898 10.4018 21.1475 10.5812 21.4814 10.9399C21.8216 11.2986 21.9917 11.7439 21.9917 12.2758V14.3354C21.9917 14.8673 21.8216 15.3157 21.4814 15.6806C21.1475 16.0394 20.6898 16.2187 20.1084 16.2187H16.6758ZM16.7686 14.9756H19.7837C20.1053 14.9756 20.3465 14.8921 20.5073 14.7251C20.6743 14.5519 20.7578 14.3138 20.7578 14.0107V12.6006C20.7578 12.2975 20.6743 12.0625 20.5073 11.8955C20.3465 11.7223 20.1053 11.6357 19.7837 11.6357H16.7686C16.1191 11.6357 15.6367 11.7841 15.3213 12.081C15.012 12.3779 14.8574 12.7861 14.8574 13.3056C14.8574 13.8252 15.012 14.2334 15.3213 14.5302C15.6367 14.8271 16.1191 14.9756 16.7686 14.9756Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_wallet_result\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n\n <!-- Card Icon -->\n @if (!isWalletRow(row)) {\n <span class=\"result-overlay__method-icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z\"\n stroke=\"#1B1A1F\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n }\n\n <span class=\"result-overlay__body\">\n <span class=\"result-overlay__method-name\">\n <span class=\"result-overlay__method-block\">\n {{ row.label }}\n\n @if (!isWalletRow(row) && !row?.isInstallment) {\n <span class=\"mada-logo\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"43\"\n height=\"15\"\n viewBox=\"0 0 43 15\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_19158_27303)\">\n <path\n d=\"M18.1894 8.65527H0V14.9943H18.1894V8.65527Z\"\n fill=\"#84B740\"\n />\n <path\n d=\"M18.1894 0H0V6.34463H18.1894V0Z\"\n fill=\"#259BD6\"\n />\n <path\n d=\"M36.3779 13.7034L36.2969 13.7203C36.016 13.7768 35.9134 13.7994 35.7082 13.7994C35.233 13.7994 34.6713 13.5452 34.6713 12.3475C34.6713 11.7316 34.7685 10.9124 35.6542 10.9124H35.6596C35.8108 10.9237 35.9836 10.9407 36.3077 11.0424L36.3779 11.065V13.7034ZM36.5237 7.73164L36.3779 7.75989V9.97458L36.2483 9.93503L36.2105 9.92373C36.0647 9.87853 35.7298 9.77684 35.4058 9.77684C33.6344 9.77684 33.2617 11.178 33.2617 12.3531C33.2617 13.9633 34.1258 14.8898 35.6326 14.8898C36.2699 14.8898 36.7397 14.822 37.215 14.6582C37.6524 14.5113 37.8091 14.3023 37.8091 13.8559V7.5C37.3878 7.5791 36.9504 7.65819 36.5237 7.73164Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M41.651 13.7375L41.5754 13.7601L41.3053 13.8336C41.0515 13.9014 40.8247 13.9409 40.6519 13.9409C40.236 13.9409 39.9876 13.7262 39.9876 13.359C39.9876 13.1217 40.0902 12.7206 40.7707 12.7206H41.651V13.7375ZM41.0299 9.74316C40.4844 9.74316 39.9228 9.84486 39.2261 10.0708L38.7724 10.2121L38.9236 11.2855L39.3665 11.133C39.831 10.9748 40.4088 10.8731 40.8409 10.8731C41.0353 10.8731 41.6294 10.8731 41.6294 11.5454V11.8392H40.8031C39.2963 11.8392 38.5996 12.342 38.5996 13.4211C38.5996 14.342 39.2423 14.8957 40.3224 14.8957C40.6573 14.8957 41.1217 14.8279 41.5214 14.7262L41.543 14.7206L41.5646 14.7262L41.6996 14.7488C42.1208 14.8279 42.5583 14.907 42.9849 14.9918V11.4663C42.9849 10.3251 42.3261 9.74316 41.0299 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M31.1529 13.7375L31.0773 13.7601L30.8073 13.8336C30.5535 13.9014 30.332 13.9409 30.1538 13.9409C29.738 13.9409 29.4895 13.7262 29.4895 13.359C29.4895 13.1217 29.5921 12.7206 30.2672 12.7206H31.1475L31.1529 13.7375ZM30.5373 9.74316C29.9864 9.74316 29.4301 9.84486 28.7334 10.0708L28.2798 10.2121L28.431 11.2855L28.8739 11.133C29.3383 10.9748 29.9162 10.8731 30.3482 10.8731C30.5427 10.8731 31.1367 10.8731 31.1367 11.5454V11.8392H30.3104C28.8036 11.8392 28.1016 12.342 28.1016 13.4211C28.1016 14.342 28.7442 14.8957 29.8298 14.8957C30.1646 14.8957 30.6291 14.8279 31.0287 14.7262L31.0503 14.7206L31.0719 14.7262L31.2015 14.7488C31.6282 14.8279 32.0602 14.907 32.4869 14.9974V11.472C32.4923 10.3194 31.8334 9.74316 30.5373 9.74316Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M25.4701 9.7576C24.7842 9.7576 24.2172 9.99489 24.0065 10.0966L23.9525 10.1248L23.9039 10.0853C23.6123 9.86495 23.1856 9.75195 22.5916 9.75195C22.0677 9.75195 21.5762 9.83105 21.0416 9.99489C20.5825 10.1418 20.4043 10.3734 20.4043 10.8085V14.8367H21.8409V11.1135L21.9111 11.0909C22.2027 10.9892 22.3755 10.9723 22.543 10.9723C22.9588 10.9723 23.1694 11.2039 23.1694 11.6559V14.8423H24.5844V11.5938C24.5844 11.4017 24.5466 11.2887 24.5412 11.2661L24.4926 11.17L24.5898 11.1248C24.8058 11.0231 25.0435 10.9723 25.2919 10.9723C25.5781 10.9723 25.9184 11.0909 25.9184 11.6559V14.8423H27.3279V11.509C27.3279 10.3282 26.7231 9.7576 25.4701 9.7576Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M40.5866 4.13559C40.3759 4.13559 40.0249 4.113 39.7495 4.0565L39.6684 4.03955V1.86441C39.6684 1.68362 39.636 1.57062 39.6306 1.55367L39.5874 1.46328L39.6793 1.42373C39.7009 1.41243 39.7225 1.40678 39.7495 1.39548L39.7657 1.38418C39.7981 1.37288 39.8305 1.36158 39.8629 1.35028C39.8791 1.34463 39.8899 1.33898 39.9007 1.33898C40.2193 1.24859 40.511 1.25989 40.6406 1.24859H40.646C41.5263 1.24859 41.6289 2.0678 41.6289 2.68362C41.6235 3.88136 41.0564 4.13559 40.5866 4.13559ZM40.5812 0C40.5704 0 40.5542 0 40.5434 0C39.7171 0 38.8692 0.237288 38.5667 0.700565C38.4047 0.926554 38.3129 1.20904 38.3075 1.54237V3.78531C38.3075 3.9774 38.2697 4.05085 38.2643 4.0678L38.2157 4.16384H35.6072V2.60452H35.6018C35.5694 0.960452 34.6404 0.0564972 33.2957 0.0564972H33.1391H31.9833C31.9293 0.457627 31.8861 0.740113 31.8321 1.14124H33.1391C33.8249 1.14124 34.1868 1.75141 34.1868 2.68927V4.25989L34.095 4.20904C34.0788 4.20339 33.9654 4.16384 33.7871 4.16384H31.5297C31.4865 4.46328 31.4325 4.85311 31.373 5.24294H38.3129C38.5505 5.19209 38.8259 5.14689 39.0636 5.10735C39.4146 5.28814 40.0681 5.38418 40.5164 5.38418C42.0231 5.38418 43.0007 4.32768 43.0007 2.70057C42.9953 1.0904 42.0501 0.0338983 40.5812 0Z\"\n fill=\"#747583\"\n />\n <path\n d=\"M28.4189 5.9087H28.4837C29.9905 5.9087 30.6925 5.38893 30.6925 4.10644C30.6925 3.18554 30.0499 2.45108 28.9697 2.45108H27.5818C27.1659 2.45108 26.9175 2.20249 26.9175 1.78441C26.9175 1.50192 27.0201 1.15164 27.7006 1.15164H30.7357C30.8006 0.739211 30.833 0.479324 30.8924 0.0668945H27.7384C26.2694 0.0668945 25.5295 0.710962 25.5295 1.78441C25.5295 2.84656 26.1722 3.40023 27.2523 3.40023H28.6403C29.0561 3.40023 29.3046 3.74486 29.3046 4.10644C29.3046 4.34373 29.202 4.83526 28.5269 4.83526H28.2947L23.8499 4.82396H23.0398C22.3539 4.82396 21.8733 4.41718 21.8733 3.47367V2.82396C21.8733 1.84091 22.2459 1.23074 23.0398 1.23074H24.3576C24.417 0.812657 24.4548 0.547121 24.5088 0.15164H22.867H22.7104C21.3656 0.15164 20.4367 1.09514 20.4043 2.73921V2.80136V3.47367C20.4367 5.11774 21.3656 5.90305 22.7104 5.90305H22.867H24.0227L26.4314 5.9087H27.868H28.4189Z\"\n fill=\"#747583\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_19158_27303\">\n <rect width=\"43\" height=\"15\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </span>\n }\n </span>\n\n <strong class=\"result-overlay__amount\">\n {{\n row.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </strong>\n </span>\n\n <!-- Loyalty breakdown sub-items -->\n @if (row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-breakdown\">\n @for (subItem of row.loyaltySubItems; track $index) {\n <div class=\"result-overlay__loyalty-item\">\n <span class=\"result-overlay__loyalty-label\">{{\n subItem.label\n }}</span>\n <span class=\"result-overlay__loyalty-value\">\n {{\n subItem.value | exchange_round\n }}\n {{ currentCurrency()?.code }}\n </span>\n </div>\n }\n </div>\n }\n\n <span\n class=\"result-overlay__badge\"\n [class.result-overlay__badge--instant]=\"row.instant\"\n [class.result-overlay__badge--days]=\"!row.instant\"\n >\n {{ row.badgeKey }}\n </span>\n\n <!-- Loyalty note -->\n @if (row.hasLoyaltyNote && row.loyaltySubItems?.length) {\n <div class=\"result-overlay__loyalty-note\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n d=\"M4.1582 21.1777C3.60482 21.1777 3.12956 21.0605 2.73242 20.8262C2.33529 20.5918 2.0293 20.2728 1.81445 19.8691C1.59961 19.472 1.49219 19.026 1.49219 18.5312C1.49219 18.056 1.61914 17.6003 1.87305 17.1641L9.45117 3.96094C9.69857 3.51823 10.0273 3.1862 10.4375 2.96484C10.8477 2.73698 11.2773 2.62305 11.7266 2.62305C12.1758 2.62305 12.6022 2.73698 13.0059 2.96484C13.416 3.1862 13.748 3.51823 14.002 3.96094L21.5801 17.1641C21.7038 17.3789 21.7982 17.6035 21.8633 17.8379C21.9284 18.0723 21.9609 18.3034 21.9609 18.5312C21.9609 19.026 21.8535 19.472 21.6387 19.8691C21.4238 20.2728 21.1178 20.5918 20.7207 20.8262C20.3236 21.0605 19.8483 21.1777 19.2949 21.1777H4.1582ZM4.16797 19.6445H19.2754C19.6139 19.6445 19.8809 19.5306 20.0762 19.3027C20.278 19.0814 20.3789 18.821 20.3789 18.5215C20.3789 18.3132 20.3268 18.1081 20.2227 17.9062L12.6543 4.70312C12.5501 4.52083 12.4134 4.39062 12.2441 4.3125C12.0814 4.22786 11.9089 4.18555 11.7266 4.18555C11.5443 4.18555 11.3685 4.22786 11.1992 4.3125C11.0299 4.39062 10.8932 4.52083 10.7891 4.70312L3.2207 17.8965C3.16862 18.0007 3.12956 18.1081 3.10352 18.2188C3.08398 18.3294 3.07422 18.4303 3.07422 18.5215C3.07422 18.821 3.17188 19.0814 3.36719 19.3027C3.5625 19.5306 3.82943 19.6445 4.16797 19.6445ZM11.7266 14.5859C11.2253 14.5859 10.9681 14.3288 10.9551 13.8145L10.8281 8.64844C10.8216 8.40104 10.8997 8.19596 11.0625 8.0332C11.2318 7.87044 11.4499 7.78906 11.7168 7.78906C11.9772 7.78906 12.1921 7.8737 12.3613 8.04297C12.5371 8.20573 12.6217 8.41081 12.6152 8.6582L12.4688 13.8145C12.4622 14.3288 12.2148 14.5859 11.7266 14.5859ZM11.7266 17.7598C11.4401 17.7598 11.1927 17.6621 10.9844 17.4668C10.776 17.265 10.6719 17.0241 10.6719 16.7441C10.6719 16.4642 10.776 16.2266 10.9844 16.0312C11.1927 15.8294 11.4401 15.7285 11.7266 15.7285C12.013 15.7285 12.2604 15.8262 12.4688 16.0215C12.6771 16.2168 12.7812 16.4577 12.7812 16.7441C12.7812 17.0306 12.6738 17.2715 12.459 17.4668C12.2507 17.6621 12.0065 17.7598 11.7266 17.7598Z\"\n fill=\"#0B54C2\"\n />\n </svg>\n <span>External loyalty points are refunded to your Almatar Wallet as permanent points and ready to use in your next booking.</span>\n </div>\n }\n </span>\n </div>\n }\n\n <button\n class=\"btn btn--primary result-overlay__done\"\n type=\"button\"\n (click)=\"onDone()\"\n >\n Back to My Trips\n </button>\n </div>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.result-overlay{display:none;position:fixed;inset:0;z-index:99999999;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.result-overlay--visible{display:flex;animation:fadeIn .3s ease-out}.result-overlay :is(strong,span):has(>app-currency-code-icon){direction:ltr;display:inline-flex;align-items:center;gap:4px}.result-overlay__backdrop{position:absolute;inset:0;background:linear-gradient(135deg,#0009,#00000073);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.result-overlay__modal{position:relative;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:32px 28px;border-radius:24px;background:linear-gradient(180deg,#fff,#fafafa);box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.result-overlay__modal::-webkit-scrollbar{width:8px}.result-overlay__modal::-webkit-scrollbar-track{background:transparent;border-radius:10px;margin:8px 0}.result-overlay__modal::-webkit-scrollbar-thumb{background:#00000026;border-radius:10px}.result-overlay__modal::-webkit-scrollbar-thumb:hover{background:#00000040}.result-overlay__hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 20px}.result-overlay__icon{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1) .2s both}.result-overlay__icon--green:before{content:\"\";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,#6de19726,#6de19700 70%);animation:scaleIn .6s cubic-bezier(.34,1.56,.64,1) .3s both}.result-overlay__icon svg{filter:drop-shadow(0 4px 12px rgba(109,225,151,.3))}.result-overlay__title{font-size:calc(24 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;margin:0;text-align:center;letter-spacing:-.02em}.result-overlay__row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.result-overlay__row:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#7c3aedcc,#10b981cc);transform:translate(-100%);transition:transform .3s ease}.result-overlay__row:hover{border-color:#7c3aed33;box-shadow:0 4px 12px #0000000d,0 0 0 1px #7c3aed0d;transform:translateY(-2px)}.result-overlay__row:hover:before{transform:translate(0)}.result-overlay__row--with-breakdown{padding:20px}.result-overlay__method-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid rgba(0,0,0,.06);color:#1a1a1a;box-shadow:0 2px 4px #0000000a}.result-overlay__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.result-overlay__method-name{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#1a1a1a}.result-overlay__method-block{display:inline-flex;align-items:center;font-weight:500;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);color:#4a5568}.result-overlay__amount{display:inline-flex;align-items:center;gap:5px;font-size:calc(20 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);color:#1a1a1a;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}.result-overlay__badge{font-size:calc(11 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:24px;transition:all .2s ease}.result-overlay__badge--instant{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803c;border:1px solid rgba(21,128,60,.2);box-shadow:0 2px 4px #15803c1a}.result-overlay__badge--days{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1e40af;border:1px solid rgba(30,64,175,.2);box-shadow:0 2px 4px #1e40af1a}.result-overlay__loyalty-breakdown{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px;background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-radius:12px;border:1px solid rgba(0,0,0,.05)}.result-overlay__loyalty-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 4px}.result-overlay__loyalty-label{font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#6b7280}.result-overlay__loyalty-value{display:inline-flex;align-items:center;gap:4px;font-size:calc(14 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);color:#374151;font-variant-numeric:tabular-nums;white-space:nowrap}.result-overlay__loyalty-note{display:flex;align-items:flex-start;gap:10px;width:100%;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#edf9ff,#e0f2fe);font-size:calc(13 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-medium);color:#0b54c2;line-height:1.5;border:1.5px solid rgba(11,84,194,.3);box-shadow:0 2px 8px #0b54c214}.result-overlay__loyalty-note svg{flex-shrink:0;margin-top:1px;width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(11,84,194,.2))}.result-overlay__done{min-height:56px;width:100%;border-radius:16px;font-size:calc(16 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-bold);transition:all .3s cubic-bezier(.4,0,.2,1);border:none;letter-spacing:.01em}.result-overlay__done:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59}.result-overlay__done:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40}.btn{padding:16px 24px;border-radius:14px;font-size:calc(15 * var(--almatar-font-size-ratio, 1) * 1px);font-weight:var(--almatar-font-weight-semibold);cursor:pointer;border:none;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff3;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:active:before{width:300px;height:300px}.btn--primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 4px 16px #7c3aed40,0 2px 4px #7c3aed26}.btn--primary:hover{background:linear-gradient(135deg,#6d28d9,#5b21b6);transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed59,0 4px 8px #7c3aed33;color:#fff}.btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px #7c3aed40,0 2px 4px #7c3aed26}.mada-logo{margin-inline-start:12px;display:inline-flex;align-items:center;padding:4px 8px;background:#ffffffe6;border-radius:6px;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f}\n"] }]
|
|
5174
5171
|
}], ctorParameters: () => [] });
|
|
5175
5172
|
|
|
5176
5173
|
class AlmatarHotelAutoCancellationComponent {
|