@posiwise/smart-crm 0.0.43 → 0.0.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/private/components/smart-crm-accounts/smart-crm-accounts.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-contacts/smart-crm-contacts.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-insight/smart-crm-account-insight/smart-crm-account-insight.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-insight/smart-crm-analysis-insight/smart-crm-analysis.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-insight/smart-crm-contact-insight/smart-crm-contact-insight.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-insight/smart-crm-marketing-insight/smart-crm-marketing-insight.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-insight/smart-crm-opportunities-insight/smart-crm-opportunities-insight.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-list.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-opportunities/smart-crm-opportunities-list/smart-crm-opportunities-list.component.mjs +3 -3
- package/fesm2022/posiwise-smart-crm.mjs +18 -18
- package/fesm2022/posiwise-smart-crm.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1565,11 +1565,11 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
|
|
|
1565
1565
|
super.ngOnDestroy();
|
|
1566
1566
|
}
|
|
1567
1567
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1568
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
1568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
1569
1569
|
}
|
|
1570
1570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
|
|
1571
1571
|
type: Component,
|
|
1572
|
-
args: [{ selector: 'pw-smart-crm-companies', template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"] }]
|
|
1572
|
+
args: [{ selector: 'pw-smart-crm-companies', template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2>Accounts</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row m-0\">\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4\">\n <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-4 mb-2\">\n <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n (onAddressChange)=\"handleAddressChange($event)\" />\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n <div class=\"text-end mt-0 mt-sm-3\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n field=\"location\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n field=\"organization_size_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n </p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n </p-sortIcon>\n <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n </p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n class=\"info-icon\"></i>\n </a>\n </td>\n <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n <td data-head=\"Owner\">\n <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n </td>\n <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n</td>\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n </td>\n\n <td data-head=\"Priority\">\n <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n </td>\n\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n </li>\n <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.accounts,\n account.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n (keydown.space)=\"onDelete(account.id, subscription.id)\"\n (click)=\"onDelete(account.id, subscription.id)\"\n aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n </div>\n <div *ngIf=\"accountActivities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div>\n <ng-template [ngIf]=\"accountGeography\">\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!accountGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"] }]
|
|
1573
1573
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i2.CommonService }, { type: i2.LogoCacheService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
1574
1574
|
|
|
1575
1575
|
class SmartCrmCompetitionComponent {
|
|
@@ -3410,11 +3410,11 @@ class SmartCrmContactComponent extends AppBaseComponent {
|
|
|
3410
3410
|
super.ngOnDestroy();
|
|
3411
3411
|
}
|
|
3412
3412
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n [showClear]=\"true\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n [showClear]=\"true\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"contactGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3414
3414
|
}
|
|
3415
3415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
|
|
3416
3416
|
type: Component,
|
|
3417
|
-
args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n [showClear]=\"true\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
|
|
3417
|
+
args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n <h3 *ngIf=\"accountData?.name\"\n class=\"mb-2\">\n {{ accountData.name }}\n <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n </h3>\n <h4 *ngIf=\"accountData?.location\"\n class=\"mb-1\">Location: {{ accountData.location }}</h4>\n <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n <h4 *ngIf=\"accountData?.company_url\">\n URL:\n <a href=\"{{ accountData.company_url }}\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{ accountData.company_url }}\n </a>\n </h4>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n *ngIf=\"!accountData?.name\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n data-cy=\"list-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n *ngIf=\"accountData?.name\">\n <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"data.contacts\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n stateStorage=\"local\"\n stateKey=\"smart-crm-contacts\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n <p-dropdown\n [options]=\"potential\"\n [showClear]=\"true\"\n [(ngModel)]=\"filterByPotentials\"\n [placeholder]=\"'Select Priority'\"\n (onChange)=\"filterByPotential($event.value)\">\n </p-dropdown>\n </div>\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- multiple select account drop down -->\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-md-4 col-lg-3\">\n <div class=\"d-flex\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n </div>\n </div>\n\n </div>\n\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.ContactMessage.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"labels\">\n {{ 'Crm.ContactMessage.Labels' | transloco }}\n <p-sortIcon field=\"labels\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"potential\">\n {{ 'Crm.ContactMessage.Potential' | transloco }}\n <p-sortIcon field=\"potential\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-contact>\n <tr>\n <td data-head=\"Name\"\n class=\"contactname\">\n <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n </a>\n </td>\n <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n <td data-head=\"Account Name\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n contact.crm_account.id\n ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"Labels\">\n <span class=\"badge bg-info m-1\"\n *ngFor=\"let item of contact.labels\">{{\n item\n }}</span>\n </td>\n <td data-head=\"Potential\">\n <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n color=\"warning\"\n class=\"badge\">{{ contact.potential }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + '/crm/contacts/info',\n contact.id\n ]\">\n <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Add opportunity\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactDetails,\n contact.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li *ngIf=\"\n hasAccess ||\n contact.owner_id === userId ||\n contact.crm_account.owner_id === userId\n \"\n ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(contact.id)\"\n (keydown.space)=\"onDelete(contact.id)\"\n (click)=\"onDelete(contact.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded && !accountData?.name\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"contactInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"contactInsight\"\n [paginator]=\"contactInsight?.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span\n [ngbTooltip]=\"insight?.headline\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.headline | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\">\n {{ insight.reason }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div>\n <ng-template [ngIf]=\"contactGeography\">\n <plotly-plot [data]=\"contactGeography?.data\"\n [config]=\"contactGeography?.config\"\n [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"contactGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!contactGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
|
|
3418
3418
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
3419
3419
|
|
|
3420
3420
|
class SmartCrmCustomerSuccessComponent {
|
|
@@ -3490,11 +3490,11 @@ class SmartCrmCommunicationsInsightComponent extends AppBaseComponent {
|
|
|
3490
3490
|
super.ngOnDestroy();
|
|
3491
3491
|
}
|
|
3492
3492
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsInsightComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsInsightComponent, selector: "pw-smart-crm-communications-insight", usesInheritance: true, ngImport: i0, template: "\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!communicationsInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsightLoaded && communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"communicationsInsightLoaded && !communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Engagement</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && communicationEngagement?.data?.length\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !communicationEngagement?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsInsightComponent, selector: "pw-smart-crm-communications-insight", usesInheritance: true, ngImport: i0, template: "\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!communicationsInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsightLoaded && communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"communicationsInsightLoaded && !communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Engagement</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && communicationEngagement?.data?.length\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !communicationEngagement?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3494
3494
|
}
|
|
3495
3495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsInsightComponent, decorators: [{
|
|
3496
3496
|
type: Component,
|
|
3497
|
-
args: [{ selector: 'pw-smart-crm-communications-insight', template: "\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!communicationsInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsightLoaded && communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"communicationsInsightLoaded && !communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Engagement</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && communicationEngagement?.data?.length\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !communicationEngagement?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
|
|
3497
|
+
args: [{ selector: 'pw-smart-crm-communications-insight', template: "\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!communicationsInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsightLoaded && communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"communicationsInsightLoaded && !communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Engagement</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && communicationEngagement?.data?.length\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !communicationEngagement?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
|
|
3498
3498
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
3499
3499
|
|
|
3500
3500
|
class SmartCrmAnalysisComponent extends AppBaseComponent {
|
|
@@ -3579,11 +3579,11 @@ class SmartCrmAnalysisComponent extends AppBaseComponent {
|
|
|
3579
3579
|
super.ngOnDestroy();
|
|
3580
3580
|
}
|
|
3581
3581
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmAnalysisComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3582
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmAnalysisComponent, selector: "pw-smart-crm-analysis", usesInheritance: true, ngImport: i0, template: "<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n\n<div class=\"row mt-5\">\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Activities Drill-Down</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isLoaded && graph?.data?.length\">\n <plotly-plot [data]=\"graph?.data\"\n [config]=\"graph?.config\"\n [layout]=\"graph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isLoaded && !graph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n <div *ngIf=\"isLoaded && graph && !graph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Revenue Timeline</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isRevenueGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isRevenueGraphLoaded && revenueGraph?.data?.length\">\n <plotly-plot [data]=\"revenueGraph?.data\"\n [config]=\"revenueGraph?.config\"\n [layout]=\"revenueGraph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isRevenueGraphLoaded && !revenueGraph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div *ngIf=\"isRevenueGraphLoaded && revenueGraph && !revenueGraph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "component", type: i11$1.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3582
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmAnalysisComponent, selector: "pw-smart-crm-analysis", usesInheritance: true, ngImport: i0, template: "<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n\n<div class=\"row mt-5\">\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Activities Drill-Down</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isLoaded && graph?.data?.length\">\n <plotly-plot [data]=\"graph?.data\"\n [config]=\"graph?.config\"\n [layout]=\"graph?.layout\" [useResizeHandler]=\"graph ? true : false\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isLoaded && !graph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n <div *ngIf=\"isLoaded && graph && !graph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Revenue Timeline</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isRevenueGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isRevenueGraphLoaded && revenueGraph?.data?.length\">\n <plotly-plot [data]=\"revenueGraph?.data\"\n [config]=\"revenueGraph?.config\"\n [layout]=\"revenueGraph?.layout\" [useResizeHandler]=\"revenueGraph ? true : false\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isRevenueGraphLoaded && !revenueGraph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div *ngIf=\"isRevenueGraphLoaded && revenueGraph && !revenueGraph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "component", type: i11$1.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3583
3583
|
}
|
|
3584
3584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmAnalysisComponent, decorators: [{
|
|
3585
3585
|
type: Component,
|
|
3586
|
-
args: [{ selector: 'pw-smart-crm-analysis', template: "<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n\n<div class=\"row mt-5\">\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Activities Drill-Down</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isLoaded && graph?.data?.length\">\n <plotly-plot [data]=\"graph?.data\"\n [config]=\"graph?.config\"\n [layout]=\"graph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isLoaded && !graph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n <div *ngIf=\"isLoaded && graph && !graph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Revenue Timeline</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isRevenueGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isRevenueGraphLoaded && revenueGraph?.data?.length\">\n <plotly-plot [data]=\"revenueGraph?.data\"\n [config]=\"revenueGraph?.config\"\n [layout]=\"revenueGraph?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isRevenueGraphLoaded && !revenueGraph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div *ngIf=\"isRevenueGraphLoaded && revenueGraph && !revenueGraph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n</div>\n" }]
|
|
3586
|
+
args: [{ selector: 'pw-smart-crm-analysis', template: "<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n\n<div class=\"row mt-5\">\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Activities Drill-Down</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isLoaded && graph?.data?.length\">\n <plotly-plot [data]=\"graph?.data\"\n [config]=\"graph?.config\"\n [layout]=\"graph?.layout\" [useResizeHandler]=\"graph ? true : false\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isLoaded && !graph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n <div *ngIf=\"isLoaded && graph && !graph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Revenue Timeline</h5>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isRevenueGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div>\n <ng-template [ngIf]=\"isRevenueGraphLoaded && revenueGraph?.data?.length\">\n <plotly-plot [data]=\"revenueGraph?.data\"\n [config]=\"revenueGraph?.config\"\n [layout]=\"revenueGraph?.layout\" [useResizeHandler]=\"revenueGraph ? true : false\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"isRevenueGraphLoaded && !revenueGraph\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Insight.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div *ngIf=\"isRevenueGraphLoaded && revenueGraph && !revenueGraph?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AnalysisMessage.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n</div>\n" }]
|
|
3587
3587
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }] });
|
|
3588
3588
|
|
|
3589
3589
|
class SmartCrmContactInsightComponent extends AppBaseComponent {
|
|
@@ -3659,11 +3659,11 @@ class SmartCrmContactInsightComponent extends AppBaseComponent {
|
|
|
3659
3659
|
super.ngOnDestroy();
|
|
3660
3660
|
}
|
|
3661
3661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactInsightComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2$3.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3662
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactInsightComponent, selector: "pw-smart-crm-contact-insight", usesInheritance: true, ngImport: i0, template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n <!-- User Base Graph -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!userBaseLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n <plotly-plot [data]=\"userBaseData?.data\"\n [config]=\"userBaseData?.config\"\n [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n insight?.headline | textTruncate: 20 }} </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11$1.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactInsightComponent, selector: "pw-smart-crm-contact-insight", usesInheritance: true, ngImport: i0, template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n <!-- User Base Graph -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!userBaseLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n <plotly-plot [data]=\"userBaseData?.data\"\n [config]=\"userBaseData?.config\"\n [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"userBaseData ? true : false\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"geographyLoaded ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n insight?.headline | textTruncate: 20 }} </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11$1.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3663
3663
|
}
|
|
3664
3664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactInsightComponent, decorators: [{
|
|
3665
3665
|
type: Component,
|
|
3666
|
-
args: [{ selector: 'pw-smart-crm-contact-insight', template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n <!-- User Base Graph -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!userBaseLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n <plotly-plot [data]=\"userBaseData?.data\"\n [config]=\"userBaseData?.config\"\n [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n insight?.headline | textTruncate: 20 }} </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n" }]
|
|
3666
|
+
args: [{ selector: 'pw-smart-crm-contact-insight', template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n <!-- User Base Graph -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!userBaseLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n <plotly-plot [data]=\"userBaseData?.data\"\n [config]=\"userBaseData?.config\"\n [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"userBaseData ? true : false\"></plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Contacts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!geographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"geographyLoaded ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactInsightLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Headline\">\n <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n insight?.headline | textTruncate: 20 }} </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n </div>\n <div *ngIf=\"!contactInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n" }]
|
|
3667
3667
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i2$3.AdminService }] });
|
|
3668
3668
|
|
|
3669
3669
|
class SmartCrmOpportunitiesInsightComponent extends AppBaseComponent {
|
|
@@ -3797,11 +3797,11 @@ class SmartCrmOpportunitiesInsightComponent extends AppBaseComponent {
|
|
|
3797
3797
|
super.ngOnDestroy();
|
|
3798
3798
|
}
|
|
3799
3799
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesInsightComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3800
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesInsightComponent, selector: "pw-smart-crm-opportunities-insight", usesInheritance: true, ngImport: i0, template: "\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n <div class=\"row mt-5\">\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities by Category</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesCategoryLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesCategoryLoaded && opportunitiesCategory?.data?.length\">\n <plotly-plot [data]=\"opportunitiesCategory?.data\" [config]=\"opportunitiesCategory?.config\" [layout]=\"opportunitiesCategory?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesCategory?.data?.length && opportunitiesCategoryLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunity by Stage</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesStageLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesStageLoaded && opportunitiesStage?.data?.length\">\n <plotly-plot [data]=\"opportunitiesStage?.data\" [config]=\"opportunitiesStage?.config\" [layout]=\"opportunitiesStage?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\" opportunitiesStageLoaded && !opportunitiesStage?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities - All</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesGraphLoaded && opportunitiesGraphData?.data?.length\">\n <plotly-plot [data]=\"opportunitiesGraphData?.data\" [config]=\"opportunitiesGraphData?.config\" [layout]=\"opportunitiesGraphData?.layout\"\n [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"opportunitiesGraphLoaded && !opportunitiesGraphData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "component", type: i11$1.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3800
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesInsightComponent, selector: "pw-smart-crm-opportunities-insight", usesInheritance: true, ngImport: i0, template: "\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n <div class=\"row mt-5\">\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities by Category</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesCategoryLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesCategoryLoaded && opportunitiesCategory?.data?.length\">\n <plotly-plot [data]=\"opportunitiesCategory?.data\" [config]=\"opportunitiesCategory?.config\" [layout]=\"opportunitiesCategory?.layout\" [useResizeHandler]=\"opportunitiesCategory ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesCategory?.data?.length && opportunitiesCategoryLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunity by Stage</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesStageLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesStageLoaded && opportunitiesStage?.data?.length\">\n <plotly-plot [data]=\"opportunitiesStage?.data\" [config]=\"opportunitiesStage?.config\" [layout]=\"opportunitiesStage?.layout\" [useResizeHandler]=\"opportunitiesStage ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\" opportunitiesStageLoaded && !opportunitiesStage?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities - All</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesGraphLoaded && opportunitiesGraphData?.data?.length\">\n <plotly-plot [data]=\"opportunitiesGraphData?.data\" [config]=\"opportunitiesGraphData?.config\" [layout]=\"opportunitiesGraphData?.layout\"\n [useResizeHandler]=\"opportunitiesGraphData ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"opportunitiesGraphLoaded && !opportunitiesGraphData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "component", type: i11$1.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
3801
3801
|
}
|
|
3802
3802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesInsightComponent, decorators: [{
|
|
3803
3803
|
type: Component,
|
|
3804
|
-
args: [{ selector: 'pw-smart-crm-opportunities-insight', template: "\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n <div class=\"row mt-5\">\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities by Category</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesCategoryLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesCategoryLoaded && opportunitiesCategory?.data?.length\">\n <plotly-plot [data]=\"opportunitiesCategory?.data\" [config]=\"opportunitiesCategory?.config\" [layout]=\"opportunitiesCategory?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesCategory?.data?.length && opportunitiesCategoryLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunity by Stage</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesStageLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesStageLoaded && opportunitiesStage?.data?.length\">\n <plotly-plot [data]=\"opportunitiesStage?.data\" [config]=\"opportunitiesStage?.config\" [layout]=\"opportunitiesStage?.layout\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\" opportunitiesStageLoaded && !opportunitiesStage?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities - All</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesGraphLoaded && opportunitiesGraphData?.data?.length\">\n <plotly-plot [data]=\"opportunitiesGraphData?.data\" [config]=\"opportunitiesGraphData?.config\" [layout]=\"opportunitiesGraphData?.layout\"\n [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"opportunitiesGraphLoaded && !opportunitiesGraphData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"] }]
|
|
3804
|
+
args: [{ selector: 'pw-smart-crm-opportunities-insight', template: "\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n <div class=\"row mt-5\">\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities by Category</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesCategoryLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesCategoryLoaded && opportunitiesCategory?.data?.length\">\n <plotly-plot [data]=\"opportunitiesCategory?.data\" [config]=\"opportunitiesCategory?.config\" [layout]=\"opportunitiesCategory?.layout\" [useResizeHandler]=\"opportunitiesCategory ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesCategory?.data?.length && opportunitiesCategoryLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunity by Stage</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesStageLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesStageLoaded && opportunitiesStage?.data?.length\">\n <plotly-plot [data]=\"opportunitiesStage?.data\" [config]=\"opportunitiesStage?.config\" [layout]=\"opportunitiesStage?.layout\" [useResizeHandler]=\"opportunitiesStage ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\" opportunitiesStageLoaded && !opportunitiesStage?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities - All</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!opportunitiesGraphLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"opportunitiesGraphLoaded && opportunitiesGraphData?.data?.length\">\n <plotly-plot [data]=\"opportunitiesGraphData?.data\" [config]=\"opportunitiesGraphData?.config\" [layout]=\"opportunitiesGraphData?.layout\"\n [useResizeHandler]=\"opportunitiesGraphData ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"opportunitiesGraphLoaded && !opportunitiesGraphData?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n\n </div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"] }]
|
|
3805
3805
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i2.ProductService }] });
|
|
3806
3806
|
|
|
3807
3807
|
class SmartCrmAccountInsightComponent extends AppBaseComponent {
|
|
@@ -4006,11 +4006,11 @@ class SmartCrmAccountInsightComponent extends AppBaseComponent {
|
|
|
4006
4006
|
super.ngOnDestroy();
|
|
4007
4007
|
}
|
|
4008
4008
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmAccountInsightComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4009
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmAccountInsightComponent, selector: "pw-smart-crm-account-insight", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <ng-container class=\"mt-5\">\n\n <!-- Signed up last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Signed up Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!signUpLastNinetyDaysLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"signedUpLastThirtyDays?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"signedUpLastThirtyDays\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"signedUpLastThirtyDays.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, signUp.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"signUp.crm_account_name\">{{ signUp?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"signedUpLastThirtyDays.length!== 0\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n </div>\n <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Churned Last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Churned Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!churnedAccountLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"churnedAccounts?.length\">\n <p-table class=\"table\" #dt [value]=\"churnedAccounts\" [paginator]=\"true\" [rows]=\"20\"\n [totalRecords]=\"churnedAccounts.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.UnsubscribedAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\"> {{ account.signed_up_at | dateFormat }} </td>\n <td data-head=\"UnsubscribedAt\" [ngClass]=\"{'text-danger': account.unsubscribed_at | isPastDate}\">\n {{ account.unsubscribed_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"churnedAccounts?.length !== 0\">{{ 'Label.Total' | transloco }}: {{\n churnedAccounts.length }}</span>\n </div>\n <div *ngIf=\"churnedAccounts?.length === 0 && churnedAccountLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Active Opportunities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Active Opportunities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"activeOpportunities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n\n [totalRecords]=\"activeOpportunities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, opportunities.crm_account?.id]\" class=\"name-link\">\n <span [ngbTooltip]=\"opportunities.crm_account?.name\">{{ opportunities.crm_account?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"activeOpportunities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n </div>\n <div *ngIf=\"activeOpportunities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountLastActivitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountLastActivities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountLastActivities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountLastActivities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountLastActivities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastActivities.length }}</span>\n </div>\n <div *ngIf=\"accountLastActivities?.length === 0 && accountLastActivitiesLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts at risk -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountAtRisk?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountAtRisk\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountAtRisk.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountAtRisk.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n </div>\n <div *ngIf=\"accountAtRisk?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Contract renewal -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at 1-Year Mark</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactRenewalLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"ContractRenewal?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"ContractRenewal\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"ContractRenewal.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"ContractRenewal.length !== 0\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n </div>\n <div *ngIf=\"ContractRenewal?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Credit Cards Expiring -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Expiring Credit Cards</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"creditCardExpiring?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"creditCardExpiring\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"creditCardExpiring.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"creditCardExpiring.length !== 0\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n </div>\n <div *ngIf=\"creditCardExpiring?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Magic Moment -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Magic Moment</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!magicMomentLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"magicMoment?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"magicMoment\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"magicMoment.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"magicMoment.length !==0 \">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n </div>\n <div *ngIf=\"magicMoment?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountGeographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"accountGeographyLoaded && accountGeography?.data?.length\">\n <plotly-plot [data]=\"accountGeography?.data\"\n [layout]=\"accountGeography?.layout\" [useResizeHandler]=\"true\" [config]=\"accountGeography?.config\"\n >\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"accountGeographyLoaded && !accountGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
4009
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmAccountInsightComponent, selector: "pw-smart-crm-account-insight", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <ng-container class=\"mt-5\">\n\n <!-- Signed up last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Signed up Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!signUpLastNinetyDaysLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"signedUpLastThirtyDays?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"signedUpLastThirtyDays\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"signedUpLastThirtyDays.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, signUp.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"signUp.crm_account_name\">{{ signUp?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"signedUpLastThirtyDays.length!== 0\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n </div>\n <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Churned Last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Churned Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!churnedAccountLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"churnedAccounts?.length\">\n <p-table class=\"table\" #dt [value]=\"churnedAccounts\" [paginator]=\"true\" [rows]=\"20\"\n [totalRecords]=\"churnedAccounts.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.UnsubscribedAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\"> {{ account.signed_up_at | dateFormat }} </td>\n <td data-head=\"UnsubscribedAt\" [ngClass]=\"{'text-danger': account.unsubscribed_at | isPastDate}\">\n {{ account.unsubscribed_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"churnedAccounts?.length !== 0\">{{ 'Label.Total' | transloco }}: {{\n churnedAccounts.length }}</span>\n </div>\n <div *ngIf=\"churnedAccounts?.length === 0 && churnedAccountLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Active Opportunities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Active Opportunities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"activeOpportunities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n\n [totalRecords]=\"activeOpportunities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, opportunities.crm_account?.id]\" class=\"name-link\">\n <span [ngbTooltip]=\"opportunities.crm_account?.name\">{{ opportunities.crm_account?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"activeOpportunities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n </div>\n <div *ngIf=\"activeOpportunities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountLastActivitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountLastActivities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountLastActivities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountLastActivities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountLastActivities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastActivities.length }}</span>\n </div>\n <div *ngIf=\"accountLastActivities?.length === 0 && accountLastActivitiesLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts at risk -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountAtRisk?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountAtRisk\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountAtRisk.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountAtRisk.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n </div>\n <div *ngIf=\"accountAtRisk?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Contract renewal -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at 1-Year Mark</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactRenewalLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"ContractRenewal?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"ContractRenewal\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"ContractRenewal.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"ContractRenewal.length !== 0\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n </div>\n <div *ngIf=\"ContractRenewal?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Credit Cards Expiring -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Expiring Credit Cards</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"creditCardExpiring?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"creditCardExpiring\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"creditCardExpiring.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"creditCardExpiring.length !== 0\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n </div>\n <div *ngIf=\"creditCardExpiring?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Magic Moment -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Magic Moment</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!magicMomentLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"magicMoment?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"magicMoment\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"magicMoment.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"magicMoment.length !==0 \">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n </div>\n <div *ngIf=\"magicMoment?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountGeographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"accountGeographyLoaded && accountGeography?.data?.length\">\n <plotly-plot [data]=\"accountGeography?.data\"\n [layout]=\"accountGeography?.layout\" [useResizeHandler]=\"accountGeographyLoaded ? true : false\" [config]=\"accountGeography?.config\"\n >\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"accountGeographyLoaded && !accountGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
4010
4010
|
}
|
|
4011
4011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmAccountInsightComponent, decorators: [{
|
|
4012
4012
|
type: Component,
|
|
4013
|
-
args: [{ selector: 'pw-smart-crm-account-insight', template: "<div class=\"row\">\n <ng-container class=\"mt-5\">\n\n <!-- Signed up last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Signed up Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!signUpLastNinetyDaysLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"signedUpLastThirtyDays?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"signedUpLastThirtyDays\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"signedUpLastThirtyDays.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, signUp.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"signUp.crm_account_name\">{{ signUp?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"signedUpLastThirtyDays.length!== 0\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n </div>\n <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Churned Last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Churned Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!churnedAccountLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"churnedAccounts?.length\">\n <p-table class=\"table\" #dt [value]=\"churnedAccounts\" [paginator]=\"true\" [rows]=\"20\"\n [totalRecords]=\"churnedAccounts.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.UnsubscribedAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\"> {{ account.signed_up_at | dateFormat }} </td>\n <td data-head=\"UnsubscribedAt\" [ngClass]=\"{'text-danger': account.unsubscribed_at | isPastDate}\">\n {{ account.unsubscribed_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"churnedAccounts?.length !== 0\">{{ 'Label.Total' | transloco }}: {{\n churnedAccounts.length }}</span>\n </div>\n <div *ngIf=\"churnedAccounts?.length === 0 && churnedAccountLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Active Opportunities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Active Opportunities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"activeOpportunities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n\n [totalRecords]=\"activeOpportunities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, opportunities.crm_account?.id]\" class=\"name-link\">\n <span [ngbTooltip]=\"opportunities.crm_account?.name\">{{ opportunities.crm_account?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"activeOpportunities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n </div>\n <div *ngIf=\"activeOpportunities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountLastActivitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountLastActivities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountLastActivities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountLastActivities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountLastActivities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastActivities.length }}</span>\n </div>\n <div *ngIf=\"accountLastActivities?.length === 0 && accountLastActivitiesLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts at risk -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountAtRisk?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountAtRisk\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountAtRisk.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountAtRisk.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n </div>\n <div *ngIf=\"accountAtRisk?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Contract renewal -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at 1-Year Mark</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactRenewalLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"ContractRenewal?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"ContractRenewal\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"ContractRenewal.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"ContractRenewal.length !== 0\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n </div>\n <div *ngIf=\"ContractRenewal?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Credit Cards Expiring -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Expiring Credit Cards</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"creditCardExpiring?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"creditCardExpiring\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"creditCardExpiring.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"creditCardExpiring.length !== 0\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n </div>\n <div *ngIf=\"creditCardExpiring?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Magic Moment -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Magic Moment</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!magicMomentLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"magicMoment?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"magicMoment\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"magicMoment.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"magicMoment.length !==0 \">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n </div>\n <div *ngIf=\"magicMoment?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountGeographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"accountGeographyLoaded && accountGeography?.data?.length\">\n <plotly-plot [data]=\"accountGeography?.data\"\n [layout]=\"accountGeography?.layout\" [useResizeHandler]=\"true\" [config]=\"accountGeography?.config\"\n >\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"accountGeographyLoaded && !accountGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-container>\n</div>\n" }]
|
|
4013
|
+
args: [{ selector: 'pw-smart-crm-account-insight', template: "<div class=\"row\">\n <ng-container class=\"mt-5\">\n\n <!-- Signed up last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Signed up Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!signUpLastNinetyDaysLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"signedUpLastThirtyDays?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"signedUpLastThirtyDays\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"signedUpLastThirtyDays.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, signUp.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"signUp.crm_account_name\">{{ signUp?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"signedUpLastThirtyDays.length!== 0\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n </div>\n <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Churned Last 90 days -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Churned Last 90 Days</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!churnedAccountLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"churnedAccounts?.length\">\n <p-table class=\"table\" #dt [value]=\"churnedAccounts\" [paginator]=\"true\" [rows]=\"20\"\n [totalRecords]=\"churnedAccounts.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.UnsubscribedAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\"\n class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\"> {{ account.signed_up_at | dateFormat }} </td>\n <td data-head=\"UnsubscribedAt\" [ngClass]=\"{'text-danger': account.unsubscribed_at | isPastDate}\">\n {{ account.unsubscribed_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"churnedAccounts?.length !== 0\">{{ 'Label.Total' | transloco }}: {{\n churnedAccounts.length }}</span>\n </div>\n <div *ngIf=\"churnedAccounts?.length === 0 && churnedAccountLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Active Opportunities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Active Opportunities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"activeOpportunities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n\n [totalRecords]=\"activeOpportunities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, opportunities.crm_account?.id]\" class=\"name-link\">\n <span [ngbTooltip]=\"opportunities.crm_account?.name\">{{ opportunities.crm_account?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"activeOpportunities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n </div>\n <div *ngIf=\"activeOpportunities?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountLastActivitiesLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountLastActivities?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountLastActivities\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountLastActivities.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-activities>\n <tr>\n <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n </a>\n </td>\n <td data-head=\"Contact\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Action\">\n <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n itemsArray: actionNames,\n item: activities.crm_action?.name\n }\"\n color=\"blue-grey\"\n class=\"badge\">{{ activities.crm_action?.name }}</span>\n </td>\n <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountLastActivities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastActivities.length }}</span>\n </div>\n <div *ngIf=\"accountLastActivities?.length === 0 && accountLastActivitiesLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts at risk -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"accountAtRisk?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"accountAtRisk\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"accountAtRisk.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"accountAtRisk.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n </div>\n <div *ngIf=\"accountAtRisk?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Contract renewal -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts at 1-Year Mark</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!contactRenewalLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"ContractRenewal?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"ContractRenewal\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"ContractRenewal.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"ContractRenewal.length !== 0\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n </div>\n <div *ngIf=\"ContractRenewal?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Credit Cards Expiring -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Expiring Credit Cards</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"creditCardExpiring?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"creditCardExpiring\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"creditCardExpiring.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n {{ account.cc_expiring_at | dateFormat }}\n <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle ml-1\"></i>\n </span>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"creditCardExpiring.length !== 0\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n </div>\n <div *ngIf=\"creditCardExpiring?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Magic Moment -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts with Magic Moment</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!magicMomentLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"magicMoment?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"magicMoment\"\n [paginator]=\"true\"\n [rows]=\"20\"\n [totalRecords]=\"magicMoment.length\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-account>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"SignUpAt\">\n {{ account.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"magicMoment.length !==0 \">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n </div>\n <div *ngIf=\"magicMoment?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n </div>\n\n <!-- Accounts Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Accounts Location</h5>\n <div class=\"w-100 text-center mt-3\">\n <ng-template [ngIf]=\"!accountGeographyLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </ng-template>\n </div>\n <div>\n <ng-template [ngIf]=\"accountGeographyLoaded && accountGeography?.data?.length\">\n <plotly-plot [data]=\"accountGeography?.data\"\n [layout]=\"accountGeography?.layout\" [useResizeHandler]=\"accountGeographyLoaded ? true : false\" [config]=\"accountGeography?.config\"\n >\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"accountGeographyLoaded && !accountGeography?.data?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-container>\n</div>\n" }]
|
|
4014
4014
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }] });
|
|
4015
4015
|
|
|
4016
4016
|
class SmartCrmInsightComponent {
|
|
@@ -4781,11 +4781,11 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
|
|
|
4781
4781
|
super.ngOnDestroy();
|
|
4782
4782
|
}
|
|
4783
4783
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>E-Marketing</h2>\n <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Email Campaign' }}\n </button>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_newsletters\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"location\">\n {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n <p-sortIcon field=\"location'\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr class=\"table-row\">\n <td data-head=\"Title\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n item.title\n }}</a>\n </td>\n <td data-head=\"Body\"\n [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n <td data-head=\"Location\">{{ item.location }}</td>\n <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n <td data-head=\"Pushed?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_pushed }}</span>\n </td>\n <td data-head=\"Delivered?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-edit edit-icon\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.marketingDetails,\n item.id\n ]\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(item.id)\"\n (keydown.space)=\"onDelete(item.id)\"\n (click)=\"onDelete(item.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Preview and Recipients\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-eye eye-icon\"\n (keydown.enter)=\"onNavigate(subscription, item)\"\n (click)=\"onNavigate(subscription, item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"!communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Campaigns Location</h5>\n <div>\n <ng-template [ngIf]=\"communicationEngagement\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!communicationEngagement\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
4784
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>E-Marketing</h2>\n <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Email Campaign' }}\n </button>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_newsletters\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"location\">\n {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n <p-sortIcon field=\"location'\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr class=\"table-row\">\n <td data-head=\"Title\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n item.title\n }}</a>\n </td>\n <td data-head=\"Body\"\n [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n <td data-head=\"Location\">{{ item.location }}</td>\n <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n <td data-head=\"Pushed?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_pushed }}</span>\n </td>\n <td data-head=\"Delivered?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-edit edit-icon\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.marketingDetails,\n item.id\n ]\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(item.id)\"\n (keydown.space)=\"onDelete(item.id)\"\n (click)=\"onDelete(item.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Preview and Recipients\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-eye eye-icon\"\n (keydown.enter)=\"onNavigate(subscription, item)\"\n (click)=\"onNavigate(subscription, item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"!communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Campaigns Location</h5>\n <div>\n <ng-template [ngIf]=\"communicationEngagement\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!communicationEngagement\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
4785
4785
|
}
|
|
4786
4786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, decorators: [{
|
|
4787
4787
|
type: Component,
|
|
4788
|
-
args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>E-Marketing</h2>\n <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Email Campaign' }}\n </button>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_newsletters\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"location\">\n {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n <p-sortIcon field=\"location'\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr class=\"table-row\">\n <td data-head=\"Title\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n item.title\n }}</a>\n </td>\n <td data-head=\"Body\"\n [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n <td data-head=\"Location\">{{ item.location }}</td>\n <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n <td data-head=\"Pushed?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_pushed }}</span>\n </td>\n <td data-head=\"Delivered?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-edit edit-icon\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.marketingDetails,\n item.id\n ]\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(item.id)\"\n (keydown.space)=\"onDelete(item.id)\"\n (click)=\"onDelete(item.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Preview and Recipients\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-eye eye-icon\"\n (keydown.enter)=\"onNavigate(subscription, item)\"\n (click)=\"onNavigate(subscription, item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"!communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Campaigns Location</h5>\n <div>\n <ng-template [ngIf]=\"communicationEngagement\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!communicationEngagement\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
|
|
4788
|
+
args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>E-Marketing</h2>\n <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n </div>\n <div class=\"col-12 col-md-12 text-end\">\n <button class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Email Campaign' }}\n </button>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_newsletters\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n pInputText\n size=\"50\"\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"mw-90\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"location\">\n {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n <p-sortIcon field=\"location'\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr class=\"table-row\">\n <td data-head=\"Title\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n item.title\n }}</a>\n </td>\n <td data-head=\"Body\"\n [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n <td data-head=\"Location\">{{ item.location }}</td>\n <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n <td data-head=\"Pushed?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_pushed }}</span>\n </td>\n <td data-head=\"Delivered?\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ !!item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-edit edit-icon\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.marketingDetails,\n item.id\n ]\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(item.id)\"\n (keydown.space)=\"onDelete(item.id)\"\n (click)=\"onDelete(item.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Preview and Recipients\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-eye eye-icon\"\n (keydown.enter)=\"onNavigate(subscription, item)\"\n (click)=\"onNavigate(subscription, item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n</div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\"\n *ngIf=\"communicationsInsight?.length\">\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\n\n [totalRecords]=\"communicationsInsight.length\"\n [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-insight>\n <tr>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n </span>\n </td>\n <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY' }}</td>\n <td data-head=\"Reason\">{{ insight.reason }}</td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n </div>\n <div *ngIf=\"!communicationsInsight?.length\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Campaigns Location</h5>\n <div>\n <ng-template [ngIf]=\"communicationEngagement\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!communicationEngagement\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
|
|
4789
4789
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
4790
4790
|
|
|
4791
4791
|
class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
|
|
@@ -6057,11 +6057,11 @@ class SmartCrmOpportunitiesListComponent extends AppBaseComponent {
|
|
|
6057
6057
|
super.ngOnDestroy();
|
|
6058
6058
|
}
|
|
6059
6059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesListComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- Empty column occupying the same space -->\n <div class=\"col-sm-3 col-6\"></div>\n <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n <div class=\"d-flex w-100\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n </div>\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n </th>\n <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n <p-sortIcon field=\"win_chances\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n <p-sortIcon field=\"starting_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-opportunities>\n <tr>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 15 }} </span>\n </a>\n <a *ngIf=\"\n !hasAccess &&\n opportunities?.owner_id !== userId &&\n checkPermission('Pages.Product.CRM.Role.Admin')\n \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n </td>\n <td class=\"contactname\" data-head=\"Crm Contact\">\n <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n opportunities.crm_contact_id.id\n ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n opportunities.crm_contact?.last_name }}</a>\n </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n opportunities.crm_account.id\n ]\">{{ opportunities.crm_account.name }}</a>\n </td>\n <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"WinChance\">\n <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n {{ opportunities.win_chances / 100 | percent }}\n </span>\n <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n <td data-head=\"Categories\">\n <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n }}</span>\n </td>\n <td data-head=\"Stage\">\n <span class=\"badge\" [appDynamicBadge]=\"{\n itemsArray: stages,\n item: opportunities?.crm_opportunity_stage?.name\n }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n </td>\n <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunities,\n opportunities.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(opportunities.id)\"\n (keydown.space)=\"onDelete(opportunities.id)\"\n (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n </div>\n </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.OpportunitiesMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.title | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n </div>\n <div *ngIf=\"opportunitiesInsight?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities Location</h5>\n <div>\n <ng-template [ngIf]=\"opportunitiesGeography\">\n <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
6060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- Empty column occupying the same space -->\n <div class=\"col-sm-3 col-6\"></div>\n <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n <div class=\"d-flex w-100\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n </div>\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n </th>\n <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n <p-sortIcon field=\"win_chances\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n <p-sortIcon field=\"starting_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-opportunities>\n <tr>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 15 }} </span>\n </a>\n <a *ngIf=\"\n !hasAccess &&\n opportunities?.owner_id !== userId &&\n checkPermission('Pages.Product.CRM.Role.Admin')\n \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n </td>\n <td class=\"contactname\" data-head=\"Crm Contact\">\n <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n opportunities.crm_contact_id.id\n ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n opportunities.crm_contact?.last_name }}</a>\n </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n opportunities.crm_account.id\n ]\">{{ opportunities.crm_account.name }}</a>\n </td>\n <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"WinChance\">\n <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n {{ opportunities.win_chances / 100 | percent }}\n </span>\n <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n <td data-head=\"Categories\">\n <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n }}</span>\n </td>\n <td data-head=\"Stage\">\n <span class=\"badge\" [appDynamicBadge]=\"{\n itemsArray: stages,\n item: opportunities?.crm_opportunity_stage?.name\n }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n </td>\n <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunities,\n opportunities.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(opportunities.id)\"\n (keydown.space)=\"onDelete(opportunities.id)\"\n (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n </div>\n </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.OpportunitiesMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.title | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n </div>\n <div *ngIf=\"opportunitiesInsight?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities Location</h5>\n <div>\n <ng-template [ngIf]=\"opportunitiesGeography\">\n <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"opportunitiesGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
|
|
6061
6061
|
}
|
|
6062
6062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesListComponent, decorators: [{
|
|
6063
6063
|
type: Component,
|
|
6064
|
-
args: [{ selector: 'pw-smart-crm-opportunities-list', template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- Empty column occupying the same space -->\n <div class=\"col-sm-3 col-6\"></div>\n <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n <div class=\"d-flex w-100\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n </div>\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n </th>\n <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n <p-sortIcon field=\"win_chances\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n <p-sortIcon field=\"starting_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-opportunities>\n <tr>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 15 }} </span>\n </a>\n <a *ngIf=\"\n !hasAccess &&\n opportunities?.owner_id !== userId &&\n checkPermission('Pages.Product.CRM.Role.Admin')\n \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n </td>\n <td class=\"contactname\" data-head=\"Crm Contact\">\n <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n opportunities.crm_contact_id.id\n ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n opportunities.crm_contact?.last_name }}</a>\n </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n opportunities.crm_account.id\n ]\">{{ opportunities.crm_account.name }}</a>\n </td>\n <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"WinChance\">\n <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n {{ opportunities.win_chances / 100 | percent }}\n </span>\n <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n <td data-head=\"Categories\">\n <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n }}</span>\n </td>\n <td data-head=\"Stage\">\n <span class=\"badge\" [appDynamicBadge]=\"{\n itemsArray: stages,\n item: opportunities?.crm_opportunity_stage?.name\n }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n </td>\n <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunities,\n opportunities.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(opportunities.id)\"\n (keydown.space)=\"onDelete(opportunities.id)\"\n (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n </div>\n </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.OpportunitiesMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.title | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n </div>\n <div *ngIf=\"opportunitiesInsight?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities Location</h5>\n <div>\n <ng-template [ngIf]=\"opportunitiesGeography\">\n <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"true\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"] }]
|
|
6064
|
+
args: [{ selector: 'pw-smart-crm-opportunities-list', template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div class=\"col-sm-3 col-6\">\n <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n [showToggleAll]=\"true\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n <!-- Empty column occupying the same space -->\n <div class=\"col-sm-3 col-6\"></div>\n <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n <div class=\"d-flex w-100\">\n <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n </div>\n </div>\n </div>\n <div class=\"search-filter\">\n <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n </th>\n <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n <p-sortIcon field=\"win_chances\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n </th>\n <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n <p-sortIcon field=\"starting_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-opportunities>\n <tr>\n <td data-head=\"Title\">\n <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n \" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 15 }} </span>\n </a>\n <a *ngIf=\"\n !hasAccess &&\n opportunities?.owner_id !== userId &&\n checkPermission('Pages.Product.CRM.Role.Admin')\n \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n </td>\n <td class=\"contactname\" data-head=\"Crm Contact\">\n <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n opportunities.crm_contact_id.id\n ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n opportunities.crm_contact?.last_name }}</a>\n </td>\n <td data-head=\"Account\">\n <a [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n opportunities.crm_account.id\n ]\">{{ opportunities.crm_account.name }}</a>\n </td>\n <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n <td data-head=\"WinChance\">\n <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n {{ opportunities.win_chances / 100 | percent }}\n </span>\n <span class=\"text-danger\"\n *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n </td>\n <td data-head=\"Categories\">\n <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n }}</span>\n </td>\n <td data-head=\"Stage\">\n <span class=\"badge\" [appDynamicBadge]=\"{\n itemsArray: stages,\n item: opportunities?.crm_opportunity_stage?.name\n }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n </td>\n <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunities,\n opportunities.id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(opportunities.id)\"\n (keydown.space)=\"onDelete(opportunities.id)\"\n (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n </li>\n </ng-container>\n </ng-container>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n </div>\n </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n </pw-no-data>\n</div>\n<ng-container>\n <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n <th scope=\"true\"> {{ 'Crm.OpportunitiesMessage.Reason' | transloco }} </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-insight>\n <tr>\n <td data-head=\"Account\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <span\n [ngbTooltip]=\"insight?.title\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ insight?.title | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"Reason\"> {{ insight.reason }} </td>\n </tr>\n </ng-template>\n </p-table>\n <span class=\"total-records-count\" *ngIf=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n </div>\n <div *ngIf=\"opportunitiesInsight?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n <!-- Geography -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Opportunities Location</h5>\n <div>\n <ng-template [ngIf]=\"opportunitiesGeography\">\n <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"opportunitiesGeography ? true : false\">\n </plotly-plot>\n </ng-template>\n </div>\n <div *ngIf=\"!opportunitiesGeography\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"] }]
|
|
6065
6065
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i2.ProductService }] });
|
|
6066
6066
|
|
|
6067
6067
|
class SmartCrmOpportunitiesComponent {
|