\r\n
\r\n\r\n\r\n
\r\nFinance Templates
\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n Select Logo Type
\r\n \r\n
\r\n {{ logoType }}
\r\n \r\n
\r\n\r\n \r\n
\r\n Upload Property Logo
\r\n \r\n
\r\n Uploaded Logo
\r\n \r\n ![\"\"]()
\r\n\r\n
\r\n \r\n
\r\n Remove
\r\n * Maximum image size that you can upload is 4MB
\r\n \r\n
\r\n\r\n Payment Link Template
\r\n \r\n
\r\n \r\n
\r\n\r\n Guest Invoice Template
\r\n \r\n
\r\n \r\n
\r\n\r\n Partner Invoice Template
\r\n \r\n
\r\n \r\n
\r\n \r\n Partner Statement Template
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Footer text
\r\n \r\n \r\n \r\n Save\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n\r\n \r\n \r\n
\r\n","import { MessageLogsService } from './message-logs.service';\r\nimport { Component, OnInit, ViewChild, AfterContentInit, ElementRef } from '@angular/core';\r\nimport { DxDataGridComponent, DxSelectBoxComponent } from 'devextreme-angular';\r\nimport { EnumModel } from 'src/app/models/shared/enum-model';\r\nimport { MessageLogViewModel } from 'src/app/models/message/message-log-view.model';\r\nimport { MessageLogFilterModel } from 'src/app/models/message/message-log-filter.model';\r\nimport { MessageLogsGridModel, MessageLogsGridResponseModel } from 'src/app/models/message/message-log-grid.model';\r\nimport { GridConfiguration, DxGridHelper } from 'src/app/shared/helpers/dx-grid-helper';\r\nimport { SettingsTemplatesService } from '../../settings/settings-templates/settings-templates.service';\r\nimport { Router } from '@angular/router';\r\nimport { AuthTokenService } from 'src/app/shared/services/auth-token.service';\r\nimport { first } from 'rxjs/operators';\r\nimport { ToastService } from 'src/app/shared/services/toast.service';\r\nimport { ToastEventType } from 'src/app/enums/toast-event-type';\r\n\r\n@Component({\r\n selector: 'app-messaging-logs',\r\n templateUrl: './messaging-logs.component.html',\r\n styleUrls: ['./messaging-logs.component.less'],\r\n})\r\nexport class MessagingLogsComponent implements OnInit, AfterContentInit {\r\n @ViewChild(DxDataGridComponent, { static: true }) grid: DxDataGridComponent;\r\n @ViewChild('status') statusValue: DxSelectBoxComponent;\r\n @ViewChild('type') typeValue: DxSelectBoxComponent;\r\n @ViewChild('msgContainer', { read: ElementRef }) msgContainer: ElementRef;\r\n\r\n loader = false;\r\n theme: number;\r\n\r\n date: Date = null;\r\n activeId: number;\r\n showMessage = false;\r\n showTooltipMessage = false;\r\n confirmMessageDelete = false;\r\n messageToDelete = null;\r\n currentMessage: string;\r\n statuses = new EnumModel();\r\n types = new EnumModel();\r\n messageLogFilterModel = new MessageLogFilterModel();\r\n messagesList: Array\r\n
\r\n\r\n\r\n\r\n \r\n \r\n {{ n.data?.status }}\r\n
\r\n Messaging Logs
\r\n\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n #{{ r.data?.refNumber }} \r\n
\r\n \r\n {{ n.data?.subject || n.data?.message }}\r\n
\r\n \r\n \r\n
\r\n \r\n {{ n.data?.scheduledTime | datex: 'DD/MM/YYYY HH:mm' }}\r\n
\r\n \r\n {{ n.data?.timeSent | datex: 'DD/MM/YYYY HH:mm' }}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\nClick here to view message
\r\n {
// You can access room row variables here (please remove this line).
}',\r\n null,\r\n '{ Foreach }'\r\n ),\r\n new EnumModel('{guestTitle}', null, 'Guest Title'),\r\n new EnumModel('{guestForename}', null, 'Guest Forename'),\r\n new EnumModel('{guestSurname}', null, 'Guest Surname'),\r\n new EnumModel('{guestNotes}', null, 'Guest Notes'),\r\n new EnumModel('{guestPhone}', null, 'Guest Phone'),\r\n new EnumModel('{guestMobilePhone}', null, 'Guest Mobile Phone'),\r\n new EnumModel('{guestFullAddress}', null, 'Guest Full Address'),\r\n new EnumModel('{guestEmail}', null, 'Guest Email'),\r\n \r\n new EnumModel('{registrationForm}', null, 'Guest Registration Link'),\r\n new EnumModel('{registrationFormNakedLink}', null, 'Guest Registration Naked Link'),\r\n new EnumModel('{partnerName}', null, 'Partner Name'),\r\n \r\n new EnumModel('{bookingFirstArrivalDate}', null, 'Booking First Arrival Date'),\r\n new EnumModel('{bookingLastDepartureDate}', null, 'Booking Last Departure Date'),\r\n new EnumModel('{bookingAccommodationTotal}', null, 'Booking Accommodation Total'),\r\n new EnumModel('{bookingExtrasList}', null, 'Booking Extras List'),\r\n new EnumModel('{bookingExtrasTotal}', null, 'Booking Extras Total'),\r\n new EnumModel('{bookingFullNotes}', null, 'Booking Full Notes'),\r\n \r\n new EnumModel('{bookingReferenceNumber}', null, 'Booking Reference Number'),\r\n new EnumModel('{bookingStatus}', null, 'Booking Status'),\r\n new EnumModel('{bookingAdultGuestCount}', null, 'Booking Adult Guest Count'),\r\n new EnumModel('{bookingChildGuestCount}', null, 'Booking Child Guest Count'),\r\n new EnumModel('{bookingTotalRoomNights}', null, 'Booking Total Room Nights'),\r\n new EnumModel('{bookingTotalValue}', null, 'Booking Total Value'),\r\n new EnumModel('{bookingTotalVATAmount}', null, 'Booking Total VAT Amount'),\r\n new EnumModel('{bookingTotalExcludingVAT}', null, 'Booking Total Excluding VAT'),\r\n new EnumModel('{bookingDepositPaid}', null, 'Booking Deposit Paid'),\r\n new EnumModel('{bookingPaid}', null, 'Booking Paid'),\r\n new EnumModel('{bookingBalanceOwing}', null, 'Booking Balance Owing '),\r\n new EnumModel('{bookingPaymentLink}', null, 'Booking Balance Link'),\r\n new EnumModel('{bookingPaymentNakedLink}', null, 'Booking Balance Naked Link'),\r\n new EnumModel('{bookingPaymentAmount}', null, 'Booking Payment Amount'),\r\n new EnumModel('{bookingPaymentRequest}', null, 'Booking Payment Link'),\r\n new EnumModel('{bookingPaymentNakedRequest}', null, 'Booking Payment Naked Link'),\r\n new EnumModel('{bookingRoom.arrivalDate}', null, 'Room Row Arrival Date'),\r\n new EnumModel('{bookingRoom.departureDate}', null, 'Room Row Departure Date'),\r\n new EnumModel('{bookingRoom.roomTypeName}', null, 'Room Row Room Type'),\r\n new EnumModel('{bookingRoom.roomNumber}', null, 'Room Row Room Number'),\r\n new EnumModel('{bookingRoom.adults}', null, 'Room Adult Guest Count'),\r\n new EnumModel('{bookingRoom.children}', null, 'Room Child Guest Count'),\r\n new EnumModel('{bookingRoom.ratePlanName}', null, 'Room Row RatePlan'),\r\n new EnumModel('{bookingRoom.price}', null, 'Room Row Sub Total Price'),\r\n new EnumModel('{bookingRoom.depositPolicy}', null, 'Room Row Deposit Policy'),\r\n new EnumModel('{bookingRoom.paymentPolicy}', null, 'Room Row Payment Policy'),\r\n new EnumModel('{bookingRoom.cancellationPolicy}', null, 'Room Row Cancellation Policy'),\r\n new EnumModel('{propertyName}', null, 'Property Name'),\r\n new EnumModel('{propertyAddress}', null, 'Property Address'),\r\n new EnumModel('{propertyPhone}', null, 'Property Phone'),\r\n new EnumModel('{propertyEmail}', null, 'Property Email'),\r\n new EnumModel('{propertyWebsite}', null, 'Property Website'),\r\n new EnumModel('{propertyLogo}', null, 'Property Logo'),\r\n new EnumModel('{thisBookingRoom.BookingFrom}', null, 'This Booking Room - Arrival Date'),\r\n new EnumModel('{thisBookingRoom.BookingTo}', null, 'This Booking Room - Departure Date'),\r\n new EnumModel('{thisBookingRoom.RoomType}', null, 'This Booking Room - Room Type'),\r\n new EnumModel('{thisBookingRoom.RoomNumber}', null, 'This Booking Room - Room Number'),\r\n new EnumModel('{thisBookingRoom.RatePlan}', null, 'This Booking Room - RatePlan'),\r\n new EnumModel('{thisBookingRoom.Price}', null, 'This Booking Room - Accommodation Total'),\r\n new EnumModel('{thisBookingRoom.ExtrasTotal}', null, 'This Booking Room - Extras Total'),\r\n new EnumModel('{thisBookingRoom.SubTotalPrice}', null, 'This Booking Room - Sub Total Price'),\r\n new EnumModel('{thisBookingRoom.bookingVerifyLink}', null, 'This Booking Room - Verify Link'),\r\n new EnumModel('{thisBookingRoom.bookingVerifyNakedLink}', null, 'This Booking Room - Verify Naked Link'),\r\n //new EnumModel('{thisBookingRoom.PaymentLink}', null, 'This Booking Room - Payment Link '),\r\n //new EnumModel('{thisBookingRoom.PaymentNakedLink}', null, 'This Booking Room - Payment Naked Link '),\r\n );\r\n \r\n this.smsVariables = JSON.parse(\r\n JSON.stringify(\r\n this.emailVariables.filter(\r\n (x) => x.id !== '{propertyLogo}' && x.id !== '{bookingPaymentLink}' && x.id !== '{propertyWebsite}' && x.id !== '{bookingVerifyLink}'\r\n )\r\n )\r\n );\r\n const smsForeach = this.smsVariables.find((x) => x.name === '{ Foreach }');\r\n smsForeach.id = `{foreach}:{bookingRoom}\\n{\\n// You can access room row variables here (please remove this line).\\n}`;\r\n \r\n }\r\n\r\n this.variablesSource = this.emailVariables;\r\n }\r\n\r\n ngOnInit() {\r\n this.setDynamicVariables();\r\n\r\n if (this.addMessageTemplate) {\r\n this.messageCentreService.newMessageTemplate().subscribe(\r\n (response) => {\r\n this.messageTemplatePDModel = response;\r\n this.messageTemplatePDModel.messageTemplateTypes[0].selected = true;\r\n this.messageTemplatePDModel.messageTemplateSenders[0].selected = true;\r\n this.messageTemplatePDModel.messageTemplateRecipients[0].selected = true;\r\n this.messageTemplatePDModel.messageTemplateScheduleTypes[0].selected = true;\r\n this.messageTemplatePDModel.messageTemplateScheduleTimeTriggers[0].selected = true;\r\n this.messageTemplatePDModel.messageTemplate.type =\r\n this.messageTemplatePDModel.messageTemplateTypes[0].value;\r\n this.messageTemplatePDModel.messageTemplate.sender =\r\n this.messageTemplatePDModel.messageTemplateSenders[0].value;\r\n this.messageTemplatePDModel.messageTemplate.recipient =\r\n this.messageTemplatePDModel.messageTemplateRecipients[0].value;\r\n this.messageTemplatePDModel.messageTemplate.scheduleType =\r\n this.messageTemplatePDModel.messageTemplateScheduleTypes[0].value;\r\n this.messageTemplatePDModel.messageTemplate.scheduleTrigger =\r\n this.messageTemplatePDModel.messageTemplateScheduleTimeTriggers[0].value;\r\n this.eventBasedForm.controls['triggerEvent'].setValue(\r\n this.messageTemplatePDModel.messageTemplate.scheduleTrigger\r\n );\r\n this.messageTemplatePDModel.messageTemplate.reservationType = this.reservationType;\r\n this.eventBased = false;\r\n this.timeBased = false;\r\n },\r\n (error) => {\r\n console.log(error);\r\n }\r\n );\r\n } else if (this.editMessageTemplate) {\r\n this.messageCentreService.editMessageTemplate(this.templateId).subscribe(\r\n (response) => {\r\n this.messageTemplatePDModel = response;\r\n this.showEditor = true;\r\n this.setInitialData();\r\n },\r\n (error) => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n\r\n getBookingSource(item: string): EnumModelSelected {\r\n for (const x of this.messageTemplatePDModel.messageTemplateBookingSources) {\r\n if (item === x.value) {\r\n return x;\r\n }\r\n }\r\n\r\n return new EnumModelSelected();\r\n }\r\n\r\n setInitialData() {\r\n // set message type\r\n this.messageTemplatePDModel.messageTemplateTypes.forEach((x) => {\r\n if (x.value === this.messageTemplatePDModel.messageTemplate.type) {\r\n x.selected = true;\r\n } else {\r\n x.selected = false;\r\n }\r\n });\r\n this.showSubject = this.messageTemplatePDModel.messageTemplate.type === 'Email';\r\n\r\n // set booking source\r\n if (this.messageTemplatePDModel.messageTemplate.madeByStaff) {\r\n this.getBookingSource('Staff').selected = true;\r\n } else {\r\n this.getBookingSource('Staff').selected = false;\r\n }\r\n\r\n if (this.messageTemplatePDModel.messageTemplate.madeByWebsite) {\r\n this.getBookingSource('Website').selected = true;\r\n } else {\r\n this.getBookingSource('Website').selected = false;\r\n }\r\n\r\n if (this.messageTemplatePDModel.messageTemplate.madeByOTA) {\r\n this.getBookingSource('OTA').selected = true;\r\n } else {\r\n this.getBookingSource('OTA').selected = false;\r\n }\r\n\r\n // set sender value\r\n this.messageTemplatePDModel.messageTemplateSenders.forEach((x) => {\r\n if (x.value === this.messageTemplatePDModel.messageTemplate.sender) {\r\n x.selected = true;\r\n } else {\r\n x.selected = false;\r\n }\r\n });\r\n\r\n // set recipient value\r\n this.messageTemplatePDModel.messageTemplateRecipients.forEach((x) => {\r\n if (x.value === this.messageTemplatePDModel.messageTemplate.recipient) {\r\n x.selected = true;\r\n } else {\r\n x.selected = false;\r\n }\r\n if (this.messageTemplatePDModel.messageTemplate.ccProperty && x.name === 'Property') {\r\n x.selected = true;\r\n }\r\n });\r\n\r\n // set values for filter\r\n if (this.messageTemplatePDModel.messageTemplate.otaChannelId !== null) {\r\n this.filterChosen = 'OTA';\r\n }\r\n\r\n if (this.messageTemplatePDModel.messageTemplate.rateplanId !== null) {\r\n this.filterChosen = 'RatePlan';\r\n }\r\n\r\n if (this.messageTemplatePDModel.messageTemplate.partnerId !== null) {\r\n this.filterChosen = 'Partner';\r\n }\r\n\r\n if (this.messageTemplatePDModel.messageTemplate.rateScheduleId !== null) {\r\n this.filterChosen = 'RateSchedule';\r\n }\r\n\r\n if (this.messageTemplatePDModel.messageTemplate.saleItemId !== null) {\r\n this.filterChosen = 'Extras';\r\n }\r\n\r\n if (\r\n this.messageTemplatePDModel.messageTemplate.otaChannelId === null &&\r\n this.messageTemplatePDModel.messageTemplate.partnerId === null &&\r\n this.messageTemplatePDModel.messageTemplate.rateplanId === null &&\r\n this.messageTemplatePDModel.messageTemplate.rateScheduleId === null && \r\n this.messageTemplatePDModel.messageTemplate.saleItemId === null\r\n ) {\r\n this.filterChosen = '';\r\n }\r\n\r\n this.setSourceForFilters(this.filterChosen);\r\n\r\n // set source for variables\r\n this.variablesSource =\r\n this.messageTemplatePDModel.messageTemplate.type === 'Email' ? this.emailVariables : this.smsVariables;\r\n\r\n // set messageWithoutHTMLTags\r\n /*const div = document.createElement('div');\r\n div.innerHTML = this.messageTemplatePDModel.messageTemplate.message;\r\n this.messageWithoutHTMLTags = div.textContent || div.innerText || '';*/\r\n\r\n // set schedule type\r\n if (this.messageTemplatePDModel.messageTemplate.scheduleType === null) {\r\n this.messageTemplatePDModel.messageTemplateScheduleTypes[0].selected = true;\r\n this.messageTemplatePDModel.messageTemplate.scheduleType =\r\n this.messageTemplatePDModel.messageTemplateScheduleTypes[0].value;\r\n }\r\n\r\n this.messageTemplatePDModel.messageTemplateScheduleTypes.forEach((x) => {\r\n if (x.value === this.messageTemplatePDModel.messageTemplate.scheduleType) {\r\n x.selected = true;\r\n } else {\r\n x.selected = false;\r\n }\r\n });\r\n if (this.messageTemplatePDModel.messageTemplate.scheduleType === 'Event') {\r\n // set values for EventBased Schedule\r\n this.timeBased = false;\r\n this.eventBased = true;\r\n this.eventBasedForm.controls['triggerEvent'].setValue(\r\n this.messageTemplatePDModel.messageTemplate.scheduleTrigger\r\n );\r\n this.eventDelay = this.messageTemplatePDModel.messageTemplate.minutesDelay;\r\n } else if (this.messageTemplatePDModel.messageTemplate.scheduleType === 'Time') {\r\n // set values for TimeBased Schedule\r\n this.eventBased = false;\r\n this.timeBased = true;\r\n\r\n if (this.checkIfDayIsSelected()) {\r\n this.days = true;\r\n this.hours = false;\r\n this.minutes = false;\r\n\r\n this.timeDelay = Math.abs(this.messageTemplatePDModel.messageTemplate.minutesDelay / 1440);\r\n } else if (this.checkIfHourIsSelected()) {\r\n this.hours = true;\r\n this.minutes = false;\r\n this.days = false;\r\n\r\n this.timeDelay = +Math.abs(this.messageTemplatePDModel.messageTemplate.minutesDelay / 60);\r\n } else {\r\n this.minutes = true;\r\n this.hours = false;\r\n this.days = false;\r\n\r\n this.timeDelay = +Math.abs(this.messageTemplatePDModel.messageTemplate.minutesDelay);\r\n }\r\n\r\n if (this.messageTemplatePDModel.messageTemplate.minutesDelay >= 0) {\r\n this.before = false;\r\n this.after = true;\r\n } else {\r\n this.after = false;\r\n this.before = true;\r\n }\r\n\r\n this.messageTemplatePDModel.messageTemplateScheduleTimeTriggers.forEach((x) => {\r\n if (x.value === this.messageTemplatePDModel.messageTemplate.scheduleTrigger) {\r\n x.selected = true;\r\n } else {\r\n x.selected = false;\r\n }\r\n });\r\n } else {\r\n this.eventBased = false;\r\n this.timeBased = false;\r\n }\r\n }\r\n\r\n checkIfDayIsSelected(): boolean {\r\n const divided: number = Math.abs(this.messageTemplatePDModel.messageTemplate.minutesDelay) / 1440;\r\n return divided >= 1 && divided % 1 === 0;\r\n }\r\n\r\n checkIfHourIsSelected(): boolean {\r\n const divided: number = Math.abs(this.messageTemplatePDModel.messageTemplate.minutesDelay) / 60;\r\n return divided >= 1 && Math.abs(this.messageTemplatePDModel.messageTemplate.minutesDelay) % 60 === 0;\r\n }\r\n\r\n //
\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n\r\n Filters
\r\n \r\n
\r\n Recipient
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n Subject
\r\n \r\n \r\n \r\n
\r\n Placeholder variables
\r\n \r\n * You can send up to 160 characters using one SMS credit. Messages longer than 160\r\n characters will incur additional SMS credit costs per each additional 160 block of\r\n characters used. Bear in mind that using placeholder variables such as guest's names\r\n may in some cases cause SMS to contain more characters than you planned.\r\n
\r\n \r\n \r\n
\r\n \r\n Message is required. \r\n
\r\n\r\n \r\n \r\n\r\n New Template
\r\nEdit Template
\r\n\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Type
\r\n \r\n
\r\n\r\n\r\n
\r\nEmail/SMS Templates
\r\n\r\n\r\n\r\n Email
\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n Booking type
\r\n\r\n \r\n
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n Active \r\n\r\n Inactive \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n SMS
\r\n\r\n Active \r\n\r\n Inactive \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n