');\r\n const del = $('');\r\n const select = e.cellElement.find('.dx-select-checkbox');\r\n\r\n del.off('click').on('click', (e) => {\r\n const removedIds = [];\r\n const gvEmailLogs = ($('#gvEmailLogs') as any).dxDataGrid('instance');\r\n\r\n $.each(gvEmailLogs.getSelectedRowKeys(), (i, v) => {\r\n removedIds.push(v.Id);\r\n });\r\n\r\n $.post('/Email/RemoveSentEmails', { ids: removedIds }, (data) => {\r\n $('.notification-message-remove-btn').hide()\r\n gvEmailLogs.refresh();\r\n });\r\n });\r\n\r\n div.append(select).append(del);\r\n div.on('dxclick', a => {\r\n a.stopPropagation();\r\n });\r\n e.cellElement.append(div);\r\n ($('[data-bs-toggle=\"tooltip\"]') as any).tooltip('enable');\r\n }\r\n },\r\n onContentReady: (e) => {\r\n window['InstanceBase'].hideFilterIconOnDevExGrid(e);\r\n\r\n window['fixShowLinesDevExGrid'](e.element[0], true);\r\n\r\n gvEmailLogsAddTooltip();\r\n $('[data-bs-toggle=\"tooltip\"]').tooltip('enable');\r\n\r\n if (!window['setActiveTodayBtn']) $(`.ps-es-emailLogs .settings-dateRange-btn`).removeClass('active');\r\n\r\n $('.root-preloader').hide();\r\n },\r\n onEditorPreparing: (ev) => {\r\n window['InstanceBase'].applyFilterOnDevExGrid(ev);\r\n },\r\n onSelectionChanged: (e) => {\r\n const allSelectedRowKeys = e.selectedRowKeys;\r\n allSelectedRowKeys.length > 0 ? $('.gvEmailLogs-moveIcons .fa-trash').css('display', 'inline-block') : $('.gvEmailLogs-moveIcons .fa-trash').hide();\r\n },\r\n pager: {\r\n allowedPageSizes: [25, 50, 100],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n pageSize: 25\r\n },\r\n remoteOperations: {\r\n grouping: true,\r\n groupPaging: true,\r\n filtering: true,\r\n paging: true,\r\n sorting: true,\r\n summary: true\r\n },\r\n rowAlternationEnabled: true,\r\n scrolling: {\r\n columnRenderingMode: 'standard',\r\n mode: 'standard',\r\n preloadEnabled: false,\r\n rowRenderingMode: 'standard',\r\n scrollByContent: true,\r\n scrollByThumb: false,\r\n showScrollbar: 'onHover',\r\n useNative: 'auto'\r\n },\r\n selection: {\r\n allowSelectAll: true,\r\n deferred: false,\r\n mode: 'multiple',\r\n selectAllMode: 'allPages',\r\n showCheckBoxesMode: 'onClick'\r\n },\r\n showBorders: true,\r\n showColumnLines: true,\r\n sorting: {\r\n mode: 'single'\r\n },\r\n });\r\n }\r\n\r\n function gvEmailLogsAddTooltip() {\r\n const body = $('#gvEmailLogs').find('.text-ellipsis');\r\n for (let i = 0; i < body.length - 1; i++) {\r\n const val = $(body[i]).text();\r\n if ($(body[i]).parent().width() < $(body[i]).width()) {\r\n $(body[i]).attr('title', val);\r\n }\r\n }\r\n }\r\n\r\n function gvEmailLogsSource() {\r\n //const startDateEmailLogs = window['moment'](($('#ps-es-emalLogs-startDate') as any).dxDateBox('option', 'value')).startOf('day').toDate();\r\n //const endDateEmailLogs = window['moment'](($('#ps-es-emalLogs-endDate') as any).dxDateBox('option', 'value')).endOf('day').toDate();\r\n const startDateEmailLogs = ($('.ps-es-emailLogs .ywftDateRange-devExDateFrom') as any).dxDateBox('option', 'value');\r\n const endDateEmailLogs = ($('.ps-es-emailLogs .ywftDateRange-devExDateTo') as any).dxDateBox('option', 'value');\r\n const source = window['DevExpress'].data.AspNet.createStore({\r\n loadMethod: 'POST',\r\n loadParams: {\r\n offset: window['userTimezone'].Offset,\r\n start: window['moment'](startDateEmailLogs).format('MM/DD/YYYY') ?? window['moment'](new Date()).format('MM/DD/YYYY'),\r\n end: window['moment'](endDateEmailLogs).format('MM/DD/YYYY') ?? window['moment'](new Date()).format('MM/DD/YYYY')\r\n },\r\n loadUrl: '/Email/GetSentEmails',\r\n });\r\n return source\r\n }\r\n\r\n function gvEmailLogsUpdate(changedDate = true) {\r\n $('.root-preloader').show();\r\n if (changedDate) {\r\n $('.ps-es-emailLogs-dateRange-btns .settings-dateRange-btn').removeClass('active');\r\n if (lastEmailLogsType) {\r\n $(`.ps-es-emalLogs-${lastEmailLogsType}-btn`).addClass('active');\r\n lastEmailLogsType = undefined;\r\n }\r\n }\r\n\r\n const source = gvEmailLogsSource();\r\n $('#gvEmailLogs').dxDataGrid('instance').option('dataSource', source);\r\n $('#gvEmailLogs').dxDataGrid('instance').refresh(true);\r\n }\r\n }\r\n\r\n /**\r\n * esNewEditEmailTemplateEditor(): Function\r\n * @param type - new or edit\r\n */\r\n esNewEditEmailTemplateEditor(type) {\r\n ($(`#${type}EmailTemplate-htmlEditor`) as any).dxHtmlEditor({\r\n height: '100%',\r\n imageUpload: {\r\n tabs: ['file', 'url'],\r\n fileUploadMode: 'base64',\r\n },\r\n mediaResizing: {\r\n enabled: true\r\n },\r\n onContentReady: (e) => {\r\n $('[data-bs-toggle=\"tooltip\"]').tooltip('enable');\r\n $('.root-preloader').hide();\r\n },\r\n onValueChanged: (e) => {\r\n console.log('chw', e)\r\n },\r\n toolbar: {\r\n items: [\r\n 'undo', 'redo', 'separator',\r\n {\r\n name: 'size',\r\n acceptedValues: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\r\n },\r\n {\r\n name: 'font',\r\n acceptedValues: ['Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana']\r\n },\r\n 'separator', 'bold', 'italic', 'strike', 'underline', 'separator',\r\n 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'separator',\r\n 'orderedList', 'bulletList', 'separator',\r\n {\r\n name: 'header',\r\n acceptedValues: [false, 1, 2, 3, 4, 5]\r\n }, 'separator',\r\n 'color', 'background', 'separator',\r\n 'link', 'image', 'separator',\r\n 'clear', 'codeBlock', 'blockquote', 'separator',\r\n 'insertTable', 'deleteTable',\r\n 'insertRowAbove', 'insertRowBelow', 'deleteRow',\r\n 'insertColumnLeft', 'insertColumnRight', 'deleteColumn',\r\n 'separator', 'variable'\r\n ]\r\n },\r\n value: type == 'edit' ? window['editEmailTemplate'].template : '',\r\n variables: {\r\n dataSource: ['FirstName', 'LastName', 'Business Name'],\r\n escapeChar: ['{', '}']\r\n }\r\n }).dxHtmlEditor('instance');\r\n }\r\n\r\n /**\r\n * esNewEditEmailTemplateFieldsValidation(): Function\r\n * @param mode - new or edit\r\n */\r\n esNewEditEmailTemplateFieldsValidation(type) {\r\n const nameVal = $(`#${type}EmailTemplate-name`).dxTextBox('instance').option('text');\r\n const subjectVal = $(`#${type}EmailTemplate-subject`).dxTextBox('instance').option('text');\r\n $(`.btn-${type}EmailTemplate-save`).prop('disabled', !(nameVal.length && subjectVal.length));\r\n }\r\n\r\n /**\r\n * esNewTemplate(): Function\r\n * Load page New Template from Settings - Email Settings\r\n */\r\n esNewTemplate() {\r\n const self = this;\r\n $('#ps-es-newEmailTemplate-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-es-newEmailTemplate-content', 'SettingsEmailNewTemplate', () => {\r\n ($('#newEmailTemplate-name') as any).dxTextBox({\r\n elementAttr: {\r\n 'data-change': 'newEmailTemplateName',\r\n name: 'newEmailTemplate-name',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'New Email Template Name',\r\n autocomplete: 'off'\r\n },\r\n mode: 'text',\r\n onInput: () => {\r\n self.esNewEditEmailTemplateFieldsValidation('new');\r\n },\r\n onValueChanged: (e) => {\r\n self.esNewEditEmailTemplateFieldsValidation('new');\r\n },\r\n placeholder: '',\r\n value: '',\r\n });\r\n\r\n ($('#newEmailTemplate-subject') as any).dxTextBox({\r\n elementAttr: {\r\n 'data-change': 'newEmailTemplateSubject',\r\n name: 'newEmailTemplate-subject',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'New Email Template Subject',\r\n autocomplete: 'off'\r\n },\r\n mode: 'text',\r\n onInput: () => {\r\n self.esNewEditEmailTemplateFieldsValidation('new');\r\n },\r\n onValueChanged: (e) => {\r\n self.esNewEditEmailTemplateFieldsValidation('new');\r\n },\r\n placeholder: '',\r\n value: '',\r\n });\r\n\r\n self.esNewEditEmailTemplateEditor('new');\r\n self.esNewEditEmailTemplateFieldsValidation('new');\r\n\r\n window['InstanceBase'].clickOnLabelForDevExField('.form-label');\r\n\r\n $('.btn-newEmailTemplate-save').off('click').on('click', (e) => {\r\n e.preventDefault();\r\n self.esSaveEmailTemplate('new');\r\n });\r\n })\r\n });\r\n }\r\n\r\n /**\r\n * esSaveEmailTemplate(): Function\r\n * Save new or edit email template\r\n * @param type - new or edit\r\n */\r\n esSaveEmailTemplate(type) {\r\n const data = {\r\n Description: $(`#${type}EmailTemplate-subject`).dxTextBox('instance').option('value'),\r\n Name: $(`#${type}EmailTemplate-name`).dxTextBox('instance').option('value'),\r\n Template: ($(`#${type}EmailTemplate-htmlEditor`) as any).dxHtmlEditor('instance').option('value')\r\n };\r\n if (type === 'edit') data['Id'] = $('#ps-es-editEmailTemplate-tab').data('id');\r\n\r\n $.post(`/Email/${type === 'new' ? 'Add' : 'Edit'}Template`, data, () => {\r\n $('.root-preloader').show();\r\n ($('#ps-es-emailTemplates-tab') as any).tab('show');\r\n try {\r\n $('#gvEmailTemplates').dxDataGrid('instance').refresh(true);\r\n } catch (ex) { }\r\n\r\n $(`#${type}EmailTemplate-name`).dxTextBox('option', 'value', '');\r\n $(`#${type}EmailTemplate-subject`).dxTextBox('option', 'value', '');\r\n ($(`#${type}EmailTemplate-htmlEditor`) as any).dxHtmlEditor('option', 'value', '');\r\n });\r\n }\r\n\r\n /**\r\n * esTemplates()\r\n * Load page Templates with grid width Email tempaltes from Settings - Email Settings\r\n */\r\n esTemplates() {\r\n const self = this;\r\n $('#ps-es-emailTemplates-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-es-emailTemplates-content', 'SettingsEmailTemplates', () => {\r\n $('#gvEmailTemplates').dxDataGrid({\r\n dataSource: window['DevExpress'].data.AspNet.createStore({\r\n loadMethod: 'POST',\r\n loadUrl: '/Email/GetTemplates',\r\n //onLoaded: (res) => {\r\n //}\r\n }),\r\n columns: [{\r\n dataField: 'Name'\r\n },\r\n {\r\n caption: 'Subject',\r\n dataField: 'Description'\r\n },\r\n {\r\n caption: 'Default',\r\n cellTemplate: (container, options) => {\r\n container.addClass('text-center');\r\n ($(`
`) as any).dxCheckBox({\r\n onValueChanged: (e) => {\r\n const checkboxes = $('#gvEmailTemplates').find('.gvEmailTemplates-defaultTemplate');\r\n if (e.value === true) {\r\n $.get('/Email/SetDefaultTemplate', { Id: options.data.Id }, () => {\r\n checkboxes.each((i, el) => {\r\n if ($(el).attr('data-id') != `${options.data.Id}`) {\r\n ($(el) as any).dxCheckBox('instance').option('value', false);\r\n }\r\n });\r\n });\r\n }\r\n else {\r\n let isDefault = false;\r\n for (let i = 0; i < checkboxes.length; i++) {\r\n if (($(checkboxes[i]) as any).dxCheckBox('instance').option('value') === true) {\r\n isDefault = true;\r\n break;\r\n }\r\n }\r\n if (!isDefault) $.get('/Email/SetDefaultTemplate', { Id: 0 });\r\n }\r\n },\r\n value: options.data.Default,\r\n }).appendTo(container);\r\n },\r\n width: 60,\r\n },\r\n {\r\n cellTemplate: (e, d) => {\r\n if (d.data.Id && !d.data.IsRAI) {\r\n const div = $('
');\r\n const editBtn = $('');\r\n const delBtn = $('');\r\n div.append(editBtn);\r\n div.append(delBtn);\r\n\r\n editBtn.on('click', () => {\r\n //$('#ps-es-editEmailTemplate-tab').data('id', d.data.Id);\r\n //$('#editEmailTemplate-name').dxTextBox('instance').option('value', d.data.Name);\r\n //$('#editEmailTemplate-subject').dxTextBox('instance').option('value', d.data.Description);\r\n //self.esEditTemplate();\r\n $.get('/Email/GetTemplate', { id: d.data.Id }, (data) => {\r\n window['editEmailTemplate'] = {\r\n id: d.data.Id,\r\n name: d.data.Name,\r\n object: d.data.Description,\r\n template: data.Template\r\n };\r\n //($('#editEmailTemplate-htmlEditor') as any).dxHtmlEditor('option', 'value', data.Template);\r\n $('#ps-es-editEmailTemplate-tab').show();\r\n ($('#ps-es-editEmailTemplate-tab') as any).tab('show');\r\n });\r\n });\r\n\r\n delBtn.on('click', () => {\r\n // if ($('#delTemplate').length) {\r\n // f($('#delTemplate'), e.target);\r\n // }\r\n // else {\r\n // let div = $('
');\r\n\r\n // $('body').append(div);\r\n // f(div, e.target);\r\n // }\r\n const objModal = {\r\n callback: DeleteEmailTemplate,\r\n classYesBtn: 'deleteEmailTemplate',\r\n textModal: `Do you want to delete template ${d.data.Name}?`,\r\n textNoBtn: 'No',\r\n textYesBtn: 'Yes',\r\n }\r\n window['InstanceBase'].onePropositionModalLoad(objModal);\r\n })\r\n return div;\r\n\r\n function DeleteEmailTemplate() {\r\n $.post('/Email/DeleteTemplate', { Id: d.data.Id }, () => {\r\n $('#gvEmailTemplates').dxDataGrid('refresh');\r\n // $('.sendEmail-template').dxSelectBox({\r\n // dataSource: window['DevExpress'].data.AspNet.createStore({\r\n // loadUrl: '/Email/GetTemplates',\r\n // loadMethod: 'POST'\r\n // }),\r\n // displayExpr: 'Name',\r\n // valueExpr: 'Id',\r\n // });\r\n });\r\n }\r\n }\r\n },\r\n cssClass: 'buttons',\r\n width: 70,\r\n }],\r\n height: '100%',\r\n onContentReady: (e) => {\r\n window['fixShowLinesDevExGrid'](e.element[0], true);\r\n $('[data-bs-toggle=\"tooltip\"]').tooltip('enable');\r\n $('.root-preloader').hide();\r\n },\r\n pager: {\r\n allowedPageSizes: [25, 50, 100],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n pageSize: 25\r\n },\r\n rowAlternationEnabled: true,\r\n selection: {\r\n mode: 'single',\r\n },\r\n showBorders: true\r\n });\r\n })\r\n })\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= General settings ==================================\r\n /**\r\n * generalSettings(): Function\r\n * Load and show General Settings\r\n */\r\n generalSettings() {\r\n $('.ps-gs-saveEvents-btn').prop('disabled', true);\r\n\r\n //let b = false; // ?!\r\n\r\n $.get('/User/Info', (data) => {\r\n window['EmailScore'] = data.EmailScore;\r\n\r\n /*gsTimeZone(data.TimeZone, data.DaylightTime);*/\r\n gsEmailScore(data.EmailScore);\r\n gsTimeMyDBEvents(data.TimeRemoveMy);\r\n gsTimeCompanyDBTabEvents(data.TimeRemoveCompany);\r\n gsTimeCompanyDBNotificationsEvents(data.NotificationTime);\r\n gsClicksAmountCompanyDBEvents(data.NotificationCount);\r\n\r\n $('.root-preloader').hide();\r\n });\r\n\r\n function gsClicksAmountCompanyDBEvents(countNofifications) {\r\n const devExClicksAmountCompanyDBEvents: any = ($('#ps-gs-eventsCompanyDBAmount') as any).dxNumberBox({\r\n format: '00',\r\n max: 10,\r\n min: 1,\r\n onValueChanged: () => {\r\n $('.ps-gs-eventsCompanyDBAmount-btn').prop('disabled', false);\r\n },\r\n showSpinButtons: true,\r\n step: 1,\r\n value: countNofifications ?? 5,\r\n width: 100,\r\n }).dxNumberBox('instance');\r\n\r\n $('.ps-gs-eventsCompanyDBAmount-btn').off('click').on('click', (ev) => {\r\n $.get('/User/NotificationCount', { value: devExClicksAmountCompanyDBEvents.option('value') }, () => {\r\n gsSaveChangesOnEvents(ev.target);\r\n });\r\n });\r\n }\r\n\r\n function gsEmailScore(emailScore) {\r\n const devExEmailScore: any = ($('#ps-gs-emailScore') as any).dxNumberBox({\r\n format: '0.00',\r\n max: 1,\r\n min: 0,\r\n onValueChanged: (e) => {\r\n window['EmailScore'] = e.value;\r\n $.get('/User/EmailScore', { score: e.value });\r\n },\r\n showSpinButtons: true,\r\n step: 0.01,\r\n value: emailScore ?? .1,\r\n width: 100,\r\n }).dxNumberBox('instance');\r\n }\r\n\r\n function gsSaveChangesOnEvents(ev) {\r\n const msg = $(ev).parent().find('.ps-gs-events-saved');\r\n\r\n msg.addClass('active');\r\n $(ev).prop('disabled', true);\r\n setTimeout(() => {\r\n msg.removeClass('active');\r\n }, 1500)\r\n }\r\n\r\n function gsTimeCompanyDBNotificationsEvents(timeNotifications) {\r\n const devExTimeCompanyDBNotificationsEvents: any = ($('#ps-gs-eventsCompanyDBNofitication') as any).dxNumberBox({\r\n format: '00',\r\n max: 30,\r\n min: 1,\r\n onValueChanged: () => {\r\n $('.ps-gs-eventsCompanyDBNofitication-btn').prop('disabled', false);\r\n },\r\n showSpinButtons: true,\r\n step: 1,\r\n value: timeNotifications ?? 30,\r\n width: 100,\r\n }).dxNumberBox('instance');\r\n\r\n $('.ps-gs-eventsCompanyDBNofitication-btn').off('click').on('click', (ev) => {\r\n $.get('/User/NotificationTime', { value: devExTimeCompanyDBNotificationsEvents.option('value') }, () => {\r\n gsSaveChangesOnEvents(ev.target);\r\n });\r\n });\r\n }\r\n\r\n function gsTimeCompanyDBTabEvents(timeEvents) {\r\n const devExTimeCompanyDBTabEvents: any = ($('#ps-gs-eventsCompanyDB') as any).dxNumberBox({\r\n format: '00',\r\n max: 30,\r\n min: 1,\r\n onValueChanged: () => {\r\n $('.ps-gs-eventsCompanyDB-btn').prop('disabled', false);\r\n },\r\n showSpinButtons: true,\r\n step: 1,\r\n value: timeEvents ?? 30,\r\n width: 100,\r\n }).dxNumberBox('instance');\r\n\r\n $('.ps-gs-eventsCompanyDB-btn').off('click').on('click', (ev) => {\r\n $.get('/User/TimeRemove/company', { value: devExTimeCompanyDBTabEvents.option('value') }, () => {\r\n gsSaveChangesOnEvents(ev.target);\r\n });\r\n });\r\n }\r\n\r\n function gsTimeMyDBEvents(timeEvents) {\r\n const devExTimeMyDBEvents: any = ($('#ps-gs-eventsMyDB') as any).dxNumberBox({\r\n format: '00',\r\n max: 30,\r\n min: 1,\r\n onValueChanged: () => {\r\n $('.ps-gs-eventsMyDB-btn').prop('disabled', false);\r\n },\r\n showSpinButtons: true,\r\n step: 1,\r\n value: timeEvents ?? 30,\r\n width: 100,\r\n }).dxNumberBox('instance');\r\n\r\n $('.ps-gs-eventsMyDB-btn').off('click').on('click', (ev) => {\r\n $.get('/User/TimeRemove/my', { value: devExTimeMyDBEvents.option('value') }, () => {\r\n gsSaveChangesOnEvents(ev.target);\r\n });\r\n });\r\n }\r\n\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= Payment Method Settings ==================================\r\n /**\r\n * paymentMethodSettings(): Function\r\n * Load and show PaymentMethod\r\n * Show payment cards/accounts (Credit card, PayPal, Personal)\r\n * Add new payment card/account\r\n */\r\n paymentMethodSettings() {\r\n const self = this;\r\n self.isPhoneValid = false;\r\n self.isFormInvalid = false;\r\n\r\n $.post('/UserLeads/State', data => {\r\n self.paymentStatesData = data;\r\n self.pmsCreditCard();\r\n //self.pmsPaypal();\r\n self.pmsPersonal();\r\n });\r\n }\r\n\r\n /**\r\n * pmsAddCreditCard(): Function\r\n * Set and show fields on Add new credit card\r\n */\r\n pmsAddCreditCard() {\r\n const self = this;\r\n pmsCreditCardName();\r\n pmsCreditCardNumber();\r\n pmsCreditCardExpDate();\r\n pmsCreditCardCVVCode();\r\n pmsCreditCardFirstName();\r\n pmsCreditCardLastName();\r\n pmsCreditCardAddress();\r\n pmsCreditCardZipCode();\r\n pmsCreditCardCity();\r\n pmsCreditCardState();\r\n pmsAddCreditCardActions();\r\n pmsCreditCardSave();\r\n\r\n function pmsAddCreditCardActions() {\r\n window['InstanceBase'].clickOnLabelForDevExField('.form-label');\r\n\r\n $('.ps-pms-creditCard-cvvCode-whatIs').hover(() => {\r\n $('.ps-pms-creditCard-cvvCode-help').css({ 'opacity': '1', 'z-index': '50' });\r\n }, () => {\r\n $('.ps-pms-creditCard-cvvCode-help').css({ 'opacity': '0', 'z-index': '-1' });\r\n })\r\n\r\n $('#ps-pms-creditCard-addCard-collapse').on('hidden.bs.collapse', () => {\r\n $('#ps-pms-creditCard-address').dxTextBox('instance').option('value', '');\r\n $('#ps-pms-creditCard-city').dxTextBox('instance').option('value', '');\r\n $('#ps-pms-creditCard-cvvCode').dxTextBox('instance').option('value', '');\r\n ($('#ps-pms-creditCard-expDate') as any).dxDateBox('instance').option('value', new Date);\r\n $('#ps-pms-creditCard-firstName').dxTextBox('instance').option('value', '');\r\n $('#ps-pms-creditCard-lastName').dxTextBox('instance').option('value', '');\r\n $('#ps-pms-creditCard-name').dxTextBox('instance').option('value', '');\r\n $('#ps-pms-creditCard-number').dxTextBox('instance').option('value', '');\r\n ($('#ps-pms-creditCard-state') as any).dxSelectBox('instance').option('value', '');\r\n $('#ps-pms-creditCard-zipCode').dxTextBox('instance').option('value', '');\r\n\r\n $('#ps-pms-creditCard-address').dxTextBox('instance').option('validationStatus', 'valid');\r\n $('#ps-pms-creditCard-city').dxTextBox('instance').option('validationStatus', 'valid');\r\n $('#ps-pms-creditCard-cvvCode').dxTextBox('instance').option('validationStatus', 'valid');\r\n $('#ps-pms-creditCard-firstName').dxTextBox('instance').option('validationStatus', 'valid');\r\n $('#ps-pms-creditCard-lastName').dxTextBox('instance').option('validationStatus', 'valid');\r\n $('#ps-pms-creditCard-name').dxTextBox('instance').option('validationStatus', 'valid');\r\n $('#ps-pms-creditCard-number').dxTextBox('instance').option('validationStatus', 'valid');\r\n ($('#ps-pms-creditCard-state') as any).dxSelectBox('instance').option('validationStatus', 'valid');\r\n $('#ps-pms-creditCard-zipCode').dxTextBox('instance').option('validationStatus', 'valid');\r\n\r\n $('#ps-pms-setDefaultPayment').prop('checked', false);\r\n });\r\n }\r\n\r\n function pmsCreditCardAddress() {\r\n ($('#ps-pms-creditCard-address') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardAddress',\r\n },\r\n inputAttr: { 'aria-label': 'Address' },\r\n maxLength: 100,\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n onValueChanged: () => {\r\n //$(document).on('keyup', ' #ps-pms-creditCard-address', function () {\r\n // ($('#ps-pms-creditCard-address').val() as any).length < 3 ? $('#ps-pms-creditCard-address').addClass(self.invalidClassname) : $('#ps-pms-creditCard-address').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [{\r\n message: 'Address is required',\r\n type: 'required',\r\n }, {\r\n message: 'Address must have at least 3 symbols',\r\n min: 3,\r\n type: 'stringLength',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardCity() {\r\n ($('#ps-pms-creditCard-city') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardCity',\r\n },\r\n inputAttr: { 'aria-label': 'City' },\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n onValueChanged: () => {\r\n //$(document).on('keyup', '#ps-pms-creditCard-city', function () {\r\n // ($('#ps-pms-creditCard-city').val() as any).length < 3 ? $('#ps-pms-creditCard-city').addClass(self.invalidClassname) : $('#ps-pms-creditCard-city').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [{\r\n message: 'City is required',\r\n type: 'required',\r\n }, {\r\n message: 'City must have at least 3 symbols',\r\n min: 3,\r\n type: 'stringLength',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardCVVCode() {\r\n ($('#ps-pms-creditCard-cvvCode') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardCvvCode',\r\n },\r\n inputAttr: { 'aria-label': 'CVV Code' },\r\n mask: '000',\r\n maskChar: ' ',\r\n maskInvalidMessage: 'Value is invalid',\r\n maxLength: 4,\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n onValueChanged: () => {\r\n //$(document).on('keyup', '#ps-pms-creditCard-cvvCode', function () {\r\n // $('#ps-pms-creditCard-cvvCode').val(($('#ps-pms-creditCard-cvvCode').val() as any).replace(/\\D/g, ''));\r\n // ($('#ps-pms-creditCard-cvvCode').val() as any).length < 3 ? $('#ps-pms-creditCard-cvvCode').addClass(self.invalidClassname) : $('#ps-pms-creditCard-cvvCode').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n width: 79,\r\n }).dxValidator({\r\n validationRules: [{\r\n type: 'required',\r\n message: 'CVV Code is required',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardExpDate() {\r\n ($('#ps-pms-creditCard-expDate') as any).dxDateBox({\r\n calendarOptions: {\r\n maxZoomLevel: 'year',\r\n minZoomLevel: 'century',\r\n },\r\n displayFormat: 'MM / yy',\r\n elementAttr: {\r\n name: 'psPmSCreditCardExpDate',\r\n },\r\n inputAttr: { 'aria-label': 'Expiration Date' },\r\n min: new Date(),\r\n onValueChanged: (e) => {\r\n //$('#ps-pms-creditCard-expDate .dx-texteditor-input').on('blur', () => {\r\n // $('#ps-pms-creditCard-expDate').hasClass('dx-invalid') ? $('#ps-pms-creditCard-expDate').addClass(self.invalidClassname) : $('#ps-pms-creditCard-expDate').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n //type: 'date',\r\n useMaskBehavior: true,\r\n value: new Date(),\r\n width: 105,\r\n }).dxValidator({\r\n validationRules: [{\r\n type: 'required',\r\n message: 'Expiration date is required',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardFirstName() {\r\n ($('#ps-pms-creditCard-firstName') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardFirstName',\r\n },\r\n inputAttr: { 'aria-label': 'First Name' },\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n onValueChanged: () => {\r\n //$(document).on('keyup', ' #ps-pms-creditCard-firstName', function () {\r\n // ($('#ps-pms-creditCard-firstName').val() as any).length < 3 ? $('#ps-pms-creditCard-firstName').addClass(self.invalidClassname) : $('#ps-pms-creditCard-firstName').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [{\r\n type: 'required',\r\n message: 'First Name is required',\r\n }, {\r\n message: 'First Name have at least 3 symbols',\r\n min: 3,\r\n type: 'stringLength',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardLastName() {\r\n ($('#ps-pms-creditCard-lastName') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardLastName',\r\n },\r\n inputAttr: { 'aria-label': 'Last Name' },\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n onValueChanged: () => {\r\n //$(document).on('keyup', ' #ps-pms-creditCard-lastName', function () {\r\n // ($('#ps-pms-creditCard-lastName').val() as any).length < 3 ? $('#ps-pms-creditCard-lastName').addClass(self.invalidClassname) : $('#ps-pms-creditCard-lastName').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [{\r\n type: 'required',\r\n message: 'Last Name is required',\r\n }, {\r\n message: 'Last Name have at least 3 symbols',\r\n min: 3,\r\n type: 'stringLength',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardName() {\r\n ($('#ps-pms-creditCard-name') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardName',\r\n },\r\n inputAttr: { 'aria-label': 'Credit Card Name' },\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n onValueChanged: (e) => {\r\n if (e.component.option('value').length < 3) e.component.option('validationStatus', 'invalid');\r\n //$(document).on('keyup', '#cardName', function () {\r\n // ($('#cardName').val() as any).length < 3 ? $('#cardName').addClass(self.invalidClassname) : $('#cardName').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [{\r\n type: 'required',\r\n message: 'Card Name is required',\r\n }, {\r\n message: 'Card Name have at least 3 symbols',\r\n min: 3,\r\n type: 'stringLength',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardNumber() {\r\n ($('#ps-pms-creditCard-number') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardNumber',\r\n },\r\n inputAttr: { 'aria-label': 'Credit Card Number' },\r\n mask: '0000 0000 0000 0000',\r\n maskChar: '_',\r\n maskInvalidMessage: 'Value is invalid',\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n onValueChanged: (e) => {\r\n if (e.component.option('value').length < 16) e.component.option('validationStatus', 'invalid');\r\n //$(document).on('keyup', '#cardNumber', function () {\r\n // $('#cardNumber').val(($('#cardNumber').val() as any).replace(/\\D/g, ''));\r\n // ($('#cardNumber').val() as any).length < 16 ? $('#cardNumber').addClass(self.invalidClassname) : $('#cardNumber').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [{\r\n type: 'required',\r\n message: 'Card Number is required',\r\n }],\r\n });\r\n }\r\n\r\n function pmsCreditCardSave() {\r\n $('#ps-pms-creditCard-save-btn').off('click').on('click', () => {\r\n self.isFormInvalid = true;\r\n //$('#ps-pms-setDefaultPayment').prop('disabled', false);\r\n const date = ($('#ps-pms-creditCard-expDate') as any).dxDateBox('instance').option('value');\r\n const dts = window['moment'](date).format('MM/YY').split('/');\r\n\r\n self.pmsSreditCardFiledsValidation();\r\n\r\n if (!self.isFormInvalid) {\r\n const res = {\r\n address1: $('#ps-pms-creditCard-address').dxTextBox('instance').option('value'),\r\n cardName: $('#ps-pms-creditCard-name').dxTextBox('instance').option('value'),\r\n cardNum: $('#ps-pms-creditCard-number').dxTextBox('instance').option('value'),\r\n city: $('#ps-pms-creditCard-city').dxTextBox('instance').option('value'),\r\n CVV: $('#ps-pms-creditCard-cvvCode').dxTextBox('instance').option('value'),\r\n defaultCard: $('#ps-pms-setDefaultPayment').is(':checked'),\r\n expDateMonth: dts[0],\r\n expDateYear: dts[1],\r\n firstName: $('#ps-pms-creditCard-firstName').dxTextBox('instance').option('value'),\r\n lastName: $('#ps-pms-creditCard-lastName').dxTextBox('instance').option('value'),\r\n state: ($('#ps-pms-creditCard-state') as any).dxSelectBox('instance').option('value'),\r\n zipCode: $('#ps-pms-creditCard-zipCode').dxTextBox('instance').option('value'),\r\n }\r\n\r\n self.pmsCreditCardSaveRequest(res);\r\n }\r\n });\r\n }\r\n\r\n function pmsCreditCardState() {\r\n ($('#ps-pms-creditCard-state') as any).dxSelectBox({\r\n items: self.paymentStatesData,\r\n displayExpr: (item) => {\r\n return item ? item.StateLong : '';\r\n },\r\n dropDownOptions: {\r\n wrapperAttr: {\r\n class: 'dropdownSize'\r\n }\r\n },\r\n onContentReady: (e) => {\r\n console.log('asdfa', self.paymentStatesData)\r\n },\r\n onValueChanged: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n //$('#ps-pms-creditCard-state').removeClass(self.invalidClassname);\r\n },\r\n placeholder: 'Select State',\r\n searchEnabled: true,\r\n searchExpr: ['StateLong', 'StateShort'],\r\n searchMode: 'contains',\r\n valueExpr: (item) => {\r\n return item ? item.StateShort : '';\r\n },\r\n }).dxValidator({\r\n validationRules: [{\r\n type: 'required',\r\n message: 'State is required'\r\n }]\r\n });\r\n }\r\n\r\n function pmsCreditCardZipCode() {\r\n ($('#ps-pms-creditCard-zipCode') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSCreditCardZipCode',\r\n },\r\n inputAttr: { 'aria-label': 'Zip Code' },\r\n mask: '00000',\r\n maskChar: '_',\r\n onInput: (e) => {\r\n const valLength = e.component._value.trim().length;\r\n if (valLength !== 5 || valLength !== 0) {\r\n e.component.option('validationStatus', 'valid');\r\n }\r\n },\r\n onValueChanged: () => {\r\n //$(document).on('keyup', ' #ps-pms-creditCard-zipCode', function () {\r\n // $('#ps-pms-creditCard-zipCode').val(($('#ps-pms-creditCard-zipCode').val() as any).replace(/\\D/g, ''));\r\n // ($('#ps-pms-creditCard-zipCode').val() as any).length != 5 ? $('#ps-pms-creditCard-zipCode').addClass(self.invalidClassname) : $('#ps-pms-creditCard-zipCode').removeClass(self.invalidClassname);\r\n //});\r\n },\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [\r\n {\r\n message: 'Zip Code is required',\r\n type: 'required',\r\n },\r\n {\r\n message: 'Zip Code is invalid',\r\n pattern: '^[0-9]{5}(?:-[0-9]{4})?$',\r\n type: 'pattern',\r\n }],\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * pmsCreditCard(): Function\r\n * Get and show all credit cards & set Add new credit card fields and actions\r\n */\r\n pmsCreditCard() {\r\n const self = this;\r\n self.pmsGetAllCreditCardsList();\r\n self.pmsAddCreditCard();\r\n }\r\n\r\n /**\r\n * pmsCreditCardActions(): Function\r\n * Ex.: Remove credit card\r\n */\r\n pmsCreditCardActions() {\r\n const self = this;\r\n\r\n $('.ps-pms-creditCard-remove-btn').off('click').on('click', (e) => {\r\n const card = $(e.target).closest('.card.card__item')\r\n const idCard = card.attr('id');\r\n if (card.find('.ps-pms-setDefaultPayment').is(':checked')) {\r\n const obj = {\r\n hideCancelIcon: true,\r\n position: 'top',\r\n size: 'sm',\r\n textModal: 'You can\\'t remove default payment method',\r\n textYesBtn: 'Ok',\r\n };\r\n window['InstanceBase'].onePropositionModalLoad(obj);\r\n } else {\r\n const obj = {\r\n callback: removeCreditCardCallback,\r\n classYesBtn: 'removeCrediCard',\r\n hideCancelIcon: false,\r\n position: 'top',\r\n textModal: 'Are you sure want to delete this payment method?',\r\n textNoBtn: 'Close',\r\n textYesBtn: 'Remove',\r\n };\r\n window['InstanceBase'].onePropositionModalLoad(obj);\r\n }\r\n\r\n function removeCreditCardCallback() {\r\n $('.root-preloader').show();\r\n $.post('/ProfileAndSettings/RemoveCard', { id: idCard /*28803246*/ }, () => {\r\n card.remove();\r\n $('.root-preloader').hide();\r\n });\r\n }\r\n });\r\n\r\n if (window['showAddCard']) {\r\n ($('#creditCard-info') as any).collapse('show');\r\n ($('#ps-pms-creditCard-addCard-collapse') as any).collapse('show');\r\n delete window['showAddCard'];\r\n }\r\n\r\n // ???????????\r\n //$('#ps-pms-accordion').find('.defaultPaymentMethod').html('');\r\n //$('#ps-pms-accordion').find('.defaultPaymentCard').html('');\r\n\r\n $('.root-preloader').hide();\r\n }\r\n\r\n /**\r\n * pmsSreditCardFiledsValidation(): Function\r\n * Check Add new credit card fields validation\r\n * @returns if all fields valid - false;\r\n */\r\n pmsSreditCardFiledsValidation() {\r\n const self = this;\r\n ($('#ps-pms-creditCard-name') as any).dxValidator('instance').validate();\r\n const name = $('#ps-pms-creditCard-name').dxTextBox('instance');\r\n if (name.option('validationStatus') == 'invalid') { name.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-number') as any).dxValidator('instance').validate();\r\n const number = $('#ps-pms-creditCard-number').dxTextBox('instance');\r\n if (number.option('validationStatus') == 'invalid') { number.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-expDate') as any).dxValidator('instance').validate();\r\n const expDate = ($('#ps-pms-creditCard-expDate') as any).dxDateBox('instance');\r\n if (expDate.option('validationStatus') == 'invalid') { expDate.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-cvvCode') as any).dxValidator('instance').validate();\r\n const cvvCode = $('#ps-pms-creditCard-cvvCode').dxTextBox('instance');\r\n if (cvvCode.option('validationStatus') == 'invalid') { cvvCode.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-firstName') as any).dxValidator('instance').validate();\r\n const firstName = $('#ps-pms-creditCard-firstName').dxTextBox('instance');\r\n if (firstName.option('validationStatus') == 'invalid') { firstName.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-lastName') as any).dxValidator('instance').validate();\r\n const lastName = $('#ps-pms-creditCard-lastName').dxTextBox('instance');\r\n if (lastName.option('validationStatus') == 'invalid') { lastName.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-address') as any).dxValidator('instance').validate();\r\n const address = $('#ps-pms-creditCard-address').dxTextBox('instance');\r\n if (address.option('validationStatus') == 'invalid') { address.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-zipCode') as any).dxValidator('instance').validate();\r\n const zipCode = $('#ps-pms-creditCard-zipCode').dxTextBox('instance');\r\n if (zipCode.option('validationStatus') == 'invalid') { zipCode.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-city') as any).dxValidator('instance').validate();\r\n const city = $('#ps-pms-creditCard-city').dxTextBox('instance');\r\n if (city.option('validationStatus') == 'invalid') { city.focus(); return; }\r\n\r\n ($('#ps-pms-creditCard-state') as any).dxValidator('instance').validate();\r\n const state = $('#ps-pms-creditCard-state').dxSelectBox('instance');\r\n if (state.option('validationStatus') == 'invalid') { state.focus(); return; }\r\n\r\n self.isFormInvalid = false;\r\n }\r\n\r\n /**\r\n * pmsCreditCardItem(cardArray)\r\n * @param cardArray - data of current card\r\n * @returns\r\n */\r\n pmsCreditCardItem(cardArray) {\r\n let cardImg;\r\n switch (cardArray.cardType) {\r\n case 'Amex': cardImg = 'logo-americanExpress.svg'; break;\r\n case 'Visa': cardImg = 'logo-visa.svg'; break;\r\n case 'Mast': cardImg = 'logo-mastercard.svg'; break;\r\n case 'Disc': cardImg = 'logo-discoverCard.svg'; break;\r\n }\r\n\r\n // let dateNow = `${new Date().getMonth()}${new Date().getFullYear().toString().slice(-2)}`;\r\n const expired = (new Date().getFullYear().toString().slice(-2) > cardArray.expDateYear ||\r\n (new Date().getFullYear().toString().slice(-2) == cardArray.expDateYear && new Date().getMonth() + 1 > cardArray.expDateMonth)) ?\r\n 'expired' : '';\r\n\r\n const cards = $('#accordionCreditCards').find('.card.card__item');\r\n const cardsCount = cards.length;\r\n const card =\r\n `
\r\n
`;\r\n return $(card).insertBefore(cards[cardsCount - 1]);\r\n }\r\n\r\n /**\r\n * pmsGetAllCreditCardsList(): Function\r\n * Get data for all credit cards of user and show them\r\n */\r\n pmsGetAllCreditCardsList() {\r\n const self = this;\r\n $.post('/ProfileAndSettings/GetCards', (data) => {\r\n const cardsCount = data.Cards.length;\r\n if (cardsCount > 0) {\r\n $('.card-preloader').show();\r\n const card = data.Cards;\r\n for (let i = 0; i < cardsCount; i++) {\r\n const check = data.Current == card[i].Id;\r\n const cardObj = {\r\n address1: card[i].Address1,\r\n id: card[i].Id,\r\n cardEnd: card[i].CardEnd,\r\n cardName: card[i].CardName,\r\n cardType: card[i].CardType,\r\n city: card[i].City,\r\n defaultCard: check,\r\n expDateMonth: card[i].ExpDate.slice(0, 2),\r\n expDateYear: card[i].ExpDate.slice(2, 5),\r\n firstName: card[i].FirstName,\r\n lastName: card[i].LastName,\r\n state: card[i].State,\r\n zipCode: card[i].ZipCode\r\n };\r\n self.pmsCreditCardItem(cardObj);\r\n }\r\n $('.card-preloader').hide();\r\n }\r\n else {\r\n const div = $('\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ![\"Visa](\"/Images/${cardImg}\")
\r\n
\r\n \r\n ${cardArray.cardType} ${cardArray.cardName} ending in ...${cardArray.cardEnd}
\r\n \r\n
\r\n \r\n
\r\n ${cardArray.expDateMonth} / ${cardArray.expDateYear} (expired)
\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 Name on card
\r\n${cardArray.cardName}
\r\n\r\n
\r\n Billing address
\r\n${cardArray.firstName} ${cardArray.lastName}
\r\n${cardArray.address1}
\r\n${cardArray.city}, ${cardArray.state}, ${cardArray.zipCode}
\r\nUSA
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n No credit cards added
')\r\n $('#accordionCreditCards').prepend(div);\r\n $('#ps-pms-setDefaultPayment').prop('checked', true).prop('disabled', true);\r\n $('.card-preloader').hide();\r\n $('.root-preloader').hide();\r\n }\r\n self.pmsSetDefaultPaymentMethod();\r\n self.pmsCreditCardActions();\r\n });\r\n }\r\n\r\n /**\r\n * pmsCreditCardSaveRequest(obj): Function\r\n * Send request for save and show new credit card\r\n * @param obj - data of new credit card\r\n */\r\n pmsCreditCardSaveRequest(obj: any) {\r\n const self = this;\r\n $('.root-preloader').show();\r\n $.post('/ProfileAndSettings/SaveCard', obj, (data) => {\r\n if (data.Ok) {\r\n const curentCard = data.customer;\r\n const check = $('#ps-pms-setDefaultPayment').is(':checked');\r\n\r\n $('.ps-psm-creditCard-no').remove();\r\n\r\n const newCardArray = {\r\n address1: curentCard.Address1,\r\n cardEnd: curentCard.CardEnd,\r\n cardName: curentCard.CardName,\r\n cardType: curentCard.CardType,\r\n city: curentCard.City,\r\n defaultCard: check,\r\n expDateMonth: obj.expDateMonth,\r\n expDateYear: obj.expDateYear,\r\n firstName: curentCard.FirstName,\r\n id: curentCard.Id,\r\n lastName: curentCard.LastName,\r\n state: curentCard.State,\r\n zipCode: curentCard.ZipCode,\r\n }\r\n self.pmsCreditCardItem(newCardArray); // show new credit card\r\n\r\n self.pmsSetDefaultPaymentMethod(); // set default credit card\r\n\r\n ($('#ps-pms-creditCard-addCard-collapse') as any).collapse('hide'); // hide Add new credit card section\r\n\r\n $('.root-preloader').hide();\r\n } else if (data.DeclineReason) {\r\n const obj = {\r\n hideCancelIcon: true,\r\n position: 'top',\r\n size: 'sm',\r\n textModal: data.DeclineReason,\r\n textYesBtn: 'Ok',\r\n };\r\n window['InstanceBase'].onePropositionModalLoad(obj);\r\n } else {\r\n const obj = {\r\n hideCancelIcon: true,\r\n position: 'top',\r\n textModal: 'Something gone wrong your credit card are not approved',\r\n textYesBtn: 'Ok',\r\n };\r\n window['InstanceBase'].onePropositionModalLoad(obj);\r\n }\r\n });\r\n }\r\n\r\n //pmsPaypal() { }\r\n\r\n pmsPersonal() {\r\n pmsPersonalAccountName();\r\n pmsPersonalBankRoutingNumber();\r\n pmsPersonalAccountNumber();\r\n pmsPersonalReAccountNumber();\r\n pmsPersonalCountry();\r\n pmsPersonalZipCode();\r\n pmsPersonalActions();\r\n\r\n function pmsPersonalAccountName() {\r\n ($('#ps-pms-personal-accountName') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSPersonalAccountName',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'Account Name',\r\n autocomplete: 'off'\r\n },\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n tabIndex: 1,\r\n value: '',\r\n })\r\n //.dxValidator({\r\n // validationRules: [\r\n // {\r\n // type: 'required',\r\n // message: 'First Name is required',\r\n // },\r\n // {\r\n // message: 'First Name have at least 3 symbols',\r\n // min: 3,\r\n // type: 'stringLength',\r\n // }],\r\n //});\r\n }\r\n\r\n function pmsPersonalActions() {\r\n window['InstanceBase'].clickOnLabelForDevExField('.form-label');\r\n }\r\n\r\n function pmsPersonalAccountNumber() {\r\n ($('#ps-pms-personal-accountNumber') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSPersonalAccountNumber',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'Account Number',\r\n autocomplete: 'off'\r\n },\r\n mask: '00000 00000 0000 000',\r\n maskChar: '_',\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n tabIndex: 3,\r\n value: '',\r\n })\r\n //.dxValidator({\r\n // validationRules: [\r\n // {\r\n // type: 'required',\r\n // message: 'First Name is required',\r\n // },\r\n // {\r\n // message: 'First Name have at least 3 symbols',\r\n // min: 3,\r\n // type: 'stringLength',\r\n // }],\r\n //});\r\n }\r\n\r\n function pmsPersonalBankRoutingNumber() {\r\n ($('#ps-pms-personal-bankNumber') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSPersonalBankNumber',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'Bank Routing Number',\r\n autocomplete: 'off'\r\n },\r\n mask: '000 000 000',\r\n maskChar: '_',\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n tabIndex: 2,\r\n value: '',\r\n })\r\n //.dxValidator({\r\n // validationRules: [\r\n // {\r\n // type: 'required',\r\n // message: 'First Name is required',\r\n // },\r\n // {\r\n // message: 'First Name have at least 3 symbols',\r\n // min: 3,\r\n // type: 'stringLength',\r\n // }],\r\n //});\r\n }\r\n\r\n function pmsPersonalCountry() {\r\n ($('#ps-pms-personal-country') as any).dxTextBox({\r\n disabled: true,\r\n elementAttr: {\r\n name: 'psPmSPersonalCountry',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'Country',\r\n autocomplete: 'off'\r\n },\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n tabIndex: 5,\r\n value: 'United States',\r\n })\r\n }\r\n\r\n function pmsPersonalReAccountNumber() {\r\n ($('#ps-pms-personal-reAccountNumber') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSPersonalReAccountNumber',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'Account Number',\r\n autocomplete: 'off'\r\n },\r\n mask: '00000 00000 0000 000',\r\n maskChar: '_',\r\n onInput: (e) => {\r\n e.component.option('validationStatus', 'valid');\r\n },\r\n tabIndex: 4,\r\n value: '',\r\n })\r\n //.dxValidator({\r\n // validationRules: [\r\n // {\r\n // type: 'required',\r\n // message: 'First Name is required',\r\n // },\r\n // {\r\n // message: 'First Name have at least 3 symbols',\r\n // min: 3,\r\n // type: 'stringLength',\r\n // }],\r\n //});\r\n }\r\n\r\n function pmsPersonalZipCode() {\r\n\r\n ($('#ps-pms-personal-zipCode') as any).dxTextBox({\r\n elementAttr: {\r\n name: 'psPmSPersonalZipCode',\r\n },\r\n inputAttr: {\r\n 'aria-label': 'ZipCode',\r\n autocomplete: 'off'\r\n },\r\n mask: '00000',\r\n maskChar: '_',\r\n onInput: (e) => {\r\n const valLength = e.component._value.trim().length;\r\n if (valLength !== 5 || valLength !== 0) {\r\n e.component.option('validationStatus', 'valid');\r\n }\r\n },\r\n tabIndex: 6,\r\n value: '',\r\n }).dxValidator({\r\n validationRules: [\r\n //{\r\n // message: 'Zip Code is required',\r\n // type: 'required',\r\n //},\r\n {\r\n message: 'Zip Code is invalid',\r\n pattern: '^[0-9]{5}(?:-[0-9]{4})?$',\r\n type: 'pattern',\r\n }],\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * pmsSetDefaultPaymentMethod(): Function\r\n * Set default or credit card method, or PayPal method, or Personal method\r\n */\r\n pmsSetDefaultPaymentMethod() {\r\n $('#ps-pms-accordion').find('.defaultPaymentMethod').html('');\r\n $('#ps-pms-accordion').find('.defaultPaymentCard').html('');\r\n $('input[type=\"radio\"].ps-pms-setDefaultPayment:checked').parents('.ps-pms-item').find('.defaultPaymentMethod').html(' (Default)');\r\n $('input[type=\"radio\"].ps-pms-setDefaultPayment:checked').parents('.card__item').find('.defaultPaymentCard').html(' (Default)');\r\n\r\n $('[name=\"defaultPaymentList\"]').on('change', (e) => {\r\n $('#ps-pms-accordion').find('.defaultPaymentMethod').html('');\r\n $('#ps-pms-accordion').find('.defaultPaymentCard').html('');\r\n $('input[type=\"radio\"].ps-pms-setDefaultPayment:checked').parents('.ps-pms-item').find('.defaultPaymentMethod').html(' (Default)');\r\n $('input[type=\"radio\"].ps-pms-setDefaultPayment:checked').parents('.card__item').find('.defaultPaymentCard').html(' (Default)');\r\n // Todo On Change Set Default Position\r\n $.post('/ProfileAndSettings/SaveDefaultPayment', { sid: $(e.target).val() }, () => { });\r\n });\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= Phone Settings ==================================\r\n /**\r\n * phoneSettings(): Function\r\n * Load and show Phone Settings\r\n */\r\n phoneSettings() {\r\n const self = this;\r\n\r\n self.phsCallLogs();\r\n self.phsRoboCallLogs();\r\n self.phsAudioLibrary();\r\n self.phsVerifiedCallerIds();\r\n self.phsActiveNumbers();\r\n self.phsBuyNumber();\r\n self.phsVoicemailLibrary();\r\n self.phsActions();\r\n }\r\n\r\n /**\r\n * phsActions(): Function\r\n * If is session storage - load this tab\r\n */\r\n phsActions() {\r\n if (sessionStorage.getItem('audioLibrary')) {\r\n sessionStorage.removeItem('audioLibrary');\r\n ($('#ps-phs-audio-tab') as any).tab('show');\r\n }\r\n else if (sessionStorage.getItem('crmCard-callLog')) {\r\n sessionStorage.removeItem('crmCard-callLog');\r\n ($('#ps-phs-callLogs-tab') as any).tab('show');\r\n }\r\n else if (sessionStorage.getItem('fromExternal')) { // === from Ext Users -> CRM Card -> no phone number -> click to phone number ===\r\n sessionStorage.removeItem('fromExternal');\r\n ($('#ps-phs-buyNumber-tab') as any).tab('show');\r\n $('[data-bs-toggle=\"tooltip\"]').tooltip('hide');\r\n }\r\n else if (sessionStorage.getItem('roboCallSettings')) {\r\n sessionStorage.removeItem('roboCallSettings');\r\n ($('#ps-phs-roboCallLogs-tab') as any).tab('show');\r\n }\r\n else if (sessionStorage.getItem('voicemailLibrary')) {\r\n sessionStorage.removeItem('voicemailLibrary');\r\n ($('#ps-phs-audio-tab') as any).tab('show');\r\n }\r\n else {\r\n ($('#ps-phs-callLogs-tab') as any).tab('show');\r\n }\r\n }\r\n\r\n /**\r\n * phsActiveNumbers(): Function\r\n * Load page Active Numbers from Settings - Phone Settings\r\n */\r\n phsActiveNumbers(onlyRefresh = false) {\r\n const self = this;\r\n let activePhoneNumbers = [];\r\n if (onlyRefresh) {\r\n gvActiveNumbersGetSource();\r\n } else {\r\n $('#ps-phs-activeNumbers-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-phs-activeNumbers-content', 'SettingsPhoneActiveNumbers', () => {\r\n $('.root-preloader').show();\r\n\r\n gvActiveNumbersGetSource();\r\n })\r\n })\r\n }\r\n\r\n function gvActiveNumbers() {\r\n $('.gvActiveNumbers').dxDataGrid({\r\n dataSource: activePhoneNumbers,\r\n columns: [\r\n {\r\n cellTemplate: (container, options) => {\r\n window['InstanceBase'].phoneCellTemplateOnDevExGrid(options.value).appendTo(container);\r\n },\r\n dataField: 'PhoneNumber'\r\n },\r\n { dataField: 'FriendlyName' },\r\n {\r\n cellTemplate: (ctx, e) => {\r\n if (e.data.VoiceUrl) {\r\n const index = e.data.VoiceUrl.indexOf('PhoneNumber=');\r\n const value = index > 0 ? e.data.VoiceUrl.substr(index).substr('PhoneNumber='.length) : '';\r\n window['InstanceBase'].phoneCellTemplateOnDevExGrid(value).appendTo(ctx);\r\n }\r\n },\r\n dataField: 'Call Forwarding',\r\n },\r\n {\r\n dataField: 'Price'\r\n },\r\n {\r\n cellTemplate: (ctx, e) => {\r\n for (const k in e.data.Capabilities) {\r\n if (e.data.Capabilities[k]) {\r\n switch (k) {\r\n case 'Fax':\r\n ctx.append('');\r\n break;\r\n case 'MMS':\r\n ctx.append('');\r\n break;\r\n case 'Voice':\r\n ctx.append('');\r\n break;\r\n case 'SMS':\r\n ctx.append('');\r\n break;\r\n default:\r\n ctx.append(`${k}`);\r\n }\r\n }\r\n }\r\n },\r\n dataField: 'Capablities',\r\n width: 120,\r\n }\r\n ],\r\n height: '100%',\r\n onContentReady: (e) => {\r\n // e.component.option('height', '100%');\r\n e.component.deselectAll();\r\n\r\n $('[data-bs-toggle=\"tooltip\"]').tooltip('enable');\r\n\r\n const row = $('');\r\n const colIncom = $('
');\r\n const colCount = $('
');\r\n const formRow = $('
');\r\n const colText = $('
When a Call comes in forward to
');\r\n const colInput = $('');\r\n const colButton = $('
');\r\n const input = $('
');\r\n const button = $('
');\r\n const countText = $('');\r\n e.element.find('#incomingForward').dxTextBox({\r\n mask: '+1 (X00) 000-0000',\r\n maskRules: { X: /[02-9]/ },\r\n disabled: true,\r\n height: 24,\r\n onInput: (e) => {\r\n ($(e.event.target).val() as any).replace(/\\D+/g, '').length == 11 ? $('#incomingApply').dxButton('instance').option('disabled', false) : $('#incomingApply').dxButton('instance').option('disabled', true);\r\n e.component.option('validationStatus', 'valid');\r\n\r\n },\r\n onValueChanged: (e) => {\r\n if (e.value.replace(/\\D+/g, '').length == 1) {\r\n e.component.option('validationStatus', 'valid');\r\n }\r\n },\r\n useMaskedValue: true,\r\n });\r\n e.element.find('#incomingApply').dxButton({\r\n disabled: true,\r\n height: 24,\r\n onClick: () => {\r\n $('.root-preloader').show();\r\n const selectedKeys = e.component.getSelectedRowKeys();\r\n const resp = [];\r\n const phoneNumber = e.element.find('#incomingForward').dxTextBox('option', 'value').replace(/\\D/g, '');\r\n selectedKeys.forEach(item => {\r\n $.post('/Twilio/EditIncoming', { phoneNumber: item.Id, Forward: phoneNumber }, (res) => {\r\n resp.push(res);\r\n if (resp.length >= selectedKeys.length) {\r\n $.get('/Twilio/Incomings', data => {\r\n try {\r\n $('.gvActiveNumbers').dxDataGrid('option', 'dataSource', data);\r\n }\r\n catch (ex) {\r\n console.error(ex);\r\n }\r\n activePhoneNumbers = data;\r\n $('.gvActiveNumbers').dxDataGrid('instance').refresh();\r\n });\r\n }\r\n });\r\n });\r\n },\r\n text: 'Apply',\r\n });\r\n\r\n $('.root-preloader').hide();\r\n },\r\n onEditorPreparing: (ev) => {\r\n window['InstanceBase'].applyFilterOnDevExGrid(ev);\r\n },\r\n onSelectionChanged: (e) => {\r\n const selectedCount = e.selectedRowKeys.length;\r\n if (selectedCount > 0) {\r\n $('#incomingForward').dxTextBox('instance').option('disabled', false);\r\n $('.activeNumbers-selected span').empty().text(selectedCount);\r\n } else {\r\n $('#incomingForward').dxTextBox('instance').option('disabled', true);\r\n $('.activeNumbers-selected span').empty().text(0);\r\n }\r\n },\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n rowAlternationEnabled: true,\r\n searchPanel: {\r\n placeholder: 'Search...',\r\n visible: true,\r\n },\r\n selection: {\r\n mode: 'multiple',\r\n selectAllMode: 'allPages',\r\n showCheckBoxesMode: 'always'\r\n },\r\n showBorders: true,\r\n summary: {\r\n totalItems: [\r\n { column: 'Price', summaryType: 'sum' }\r\n ]\r\n }\r\n });\r\n }\r\n\r\n function gvActiveNumbersGetSource() {\r\n try {\r\n $('.gvActiveNumbers').dxDataGrid('instance').dispose();\r\n }\r\n catch (ex) { }\r\n\r\n $.get('/Twilio/Incomings', data => {\r\n // try {\r\n // $('.gvActiveNumbers').dxDataGrid('option', 'dataSource', data);\r\n // }\r\n // catch (ex) {\r\n // console.error(ex);\r\n // }\r\n activePhoneNumbers = data;\r\n gvActiveNumbers();\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * phsAudioLibrary(): Function\r\n * Load page Audio Library from Settings - Phone Settings\r\n */\r\n phsAudioLibrary() {\r\n const self = this;\r\n\r\n $('#ps-phs-audio-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-phs-audio-content', 'SettingsPhoneAudioLibrary', () => {\r\n audioHeader();\r\n gvAudio();\r\n\r\n window['InstanceBase'].clickOnLabelForDevExField('.form-label');\r\n })\r\n })\r\n\r\n function audioHeader() {\r\n ($('#ps-phs-audio-routingNumber').dxTextBox({\r\n mask: '+1 (X00) 000-0000',\r\n maskInvalidMessage: 'The phone must have a correct USA phone format',\r\n maskRules: {\r\n 'X': /[02-9]/\r\n },\r\n onFocusOut: () => {\r\n const phone = $('#ps-phs-audio-routingNumber').dxTextBox('option', 'value');\r\n const digi = phone.replace(/\\D/g, '');\r\n\r\n if (digi.length == 11) {\r\n const data = { action: 'RoutingCall', value: phone };\r\n $.post('/ProfileAndSettings/Change', data, () => {\r\n window['User'].RoutingCall = data.value;\r\n });\r\n }\r\n },\r\n useMaskedValue: true,\r\n value: window['User'].RoutingCall,\r\n width: 150,\r\n }) as any)\r\n .dxValidator({\r\n validationRules: [{\r\n message: 'The phone must have a correct USA phone format',\r\n pattern: /^\\+\\s*1\\s*\\(\\s*[02-9]\\d{2}\\)\\s*\\d{3}\\s*-\\s*\\d{4}$/,\r\n type: 'pattern',\r\n }]\r\n });\r\n\r\n // === Delay ===\r\n ($('#ps-phs-audio-roboCallDelay') as any).dxNumberBox({\r\n min: 5,\r\n max: 60,\r\n onFocusOut: () => {\r\n // if (digi.length == 11) {\r\n const data = { action: 'RoboDelay', value: ($('#ps-phs-audio-roboCallDelay') as any).dxNumberBox('option', 'value') };\r\n $.post('/ProfileAndSettings/Change', data, () => {\r\n window['User'].RoboDelay = data.value;\r\n });\r\n // }\r\n },\r\n showSpinButtons: true,\r\n value: window['User'].RoboDelay,\r\n width: 90,\r\n });\r\n // === /Delay ===\r\n\r\n // === Pause ===\r\n ($('#ps-phs-audio-roboCallPause') as any).dxNumberBox({\r\n min: 0,\r\n max: 60,\r\n onFocusOut: () => {\r\n // if (digi.length == 11) {\r\n const data = { action: 'RoboPause', value: ($('#ps-phs-audio-roboCallPause') as any).dxNumberBox('option', 'value') };\r\n $.post('/ProfileAndSettings/Change',\r\n data,\r\n () => {\r\n window['User'].RoboPause = data.value;\r\n });\r\n // }\r\n },\r\n showSpinButtons: true,\r\n value: window['User'].RoboPause,\r\n width: 90,\r\n });\r\n // === /Pause ===\r\n\r\n ($('#ps-phs-audio-detectMachine') as any).dxCheckBox({\r\n onValueChanged: (ev) => {\r\n const data = { action: 'RoboMatchine', value: ev.component.option('value') };\r\n $.post('/ProfileAndSettings/Change', data, () => {\r\n window['User'].RoboMatchine = data.value;\r\n });\r\n },\r\n text: 'Detect machine',\r\n value: window['User'].RoboMatchine,\r\n });\r\n\r\n $('#ps-phs-audio-gvAudio-upload-btn').dxButton({\r\n hint: 'Upload file',\r\n icon: 'add',\r\n onClick: () => {\r\n $('#ps-phs-audio-add').click();\r\n },\r\n });\r\n\r\n $('#ps-phs-audio-add').off('change').on('change', (e) => {\r\n const data = window['InstanceBase'].addOneFileMax2MB(e.currentTarget, 'audio');\r\n\r\n $.ajax({\r\n contentType: false,\r\n data: data,\r\n processData: false,\r\n success: () => {\r\n $('#ps-phs-audio-gvAudio').dxDataGrid('instance').refresh();\r\n $('#ps-phs-audio-add').val('');\r\n if (window.location.pathname.toLowerCase() == '/robocall') {\r\n refreshRoboCallAudioLibraryDropdown();\r\n }\r\n },\r\n type: 'post',\r\n url: '/Audio',\r\n });\r\n });\r\n }\r\n\r\n function gvAudio() {\r\n $('#ps-phs-audio-gvAudio').dxDataGrid({\r\n dataSource: window['DevExpress'].data.AspNet.createStore({\r\n key: 'Id',\r\n loadUrl: '/Audio',\r\n }),\r\n columns: [\r\n { dataField: 'Name' },\r\n {\r\n caption: 'Records',\r\n cellTemplate: (container, options) => {\r\n $(container).addClass('ps-phs-gvRoboCallLogs-audio-td');\r\n const audio = $(``);\r\n self.phsStopAudio(audio, '#ps-phs-audio-tab');\r\n container.append(audio);\r\n },\r\n width: 265,\r\n },\r\n {\r\n cellTemplate: (container, options) => {\r\n const downloadBtn = $('
Total selected: 0
')\r\n colInput.append(input);\r\n colButton.append(button);\r\n formRow.append(colText).append(colInput).append(colButton);\r\n colIncom.append(formRow);\r\n colCount.append(countText);\r\n row.append(colCount).append(colIncom);\r\n\r\n e.element.find('.dx-toolbar-items-container .dx-toolbar-before').empty().append(row);\r\n // e.element.find('.dx-toolbar-items-container .dx-toolbar-before').html('');\r\n const delBtn = $('
');\r\n const div = $('
');\r\n div.append(downloadBtn).append(delBtn);\r\n container.append(div);\r\n\r\n downloadBtn.dxButton({\r\n hint: 'Download file',\r\n icon: 'download',\r\n onClick: () => {\r\n window.open(`/Audio/${(options as any).key}`);\r\n },\r\n });\r\n\r\n delBtn.dxButton({\r\n hint: 'Remove file',\r\n icon: 'remove',\r\n onClick: () => {\r\n const objModal = {\r\n callback: DeleteRoboCallAudio,\r\n classYesBtn: 'deleteRoboCallAudio',\r\n textModal: 'Are You sure want to delete?',\r\n textNoBtn: 'No',\r\n textYesBtn: 'Yes',\r\n }\r\n window['InstanceBase'].onePropositionModalLoad(objModal);\r\n\r\n function DeleteRoboCallAudio() {\r\n $.ajax({\r\n url: `/Audio/${(options as any).key}`, method: 'DELETE', success: () => {\r\n $('#ps-phs-audio-gvAudio').dxDataGrid('instance').refresh();\r\n if (window.location.pathname.toLowerCase() == '/robocall') {\r\n refreshRoboCallAudioLibraryDropdown((options as any).key);\r\n }\r\n }\r\n });\r\n }\r\n },\r\n });\r\n },\r\n // headerCellTemplate(header, info) {\r\n // let upload = $('
');\r\n // upload.dxButton({\r\n // hint: 'Upload file',\r\n // icon: 'upload',\r\n // onClick: () => {\r\n // $('#ps-phs-audio-add').click();\r\n // },\r\n // });\r\n // header.parent().css('text-align', 'right');\r\n // upload.appendTo(header);\r\n // },\r\n width: 70,\r\n }\r\n ],\r\n height: '100%',\r\n onContentReady: (e) => {\r\n window['fixShowLinesDevExGrid'](e.element[0], true);\r\n $('.root-preloader').hide();\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n rowAlternationEnabled: true,\r\n showBorders: true\r\n });\r\n }\r\n\r\n function refreshRoboCallAudioLibraryDropdown(id?) {\r\n try {\r\n const selectBox = $('#devEx-roboCall-voicemails').dxSelectBox('instance');\r\n const source = window['DevExpress'].data.AspNet.createStore({\r\n key: 'Id',\r\n loadUrl: '/Audio',\r\n })\r\n selectBox.option('dataSource', source);\r\n selectBox.repaint();\r\n if (id && id == selectBox.option('value')) selectBox.option('value', '');\r\n } catch (ex) { }\r\n }\r\n }\r\n\r\n /**\r\n * phsBuyNumber(): Function\r\n * Load page Buy Number from Settings - Phone Settings\r\n */\r\n phsBuyNumber() {\r\n const self = this;\r\n window['phoneSettingsChangeStatus'] = false;\r\n\r\n const phoneFilterMask = [\r\n { ID: 'A', Name: 'AreaCode' },\r\n { ID: 'L', Name: 'Locality' },\r\n { ID: 'N', Name: 'Number' },\r\n { ID: 'S', Name: 'State' },\r\n ];\r\n\r\n const buyNumberMatch = [\r\n { ID: 'F', Name: 'First part of number' },\r\n { ID: 'A', Name: 'Any where in number' },\r\n { ID: 'L', Name: 'Last part of number' }\r\n ];\r\n\r\n const page = 0;\r\n let k = 'KEY';\r\n const pp = window['Phone_Price'] ?? 2;\r\n const td = new Date();\r\n const m = buyNumberDaysInMonth(td.getMonth() + 1, td.getFullYear());\r\n const pricePerPhone = pp * (1 + (m - td.getDate()) / m);\r\n\r\n const selected = {};\r\n\r\n $('#ps-phs-buyNumber-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-phs-buyNumber-content', 'SettingsPhoneBuyNumber', () => {\r\n buyNumberDevExFilterMaskInput();\r\n buyNumberDevExFilterMask();\r\n buyNumberDevExMatch();\r\n gvBuyNumberLoad();\r\n buyNumberActions();\r\n })\r\n })\r\n\r\n function buyNumberActions() {\r\n $('.ps-phs-buyNumber-buy-btn').off('click').on('click', () => {\r\n const inst = buyNumberSelectedAsList();\r\n if (inst.length > 0) {\r\n buyNumberBuy(inst.map(t => t.FriendlyName));\r\n }\r\n });\r\n\r\n $('.ps-phs-buyNumber-selectedGridItems span').off('click').on('click', () => {\r\n gvBuyNumber(buyNumberSelectedAsList());\r\n })\r\n\r\n $('#ps-phs-buyNumber-form').on('submit', e => {\r\n e.preventDefault();\r\n\r\n $('.root-preloader').show();\r\n $('.ps-phs-buyNumber-selectedGridItems span').empty().text(buyNumberSelectedAsList().length).css('cursor', 'default');\r\n gvBuyNumberLoad();\r\n });\r\n\r\n $('#ps-phs-buyNumber-tab').off('hide.bs.tab').on('hide.bs.tab', e => {\r\n const selectedKeys = $('.gvBuyNumber').dxDataGrid('instance').getSelectedRowKeys();\r\n if (window['phoneSettingsChangeStatus'] && selectedKeys.length) {\r\n e.preventDefault();\r\n const objModal = {\r\n callback: buyNumberRemoveChange,\r\n classYesBtn: 'buyNumberChange',\r\n textModal: 'Your changes will be lost. Are you sure?',\r\n textNoBtn: 'No',\r\n textYesBtn: 'Yes',\r\n }\r\n window['InstanceBase'].onePropositionModalLoad(objModal);\r\n }\r\n else {\r\n buyNumberClear();\r\n }\r\n\r\n function buyNumberRemoveChange() {\r\n buyNumberClear();\r\n $((e as any).relatedTarget).click();\r\n }\r\n })\r\n }\r\n\r\n function buyNumberBuy(phones) {\r\n let phonesCols = '';\r\n for (let i = 0; i < phones.length; i++) {\r\n phonesCols += ``,\r\n textNoBtn: 'No',\r\n textYesBtn: 'Yes',\r\n }\r\n window['InstanceBase'].onePropositionModalLoad(objModal);\r\n\r\n function BuyNumberAddNumbers() {\r\n $('.root-preloader').show();\r\n $.post('/Twilio/AddIncomings', { phoneNumbers: phones }, () => {\r\n const objModal = {\r\n size: 'sm',\r\n textModal: 'Ok',\r\n textYesBtn: 'Ok',\r\n }\r\n setTimeout(() => { window['InstanceBase'].onePropositionModalLoad(objModal); }, 100);\r\n\r\n $('.gvBuyNumber').dxDataGrid('refresh');\r\n if ($('#ps-phs-activeNumbers-content .ps-section-item').length) self.phsActiveNumbers(true);\r\n $('.root-preloader').hide();\r\n });\r\n }\r\n }\r\n\r\n function buyNumberChangeStatus() {\r\n const maskValue = $('#ps-phs-buyNumber-filterMask').dxSelectBox('instance').option('value');\r\n const maskInputValue = $('#ps-phs-buyNumber-filterMask-input').dxTextBox('instance').option('value');\r\n const selectItemsOnGrid = $('.gvBuyNumber').dxDataGrid('instance').option('selectedRowKeys');\r\n\r\n window['phoneSettingsChangeStatus'] = maskValue === 'A' && !maskInputValue && !selectItemsOnGrid.length ? false : true;\r\n }\r\n\r\n function buyNumberClear() {\r\n $('#ps-phs-buyNumber-filterMask').dxSelectBox('instance').option('value', 'A');\r\n $('#ps-phs-buyNumber-filterMask-input').dxTextBox('instance').option('value', '');\r\n $('.gvBuyNumber').dxDataGrid('instance').deselectAll();\r\n buyNumberChangeStatus();\r\n $('#ps-phs-buyNumber-form').submit();\r\n }\r\n\r\n function buyNumberDaysInMonth(month, year) {\r\n return new Date(year, month, 0).getDate();\r\n }\r\n\r\n function buyNumberDevExFilterMask() {\r\n $('#ps-phs-buyNumber-filterMask').dxSelectBox({\r\n dataSource: phoneFilterMask,\r\n displayExpr: 'Name',\r\n onValueChanged: (e) => {\r\n try {\r\n $('#ps-phs-buyNumber-filterMask-input').dxTextBox('dispose')\r\n } catch (ex) { }\r\n\r\n switch (e.value) {\r\n case 'A':\r\n $('#ps-phs-buyNumber-match-section').hide();\r\n buyNumberDevExFilterMaskInput();\r\n break;\r\n case 'L':\r\n $('#ps-phs-buyNumber-match-section').hide();\r\n $('#ps-phs-buyNumber-filterMask-input').dxTextBox({\r\n maxLength: 50,\r\n mode: 'text',\r\n onValueChanged: () => {\r\n buyNumberChangeStatus();\r\n },\r\n placeholder: 'Search by City name',\r\n value: ''\r\n });\r\n break;\r\n case 'N':\r\n $('#ps-phs-buyNumber-match-section').show();\r\n $('#ps-phs-buyNumber-filterMask-input').dxTextBox({\r\n maxLength: 10,\r\n mode: 'tel',\r\n onKeyDown: (e) => {\r\n if (!((e.event['originalEvent'].keyCode >= 48 && e.event['originalEvent'].keyCode <= 57) || (e.event['originalEvent'].keyCode >= 96 && e.event['originalEvent'].keyCode <= 105) || (e.event['originalEvent'].keyCode <= 40) || e.event['originalEvent'].keyCode == 46 || e.event['originalEvent'].keyCode == 8)) {\r\n window['valFilter'] = true;\r\n }\r\n },\r\n onInput: () => {\r\n const val = $('#ps-phs-buyNumber-filterMask-input .dx-texteditor-input').val();\r\n if (window['valFilter']) $('#ps-phs-buyNumber-filterMask-input .dx-texteditor-input').val((val as any).slice(0, -1))\r\n delete window['valFilter']\r\n },\r\n onValueChanged: () => {\r\n buyNumberChangeStatus();\r\n },\r\n placeholder: 'Search by digits (up to 10 max)',\r\n value: ''\r\n });\r\n break;\r\n case 'S':\r\n $('#ps-phs-buyNumber-match-section').hide();\r\n $('#ps-phs-buyNumber-filterMask-input').dxTextBox({\r\n maxLength: 2,\r\n mode: 'text',\r\n onKeyDown: (e) => {\r\n if ((e.event['originalEvent'].keyCode >= 48 && e.event['originalEvent'].keyCode <= 57) || (e.event['originalEvent'].keyCode >= 96 && e.event['originalEvent'].keyCode <= 105)) {\r\n window['valFilter'] = true;\r\n }\r\n },\r\n onInput: () => {\r\n const val = $('#ps-phs-buyNumber-filterMask-input .dx-texteditor-input').val();\r\n if (window['valFilter']) $('#ps-phs-buyNumber-filterMask-input .dx-texteditor-input').val((val as any).slice(0, -1))\r\n delete window['valFilter']\r\n },\r\n onValueChanged: () => {\r\n buyNumberChangeStatus();\r\n },\r\n placeholder: 'Search by state (2 letters)',\r\n value: ''\r\n });\r\n break;\r\n default:\r\n $('#ps-phs-buyNumber-match-section').hide();\r\n break;\r\n }\r\n\r\n buyNumberChangeStatus();\r\n },\r\n value: 'A',\r\n valueExpr: 'ID',\r\n });\r\n }\r\n\r\n function buyNumberDevExFilterMaskInput() {\r\n ($('#ps-phs-buyNumber-filterMask-input') as any).dxTextBox({\r\n maxLength: 3,\r\n onKeyDown: (e) => {\r\n if (!((e.event.originalEvent.keyCode >= 48 && e.event.originalEvent.keyCode <= 57) || (e.event.originalEvent.keyCode >= 96 && e.event.originalEvent.keyCode <= 105) || (e.event.originalEvent.keyCode >= 37 && e.event.originalEvent.keyCode <= 40) || e.event.originalEvent.keyCode == 46 || e.event.originalEvent.keyCode == 8)) {\r\n window['valFilter'] = true;\r\n }\r\n },\r\n onInput: () => {\r\n const val = $('#ps-phs-buyNumber-filterMask-input .dx-texteditor-input').val();\r\n if (window['valFilter']) $('#ps-phs-buyNumber-filterMask-input .dx-texteditor-input').val((val as any).slice(0, -1))\r\n delete window['valFilter']\r\n },\r\n onValueChanged: () => {\r\n buyNumberChangeStatus();\r\n },\r\n placeholder: 'Search by 3 digits',\r\n value: ''\r\n });\r\n }\r\n\r\n function buyNumberDevExMatch() {\r\n $('#ps-phs-buyNumber-match').dxSelectBox({\r\n dataSource: buyNumberMatch,\r\n displayExpr: 'Name',\r\n value: 'A',\r\n valueExpr: 'ID',\r\n });\r\n }\r\n\r\n function buyNumberGenerateQuery() {\r\n let str = '';\r\n const q = $('#ps-phs-buyNumber-filterMask-input').dxTextBox('instance').option('value');\r\n switch ($('#ps-phs-buyNumber-filterMask').dxSelectBox('option', 'value')) {\r\n case 'A':\r\n str += '&areaCode=' + q;\r\n break;\r\n case 'L':\r\n str += '&inLocality=' + q;\r\n break;\r\n case 'P':\r\n str += '&inPostalCode=' + q;\r\n break;\r\n case 'S':\r\n str += '&inRegion=' + q;\r\n break;\r\n case 'C':\r\n str += '&countryCode=' + q;\r\n break;\r\n default:\r\n switch ($('#ps-phs-buyNumber-match').dxSelectBox('option', 'value')) {\r\n case 'F':\r\n let sf = '' + q;\r\n while (sf.length <= 10) {\r\n sf = sf + '*';\r\n }\r\n str += '&search=' + sf;\r\n break;\r\n case 'L':\r\n let sl = '' + q;\r\n while (sl.length <= 10) {\r\n sl = '*' + sl;\r\n }\r\n str += '&search=' + sl;\r\n break;\r\n default:\r\n str += '&search=' + q;\r\n }\r\n break;\r\n }\r\n // if (!$('#capabilitesAny').is(':checked')) {\r\n // let list = ['Voice', 'SMS', 'MMS', 'Fax'];\r\n\r\n // if ($('#capabilitesVoice').is(':checked'))\r\n // str += '&capabilites=Voice'\r\n // else\r\n // str += '&capabilites=NoVoice'\r\n // if ($('#capabilitesSMS').is(':checked'))\r\n // str += '&capabilites=SMS'\r\n // else\r\n // str += '&capabilites=NoSMS'\r\n // if ($('#capabilitesMMS').is(':checked'))\r\n // str += '&capabilites=MMS'\r\n // else\r\n // str += '&capabilites=NoMMS'\r\n // if ($('#capabilitesFax').is(':checked'))\r\n // str += '&capabilites=Fax'\r\n // else\r\n // str += '&capabilites=NoFax'\r\n // }\r\n return str;\r\n }\r\n\r\n function buyNumberSelectedAsList() {\r\n const arr = [];\r\n for (const k in selected)\r\n selected[k].forEach(t => {\r\n //Remove dublicat\r\n if (!arr.find(a => a.PhoneNumber == t.PhoneNumber)) {\r\n arr.push(t);\r\n }\r\n });\r\n return arr;\r\n }\r\n\r\n function gvBuyNumber(src, callback?) {\r\n $('.gvBuyNumber').dxDataGrid({\r\n dataSource: src,\r\n columns: [\r\n // {\r\n // caption: 'Action',\r\n // cellTemplate(ctx, e) {\r\n // let bt = $('');\r\n // bt.off('click').on('click', (ec) => {\r\n // buyNumberBuy(e);\r\n // });\r\n // ctx.html('');\r\n // ctx.append(bt);\r\n // },\r\n // },\r\n {\r\n cellTemplate: (ctx, e) => {\r\n const span = $(`${e.data.FriendlyName}`);\r\n span.css('cursor', 'pointer');\r\n ctx.html('');\r\n ctx.append(span);\r\n\r\n //span.off('click').on('click', () => {\r\n // buyNumberBuy(e);\r\n //});\r\n },\r\n dataField: 'FriendlyName',\r\n }, 'Locality',\r\n {\r\n caption: 'State',\r\n dataField: 'Region',\r\n }, 'PostalCode',\r\n {\r\n cellTemplate: (ctx, e) => {\r\n for (const k in e.data.Capabilities) {\r\n switch (k) {\r\n case 'Fax':\r\n ctx.append(``);\r\n break;\r\n case 'MMS':\r\n ctx.append(``);\r\n break;\r\n case 'Voice':\r\n ctx.append(``);\r\n break;\r\n case 'SMS':\r\n ctx.append(``);\r\n break;\r\n default:\r\n ctx.append(``);\r\n }\r\n }\r\n },\r\n dataField: 'Capablities',\r\n width: 120,\r\n }\r\n ],\r\n height: '100%',\r\n hoverStateEnabled: false,\r\n onContentReady: (e) => {\r\n //window['fixShowLinesDevExGrid'](e.element[0], true);\r\n if (Array.isArray(src))\r\n e.component.option('selectedRowKeys', src);\r\n if (callback) callback();\r\n\r\n $('.root-preloader').hide();\r\n },\r\n onSelectionChanged: (e) => {\r\n if (!Array.isArray(src)) {\r\n selected[k] = e.selectedRowsData;\r\n }\r\n else {\r\n gvBuyNumberDeselect(e.selectedRowKeys);\r\n }\r\n const allSelected = buyNumberSelectedAsList();\r\n const selectedCount = allSelected.length;\r\n const psp = pricePerPhone * selectedCount;\r\n if (psp > 0) {\r\n $('.ps-phs-buyNumber-price span').html(String((Math.floor(psp * 100) / 100)));\r\n $('.ps-phs-buyNumber-price-col').show();\r\n } else {\r\n $('.ps-phs-buyNumber-price-col').hide();\r\n }\r\n // $('#buyNumberOver-popup .dx-popup-content').html(allSelected.map(x => x.FriendlyName).join(','));\r\n\r\n const el = $('.ps-phs-buyNumber-selectedGridItems span');\r\n if (selectedCount > 0) {\r\n buyNumberChangeStatus();\r\n $('.ps-phs-buyNumber-buy-btn').prop('disabled', false);\r\n el.empty().text(selectedCount).css('cursor', 'pointer');\r\n if (!el.attr('data-bs-toggle')) {\r\n el.attr('data-bs-toggle', 'tooltip').attr('data-bs-placement', 'top').attr('data-title', 'Click if show only selected');\r\n el.tooltip('enable');\r\n }\r\n } else {\r\n buyNumberChangeStatus();\r\n $('.ps-phs-buyNumber-buy-btn').prop('disabled', true);\r\n el.empty().text('0').css('cursor', 'default');\r\n el.removeAttr('data-bs-toggle').removeAttr('data-bs-placement').removeAttr('data-title');\r\n el.tooltip('disable');\r\n }\r\n },\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n rowAlternationEnabled: true,\r\n scrolling: {\r\n showScrollbar: 'always',\r\n useNative: false,\r\n },\r\n selectedRowKeys: buyNumberSelectedAsList(),\r\n selection: {\r\n mode: 'multiple',\r\n selectAllMode: 'allPages',\r\n showCheckBoxesMode: 'always'\r\n },\r\n showBorders: true,\r\n })\r\n }\r\n\r\n function gvBuyNumberDeselect(arr) {\r\n const ak = 'ARR';\r\n for (const k in selected) {\r\n selected[k] = selected[k].filter(t => {\r\n return arr.find(a => a.PhoneNumber == t.PhoneNumber);\r\n });\r\n }\r\n selected[ak] = arr;\r\n }\r\n\r\n function gvBuyNumberLoad() {\r\n //no need try { $('.gvBuyNumber').dxDataGrid('instance').deselectAll() } catch (ex) { };\r\n\r\n const src = new window['DevExpress'].data.CustomStore({\r\n key: 'PhoneNumber',\r\n load() {\r\n const deferred = $.Deferred();\r\n $.ajax({\r\n url: `/Twilio/BuyPhoneNumbers?Page=${page}${buyNumberGenerateQuery()}`,\r\n dataType: 'json',\r\n success(result) {\r\n k = window['InstanceBase'].generateUUID(9);\r\n //let grid = $('.gvBuyNumber').dxDataGrid('instance');\r\n\r\n //moved here OnLoad Data\r\n //grid.deselectAll();\r\n deferred.resolve(result.Values);\r\n },\r\n error() {\r\n deferred.reject('Data Loading Error');\r\n }\r\n });\r\n\r\n return deferred.promise();\r\n }\r\n });\r\n\r\n $('.ps-phs-buyNumber-selectedGridItems span').removeClass('selected');\r\n gvBuyNumber(src);\r\n }\r\n }\r\n\r\n /**\r\n * phsCallLogs(): Function\r\n * Load page Call Logs from Settings - Phone Settings\r\n */\r\n phsCallLogs() {\r\n const self = this;\r\n\r\n let dataFromDashboard;\r\n //let LastCallsType = false;\r\n $('#ps-phs-callLogs-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-phs-callLogs-content', 'SettingsPhoneCallLogs', () => {\r\n phsCallLogsFirstActions();\r\n window['InstanceBase'].dateRangeWithYearWeekDates('.ps-phs-callLogs-main', phsUpdateCallLogs);\r\n if (window['User'] && window['User'].Manager) {\r\n phsCallLogsUsers();\r\n } else {\r\n $('.ps-phs-callLogs-userFilter-col').remove();\r\n }\r\n phsCallLogsDateRange();\r\n phsUpdateCallLogs();\r\n\r\n window['InstanceBase'].clickOnLabelForDevExField('.form-label');\r\n })\r\n });\r\n\r\n function phsCallLogsDateRange() {\r\n const year = ($(`.ps-phs-callLogs-main .ywftDateRange-devExYear`) as any).dxSelectBox('instance');\r\n const from = ($(`.ps-phs-callLogs-main .ywftDateRange-devExDateFrom`) as any).dxDateBox('instance');\r\n const to = ($(`.ps-phs-callLogs-main .ywftDateRange-devExDateTo`) as any).dxDateBox('instance');\r\n\r\n if (dataFromDashboard) {\r\n from.option('value', new Date(dataFromDashboard.StartDate));\r\n to.option('value', new Date(dataFromDashboard.EndDate));\r\n }\r\n\r\n //from.on('valueChanged', (e) => {\r\n // //let param = false\r\n // if (!LastCallsType) {\r\n // //setTimeout(() => { phsUpdateCallLogs() }, 500);\r\n\r\n // //param = e.name == 'opened' && e.value ? true : false;\r\n // //if (param && e.name == 'text')\r\n // phsUpdateCallLogs()\r\n // }\r\n //})\r\n //to.on('valueChanged', () => {\r\n // //setTimeout(() => { phsUpdateCallLogs() }, 500);\r\n // phsUpdateCallLogs()\r\n //})\r\n\r\n $('.ps-phs-callLogs-day-btn').off('click').on('click', (ev) => {\r\n //LastCallsType = true;\r\n //year.option('value', new Date().getFullYear());\r\n //setTimeout(() => {\r\n // LastCallsType = true;\r\n // from.option('value', new Date());\r\n // LastCallsType = true;\r\n // to.option('value', new Date());\r\n // $(ev.currentTarget).addClass('active');\r\n //}, 500);\r\n self.psDateRangeTodayBtn('.ps-phs-callLogs-main');\r\n })\r\n }\r\n\r\n function phsCallLogsFirstActions() {\r\n if (sessionStorage.getItem('callsOnDashboardGrid')) {\r\n dataFromDashboard = JSON.parse(sessionStorage.getItem('callsOnDashboardGrid'))\r\n //e.component.option('value', [dataFromDashboard.Email]);\r\n //($('.ps-phs-callLogs-main .ywftDateRange-devExDateFrom') as any).dxDateBox('instance').option('value', new Date(dataFromDashboard.StartDate));\r\n //($('.ps-phs-callLogs-main .ywftDateRange-devExDateTo') as any).dxDateBox('instance').option('value', new Date(dataFromDashboard.EndDate));\r\n\r\n sessionStorage.removeItem('callsOnDashboardGrid');\r\n //setTimeout(() => { $('.ps-phs-callLogs-dateRange-btns .settings-dateRange-btn').removeClass('active'); }, 200)\r\n }\r\n }\r\n\r\n function phsCallLogsUsers() {\r\n ($('#ps-phs-callLogs-userFilter') as any).dxDropDownBox({\r\n dataSource: window['DevExpress'].data.AspNet.createStore({\r\n key: 'Email',\r\n loadUrl: '/ProfileAndSettings/ListSubUsers',\r\n onLoaded: (result) => {\r\n console.log('result', result);\r\n },\r\n onLoading: (loadOptions) => {\r\n console.log('loading', loadOptions)\r\n },\r\n }),\r\n contentTemplate: (e) => {\r\n const value = e.component.option('value'),\r\n $dataGrid = $('
${phones[i]}${i == phones.length - 1 ? '?' : ''}
`;\r\n }\r\n const objModal = {\r\n callback: BuyNumberAddNumbers,\r\n classYesBtn: 'phoneSettingsBuyNumber-buy',\r\n textModal: `Do You want buy
${phonesCols}').dxDataGrid({\r\n dataSource: e.component.getDataSource(),\r\n columns: ['FirstName', 'LastName', 'Email', 'Status'],\r\n height: 265,\r\n hoverStateEnabled: true,\r\n keyExpr: 'Email',\r\n onContentReady: (el) => {\r\n if (value[0]) {\r\n const selected = el.component.getDataSource()['_items'].find(el => el.Email == value);\r\n if (selected as any) {\r\n window['firstSelect'] = true;\r\n el.component.option('selectedRowKeys', selected.value)\r\n }\r\n } else {\r\n window['firstSelect'] = true;\r\n }\r\n },\r\n onEditorPreparing: (e) => {\r\n window['InstanceBase'].devExSearchFilterDelay(e);\r\n window['InstanceBase'].devExSearchFilterMin(e);\r\n },\r\n onSelectionChanged: (selectedItems) => {\r\n const keys = selectedItems.selectedRowKeys;\r\n const hasSelection = keys.length;\r\n\r\n e.component.option('value', hasSelection ? keys[0] : null);\r\n if (!window['firstSelect']) {\r\n e.component.close();\r\n } else {\r\n delete window['firstSelect'];\r\n }\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 10\r\n },\r\n remoteOperations: true,\r\n searchPanel: {\r\n visible: true\r\n },\r\n selectedRowKeys: value,\r\n scrolling: { mode: 'infinite' },\r\n selection: { mode: 'single' },\r\n showBorders: true,\r\n });\r\n\r\n return $dataGrid;\r\n },\r\n displayExpr: 'FullName',\r\n dropDownOptions: {\r\n width: 500\r\n },\r\n onInput: () => {\r\n try {\r\n $('#gvcallLogsUserFilter').dxDataGrid('instance').deselectAll()\r\n } catch (ex) { }\r\n },\r\n onValueChanged: () => {\r\n phsUpdateCallLogs();\r\n },\r\n placeholder: 'Select Filter by User',\r\n showClearButton: true,\r\n value: [dataFromDashboard?.Email] ?? ''\r\n })\r\n }\r\n\r\n function phsGetCallHistorySource(start?: Date, end?: Date, email?: String) {\r\n return (window['DevExpress'] as any).data.AspNet.createStore({\r\n loadMethod: 'POST',\r\n loadParams: { Start: start ? window['moment'](start).format('MM/DD/YYYY') : undefined, End: end ? window['moment'](end).format('MM/DD/YYYY') : undefined, Email: email ?? undefined },\r\n loadUrl: '/Calls/Calls',\r\n });\r\n }\r\n\r\n function phsUpdateCallLogs() {\r\n //if (changedDate) {\r\n // $('.settings-dateRange-btn-callLogs').removeClass('active');\r\n // if (LastCallsType) {\r\n // $(`.filtersCallLogs-${LastCallsType}`).addClass('active');\r\n // LastCallsType = undefined;\r\n // }\r\n //}\r\n\r\n //if (!LastCallsType) {\r\n // $('.ps-phs-callLogs-day-btn').removeClass('active');\r\n // LastCallsType = false;\r\n //} else {\r\n // LastCallsType = false;\r\n //}\r\n let columns: any = [\r\n {\r\n caption: 'Date',\r\n cellTemplate: (container, options) => {\r\n const data = options.data.Created;\r\n container.html(window['moment'](data + 'Z').utcOffset(window['userTimezone'].Offset).format('L, LT'));\r\n },\r\n dataField: 'Created',\r\n sortOrder: 'desc',\r\n width: 300\r\n },\r\n { dataField: 'Status' },\r\n { dataField: 'From' },\r\n { dataField: 'To' },\r\n 'Company Name',\r\n {\r\n dataField: 'Price',\r\n cellTemplate: (cell, ev) => {\r\n const sec = parseInt(ev.data.Duration);\r\n if (sec == 0) {\r\n cell.html(sec + '$');\r\n }\r\n else {\r\n let x = Math.floor(sec / 60) + 1;\r\n x *= 0.02;\r\n cell.html(x.toLocaleString() + '$');\r\n }\r\n }\r\n },\r\n { cssClass: 'pe-3', dataField: 'Duration', dataType: 'number' }\r\n ];\r\n if (window['User']?.Manager) {\r\n columns = [\r\n {\r\n caption: 'Date',\r\n cellTemplate: (container, options) => {\r\n const data = options.data.Created;\r\n container.html(window['moment'](data + 'Z').utcOffset(window['userTimezone'].Offset).format('L, LT'));\r\n },\r\n dataField: 'Created',\r\n sortOrder: 'desc',\r\n width: 150\r\n },\r\n {\r\n dataField: 'Status',\r\n width: 100\r\n },\r\n {\r\n caption: 'User',\r\n cellTemplate: (cell, ev) => {\r\n cell.html(ev.data.FirstName + ' ' + ev.data.LastName)\r\n },\r\n dataField: 'FirstName'\r\n },\r\n {\r\n dataField: 'From',\r\n width: 110\r\n },\r\n {\r\n dataField: 'To',\r\n width: 110\r\n },\r\n {\r\n caption: 'Company Name',\r\n dataField: 'Company_Name',\r\n },\r\n {\r\n calculateSortValue: (row) => {\r\n const sec = parseInt(row.Duration);\r\n if (sec == 0) return 0;\r\n return Math.floor(sec / 60) + 1;\r\n },\r\n cellTemplate: (cell, ev) => {\r\n const sec = parseInt(ev.data.Duration);\r\n if (sec == 0) {\r\n cell.html(sec + '$');\r\n }\r\n else {\r\n let x = Math.floor(sec / 60) + 1;\r\n x *= 0.02;\r\n cell.html(x.toLocaleString() + '$');\r\n }\r\n },\r\n dataField: 'Price',\r\n width: 120\r\n },\r\n {\r\n caption: 'Duration, s',\r\n cssClass: 'pe-3',\r\n dataField: 'Duration',\r\n dataType: 'text',\r\n width: 120\r\n }\r\n ]\r\n }\r\n\r\n const startDate = ($('.ps-phs-callLogs-main .ywftDateRange-devExDateFrom') as any).dxDateBox('option', 'value');\r\n const endDate = ($('.ps-phs-callLogs-main .ywftDateRange-devExDateTo') as any).dxDateBox('option', 'value');\r\n const newStartDate = window['moment'](startDate).startOf('day').toDate();\r\n const newEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1);\r\n //const email = ($('#ps-phs-callLogs-userFilter') as any).dxDropDownBox('instance').option('value') ? ($('#ps-phs-callLogs-userFilter') as any).dxDropDownBox('instance').option('value')[0] : ''\r\n\r\n $('.ps-phs-gvCallLogs').dxDataGrid({\r\n dataSource: phsGetCallHistorySource(($('.ps-phs-callLogs-main .ywftDateRange-devExDateFrom') as any).dxDateBox('option', 'value'),\r\n ($('.ps-phs-callLogs-main .ywftDateRange-devExDateTo') as any).dxDateBox('option', 'value'),\r\n window['User'] && window['User'].Manager ?\r\n ($('#ps-phs-callLogs-userFilter') as any).dxDropDownBox('instance').option('value') ?\r\n ($('#ps-phs-callLogs-userFilter') as any).dxDropDownBox('instance').option('value')[0] : '' : ''),\r\n columns: columns,\r\n filterRow: {\r\n applyFilter: 'onClick',\r\n visible: true\r\n },\r\n filterValue: [\r\n ['Created', '>=', window['moment'](newStartDate).format('YYYY-MM-DD')],\r\n 'and',\r\n ['Created', '<=', window['moment'](newEndDate).format('YYYY-MM-DD')],\r\n ],\r\n grouping: {\r\n allowCollapsing: true,\r\n },\r\n headerFilter: {\r\n visible: true\r\n },\r\n height: '100%',\r\n masterDetail: {\r\n enabled: true,\r\n template: (container, options) => {\r\n $.post('/UserLeads/GetRecords2', options.data, (data) => {\r\n if (data) {\r\n let first = true;\r\n const row = $('
');\r\n data.forEach(rec => {\r\n const col = $('
');\r\n const audio = $(``);\r\n row.append(col.append(audio));\r\n self.phsStopAudio(audio, '#ps-phs-callLogs-tab');\r\n first = false;\r\n });\r\n container.append(row);\r\n }\r\n });\r\n }\r\n },\r\n onContentReady: (ev) => {\r\n window['InstanceBase'].hideFilterIconOnDevExGrid(ev);\r\n window['fixShowLinesDevExGrid'](ev.element[0], true);\r\n if (!window['setActiveTodayBtn']) $('.ps-phs-callLogs-main .settings-dateRange-btn').removeClass('active');\r\n $('.root-preloader').hide();\r\n },\r\n onEditorPreparing: (ev) => {\r\n window['InstanceBase'].applyFilterOnDevExGrid(ev);\r\n },\r\n onRowExpanding: (e) => {\r\n e.component.collapseAll(-1);\r\n },\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n rowAlternationEnabled: true,\r\n showBorders: true,\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * phsRoboCallLogs(): Function\r\n * Load page Robo Call Logs from Settings - Phone Settings\r\n */\r\n phsRoboCallLogs() {\r\n const self = this;\r\n let LastRoboCallCallsType = false;\r\n\r\n $('#ps-phs-roboCallLogs-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-phs-roboCallLogs-content', 'SettingsPhoneRoboCallLogs', () => {\r\n window['InstanceBase'].dateRangeWithYearWeekDates('.ps-phs-roboCallLogs-main');\r\n phsRoboCallLogsDateRange();\r\n phsGvRoboCallLogs();\r\n\r\n window['InstanceBase'].clickOnLabelForDevExField('.form-label');\r\n })\r\n })\r\n\r\n function phsRoboCallLogsDateRange() {\r\n const year = ($(`.ps-phs-roboCallLogs-main .ywftDateRange-devExYear`) as any).dxSelectBox('instance');\r\n const from = ($(`.ps-phs-roboCallLogs-main .ywftDateRange-devExDateFrom`) as any).dxDateBox('instance');\r\n const to = ($(`.ps-phs-roboCallLogs-main .ywftDateRange-devExDateTo`) as any).dxDateBox('instance');\r\n\r\n from.on('valueChanged', (e) => {\r\n //let param = false\r\n if (!LastRoboCallCallsType) {\r\n\r\n //param = e.name == 'opened' && e.value ? true : false;\r\n //if (param && e.name == 'text')\r\n phsUpdateRoboCallLogs()\r\n }\r\n })\r\n to.on('valueChanged', () => {\r\n phsUpdateRoboCallLogs()\r\n })\r\n\r\n $('.ps-phs-roboCallLogs-day-btn').off('click').on('click', (ev) => {\r\n LastRoboCallCallsType = true;\r\n year.option('value', new Date().getFullYear());\r\n setTimeout(() => {\r\n LastRoboCallCallsType = true;\r\n from.option('value', new Date());\r\n LastRoboCallCallsType = true;\r\n to.option('value', new Date());\r\n $(ev.currentTarget).addClass('active');\r\n }, 500);\r\n })\r\n }\r\n\r\n function phsGvRoboCallLogs() {\r\n const startDate = ($('.ps-phs-roboCallLogs-main .ywftDateRange-devExDateFrom') as any).dxDateBox('option', 'value');\r\n const endDate = ($('.ps-phs-roboCallLogs-main .ywftDateRange-devExDateTo') as any).dxDateBox('option', 'value');\r\n // let newEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1);\r\n const newStartDate = window['moment'](startDate).startOf('day').toDate();\r\n const newEndDate = window['moment'](endDate).endOf('day').toDate();\r\n\r\n $('.ps-phs-gvRoboCallLogs').dxDataGrid({\r\n dataSource: window['DevExpress'].data.AspNet.createStore({\r\n key: 'Id',\r\n loadMethod: 'GET',\r\n loadUrl: '/RoboCall/History',\r\n }),\r\n columns: [\r\n {\r\n caption: 'Date',\r\n cellTemplate: (container, options) => {\r\n const data = options.data.Created;\r\n container.html(window['moment'](data + 'Z').utcOffset(window['userTimezone'].Offset).format('L, LT'));\r\n },\r\n dataField: 'Created',\r\n sortOrder: 'desc',\r\n },\r\n { dataField: 'Subject' },\r\n { dataField: 'VoiceMail' },\r\n { dataField: 'LocalPresence' },\r\n { dataField: 'Routing' },\r\n {\r\n calculateDisplayValue: (v) => { return v.Delay / 1000; },\r\n dataField: 'Delay',\r\n dataType: 'string',\r\n width: 50\r\n },\r\n ],\r\n filterRow: {\r\n applyFilter: 'onClick',\r\n visible: true\r\n },\r\n filterValue: [\r\n ['Created', '>=', window['moment'](newStartDate).format('YYYY-MM-DD')],\r\n 'and',\r\n ['Created', '<=', window['moment'](newEndDate).format('YYYY-MM-DD')],\r\n ],\r\n height: '100%',\r\n masterDetail: {\r\n enabled: true,\r\n template: (content, info) => {\r\n const div = $('
');\r\n content.append(div);\r\n div.dxDataGrid({\r\n dataSource: window['DevExpress'].data.AspNet.createStore({\r\n key: 'Row.CID',\r\n loadMethod: 'GET',\r\n loadParams: {\r\n Id: info.key\r\n },\r\n loadUrl: '/RoboCall/HistoryItem'\r\n }),\r\n columns: [\r\n { dataField: 'Business.Company_Name', caption: 'Company' },\r\n {\r\n caption: 'Date',\r\n cellTemplate: (container, options) => {\r\n const data = options.value;\r\n container.html(window['moment'](data + 'Z').utcOffset(window['userTimezone'].Offset).format('L, LT'));\r\n },\r\n dataField: 'Row.Created',\r\n },\r\n { dataField: 'Info.From', caption: 'From' },\r\n { dataField: 'Info.To', caption: 'To' },\r\n {\r\n caption: 'Records',\r\n cellTemplate: (el, info) => {\r\n const recs = info.value;\r\n\r\n recs.forEach(x => {\r\n $(el).addClass('ps-phs-gvRoboCallLogs-audio-td');\r\n const path = info.data.Info.Sid + '/' + x.Sid;\r\n const audio = $(``);\r\n self.phsStopAudio(audio, '#ps-phs-roboCallLogs-tab');\r\n el.append(audio);\r\n });\r\n },\r\n dataField: 'Info.Records',\r\n width: '40%',\r\n },\r\n ],\r\n onEditorPreparing: (e) => {\r\n window['InstanceBase'].devExSearchFilterDelay(e);\r\n window['InstanceBase'].devExSearchFilterMin(e);\r\n },\r\n showBorders: true,\r\n });\r\n }\r\n },\r\n onContentReady: (ev) => {\r\n window['InstanceBase'].hideFilterIconOnDevExGrid(ev);\r\n window['fixShowLinesDevExGrid'](ev.element[0], true);\r\n $('.root-preloader').hide();\r\n },\r\n onEditorPreparing: (ev) => {\r\n window['InstanceBase'].applyFilterOnDevExGrid(ev);\r\n },\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n rowAlternationEnabled: true,\r\n showBorders: true,\r\n });\r\n }\r\n\r\n function phsUpdateRoboCallLogs() {\r\n //if (changedDate) {\r\n // $('.ps-phs-roboCallLogs-dateRange-btns .settings-dateRange-btn').removeClass('active');\r\n // if (LastRoboCallCallsType) {\r\n // $(`.settings-dateRange-btn-roboCallLogs-${LastRoboCallCallsType}`).addClass('active');\r\n // LastRoboCallCallsType = undefined;\r\n // }\r\n //}\r\n if (!LastRoboCallCallsType) {\r\n $('.ps-phs-roboCallLogs-day-btn').removeClass('active');\r\n LastRoboCallCallsType = undefined;\r\n } else {\r\n LastRoboCallCallsType = undefined;\r\n }\r\n const startDate = ($('.ps-phs-roboCallLogs-main .ywftDateRange-devExDateFrom') as any).dxDateBox('option', 'value');\r\n const endDate = ($('.ps-phs-roboCallLogs-main .ywftDateRange-devExDateTo') as any).dxDateBox('option', 'value');\r\n // let newEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1);\r\n const newStartDate = window['moment'](startDate).startOf('day').toDate();\r\n const newEndDate = window['moment'](endDate).endOf('day').toDate();\r\n\r\n $('.ps-phs-gvRoboCallLogs').dxDataGrid('instance').option('filterValue', [\r\n ['Created', '>=', window['moment'](newStartDate).format('YYYY-MM-DD')],\r\n 'and',\r\n ['Created', '<=', window['moment'](newEndDate).format('YYYY-MM-DD')],\r\n ])\r\n }\r\n }\r\n\r\n /**\r\n * phsStopAudio(): Function\r\n * Stop plaing audio on hide tab & on close Settings\r\n * \r\n * @param audio - DOM element audio\r\n * @param tabId - tab id on Phone Settings\r\n */\r\n phsStopAudio(audio, tabId) {\r\n $(`${tabId}, #ps-phone-tab`).on('hide.bs.tab', () => {\r\n stopAudio(audio);\r\n })\r\n\r\n $('#ps-toggle-check').on('click', () => {\r\n stopAudio(audio);\r\n });\r\n\r\n function stopAudio(audio) {\r\n (audio[0] as any).pause();\r\n (audio[0] as any).currentTime = 0;\r\n }\r\n }\r\n\r\n /**\r\n * phsVerifiedCallerIds(): Function\r\n * Load page Verified Caller Ids from Settings - Phone Settings\r\n */\r\n phsVerifiedCallerIds() {\r\n const self = this;\r\n let arr = [];\r\n\r\n $('#ps-phs-verifiedId-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-phs-verifiedId-content', 'SettingsPhoneVerifiedCallerId', () => {\r\n verifiedIdHeader();\r\n gvVerifiedId();\r\n\r\n window['InstanceBase'].clickOnLabelForDevExField('.form-label');\r\n })\r\n })\r\n\r\n function dataSourceOutgoingGrid() {\r\n $.get('/Twilio/Outgoings', data => {\r\n try {\r\n $('.gvVerifiedCallerId').dxDataGrid('option', 'dataSource', data);\r\n }\r\n catch (ex) {\r\n console.error(ex);\r\n }\r\n arr = data;\r\n });\r\n }\r\n\r\n function editFriendlyNameCell() {\r\n $('.gvVerifiedCallerId .cellEdit').off('click').on('click', (ev) => {\r\n $('#editFriendlyNameModal').dxPopup({\r\n closeOnOutsideClick: true,\r\n contentTemplate: () => {\r\n const div = $('')\r\n const p = $('
Add new friendly name
');\r\n const formRow = $('');\r\n const col = $('
');\r\n const colAuto = $('
');\r\n const input = $('');\r\n const button = $('');\r\n div.append(p).append(formRow);\r\n formRow.append(col).append(colAuto);\r\n col.append(input);\r\n colAuto.append(button);\r\n\r\n input.on('input', () => {\r\n input.val() == '' ? $(button).prop('disabled', true) : $(button).prop('disabled', false);\r\n })\r\n\r\n // input.dxTextBox({\r\n // onInput(e) {\r\n // (e.component as any)._changedValue == '' ? $(button).prop('disabled', true) : $(button).prop('disabled', false);\r\n // },\r\n // });\r\n\r\n button.off('click').on('click', (e) => {\r\n e.preventDefault();\r\n const newFriendlyName = input.val();\r\n const thisSid = ev.currentTarget.dataset.sid;\r\n $.post('/Twilio/UpdateOutgoingPhone', { sid: thisSid as string, name: newFriendlyName as string }, (data) => {\r\n $('#editFriendlyNameModal').dxPopup('hide');\r\n dataSourceOutgoingGrid();\r\n $('.gvVerifiedCallerId').dxDataGrid('repaint');\r\n })\r\n\r\n })\r\n return div;\r\n },\r\n // onShown: function () {\r\n // $('.dx-texteditor-input').focus();\r\n // },\r\n position: {\r\n at: 'bottom',\r\n my: { x: 'center', y: 'top' },\r\n of: $('.gvVerifiedCallerId .cellEdit')\r\n },\r\n showCloseButton: false,\r\n showTitle: false,\r\n visible: true,\r\n height: 72,\r\n width: 390,\r\n })\r\n });\r\n }\r\n\r\n function errorValidationPhoneNumber(msg) {\r\n $('.ps-phs-verifiedId-phoneNumber-confirm-section').show();\r\n $('.ps-phs-verifiedId-phoneNumber-confirm').empty();\r\n $('.ps-phs-verifiedId-phoneNumber-confirm-section > p').html(msg).addClass('error');\r\n }\r\n\r\n function gvVerifiedId() {\r\n dataSourceOutgoingGrid();\r\n\r\n $('.gvVerifiedCallerId').dxDataGrid({\r\n //dataSource: arr,\r\n columns: [\r\n // { dataField: 'Default' },\r\n {\r\n caption: 'Phone Number',\r\n cellTemplate: (container, options) => {\r\n const phone = options.value;\r\n const correctPhone = `${phone.slice(0, 2)} (${phone.slice(2, 5)}) ${phone.slice(5, 8)} - ${phone.slice(8)} `;\r\n $(`
${correctPhone}
`).appendTo(container);\r\n },\r\n dataField: 'PhoneNumber',\r\n },\r\n {\r\n caption: 'Friendly Name',\r\n cellTemplate: (container, options) => {\r\n $(`${options.value} `).appendTo(container);\r\n },\r\n dataField: 'FriendlyName',\r\n },\r\n // { dataField: 'Delete' }\r\n ],\r\n editing: {\r\n mode: 'row',\r\n allowDeleting: true,\r\n confirmDelete: false\r\n },\r\n height: '100%',\r\n onCellPrepared: () => {\r\n editFriendlyNameCell();\r\n },\r\n onContentReady: (e) => {\r\n window['fixShowLinesDevExGrid'](e.element[0], true);\r\n $('.root-preloader').hide();\r\n },\r\n onRowRemoved: (e) => {\r\n $.post(`/Twilio/DeleteOutgoing?sid=${e.data.Sid}`);\r\n },\r\n // height: 100,\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n rowAlternationEnabled: true,\r\n showBorders: true,\r\n });\r\n\r\n //$(window).on('resize', () => {\r\n // SetHeightOutgoingGrid();\r\n //})\r\n }\r\n\r\n //function SetHeightOutgoingGrid() {\r\n // const heightGrid = $('#ps-phs-verifiedId-content .ps-phone-main').height() - $('.ps-phone-form').height() - 8;\r\n // $('.gvVerifiedCallerId').dxDataGrid('instance').option('height', heightGrid);\r\n //}\r\n\r\n function validationPhoneNumber(codeVerif) {\r\n $('.ps-phs-verifiedId-phoneNumber-confirm-section').show();\r\n $('.ps-phs-verifiedId-phoneNumber-confirm-section > p').removeClass('error').html('Validation Code');\r\n ($('.ps-phs-verifiedId-phoneNumber-confirm') as any).dxTextBox({\r\n readOnly: true,\r\n value: codeVerif\r\n });\r\n }\r\n\r\n function verifiedIdHeader() {\r\n ($('.ps-phs-verifiedId-phoneNumber') as any).dxTextBox({\r\n mask: '+1 (X00) 000-0000',\r\n maskInvalidMessage: 'The phone must have a correct USA phone format',\r\n maskRules: { X: /[02-9]/ },\r\n onInput: (el) => {\r\n if (el.component._value.trim().length == 10) {\r\n $('.ps-phs-verifiedId-phoneNumber-btn').prop('disabled', false);\r\n } else {\r\n $('.ps-phs-verifiedId-phoneNumber-btn').prop('disabled', true);\r\n $('.ps-phs-verifiedId-phoneNumber-confirm-section').hide();\r\n try { ($('.ps-phs-verifiedId-phoneNumber-confirm') as any).dxTextBox('dispose') } catch (ex) { };\r\n }\r\n },\r\n }).dxValidator({\r\n validationRules: [{\r\n message: 'The phone must have a correct USA phone format',\r\n pattern: /^[02-9]\\d{9}$/,\r\n type: 'pattern',\r\n }],\r\n });\r\n\r\n $('.ps-phs-verifiedId-phoneNumber-ext').dxTextBox({\r\n placeholder: 'EXT'\r\n });\r\n\r\n $('.ps-phs-verifiedId-phoneNumber-btn').off('click').on('click', () => {\r\n const verPhoneField = $('.ps-phs-verifiedId-phoneNumber').dxTextBox('instance').option('value');\r\n const verExtField = $('.ps-phs-verifiedId-phoneNumber-ext').dxTextBox('instance').option('value');\r\n $.post('/Twilio/CreateOutgoing', {\r\n country: 'us',\r\n ext: verExtField,\r\n phone: verPhoneField,\r\n }, (data) => {\r\n const dataObject = JSON.parse(data);\r\n if (dataObject.phone_number) {\r\n validationPhoneNumber(dataObject.validation_code);\r\n } else {\r\n errorValidationPhoneNumber(dataObject.message);\r\n }\r\n });\r\n });\r\n\r\n $('.ps-phs-verifiedId-addNumber-btn').off('click').on('click', () => {\r\n $('.ps-phs-verifiedId-phoneNumber').dxTextBox('instance').focus();\r\n });\r\n\r\n }\r\n }\r\n\r\n /**\r\n * phsVoicemailLibrary(): Function\r\n * Load page Voicemail Library Ids from Settings - Phone Settings\r\n */\r\n phsVoicemailLibrary() {\r\n const self = this;\r\n $('#ps-phs-voicemailLibrary-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n self.psLoadTabContent('#ps-phs-voicemailLibrary-content', 'SettingsPhoneVoicemailLibrary', () => {\r\n gvVoicemailLibrary();\r\n voicemailLibraryBtns();\r\n })\r\n })\r\n\r\n function gvVoicemailLibrary() {\r\n $('#gvVoicemailLibrary').dxDataGrid({\r\n dataSource: window['DevExpress'].data.AspNet.createStore({\r\n key: 'Id',\r\n loadUrl: '/Audio?category=Voice',\r\n }),\r\n columns: [\r\n { dataField: 'Name' },\r\n {\r\n caption: 'Records',\r\n cellTemplate: (container, options) => {\r\n $(container).addClass('gvVoicemailLibrary-audio-td');\r\n const audio = $(``);\r\n self.phsStopAudio(audio, '#ps-phs-voicemailLibrary-tab');\r\n container.append(audio);\r\n },\r\n width: 265,\r\n },\r\n {\r\n cellTemplate: (container, options) => {\r\n const download = $('
');\r\n const del = $('
');\r\n const div = $('
');\r\n div.append(download).append(del);\r\n container.append(div);\r\n\r\n download.dxButton({\r\n hint: 'Download file',\r\n icon: 'download',\r\n onClick: () => {\r\n window.open(`/Audio/${(options as any).key}`);\r\n },\r\n });\r\n\r\n del.dxButton({\r\n hint: 'Remove file',\r\n icon: 'remove',\r\n onClick: () => {\r\n const DeleteVoicemailLibraryAudio = () => {\r\n $.ajax({\r\n url: `/Audio/${(options as any).key}`, method: 'DELETE', success: () => {\r\n $('#gvVoicemailLibrary').dxDataGrid('instance').refresh();\r\n }\r\n });\r\n }\r\n\r\n const objModal = {\r\n callback: DeleteVoicemailLibraryAudio,\r\n classYesBtn: 'deleteVoicemailAudio',\r\n textModal: 'Are You sure want to delete?',\r\n textNoBtn: 'No',\r\n textYesBtn: 'Yes',\r\n }\r\n window['InstanceBase'].onePropositionModalLoad(objModal);\r\n },\r\n });\r\n },\r\n width: 90,\r\n }\r\n ],\r\n height: '100%',\r\n onContentReady: () => {\r\n //window['fixShowLinesDevExGrid'](e.element[0], true);\r\n $('.root-preloader').hide();\r\n },\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n rowAlternationEnabled: true,\r\n showBorders: true\r\n });\r\n }\r\n\r\n function voicemailLibraryBtns() {\r\n $('#ps-phs-gvVoicemailLibrary-upload-btn').dxButton({\r\n hint: 'Upload file',\r\n icon: 'add',\r\n onClick: () => {\r\n $('#ps-phs-voicemailLibrary-add').click();\r\n },\r\n });\r\n\r\n $('#ps-phs-voicemailLibrary-add').off('change').on('change', (e) => {\r\n const data = window['InstanceBase'].addOneFileMax2MB(e.currentTarget, 'audio');\r\n data.append('category', 'Voice');\r\n\r\n $.ajax({\r\n contentType: false,\r\n data: data,\r\n processData: false,\r\n success: () => {\r\n $('#gvVoicemailLibrary').dxDataGrid('instance').refresh();\r\n $('#ps-phs-voicemailLibrary-add').val('');\r\n },\r\n type: 'post',\r\n url: '/Audio',\r\n });\r\n });\r\n }\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= Plan & Upgrade Settings ==================================\r\n /**\r\n * planUpgradeSettings(): Function\r\n * Load and show Plan & Upgrade on Settings -> Price page (pricePages.ts)\r\n */\r\n planUpgradeSettings() {\r\n price.PricePages('.ps-planUpgrade');\r\n //$('.btn-price-plan').off('click').on('click', (e) => {\r\n // e.preventDefault();\r\n\r\n // const packId = $(e.currentTarget).data('packid');\r\n // if (packId == undefined) return;\r\n\r\n // if ($(e.currentTarget).hasClass('btn-inactive')) {\r\n // if ($('.btn-tochange').length > 0) {\r\n // self.ShowModalPS(packId, e);\r\n // }\r\n // return;\r\n // }\r\n // if ($('.btn-inactive').length > 0) {\r\n // self.ShowModalPS(packId, e);\r\n // return;\r\n // }\r\n // $.post('/Price/CurrentPlan', (data) => {\r\n // if (data) {\r\n // self.ShowModalPS(packId, e);\r\n // return;\r\n // } else {\r\n // $.post('/Price/GetPackPrice', { id: packId, forYear: false },\r\n // function (data) {\r\n // if (data.email == null) {\r\n // ($('#login-modal') as any).modal('show');\r\n // }\r\n // else {\r\n // let price = '' + data.price;\r\n // price = price + ',00';\r\n // window['InstanceBase'].showPurchaseModal(data.email, price, packId, false);\r\n // }\r\n // });\r\n // }\r\n // });\r\n //});\r\n\r\n\r\n //function CheckLeadsMinuts(leadsMinuts) {\r\n // const input = $(`.packages-${leadsMinuts}-content .packages-${leadsMinuts}-switch`).find(`.packages-${leadsMinuts}-switch-input`);\r\n // const b = input.is(':checked');\r\n // $(`.packages-balance-input-${leadsMinuts}-falls`).prop('disabled', b);\r\n // $(` .packages-balance-input-${leadsMinuts}-buy`).prop('disabled', b);\r\n // $('.packages-' + leadsMinuts + '-check').prop('disabled', b);\r\n // (input as any).attr('checked', !b);\r\n // //$.post('/ProfileAndSettings/GetCards', (data) => {\r\n // // if (data.Cards.length > 0) {\r\n // // let input = $(`.packages-${leadsMinuts}-content .packages-${leadsMinuts}-switch`).find(`.packages-${leadsMinuts}-switch-input`);\r\n // // (input as any).attr('checked', !input.is(':checked'))\r\n // // } else {\r\n // // $('#ps-toggle-check').prop('checked', true);\r\n // // $('#ps-payment-tab').trigger('click');\r\n // // window['showAddCard'] = true;\r\n // // }\r\n // // $('.root-preloader').hide();\r\n // //})\r\n //}\r\n //$('.packages-leads-content .packages-leads-switch').off('click').on('click', (e) => {\r\n // //$('.root-preloader').show();\r\n // CheckLeadsMinuts('leads');\r\n //})\r\n //$('.packages-minutes-content .packages-minutes-switch').off('click').on('click', (e) => {\r\n // //$('.root-preloader').show();\r\n // CheckLeadsMinuts('minutes')\r\n //})\r\n //$('.packages-price-list .list-group-item').off('click').on('click', (e) => {\r\n // $(e.currentTarget).find('input[type=\"radio\"]').prop('checked', true);\r\n //})\r\n //window['InstanceBase'].ActionPrice('#leads-content');\r\n //window['InstanceBase'].ActionPrice('#minutes-content');\r\n //this.AutoRecharge('Minutes', '#minutes-content');\r\n //this.AutoRecharge('Leads', '#leads-content');\r\n window['CheckAuto'] = function () {\r\n //$.post('/Account/Check', console.log);\r\n }\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= Promo Code ==================================\r\n /**\r\n * promoCodesSettings(): Function\r\n * Load and show Promo Code Page on Settings\r\n */\r\n promoCodesSettings() {\r\n const self = this;\r\n let status;\r\n\r\n self.srcPromoCodes = (window['DevExpress'] as any).data.AspNet.createStore({\r\n loadUrl: '/ProfileAndSettings/GetPromoCodes',\r\n key: 'Id',\r\n insertUrl: '/ProfileAndSettings/InsertOrder',\r\n updateUrl: '/ProfileAndSettings/UpdateOrder',\r\n deleteUrl: '/ProfileAndSettings/DeleteOrder',\r\n onBeforeSend: function (method, ajaxOptions) {\r\n ajaxOptions.xhrFields = { withCredentials: true };\r\n },\r\n\r\n /*loadMethod: 'POST',*/\r\n onLoading: (loadOptions) => {\r\n $('.root-preloader').show();\r\n self.log('srcPromoCodes.OnLoading', loadOptions)\r\n },\r\n onLoaded: (result) => {\r\n $('.root-preloader').hide();\r\n self.log('srcPromoCodes.OnLoaded', result)\r\n }\r\n });\r\n\r\n $('#psPromoCodes').dxDataGrid({\r\n dataSource: (self.srcPromoCodes as any),\r\n columns: [\r\n {\r\n caption: 'Code Name',\r\n dataField: 'PromotionCode',\r\n validationRules: [{\r\n message: 'The \"Code Name\" field is required.',\r\n type: 'required',\r\n }]\r\n },\r\n {\r\n caption: 'Leads Credits',\r\n dataField: 'LeadsCount',\r\n validationRules: [{\r\n message: 'The \"Leads Credits\" field is required.',\r\n type: 'required',\r\n }, {\r\n message: 'Minimum 1 max 100000',\r\n pattern: /^(100000|([1-9][0-9][0-9][0-9][0-9])|([1-9][0-9][0-9][0-9])|([1-9][0-9][0-9])|([1-9][0-9])|[1-9])$/i,\r\n type: 'pattern',\r\n }]\r\n },\r\n {\r\n caption: 'Minutes Credits',\r\n dataField: 'MinutesCount',\r\n validationRules: [{\r\n message: 'The \"Minutes Credits\" field is required.',\r\n type: 'required',\r\n }, {\r\n message: 'Minimum 1 max 100',\r\n pattern: /^(100000|([1-9][0-9][0-9][0-9][0-9])|([1-9][0-9][0-9][0-9])|([1-9][0-9][0-9])|([1-9][0-9])|[1-9])$/i,\r\n type: 'pattern',\r\n }]\r\n },\r\n {\r\n caption: 'Expiration Date',\r\n dataField: 'ExpiresAt',\r\n dataType: 'date',\r\n format: (date) => {\r\n const month = (date as any).getMonth() + 1,\r\n day = (date as any).getDate(),\r\n year = (date as any).getFullYear()\r\n\r\n return month + '/' + day + '/' + year;\r\n },\r\n validationRules: [{\r\n message: 'The \"Expiration Date\" field is required.',\r\n type: 'required',\r\n }]\r\n },\r\n {\r\n allowEditing: false,\r\n dataField: 'count',\r\n },\r\n {\r\n dataField: 'Limit',\r\n validationRules: [{\r\n message: 'The \"Limit\" field is required.',\r\n type: 'required',\r\n }, {\r\n message: 'Minimum 1 max 100',\r\n pattern: /^(100|([1-9][0-9])|[1-9])$/i,\r\n type: 'pattern',\r\n }]\r\n },\r\n {\r\n allowEditing: false,\r\n cellTemplate: (element: JQuery, data) => {\r\n const date = window['moment'](data.data.ExpiresAt).format('MM/DD/YYYY');\r\n const exDays = Math.floor(((new Date(date)).getTime() - Date.now()) / (86400 * 1000));\r\n if (data.data.count == data.data.Limit)\r\n return element.html('Limited');\r\n else if (exDays >= -1)\r\n return element.html('Active');\r\n else\r\n return element.html('Expired');\r\n },\r\n dataField: 'Status',\r\n },\r\n {\r\n allowEditing: false,\r\n cellTemplate: (cell, e) => {\r\n const date = window['moment'](e.data.ExpiresAt).format('MM/DD/YYYY');\r\n const exDays = Math.floor(((new Date(date)).getTime() - Date.now()) / (86400 * 1000));\r\n if (e.data.count == e.data.Limit)\r\n return '';\r\n if (exDays >= -1) {\r\n status = 'Active';\r\n\r\n const act: JQuery = $('Invite')\r\n act.on('click', c => {\r\n c.preventDefault();\r\n //self.removeSaveSearchCriteria(e.data.SearchHistory.Id);\r\n self.pcsInvitationModalLoad(() => {\r\n $('#promoCode-input').text(e.data.PromotionCode);\r\n })\r\n })\r\n return cell.append(act);\r\n\r\n } else {\r\n status = 'Expired';\r\n }\r\n return cell.html('' + status + '');\r\n },\r\n dataField: 'Invite',\r\n }\r\n ],\r\n editing: {\r\n allowAdding: true,\r\n allowDeleting: true,\r\n allowUpdating: true,\r\n mode: 'form',\r\n useIcons: true\r\n },\r\n onEditorPreparing: (e) => {\r\n window['InstanceBase'].devExSearchFilterDelay(e);\r\n window['InstanceBase'].devExSearchFilterMin(e);\r\n },\r\n showBorders: true,\r\n });\r\n }\r\n\r\n /**\r\n * pcsInvitationModal(callback): Function\r\n * @param callback\r\n */\r\n pcsInvitationModal(callback) {\r\n const self = this;\r\n $('#promoCode-email').off('input').on('input', (e) => {\r\n if (!self.emailReg.test(($(e.currentTarget) as any).val())) {\r\n $(e.currentTarget).addClass('is-invalid');\r\n $('#pc-validEmail').show();\r\n $('#pc-exist, #pc-notexist').hide();\r\n $('#promoCode-yes-btn').prop('disabled', true);\r\n } else {\r\n $(e.currentTarget).removeClass('is-invalid');\r\n $('#pc-validEmail, #pc-exist, #pc-notexist').hide();\r\n self.pcsInvitationModalIsEmailExist($(e.currentTarget).val());\r\n $('#promoCode-yes-btn').prop('disabled', false);\r\n }\r\n });\r\n $('#promoCode-yes-btn').on('click', () => {\r\n const promoCode = $('#promoCode-input').text();\r\n const email = $('#promoCode-email').val();\r\n self.pcsInvitationModalSend(promoCode, email);\r\n });\r\n\r\n if (callback) callback();\r\n ($('#promoCodeInvitationModal') as any).modal('show');\r\n }\r\n\r\n /**\r\n * pcsInvitationModalIsEmailExist(email): Function\r\n * Check, if this email is registered\r\n * @param email\r\n */\r\n pcsInvitationModalIsEmailExist(email) {\r\n $.ajax({\r\n type: 'POST',\r\n url: '/MultipleNodeSelection/IsEmailExist',\r\n data: { email: email },\r\n dataType: 'json',\r\n crossDomain: true,\r\n success: function (result) {\r\n if (result) {\r\n $('#pc-exist').show();\r\n $('#pc-notexist').hide();\r\n $('#promoCode-yes-btn').prop('disabled', true);\r\n } else {\r\n $('#pc-exist').hide();\r\n $('#pc-notexist').show();\r\n $('#promoCode-yes-btn').prop('disabled', false);\r\n }\r\n // ($('#promoCodeInvitationModal') as any).modal('hide');\r\n },\r\n error: function () {\r\n alert('failed to send Invitation Email');\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * pcsInvitationModalLoad(callback): Function\r\n * @param callback\r\n */\r\n pcsInvitationModalLoad(callback?) {\r\n const self = this;\r\n if ($('#promoCodeInvitationModal').length) {\r\n self.pcsInvitationModal(callback);\r\n } else {\r\n $.post('/Popups/PromoCodeInvitationModal', data => {\r\n $('body').append(data);\r\n self.pcsInvitationModal(callback);\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * pcsInvitationModalSend(promoCode, email): Function\r\n * Send requets with invitation\r\n * @param promoCode\r\n * @param email\r\n */\r\n pcsInvitationModalSend(promoCode, email) {\r\n $.post('/ProfileAndSettings/SendInvitation', { value: promoCode, email: email }, data => {\r\n if (data == 'Accepted')\r\n alert('Invitation Email Successfully Sent')\r\n else\r\n alert('Something\\'s wrong, email not send')\r\n });\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= Purchased History Settings ==================================\r\n /**\r\n * purchasedHistorySettings(): Function\r\n * Load and show Purchased History Settings\r\n */\r\n purchasedHistorySettings() {\r\n $('#gvPurchasedHistory').dxDataGrid({\r\n dataSource: window['DevExpress'].data.AspNet.createStore({\r\n loadUrl: '/Account/HistoryTransaction'\r\n }),\r\n allowColumnReordering: true,\r\n allowColumnResizing: true,\r\n columnAutoWidth: true,\r\n columns: [\r\n {\r\n caption: 'Item',\r\n dataField: 'Item'\r\n }, {\r\n dataField: 'Quantity',\r\n dataType: 'string',\r\n }, {\r\n caption: 'Paid $',\r\n cellTemplate: (container, item) => {\r\n const data = item.data;\r\n $(`${data.PaymentType} ${data.PaymentName} ending in ...${data.PaymentEnd}`).appendTo(container);\r\n },\r\n }, {\r\n dataField: 'Date',\r\n dataType: 'datetime',\r\n sortOrder: 'desc',\r\n cellTemplate: (container, options) => {\r\n const data = options.data.Date + 'Z';\r\n container.html(window['moment'](data).utcOffset(window['userTimezone'].Offset).format('L, LT'));\r\n },\r\n\r\n }\r\n ],\r\n hoverStateEnabled: true,\r\n onContentReady: (e) => {\r\n /*window['fixShowLinesDevExGrid'](e.element[0], true);*/\r\n e.component.option('height', '100%');\r\n $('.root-preloader').hide();\r\n },\r\n pager: {\r\n allowedPageSizes: [20, 50, 100, 150],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n enabled: true,\r\n pageSize: 20\r\n },\r\n rowAlternationEnabled: true,\r\n showColumnLines: true,\r\n showBorders: true,\r\n });\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= Referrals Settings ==================================\r\n /**\r\n * referralsSettings(): Function\r\n * Create and show Settings - Referrals page\r\n */\r\n referralsSettings() {\r\n const self = this;\r\n\r\n self.rsGvUserReferrals();\r\n self.rsGetReferralLink();\r\n self.rsButtons();\r\n }\r\n\r\n /**\r\n * rsButtons(): Function\r\n * Referrals Settings buttons actions \r\n */\r\n rsButtons() {\r\n const self = this;\r\n\r\n // send referral link to email\r\n $('#ps-rs-inviteReferral-btn').off('click').on('click', () => {\r\n window['InstanceBase'].loadInvitePeopleReferralModal();\r\n })\r\n\r\n // copy on bufer referral link\r\n $('#ps-rs-link-id').off('click').on('click', () => {\r\n const copyText = document.getElementById('ps-rs-link-path');\r\n if (navigator.clipboard) {\r\n navigator.clipboard.writeText((copyText as any).value);\r\n return;\r\n }\r\n });\r\n\r\n // refresh #gvUserReferrals\r\n $('#ps-rs-gvUserReferrals-refresh-btn').off('click').on('click', () => {\r\n $('#gvUserReferrals').dxDataGrid('instance').refresh();\r\n });\r\n\r\n $('.root-preloader').hide();\r\n }\r\n\r\n /**\r\n * rsGetReferralLink(): Function\r\n * Get referral link data and show it\r\n */\r\n rsGetReferralLink() {\r\n $.ajax({\r\n type: 'POST',\r\n url: '/MultipleNodeSelection/GetReferralLink',\r\n dataType: 'json',\r\n crossDomain: true,\r\n success: (r) => {\r\n $('#ps-rs-link-path').val(r.result);\r\n $('#ps-rs-link-text').val(r.result);\r\n $('#ps-rs-link-id').show();\r\n },\r\n });\r\n }\r\n\r\n /**\r\n * rsGvUserReferrals(): Function\r\n * Create and show DevExtreme grid #gvUserReferrals\r\n */\r\n rsGvUserReferrals() {\r\n const userReferralsDataSource = window['DevExpress'].data.AspNet.createStore({\r\n loadUrl: '/MultipleNodeSelection/UserReferals'\r\n });\r\n\r\n $('#gvUserReferrals').dxDataGrid({\r\n dataSource: userReferralsDataSource,\r\n columns: [\r\n {\r\n caption: 'Email',\r\n dataField: 'Email',\r\n },\r\n {\r\n caption: 'Registration Date',\r\n dataField: 'RegistrationDate',\r\n dataType: 'datetime'\r\n },\r\n {\r\n caption: 'Invitation Date',\r\n dataField: 'InvitationDate',\r\n dataType: 'datetime',\r\n sortOrder: 'desc'\r\n },\r\n {\r\n caption: 'Referral Bonus',\r\n dataField: 'ReferralBonus',\r\n dataType: 'string'\r\n },\r\n {\r\n dataField: 'Status',\r\n },\r\n {\r\n alignment: 'center',\r\n buttons: [{\r\n template: (_, data) => {\r\n if (data.data.Status == 'Sent') {\r\n const btn = $(``).text('Resend')\r\n btn.off('click').on('click', (e) => {\r\n const resendedEmail = $(e.currentTarget).data('resend_email');\r\n window['InstanceBase'].loadInvitePeopleReferralModal(resendedEmail);\r\n })\r\n return btn;\r\n }\r\n }\r\n }],\r\n caption: 'Resend Email',\r\n cssClass: 'resendEmail-col',\r\n //dataField: 'Email',\r\n type: 'buttons',\r\n }\r\n ],\r\n height: '100%',\r\n hoverStateEnabled: true,\r\n onContentReady: (e) => {\r\n window['fixShowLinesDevExGrid'](e.element[0], true);\r\n },\r\n onEditorPreparing: (ev) => {\r\n window['InstanceBase'].applyFilterOnDevExGrid(ev);\r\n },\r\n pager: {\r\n allowedPageSizes: [10, 25, 50],\r\n displayMode: 'compact',\r\n showInfo: true,\r\n showNavigationButtons: true,\r\n showPageSizeSelector: true,\r\n visible: true\r\n },\r\n paging: {\r\n pageSize: 10\r\n },\r\n rowAlternationEnabled: true,\r\n searchPanel: {\r\n visible: true\r\n },\r\n showBorders: true,\r\n summary: {\r\n calculateCustomSummary: (options) => {\r\n if (options.name === 'ConfirmedN') {\r\n if (options.summaryProcess === 'start') {\r\n options.totalValue = 0;\r\n }\r\n if (options.summaryProcess === 'calculate' && options.value == 'Confirmed') {\r\n options.totalValue++;\r\n }\r\n } else if (options.name === 'PendingN') {\r\n if (options.summaryProcess === 'start') {\r\n options.totalValue = 0;\r\n }\r\n if (options.summaryProcess === 'calculate' && options.value == 'Pending') {\r\n options.totalValue++;\r\n }\r\n }\r\n },\r\n totalItems: [\r\n {\r\n column: 'Status',\r\n displayFormat: 'Confirmed: {0}',\r\n name: 'ConfirmedN',\r\n summaryType: 'custom',\r\n },\r\n {\r\n column: 'Status',\r\n displayFormat: 'Pending: {0}',\r\n name: 'PendingN',\r\n summaryType: 'custom',\r\n },\r\n {\r\n column: 'ReferralBonus',\r\n summaryType: 'sum',\r\n }\r\n ],\r\n },\r\n });\r\n //$('#gvUserReferrals').dxDataGrid('instance').refresh();\r\n }\r\n // #endregion\r\n\r\n // #region ======================================= Usage Settings ==================================\r\n usageSettings() {\r\n const self = this;\r\n self.leadsMinutesPeriod = { type: 'Today' };\r\n\r\n self.usGetLeadsAndMinutesByPeriod();\r\n self.usGetExpiresAt();\r\n self.usUsersList();\r\n self.usActions();\r\n\r\n $('.root-preloader').hide();\r\n\r\n //$('.ps-usage-emails-col').off('click').on('click', () => {\r\n // let email: string;\r\n // try {\r\n // email = ($('.ps-usage-usersList') as any).dxDropDownBox('instance').option('value');\r\n // }\r\n // catch (ex) {\r\n // email = '';\r\n // }\r\n //})\r\n }\r\n\r\n /**\r\n * usActions(): Function\r\n * Other actions for Usage Settings\r\n */\r\n usActions() {\r\n const self = this;\r\n /**\r\n * Show tab \"Today\"\r\n */\r\n $('.ps-usage-today-tab').off('show.bs.tab').on('show.bs.tab', () => {\r\n $('.root-preloader').show();\r\n self.leadsMinutesPeriod = { type: 'Today' };\r\n self.usGetLeadsAndMinutesByPeriod();\r\n //if ($('.ps-usage-sentEmails').is(':visible')) $('.ps-usage-emails-col').click();\r\n //($('.ps-usage-range-tab') as any).tab('show');\r\n self.usShowActiveRangeTab('today');\r\n });\r\n\r\n $('.ps-usage-range-tab').off('show.bs.tab').on('show.bs.tab', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n\r\n $('.ps-usage-range-calendar').off('show.bs.dropdown').on('show.bs.dropdown', () => {\r\n self.usCalendarFrom();\r\n self.usCalendarTo();\r\n });\r\n\r\n $('.ps-usage-range-calendar').off('hide.bs.dropdown').on('hide.bs.dropdown', (e) => {\r\n self.usSetDisableStatusOnCalendarBtn(true)\r\n });\r\n\r\n /**\r\n * Set date range\r\n */\r\n $('.ps-usage-calendar-btn').off('click').on('click', e => {\r\n const start = ($('.ps-usage-calendar-from') as any).dxDateBox('instance').option('value');\r\n const end = ($('.ps-usage-calendar-to') as any).dxDateBox('instance').option('value');\r\n self.leadsMinutesPeriod = { type: 'Custom', start: start, end: end };\r\n self.usChangeLeadsMinutesPeriodByType();\r\n ($('.ps-usage-range-calendar') as any).dropdown('hide');\r\n //if ($('.ps-usage-sentEmails').is(':visible')) $('.ps-usage-emails-col').click();\r\n self.usShowActiveRangeTab('range');\r\n });\r\n }\r\n\r\n /**\r\n * usCalendarFrom(): Function\r\n * Show devExtreme dateBox with start date\r\n */\r\n usCalendarFrom() {\r\n const self = this;\r\n try { ($('.ps-usage-calendar-from') as any).dxDateBox('instance').dispose() } catch (ex) { };\r\n\r\n let date;\r\n if (self.leadsMinutesPeriod.type == 'Custom') {\r\n date = self.leadsMinutesPeriod.start;\r\n }\r\n else {\r\n date = new Date();\r\n }\r\n ($('.ps-usage-calendar-from') as any).dxDateBox({\r\n onInput: () => {\r\n self.usSetDisableStatusOnCalendarBtn(false);\r\n },\r\n onValueChanged: () => {\r\n self.usSetDisableStatusOnCalendarBtn(false);\r\n },\r\n pickerType: 'date',\r\n value: date,\r\n width: '100%',\r\n });\r\n }\r\n\r\n /**\r\n * usCalendarTo(): Function\r\n * Show devExtreme dateBox with end date\r\n */\r\n usCalendarTo() {\r\n const self = this;\r\n try { ($('.ps-usage-calendar-to') as any).dxDateBox('instance').dispose() } catch (ex) { };\r\n\r\n let date = new Date();\r\n if (self.leadsMinutesPeriod.type == 'Custom') {\r\n date = self.leadsMinutesPeriod.end;\r\n }\r\n else {\r\n date = new Date();\r\n }\r\n const fromDate = Date.parse(($('.ps-usage-calendar-from') as any).dxDateBox('instance').option('value'));\r\n ($('.ps-usage-calendar-to') as any).dxDateBox({\r\n min: fromDate,\r\n max: new Date(),\r\n onInput: () => {\r\n self.usSetDisableStatusOnCalendarBtn(false);\r\n },\r\n onValueChanged: () => {\r\n self.usSetDisableStatusOnCalendarBtn(false);\r\n },\r\n pickerType: 'date',\r\n value: date,\r\n width: '100%',\r\n });\r\n }\r\n\r\n /**\r\n * usChangeLeadsMinutesPeriodByType(): Function\r\n */\r\n usChangeLeadsMinutesPeriodByType() {\r\n const self = this;\r\n $('.root-preloader').show();\r\n switch (self.leadsMinutesPeriod.type) {\r\n case 'Custom':\r\n self.usGetLeadsAndMinutesByPeriod(self.leadsMinutesPeriod.start, self.leadsMinutesPeriod.end);\r\n self.usShowActiveRangeTab('range');\r\n break;\r\n default:\r\n self.usGetLeadsAndMinutesByPeriod();\r\n self.usShowActiveRangeTab('today');\r\n break;\r\n }\r\n }\r\n\r\n /**\r\n * usShowActiveRangeTab(tabName): Function\r\n * Set active tab with this tabName\r\n * @param tabName\r\n */\r\n usShowActiveRangeTab(tabName) {\r\n const self = this;\r\n $('#ps-usage-nav .nav-link').removeClass('active');\r\n $(`.ps-usage-${tabName}-tab`).addClass('active');\r\n if (tabName == 'today') {\r\n $('.ps-usage-range-text').hide();\r\n self.usSetDisableStatusOnCalendarBtn(true);\r\n }\r\n else { $('.ps-usage-range-text').show(); }\r\n }\r\n\r\n /**\r\n * usGetExpiresAt(): Function\r\n * Get and show expired package date\r\n */\r\n usGetExpiresAt() {\r\n $.ajax({\r\n type: 'POST',\r\n url: '/ProfileAndSettings/GetExpiresAt',\r\n success: (e) => {\r\n let date = window['moment'](e.subscriptions.ExpiresAt).format('MM/DD/YYYY');\r\n $('.ps-usage-amount').text(date);\r\n date = window['moment'](e.subscriptions.ExpiresAt).format('MM/DD/YYYY HH:mm');\r\n let remain: any = Math.floor(((new Date(date)).getTime() - Date.now()) / (86400 * 1000));\r\n if (remain < 0)\r\n remain = 'Expired';\r\n\r\n $('.ps-usage-remainingDays').text(remain);\r\n },\r\n });\r\n }\r\n\r\n /**\r\n * usGetLeadsAndMinutesByPeriod(): Function\r\n * @param startDate\r\n * @param endDate\r\n */\r\n usGetLeadsAndMinutesByPeriod(startDate?: Date, endDate?: Date) {\r\n const self = this;\r\n let email: string;\r\n try {\r\n email = ($('.ps-usage-usersList') as any).dxDropDownBox('instance').option('value');\r\n }\r\n catch (ex) {\r\n email = '';\r\n }\r\n $.post('/ProfileAndSettings/GetLeadsAndMinutesbyPeriod', { email: email, start: window['moment'](startDate).format('MM/DD/YYYY'), end: window['moment'](endDate).format('MM/DD/YYYY') },\r\n (data) => {\r\n $('.ps-usage-leads').text(data.leadCreaditsCount);\r\n $('.ps-usage-minutes').text(data.dialrMinutesCount);\r\n //$('.ps-usage-emails').text(data.emailCount);\r\n self.usSetDateRangeText(startDate, endDate);\r\n $('.root-preloader').hide();\r\n });\r\n }\r\n\r\n /**\r\n * usSetDateRangeText(): function\r\n * Show period between start date and end date\r\n * @param startDate\r\n * @param endDate\r\n */\r\n usSetDateRangeText(startDate?: Date, endDate?: Date) {\r\n if (startDate) {\r\n const start = `${startDate.getMonth() + 1}/${(startDate).getDate()}/${(startDate).getFullYear()}`;\r\n const end = `${endDate.getMonth() + 1}/${(endDate).getDate()}/${(endDate).getFullYear()}`;\r\n $('.ps-usage-range-text').html(`${start} - ${end}`)\r\n } else $('.ps-usage-range-text').empty();\r\n }\r\n\r\n /**\r\n * usSetDisableStatusOnCalendarBtn(setDisable)\r\n * @param setDisable : boolean\r\n */\r\n usSetDisableStatusOnCalendarBtn(setDisable) {\r\n $('.ps-usage-calendar-btn').prop('disabled', setDisable);\r\n }\r\n\r\n /**\r\n * usUsersList(): Function\r\n * Load List of users of Company\r\n * Show it in devExtreme dropDownBox\r\n */\r\n usUsersList() {\r\n const self = this;\r\n const src = window['DevExpress'].data.AspNet.createStore({\r\n key: 'Email',\r\n loadUrl: '/ProfileAndSettings/ListSubUsers',\r\n onLoaded: (result) => {\r\n console.log('result', result);\r\n },\r\n });\r\n\r\n ($('.ps-usage-usersList') as any).dxDropDownBox({\r\n dataSource: src,\r\n contentTemplate: (e) => {\r\n const value = e.component.option('value'),\r\n $dataGrid = $('
$ ${data.Amount}
`).appendTo(container);\r\n },\r\n dataField: 'Amount',\r\n dataType: 'string',\r\n }, {\r\n caption: 'PaymentMethod',\r\n cellTemplate: (container, item) => {\r\n const data = item.data;\r\n let cardImg;\r\n switch (data.PaymentType) {\r\n case 'Amex': cardImg = 'logo-americanExpress.svg'; break;\r\n case 'Visa': cardImg = 'logo-visa.svg'; break;\r\n case 'Mast': cardImg = 'logo-mastercard.svg'; break;\r\n case 'Disc': cardImg = 'logo-discoverCard.svg'; break;\r\n }\r\n $(`${data.PaymentType} ${data.PaymentName} ending in ...${data.PaymentEnd}').dxDataGrid({\r\n dataSource: e.component.getDataSource(),\r\n columns: ['FirstName', 'LastName', 'Email', 'Status'],\r\n height: 265,\r\n hoverStateEnabled: true,\r\n keyExpr: 'Email',\r\n onEditorPreparing: (e) => {\r\n window['InstanceBase'].devExSearchFilterDelay(e);\r\n window['InstanceBase'].devExSearchFilterMin(e);\r\n },\r\n onSelectionChanged: (selectedItems) => {\r\n e.component.option('value', selectedItems.selectedRowKeys[0] || null);\r\n e.component.close();\r\n if (selectedItems.selectedRowsData[0]) {\r\n if (selectedItems.selectedRowsData[0].ExpiresAt) {\r\n let date = window['moment'](selectedItems.selectedRowsData[0].ExpiresAt).format('MM/DD/YYYY');\r\n $('.ps-usage-amount').text(date);\r\n date = window['moment'](selectedItems.selectedRowsData[0].ExpiresAt).format('MM/DD/YYYY HH:mm');\r\n let remain: any = Math.round(((new Date(date)).getTime() - Date.now()) / (86400 * 1000));\r\n if (remain < 0)\r\n remain = 'Expired';\r\n\r\n $('.ps-usage-remainingDays').text(remain);\r\n } else {\r\n $('.ps-usage-amount').text('No CRM Package');\r\n $('.ps-usage-remainingDays').text('0');\r\n }\r\n\r\n $('.ps-usage-selectUser').text(selectedItems.selectedRowsData[0].FullName);\r\n }\r\n\r\n self.usChangeLeadsMinutesPeriodByType();\r\n // if(selectedItems.selectedRowsData[0]) {\r\n // $('#globalSearchTextField').val(selectedItems.selectedRowsData[0].CompanyName);\r\n // $('#globalSearchRequest').trigger('click');\r\n // }\r\n\r\n $('.ps-usage-sentEmails').hide();\r\n },\r\n paging: { enabled: true, pageSize: 10 },\r\n remoteOperations: true,\r\n searchPanel: {\r\n visible: true\r\n },\r\n scrolling: { mode: 'infinite' },\r\n selection: { mode: 'single' },\r\n // selectedRowKeys: value ? [value] : [],\r\n showBorders: true,\r\n });\r\n\r\n // dataGrid = $dataGrid.dxDataGrid('instance');\r\n\r\n // e.component.on('valueChanged', function (args) {\r\n // clearTimeout(searchTimer);\r\n // // dataGrid.option('selectedRowKeys', args.value ? [args.value] : []);\r\n // e.component.close();\r\n // });\r\n\r\n return $dataGrid;\r\n },\r\n displayExpr: 'Email',\r\n dropDownOptions: {\r\n width: 500\r\n },\r\n onContentReady: () => {\r\n $.post('/ProfileAndSettings/AccountSettingsInfo', (data) => {\r\n $('.ps-usage-selectUser').text(data.CurrentUser.FullName);\r\n });\r\n },\r\n value: window['User']?.Email,\r\n })\r\n }\r\n // #endregion\r\n\r\n\r\n // =========== old\r\n\r\n //######################################################################################################################################\r\n\r\n ///* - */OnChange(target) { // => home.ts\r\n // const self = this;\r\n // const $target = $(target);\r\n // const data = { action: $target.data('change'), value: $target.val() };\r\n\r\n // let status = true;\r\n // if (data.action == 'Phone') {\r\n // status = self.PhoneValidation(data.value, $target.attr('id'));\r\n // } else if (data.action == 'Email') {\r\n // status = self.EmailValidation(data.value, $target.attr('id'), false);\r\n // if (status) {\r\n // status = false\r\n // const newEmail = $('#' + $target.attr('id')).val();\r\n // $.post('/ProfileAndSettings/IsTheSameEmailExistInDB', { newEmail: newEmail },\r\n // function (res) {\r\n // if (!res.successs) {\r\n // status = false;\r\n // $('#psvalid-email').text(res.message);\r\n // $('#' + $target.attr('id')).addClass('is-invalid');\r\n // } else {\r\n // $.post('/ProfileAndSettings/Change', data, () => { });\r\n // }\r\n // });\r\n // }\r\n // } else if (data.action == 'CompanyWebsite') {\r\n // status = self.UrlValidation($target.attr('id'));\r\n // } else if (data.action == 'Zip') {\r\n // status = self.ZipValidation(data.value, $target.attr('id'));\r\n // } else if (data.action == 'CompanySize') {\r\n // status = self.CompanySizeValidation(data.value, $target.attr('id'));\r\n // }\r\n // if (data.action == 'FirstName') {\r\n // if (!data.value) {\r\n // status = false;\r\n // $('#psvalid-firstName').show();\r\n // }\r\n // else\r\n // $('#psvalid-firstName').hide();\r\n // }\r\n // if (data.action == 'LastName') {\r\n // if (!data.value) {\r\n // status = false;\r\n // $('#psvalid-lastName').show();\r\n // }\r\n // else\r\n // $('#psvalid-lastName').hide();\r\n // }\r\n\r\n // if (status && data.action) {\r\n // $.post('/ProfileAndSettings/Change', data, (res) => {\r\n // if ($('#MainPane .firstName').is(':visible')) {\r\n // if (res.action == 'FirstName') {\r\n // $('#MainPane .firstName').text(($('input[data-change=\"FirstName\"]') as any).val());\r\n // }\r\n // if (res.action == 'Function') {\r\n // $('#MainPane .hd-header-function').text(($('#userFunction') as any).val());\r\n // }\r\n // if (res.action == 'Greeting') {\r\n // const greetingTextBox = $('#ps-ad-greeting').dxTextBox('instance');\r\n // if (greetingTextBox.option('value') == 0) {\r\n // greetingTextBox.option('value', 'Let\\'s rock it today!');\r\n // }\r\n // $('#MainPane .userGreeting').text(greetingTextBox.option('value'));\r\n // $('#MainPane .userGreeting').attr('title', greetingTextBox.option('value'));\r\n // }\r\n // }\r\n // });\r\n // }\r\n //}\r\n\r\n ///* - */PassValidation(t) { // => devExtreme\r\n // const self = this;\r\n // const pass = t.val();\r\n // $('#currentPassword').closest('.position-relative').find('.invalid-feedback').hide();\r\n // const field = t.closest('.notMutch').find('.invalid-feedback');\r\n // const fields = $('.notMutch .invalid-feedback');\r\n // field.hide();\r\n\r\n // if (self.asIsValidPassword(pass)) {\r\n // if ($('#currentPassword').val() == $('#newPassword').val()) {\r\n // fields.show();\r\n // fields.text('Current password should be different from New password');\r\n // }\r\n // if ($('#newPassword').val() != $('#confirmPassword').val()) {\r\n\r\n // if ($('#confirmPassword').val()) {\r\n // fields.show();\r\n // fields.text('Passwords do not match');\r\n // }\r\n // } else {\r\n // if ($('#currentPassword').val() == $('#newPassword').val()) {\r\n // fields.show();\r\n // fields.text('Current password should be different from New password');\r\n // }\r\n // else {\r\n // $('#newPassword').closest('.notMutch').find('.invalid-feedback').hide();\r\n // $('#confirmPassword').closest('.notMutch').find('.invalid-feedback').hide();\r\n // $('#ps-changePassword').prop('disabled', false);\r\n // return true;\r\n // }\r\n // }\r\n // } else {\r\n // if ($('#newPassword').val() == '' && $('#confirmPassword').val() == '') {\r\n // return false;\r\n // } else {\r\n // if (pass != '') {\r\n // field.show();\r\n // field.html('Password doesn\\'t meet complexity requirments');\r\n // }\r\n // }\r\n // }\r\n // $('#ps-changePassword').prop('disabled', true);\r\n // return false;\r\n //}\r\n\r\n ///* - */PhoneValidation(phone, fieldId) { // => devExtreme\r\n // phone = phone.charAt(0) == '1' ? phone.replace(/\\D/g, '').substring(1) : phone.replace(/\\D/g, '');\r\n // const res = phone.length == 10 || phone == '' ? true : false;\r\n\r\n // $('#' + fieldId).val(phone);\r\n\r\n // !res ? $('#' + fieldId).val(phone).addClass('is-invalid') : $('#' + fieldId).val(phone).removeClass('is-invalid');\r\n\r\n // return res;\r\n //}\r\n\r\n ///* - */EmailValidation(email, fieldId, notRequeider = true) { // => devExtreme\r\n // $('#psvalid-email').text('Please provide a valid Email.');\r\n // const self = this;\r\n // let res = self.IsValidEmail(email) ? true : false;\r\n\r\n // if (notRequeider && email == '')\r\n // res = true;\r\n\r\n // $('#' + fieldId).val(email);\r\n\r\n // !res ? $('#' + fieldId).val(email).addClass('is-invalid') : $('#' + fieldId).val(email).removeClass('is-invalid');\r\n\r\n // return res\r\n //}\r\n\r\n ///* - */IsValidEmail(email): boolean { //=> devExtreme\r\n // const pattern = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n // return pattern.test(email);\r\n //}\r\n\r\n ///* - */ZipValidation(zcode, fieldId) { //=> devExtreme\r\n // const zipcode = zcode.replace(/\\D/g, '');\r\n // const res = zipcode.length == 5 || zipcode == '' ? true : false;\r\n // $('#' + fieldId).val(zipcode);\r\n\r\n // !res ? $('#' + fieldId).val(zipcode).addClass('is-invalid') : $('#' + fieldId).val(zipcode).removeClass('is-invalid');\r\n\r\n // return res\r\n //}\r\n\r\n ///* - */CompanySizeValidation(size, fieldId) { //=> devExtreme\r\n // size = size.replace(/\\D/g, '');\r\n // const res = parseInt(size) > 0 || size == '' ? true : false;\r\n // $('#' + fieldId).val(size);\r\n\r\n // !res ? $('#' + fieldId).val(size).addClass('is-invalid') : $('#' + fieldId).val(size).removeClass('is-invalid');\r\n\r\n // return res\r\n //}\r\n\r\n ///* - */UrlValidation(fieldId) { //=> devExtreme\r\n // const url = $(`#${fieldId}`).val();\r\n // const pattern = /[-a-zA-Z0-9@:%_\\+.~#?&//=]{2,256}\\.[a-z]{2,4}\\b(\\/[-a-zA-Z0-9@:%_\\+.~#?&//=]*)?/gi;\r\n // const regex = new RegExp(pattern);\r\n // const res = (url as any).match(regex);\r\n // if (!res) {\r\n // $(`#${fieldId}`).addClass('is-invalid');\r\n // return false;\r\n // } else {\r\n // $(`#${fieldId}`).removeClass('is-invalid');\r\n // return true;\r\n // }\r\n //}\r\n\r\n\r\n //######################################################################################################################################\r\n\r\n //#region------------- PLAN & UPGRADE tab and functions -------------//\r\n\r\n //GetFormattedDate(date) {\r\n // const year = date.getFullYear();\r\n\r\n // let month = (1 + date.getMonth()).toString();\r\n // month = month.length > 1 ? month : '0' + month;\r\n\r\n // let day = date.getDate().toString();\r\n // day = day.length > 1 ? day : '0' + day;\r\n\r\n // return month + '/' + day + '/' + year;\r\n //}\r\n\r\n //ShowModalPS(packId: number, e) {\r\n // const option = new Option(e);\r\n // const self = this;\r\n // if ($(e.target).text().includes('Current'))\r\n // return false;\r\n\r\n // option.current.price = option.current.price ? option.current.price : 0;\r\n\r\n // $('#downgradeModal .action').html(option.action);\r\n // $('#downgradeModal .current').html(option.current.name);\r\n // $('#downgradeModal .next').html(option.next.name);\r\n // $('#downgradeModal .currentRec').html(option.current.records);\r\n // $('#downgradeModal .nextRec').html(option.next.records);\r\n // $('#downgradeModal .currentMin').html(option.current.minutes);\r\n // $('#downgradeModal .nextMin').html(option.next.minutes);\r\n // $('#downgradeModal .currentPrice').html(`$${option.current.price}/monthly`);\r\n // $('#downgradeModal .nextPrice').html(`$${option.next.price}/monthly`);\r\n // $('#downgradeModal .downgrade-remove').html('');\r\n // //let defers = [];\r\n // if (option.action == 'Downgrade') {\r\n // option.current.include = option.current.include.filter(function (item, pos) {\r\n // return option.current.include.indexOf(item) == pos;\r\n // })\r\n\r\n // for (let i = option.next.include.length; i < option.current.include.length; i++) {\r\n // $('#downgradeModal .downgrade-remove').append(`${option.current.include[i]} `);\r\n // }\r\n // $('#downgradeModal .downgrade-remove').removeClass('upgrade').addClass('downgrade');\r\n // $('#downgradeModal .downgrade-limit').removeClass('upgrade').addClass('downgrade');\r\n // $('#downgradeModal .changeText1').html('remove');\r\n // $('#downgradeModal .changeText2').html('usage limits to some features');\r\n // $('#downgradeModal .upgradeRemoveText').show();\r\n // if (option.next.name == 'Basic' && option.current.name == 'Individual') $('.warning-top').hide();\r\n // } else {\r\n // $('.warning-top').show();\r\n // for (let i = option.current.include.length; i < option.next.include.length; i++) {\r\n // $('#downgradeModal .downgrade-remove').append(`${option.next.include[i]} `);\r\n // }\r\n // $('#downgradeModal .downgrade-remove').removeClass('downgrade').addClass('upgrade');\r\n // $('#downgradeModal .downgrade-limit').removeClass('downgrade').addClass('upgrade');\r\n // $('#downgradeModal .changeText1').html('add');\r\n // $('#downgradeModal .changeText2').html('more Records and Minutes to your account');\r\n // $('#downgradeModal .upgradeRemoveText').hide();\r\n // }\r\n // $('#downgradeModal .nextDate').html(self.GetFormattedDate(window['nextDate']));\r\n // ($('#downgradeModal') as any).modal('show');\r\n // $('#downgradeModal .btn-savePlan').off('click').on('click', (e) => {\r\n // e.preventDefault();\r\n // $.post('/Price/CurrentPlan', (data) => {\r\n // if (option.action == 'Upgrade' && !data) {\r\n // const price = option.next.price - option.current.price;\r\n // window['InstanceBase'].showPurchaseModal($('.mh-welcome-email').text(), price, packId, true);\r\n // } else {\r\n // $.post('/Price/SetNextPackage', { packid: packId }, () => {\r\n // location.reload();\r\n // });\r\n // ($('#downgradeModal') as any).modal('hide');\r\n // }\r\n // });\r\n // });\r\n //}\r\n\r\n //AutoRecharge(target, pos) {\r\n // const tar = target.toLowerCase();\r\n // $(pos + ' .packages-' + tar + '-check').on('click', (e) => {\r\n // const limit = +$(pos + ` .packages-balance-input-${tar}-falls`).val();\r\n // const amount = +$(pos + ` .packages-balance-input-${tar}-buy`).val();\r\n // const enabled = $(pos + ' .packages-' + tar + '-switch-input').is(':checked');\r\n // if (enabled)\r\n // $.get('/SaveAutoRecharge', {\r\n // type: target,\r\n // amount: amount,\r\n // limit: limit,\r\n // }, () => {\r\n // $.post('/Account/Check', (data) => {\r\n // const objModal = {\r\n // size: 'sm',\r\n // textModal: 'Saved',\r\n // textYesBtn: 'Ok',\r\n // }\r\n // window['InstanceBase'].onePropositionModalLoad(objModal);\r\n // //window['InstanceBase'].onePropositionModalLoad('', 'Saved', true, 'Ok', false);\r\n // $('#price-leads-tab span').html(data.Leads);\r\n // $('#price-minutes-tab span').html(data.Minutes);\r\n // });\r\n // });\r\n // });\r\n\r\n // function onAction(rev = false) {\r\n // const limit = +$(pos + ` .packages-balance-input-${tar}-falls`).val();\r\n // let amount = +$(pos + ` .packages-balance-input-${tar}-buy`).val();\r\n // const enabled = $(pos + ' .packages-' + tar + '-switch-input').is(':checked');\r\n // const bt = $(pos + ' .packages-' + tar + '-check, ' + pos + ` .packages-balance-input-${tar}-falls, ` + pos + ` .packages-balance-input-${tar}-buy`);\r\n // const b = rev ? !enabled : enabled;\r\n // if (b) {\r\n // bt.removeAttr('disabled');\r\n // bt.removeClass('disabled');\r\n // }\r\n // else {\r\n // bt.attr('disabled', 'disabled');\r\n // bt.addClass('disabled');\r\n // }\r\n // amount = !enabled ? amount : -amount;\r\n // if (rev)\r\n // amount = -amount;\r\n\r\n // if (amount < 0)\r\n // $.get('/SaveAutoRecharge', {\r\n // type: target,\r\n // amount: amount,\r\n // limit: limit,\r\n // }, console.log);\r\n // }\r\n // $(pos + ' .packages-' + tar + '-switch-input, ' + pos + ` .packages-balance-input-${tar}-falls, ` + pos + ` .packages-balance-input-${tar}-buy`).on('change', function (e) {\r\n // onAction(true);\r\n // });\r\n // $(pos + ' .packages-' + tar + '-switch-label').on('click', () => {\r\n // onAction();\r\n // });\r\n //}\r\n}\r\n\r\n\r\n//class Option {\r\n// private _current;\r\n// private _next;\r\n// current;\r\n// next;\r\n// action;\r\n\r\n// constructor(e) {\r\n// this._current = $('.btn-inactive').parents('.plans-item');\r\n// this._next = $(e.target).parents('.plans-item');\r\n// this.current = this.GetObj(this._current);\r\n// this.next = this.GetObj(this._next);\r\n// this.action = this.current.price > this.next.price ? 'Downgrade' : 'Upgrade';\r\n// }\r\n\r\n// private GetObj(target: JQuery) {\r\n// const self = this;\r\n// const rm = target.find('.recMonthly');\r\n// const items = target.find('.packageIncludes li');\r\n// const include = [];\r\n// const optional = [];\r\n// items.each(function (_, el) {\r\n// const $el = $(el);\r\n// if ($el.hasClass('packageIncludeOption')) {\r\n// include.push($el.html());\r\n// }\r\n// if ($el.hasClass('packageIncludeOptionOptional')) {\r\n// optional.push($el.find('label').html());\r\n// }\r\n// });\r\n\r\n// try {\r\n// return {\r\n// name: target.find('.plans-name').html(),\r\n// price: +target.find('.plans-price span').html().substr(1),\r\n// records: self.ToNum($(rm[0]).html()), //Dom get html => $(rm[0]).html()\r\n// minutes: self.ToNum($(rm[1]).html()),\r\n// include: include,\r\n// optional: optional\r\n// }\r\n// } catch (e) {\r\n// return {\r\n// name: undefined,\r\n// price: undefined,\r\n// records: undefined, //Dom get html => $(rm[0]).html()\r\n// minutes: undefined,\r\n// include: include,\r\n// optional: optional\r\n// }\r\n// }\r\n// }\r\n\r\n// private ToNum(str) {\r\n// let dig = 0;\r\n// for (let i = 0; i < str.length; i++) {\r\n// if (str[i] >= '0' && str[i] <= '9') {\r\n// dig *= 10;\r\n// dig += str[i] - ('0' as any);\r\n// }\r\n// }\r\n// return dig;\r\n// }\r\n//}"],"names":[],"sourceRoot":""}