@posiwise/smart-crm 0.0.25 → 0.0.26
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-account-info/smart-crm-account-info.component.mjs +3 -3
- package/esm2022/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-details/smart-crm-marketing-details.component.mjs +6 -1
- package/esm2022/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-list.component.mjs +7 -3
- package/esm2022/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-view-details/smart-crm-marketing-view-details.component.mjs +17 -8
- package/fesm2022/posiwise-smart-crm.mjs +27 -12
- package/fesm2022/posiwise-smart-crm.mjs.map +1 -1
- package/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-details/smart-crm-marketing-details.component.d.ts +3 -2
- package/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-list.component.d.ts +1 -0
- package/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-view-details/smart-crm-marketing-view-details.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -51,6 +51,7 @@ import { takeUntil } from 'rxjs/operators';
|
|
|
51
51
|
import * as i10$1 from 'primeng/tooltip';
|
|
52
52
|
import * as i12$2 from 'ngx-quill';
|
|
53
53
|
import { QuillModule } from 'ngx-quill';
|
|
54
|
+
import * as i2$3 from '@angular/platform-browser';
|
|
54
55
|
import * as i8$3 from '@angular/cdk/drag-drop';
|
|
55
56
|
import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
|
|
56
57
|
import uniqBy from 'lodash/uniqBy';
|
|
@@ -63,7 +64,7 @@ import { AppConfigService } from '@posiwise/app-config-service';
|
|
|
63
64
|
import { StatusCodes } from 'http-status-codes';
|
|
64
65
|
import * as i3$1 from '@posiwise/layouts';
|
|
65
66
|
import { LayoutsModule } from '@posiwise/layouts';
|
|
66
|
-
import * as i2$
|
|
67
|
+
import * as i2$4 from '@posiwise/shared-product-components';
|
|
67
68
|
import { ProductsShared } from '@posiwise/shared-product-components';
|
|
68
69
|
|
|
69
70
|
class AppSmartCrm {
|
|
@@ -1169,11 +1170,11 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
|
|
|
1169
1170
|
super.ngOnDestroy();
|
|
1170
1171
|
}
|
|
1171
1172
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.SubscriptionService }, { token: i2.GeoService }, { token: i2.CommonService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }, { token: i2.LogoCacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyInfoComponent, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a href=\"javascript:void(0)\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Image\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label>{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <select class=\"form-select\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n <option *ngFor=\"let country of countries\"\n [value]=\"country.code\">\n {{ country.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"first_name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n <div class=\"mb-3\">\n <select formControlName=\"organization_type_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n <option *ngFor=\"let option of types['organization_types']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <select formControlName=\"organization_industry_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n <option *ngFor=\"let option of industries['organization_industries']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <select formControlName=\"organization_size_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n <option *ngFor=\"let option of sizes['organization_sizes']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <select formControlName=\"status\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n <option *ngFor=\"let option of status\"\n [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <select formControlName=\"priority\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n <option *ngFor=\"let option of priority\"\n [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <select formControlName=\"crm_source_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n <option *ngFor=\"let option of source\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\" id \"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\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 cosntact...\"\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=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">{{\n contact.first_name + ' ' + contact.last_name\n | textTruncate: 20\n }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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 (click)=\"onDeleteContact(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=\"totalRecords === 0 && totalRecordsUnFiltered !== 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=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { 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: "directive", type: i9.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: "directive", type: i8$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.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: i8.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
1173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyInfoComponent, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a href=\"javascript:void(0)\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Image\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label>{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <select class=\"form-select\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n <option *ngFor=\"let country of countries\"\n [value]=\"country.code\">\n {{ country.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"first_name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n <div class=\"mb-3\">\n <select formControlName=\"organization_type_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n <option *ngFor=\"let option of types['organization_types']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <select formControlName=\"organization_industry_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n <option *ngFor=\"let option of industries['organization_industries']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <select formControlName=\"organization_size_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n <option *ngFor=\"let option of sizes['organization_sizes']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <select formControlName=\"status\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n <option *ngFor=\"let option of status\"\n [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <select formControlName=\"priority\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n <option *ngFor=\"let option of priority\"\n [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <select formControlName=\"crm_source_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n <option *ngFor=\"let option of source\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\" id \"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\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 contact...\"\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=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">{{\n contact.first_name + ' ' + contact.last_name\n | textTruncate: 20\n }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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 (click)=\"onDeleteContact(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=\"totalRecords === 0 && totalRecordsUnFiltered !== 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=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { 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: "directive", type: i9.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: "directive", type: i8$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.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: i8.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
1173
1174
|
}
|
|
1174
1175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyInfoComponent, decorators: [{
|
|
1175
1176
|
type: Component,
|
|
1176
|
-
args: [{ selector: 'pw-smart-crm-company-info', template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a href=\"javascript:void(0)\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Image\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label>{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <select class=\"form-select\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n <option *ngFor=\"let country of countries\"\n [value]=\"country.code\">\n {{ country.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"first_name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n <div class=\"mb-3\">\n <select formControlName=\"organization_type_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n <option *ngFor=\"let option of types['organization_types']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <select formControlName=\"organization_industry_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n <option *ngFor=\"let option of industries['organization_industries']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <select formControlName=\"organization_size_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n <option *ngFor=\"let option of sizes['organization_sizes']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <select formControlName=\"status\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n <option *ngFor=\"let option of status\"\n [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <select formControlName=\"priority\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n <option *ngFor=\"let option of priority\"\n [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <select formControlName=\"crm_source_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n <option *ngFor=\"let option of source\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\" id \"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\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 cosntact...\"\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=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">{{\n contact.first_name + ' ' + contact.last_name\n | textTruncate: 20\n }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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 (click)=\"onDeleteContact(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=\"totalRecords === 0 && totalRecordsUnFiltered !== 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=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
1177
|
+
args: [{ selector: 'pw-smart-crm-company-info', template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\n <a href=\"javascript:void(0)\"\n (click)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isDataLoaded\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n <div *ngIf=\"isDataLoaded\">\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Image\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block\">\n About <span *ngIf=\"data?.id\">{{ data.name }}</span>\n </h4>\n <a href=\"javascript:void(0);\"\n *ngIf=\"isFormEdit\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</label>\n <input ngx-gp-autocomplete\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"countries$ | async as countries\">\n <label>{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </label>\n <select class=\"form-select\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\">\n <option *ngFor=\"let country of countries\"\n [value]=\"country.code\">\n {{ country.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3 ui-fluid skills-modal\">\n <label class=\"label mb-2\">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.owner_id\">\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n <p-autoComplete *ngIf=\"!isFormEdit || !data?.owner_id\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n field=\"first_name\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"mb-3\">\n <label class=\"label mb-0\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</label>\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n *ngIf=\"isFormEdit && data?.company_url\">{{ data?.company_url }}</a>\n <input *ngIf=\"!isFormEdit || !data?.company_url\"\n type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"data?.tel\">\n <label class=\"label mb-0\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationTypes$ | async as types\">\n <label>{{ 'Organization.OrganizationType' | transloco }}</label>\n <div class=\"mb-3\">\n <select formControlName=\"organization_type_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\">\n <option *ngFor=\"let option of types['organization_types']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationIndustries$ | async as industries\">\n <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>\n <select formControlName=\"organization_industry_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\">\n <option *ngFor=\"let option of industries['organization_industries']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\"\n *ngIf=\"organizationSizes$ | async as sizes\">\n <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>\n <select formControlName=\"organization_size_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\">\n <option *ngFor=\"let option of sizes['organization_sizes']\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>\n <select formControlName=\"status\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\">\n <option *ngFor=\"let option of status\"\n [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>\n <select formControlName=\"priority\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\">\n <option *ngFor=\"let option of priority\"\n [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>\n <select formControlName=\"crm_source_id\"\n class=\"form-control form-select\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\">\n <option *ngFor=\"let option of source\"\n [value]=\"option.id\">\n {{ option.name }}\n </option>\n </select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n <div *ngIf=\"!isFormEdit\"\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <textarea class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n <p class=\"text-danger\"\n *ngIf=\"\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n \">\n Note Required\n </p>\n <div *ngIf=\"actions?.length\"\n class=\"d-block clear-both pt-3\">\n <ng-container *ngFor=\"let action of actions; index as i\">\n <button *ngIf=\"action.visible\"\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n </ng-container>\n <div class=\"text-danger\"\n *ngIf=\"submitAction && actionControls.get('crm_action_id').invalid\">\n Please select an action\n </div>\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n field=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch checkedLabel=\"completed\"\n uncheckedLabel=\"open\"\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n <div *ngIf=\"buttonDisable\"\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n </form>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"!accountComments?.length && isLoaded\"\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n <div *ngIf=\"accountComments?.length\">\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n *ngFor=\"\n let item of accountComments;\n index as i;\n let odd = odd;\n let even = even;\n let last = last;\n let first = first\n \">\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\" id \"\n field=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <p class=\"float-start mb-0\"\n *ngIf=\"\n !showFullComment || item.id !== commentId\n \">\n {{ item.comment | slice: 0:170\n }}<a *ngIf=\"item.comment.length > 170\"\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n </p>\n <p class=\"float-start mb-0\"\n *ngIf=\"showFullComment && item.id === commentId\">\n {{ item.comment }}\n <a *ngIf=\"\n item.comment.length > 170 &&\n showFullComment\n \"\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n </p>\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n *ngIf=\"userId === item.owner_id || hasAccess\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n <span *ngIf=\"!updating || actionId !== item.id\"\n class=\"font-small-3\">\n {{ item.when }}</span>\n <input *ngIf=\"updating && actionId === item.id\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\" />\n </div>\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n *ngIf=\"userId === item.owner_id || hasAccess\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n <p [class.text-danger]=\"!item.color\"\n *ngIf=\"!item.cancelled && !item.completed\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n <a class=\"text-secondary action-owner\"\n *ngIf=\"item.crm_contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n <span *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n class=\"badge bg-success ms-2\">Open</span>\n <a *ngIf=\"\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as cancelled\"\n href=\"javascript:void(0);\"\n (click)=\"setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <a *ngIf=\"\n item.completed &&\n (userId === item.owner_id || hasAccess)\n \"\n ngbTooltip=\"Set as UnCompleted\"\n href=\"javascript:void(0);\"\n (click)=\"\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\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 contact...\"\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=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">{{\n contact.first_name + ' ' + contact.last_name\n | textTruncate: 20\n }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline\">\n <li ngbTooltip=\"Show\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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 (click)=\"onDeleteContact(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=\"totalRecords === 0 && totalRecordsUnFiltered !== 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=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n </div>\n <div *ngIf=\"totalRecordsUnFiltered === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n <div *ngFor=\"let versioning of accountVersioning\">\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong><a *ngIf=\"versioning?.author\"\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n <div *ngIf=\"accountVersioning?.length === 0\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\">\n <input type=\"file\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n <div class=\"upload-item\"\n *ngFor=\"let f of files; let i = index\">\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n </span>\n <span *ngIf=\"f['uploaded']\">100 %</span>\n <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n <span *ngIf=\"f['uploaded']\">Done</span>\n </span>\n <span class=\"speed-and-eta-text\"\n *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
1177
1178
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.SubscriptionService }, { type: i2.GeoService }, { type: i2.CommonService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i0.ChangeDetectorRef }, { type: i2.LogoCacheService }, { type: Document, decorators: [{
|
|
1178
1179
|
type: Inject,
|
|
1179
1180
|
args: [DOCUMENT]
|
|
@@ -3698,6 +3699,9 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
|
|
|
3698
3699
|
this.editorConfig = QuillHelper.getEditorConfig();
|
|
3699
3700
|
this.form = AppSmartCrm.getMarketingForm();
|
|
3700
3701
|
}
|
|
3702
|
+
ngAfterViewInit() {
|
|
3703
|
+
HelperService.subscribeToEditorChanges(this.form, 'body');
|
|
3704
|
+
}
|
|
3701
3705
|
ngOnInit() {
|
|
3702
3706
|
this.route.params.subscribe(data => {
|
|
3703
3707
|
this.id = Number(data['Id']);
|
|
@@ -3742,6 +3746,8 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
|
|
|
3742
3746
|
onSave() {
|
|
3743
3747
|
this.submitted = true;
|
|
3744
3748
|
this.buttonBusy = true;
|
|
3749
|
+
const rawHtml = HelperService.SaveRawHTML();
|
|
3750
|
+
this.form.controls['body'].setValue(rawHtml);
|
|
3745
3751
|
const data = { ...this.form.value };
|
|
3746
3752
|
data.send_until = HelperService.dateFormat(this.form.get('send_until').value);
|
|
3747
3753
|
data.send_at = HelperService.dateFormat(this.form.get('send_at').value);
|
|
@@ -3985,6 +3991,10 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
|
|
|
3985
3991
|
}
|
|
3986
3992
|
});
|
|
3987
3993
|
}
|
|
3994
|
+
onNavigate(subscription, item) {
|
|
3995
|
+
const route = ['/' + subscription?.slug + this.routers.marketing, item.id];
|
|
3996
|
+
this.router.navigate(route);
|
|
3997
|
+
}
|
|
3988
3998
|
/** Function to delete communication */
|
|
3989
3999
|
onDelete(id) {
|
|
3990
4000
|
HelperService.raiseDeletePopup().then(res => {
|
|
@@ -4040,17 +4050,18 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
|
|
|
4040
4050
|
super.ngOnDestroy();
|
|
4041
4051
|
}
|
|
4042
4052
|
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 }); }
|
|
4043
|
-
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>Email Marketing</h2>\n <p>In this section you can create and manage your email marketing strategy.</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 New Email' }}\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 | 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=\"Sent?\">\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\">\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 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 (click)=\"onDelete(item.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Newsletter recipients\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-fw fa-list\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.marketing,\n item.id\n ]\"\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 *rbacAllow=\"'Pages.Beta'\">\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Drill Down</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.Value' | 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\">{{ insight.title }}</td>\n <td data-head=\"Value\">{{ insight.value }}</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\">Engagement</h5>\n <div>\n <ng-template [ngIf]=\"communicationEngagement\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\">\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}\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: 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: i7.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.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.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
4053
|
+
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>Email Marketing</h2>\n <p>In this section you can create and manage your email marketing strategy.</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 New Email' }}\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=\"Sent?\">\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\">\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 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 (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 (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 *rbacAllow=\"'Pages.Beta'\">\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Drill Down</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.Value' | 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\">{{ insight.title }}</td>\n <td data-head=\"Value\">{{ insight.value }}</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\">Engagement</h5>\n <div>\n <ng-template [ngIf]=\"communicationEngagement\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\">\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: 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: i7.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.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.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
|
|
4044
4054
|
}
|
|
4045
4055
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, decorators: [{
|
|
4046
4056
|
type: Component,
|
|
4047
|
-
args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Email Marketing</h2>\n <p>In this section you can create and manage your email marketing strategy.</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 New Email' }}\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 | 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=\"Sent?\">\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\">\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 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 (click)=\"onDelete(item.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"
|
|
4057
|
+
args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n <div class=\"col-12\">\n <h2>Email Marketing</h2>\n <p>In this section you can create and manage your email marketing strategy.</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 New Email' }}\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=\"Sent?\">\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\">\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 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 (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 (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 *rbacAllow=\"'Pages.Beta'\">\n <div class=\"row mt-5\"\n *ngIf=\"isLoaded\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Drill Down</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.Value' | 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\">{{ insight.title }}</td>\n <td data-head=\"Value\">{{ insight.value }}</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\">Engagement</h5>\n <div>\n <ng-template [ngIf]=\"communicationEngagement\">\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\">\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"] }]
|
|
4048
4058
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
4049
4059
|
|
|
4050
4060
|
class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
|
|
4051
|
-
constructor(injector, crmService) {
|
|
4061
|
+
constructor(injector, crmService, sanitizer) {
|
|
4052
4062
|
super(injector);
|
|
4053
4063
|
this.crmService = crmService;
|
|
4064
|
+
this.sanitizer = sanitizer;
|
|
4054
4065
|
this.isLoaded = false;
|
|
4055
4066
|
}
|
|
4056
4067
|
ngOnInit() {
|
|
@@ -4075,7 +4086,11 @@ class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
|
|
|
4075
4086
|
this.crmService
|
|
4076
4087
|
.getCrmNewsletter(this.subscriptionId, id)
|
|
4077
4088
|
.subscribe(response => {
|
|
4078
|
-
|
|
4089
|
+
let blogBody;
|
|
4090
|
+
if (response && response.body) {
|
|
4091
|
+
blogBody = HelperService.sanitizeQuillBody(response.body, this.sanitizer);
|
|
4092
|
+
}
|
|
4093
|
+
this.communicationDetails = { ...response, body: blogBody };
|
|
4079
4094
|
})
|
|
4080
4095
|
.add(() => {
|
|
4081
4096
|
this.isLoaded = true;
|
|
@@ -4084,13 +4099,13 @@ class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
|
|
|
4084
4099
|
ngOnDestroy() {
|
|
4085
4100
|
super.ngOnDestroy();
|
|
4086
4101
|
}
|
|
4087
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4088
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\" *ngIf=\"communicationDetails\">\n <div class=\"card pb-0\">\n <div class=\"card-body p-4\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n </span>\n <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n </span>\n </div>\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 mb-3 ms-2\">\n <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n </div>\n <div class=\"col-12 mb-3 ms-2\">\n <h5>{{ communicationDetails?.title }}</h5>\n </div>\n <div class=\"col-12 ms-2\">\n <
|
|
4102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details", usesInheritance: true, ngImport: i0, template: "\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"container-fluid pw-tab overflow-hidden\" *ngIf=\"communicationDetails && isLoaded\">\n <div class=\"card pb-0\">\n <div class=\"card-body p-4\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n </span>\n <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n </span>\n </div>\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 mb-3 ms-2\">\n <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n </div>\n <div class=\"col-12 mb-3 ms-2\">\n <h5>{{ communicationDetails?.title }}</h5>\n </div>\n <div class=\"col-12 ms-2\">\n <div class=\"ql-container ql-snow body-quill\">\n <div class=\"ql-editor\"\n [innerHTML]=\"communicationDetails?.body\">\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}\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: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
|
|
4089
4104
|
}
|
|
4090
4105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, decorators: [{
|
|
4091
4106
|
type: Component,
|
|
4092
|
-
args: [{ selector: 'pw-smart-crm-communication-view-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\" *ngIf=\"communicationDetails\">\n <div class=\"card pb-0\">\n <div class=\"card-body p-4\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n </span>\n <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n </span>\n </div>\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 mb-3 ms-2\">\n <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n </div>\n <div class=\"col-12 mb-3 ms-2\">\n <h5>{{ communicationDetails?.title }}</h5>\n </div>\n <div class=\"col-12 ms-2\">\n <
|
|
4093
|
-
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
|
|
4107
|
+
args: [{ selector: 'pw-smart-crm-communication-view-details', template: "\n<div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"container-fluid pw-tab overflow-hidden\" *ngIf=\"communicationDetails && isLoaded\">\n <div class=\"card pb-0\">\n <div class=\"card-body p-4\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n </span>\n <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n </span>\n </div>\n <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 mb-3 ms-2\">\n <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n </div>\n <div class=\"col-12 mb-3 ms-2\">\n <h5>{{ communicationDetails?.title }}</h5>\n </div>\n <div class=\"col-12 ms-2\">\n <div class=\"ql-container ql-snow body-quill\">\n <div class=\"ql-editor\"\n [innerHTML]=\"communicationDetails?.body\">\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}\n"] }]
|
|
4108
|
+
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$3.DomSanitizer }] });
|
|
4094
4109
|
|
|
4095
4110
|
class SmartCrmMarketingViewComponent extends AppBaseComponent {
|
|
4096
4111
|
constructor(injector) {
|
|
@@ -6406,7 +6421,7 @@ class CrmSignupComponent extends AppBaseComponent {
|
|
|
6406
6421
|
$('.register').css('opacity', 1);
|
|
6407
6422
|
}
|
|
6408
6423
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmSignupComponent, deps: [{ token: i2.AuthService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6409
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmSignupComponent, selector: "pw-crm-signup", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid register\">\n <div class=\"register-container row h-100\">\n <div class=\"col-8 col-xl-9 col-md-7 col-lg-8 register-outer\">\n <h1 class=\"my-5\">\n Not just a CRM <br />\n but\n <span data-period=\"3000\"\n class=\"txt-rotate\"\n [attr.data-rotate]=\"[\n 'Qualified Leads',\n 'New Prospects',\n 'New Business Opportunities'\n ]\"></span>\n <span class=\"blinking-cursor\">|</span>\n <br />regularly delivered to you\n </h1>\n\n <h3 class=\"my-5\">\n We use growth hacking tools - mainly crawlers and machine learning - to automate the\n sourcing of new prospect lists.\n </h3>\n\n <div class=\"row services\">\n <div class=\"col-lg-6 col-md-12 service-desc service-image\">\n <figure>\n <img src=\"/assets/img/products/smart-crm/crm-effective-solution.png\"\n alt=\"Effective Solution\"\n class=\"img-fluid\" />\n </figure>\n </div>\n <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n <h2><span>A More Effective</span> solution to increase your sales funnel.</h2>\n <p>Our proprietary technology automates the sourcing of new leads.</p>\n\n <ul class=\"list-unstyled\">\n <li>\n <span class=\"icon-check branding-color\"></span> Stop wasting time\n searching for new prospects. Let us automate the process instead.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> We provide all you need\n to contact prospects effectively.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> Focus on what's really\n important - talking to your clients.\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"row services\">\n <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n <h2>The full power of <span>Machine Learning</span>.</h2>\n <p>\n We have built a system that is able to understand when a prospect is most\n likely to be looking for new vendors.\n </p>\n <ul class=\"list-unstyled\">\n <li>\n <span class=\"icon-check branding-color\"></span> Don't waste time. Reach\n out to prospects at exactly the right moment.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> Let us tell you the most\n efficient way to engage in conversation with your prospect.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> Maximize the chances to\n convert the prospect into a paying customer.\n </li>\n </ul>\n </div>\n <div class=\"col-lg-6 col-md-12 service-image\">\n <figure>\n <img src=\"/assets/img/products/smart-crm/crm-machine-learning.png\"\n alt=\"Machine Learning\"\n class=\"img-fluid\" />\n </figure>\n </div>\n </div>\n </div>\n\n <div class=\"register-right-wrapper\">\n <div class=\"register-right\">\n <ul class=\"nav nav-tabs nav-justified\"\n role=\"tablist\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\"\n id=\"login-tab\"\n data-bs-toggle=\"tab\"\n href=\"#login\"\n role=\"tab\"\n aria-controls=\"login\"\n aria-selected=\"true\">Login</a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\"\n id=\"join-tab\"\n data-bs-toggle=\"tab\"\n href=\"#join\"\n role=\"tab\"\n aria-controls=\"join\"\n aria-selected=\"false\">Interested?</a>\n </li>\n </ul>\n\n <div class=\"tab-content social-inline\">\n <div class=\"tab-pane fade show\"\n id=\"join\"\n role=\"tabpanel\"\n aria-labelledby=\"join-tab\">\n <h3>\n Contact us for a demo.<br />\n It's worth more than a 1000 words.\n </h3>\n <pw-contact-us [masterProductId]=\"masterProductId\"\n [productKey]=\"productKey\"\n [subject]=\"subject\"></pw-contact-us>\n </div>\n\n <div class=\"tab-pane fade show active\"\n id=\"login\"\n role=\"tabpanel\"\n aria-labelledby=\"login-tab\">\n <h3>Welcome back</h3>\n <pw-login></pw-login>\n </div>\n </div>\n </div>\n </div>\n </div>\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.register{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%;min-height:100vh;opacity:0;padding:40px}.register ul{border-top-left-radius:10px;border-top-right-radius:10px}.register ul.nav-tabs li{margin-bottom:-2px}.register ul.nav-tabs li:last-child a{border-top-right-radius:10px}.register ul.nav-tabs li:first-child a{border-top-left-radius:10px}.register ul.nav-tabs li a{background-color:#fff;border:0;border-radius:10px 10px 0 0;color:#000;font-family:Roboto,sans-serif;outline:none}.register ul.nav-tabs li a.active{background-color:#36c283;color:#fff}.register-container{margin:0 auto;max-width:100%;padding-right:15px}.register-container h1{color:#45d292}.register-container h3{color:var(--text)}.register-outer{color:#fff;padding-right:50px;text-align:center}.register-outer .logo-div{text-align:left}.register-outer .logo-div img{margin-bottom:0}.register-outer.fixed{position:absolute;top:8%;width:62%}.register-outer .txt-rotate{color:var(--text)}.register-outer input{background:#f8f9fa;border:0;border-radius:1.5rem;color:#383d41;cursor:pointer;font-weight:700;margin-bottom:3%;margin-top:30%;padding:2%;width:60%}.register-outer img{animation:mover 2s infinite alternate;margin-bottom:5%}.register-right{background:#f8f9fa;border-radius:10px;box-shadow:0 0 2px #00000080;flex:0 0 25%;margin-left:0!important;max-width:350px;padding:0;position:fixed;right:50px;top:20%;width:100%}.register-form{position:relative}.register-form iframe{left:50%;position:absolute;transform:translate(-50%) scale(.8)}.card{background-color:#fff;border-radius:20px;box-shadow:0 0 5px 1px #0003}.card-header i{background-color:var(--second);border-radius:50px;box-shadow:0 0 5px 2px #0003;color:#fff;font-size:20px;height:60px;padding:20px;width:60px}.card-block{color:var(--text);font:14px/1.5 Roboto,sans-serif}form .form-control{border-radius:50px;font-size:13px}form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.tab-content{background-color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top:6px solid var(--second);padding:20px!important}.tab-content h3{font-size:20px;margin:30px 0;text-align:center;text-transform:uppercase}.tab-content form .form-control{border-radius:50px;font-size:13px}.tab-content form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.form-check-input{cursor:pointer;height:100%;left:0;opacity:0;top:0;z-index:1}label{font:400 13px/1.3 Roboto,sans-serif;text-transform:none}label:after,label:before{top:0}.blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.product-features{color:var(--text);letter-spacing:.3px}.product-features.service-desc h2{font-size:32px;font-weight:700}.product-features.service-desc h2 span{color:var(--second)}.product-features .product-features ul li span{margin-right:15px}.product-features .branding-color{color:var(--second)}.product-features .icon-check:before{content:\"\\e080\"}.product-features p{color:var(--text);font-size:18px;font-weight:400;line-height:27px}.product-features ul li{align-items:center;-webkit-box-align:center;display:flex;-ms-flex-align:center;font-size:18px;line-height:25px;margin:0 0 15px}.product-features ul li span{margin-right:15px}.services{padding:50px 0}.forgot-pwd{color:#2e3238;font-size:.8rem;text-decoration:underline}.msp-container{padding:0!important}.msp-container .register-container{min-height:100vh!important}.msp-container .services{padding:0}.msp-container .services .service-points{font-size:18px;line-height:1.15em}.msp-container .branding-color{color:#fff}.msp-container .product-features ul li{color:#fff!important;margin:0 0 15px}.msp-container .register-outer{background:linear-gradient(var(--first),var(--second))}.msp-container .register-outer h1,.msp-container .register-outer h2,.msp-container .register-outer h3,.msp-container .register-outer p{color:#fff!important}.msp-container .register-right .tab-content{border-top:6px solid var(--first)}.msp-container .register-right .tab-content h3{color:var(--first);font-weight:700}.msp-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container{padding:0!important}.vendor-container .register-outer h1{color:var(--first)}.vendor-container .service-points{font-size:18px;line-height:1.15em}.vendor-container .branding-color{color:var(--first)!important}.vendor-container .register-right .tab-content{border-top:6px solid var(--first)}.vendor-container .register-right .tab-content h3{color:var(--first);font-weight:700}.vendor-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container .form-container{background-image:url(/assets/img/products/trial/login-form-background-img.png)}@keyframes blink{0%{color:transparent}50%{color:#45d292}to{color:transparent}}@media (max-width: 991px){.services{padding:25px 0}}@media only screen and (max-width: 768px){.register-container{max-width:100%;padding-right:0}.service-image{display:none}.register-outer{margin-top:30px;order:2;padding-right:0;transform:none}.register-outer h1{font-size:30px;padding:0}.register-outer h2{font-size:22px}.register-right{margin-top:10px;order:1;position:unset;top:0;transform:translateY(0)}.register-right,.register-outer{flex:100%;max-width:100%;width:100%}.product-features.service-desc h2{font-size:30px!important}.vendor-container .logo-div img{margin-bottom:0!important;padding-right:65px}.vendor-container .form-container{background:none}}app-social-login{padding:0 15px;width:100%}@media only screen and (min-width: 768px){.register-left{padding-right:40px}}@media only screen and (max-width: 480px){.register{padding:10px}.vendor-container{padding:10px!important}.vendor-container .form-container{padding:0!important}}@media screen and (min-width: 769px){.vendor-container .form-container{background-size:cover;height:100vh;position:fixed;right:0}}@media screen and (max-width: 768px){.vendor-container{background-image:url(/assets/img/products/c/login-form-background-img.png);background-position:right;background-repeat:no-repeat;background-size:60vw 100%}.vendor-container h3{letter-spacing:.03px;line-height:27px}.vendor-container .product-features li{margin:0 0 15px!important}}@media screen and (max-width: 575px){.vendor-container .logo-div{margin:0 auto 30px;text-align:center;width:300px}.vendor-container .logo-div img{margin-top:0!important;padding-right:0!important}}@media (min-width: 768px) and (max-width: 768px){.logo-div img{flex:0 0 33.3333%;max-width:33.3333%}}@media (min-width: 769px) and (max-width: 820px){.register-outer{flex:0 0 50%;max-width:50%}}@media (min-width: 1200px) and (max-width: 1280px){.register-outer{flex:0 0 66.6667%;max-width:66.6667%}}pw-cloudolive-signup-tabs-a{width:100%}.register-right-wrapper{width:100%}.register-outer.fixed{position:static}@media (min-width: 1600px){.register-right-wrapper{display:flex;justify-content:flex-end;width:100%}.register-right{right:auto}.register-container{max-width:85%}.register-container .form-container{background:none;position:static;right:auto}}@media (min-width: 1800px){.register-container{max-width:73%}}@media (min-width: 2560px){.register-container{max-width:65%}}.wrapper-register-content{margin-top:50px;padding:0!important}.wrapper-register-content .register-outer{margin:0 auto!important;padding:0 20px!important}.cloudolive-header h1,.blinking-text-wrapper h1{color:#45d292}.cloudolive-header h3,.blinking-text-wrapper h3,.cloudolive-header .txt-rotate,.blinking-text-wrapper .txt-rotate{color:var(--text)}.cloudolive-header .blinking-cursor,.blinking-text-wrapper .blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.tech-features-wrapper .container{padding-left:20px!important;padding-right:20px!important}.tech-features-wrapper section{padding:70px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:100px 0}@media (max-width: 768px){.tech-features-wrapper section{padding:40px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:50px 0}}.testimonial-bg{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%}\n"], dependencies: [{ kind: "component", type: i2$3.ProductLoginComponent, selector: "pw-login", inputs: ["gaEventObj", "googleCode"] }, { kind: "component", type: i2$3.ContactUsComponent, selector: "pw-contact-us", inputs: ["productKey", "subject", "masterProductId", "gaEventObj"] }] }); }
|
|
6424
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmSignupComponent, selector: "pw-crm-signup", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid register\">\n <div class=\"register-container row h-100\">\n <div class=\"col-8 col-xl-9 col-md-7 col-lg-8 register-outer\">\n <h1 class=\"my-5\">\n Not just a CRM <br />\n but\n <span data-period=\"3000\"\n class=\"txt-rotate\"\n [attr.data-rotate]=\"[\n 'Qualified Leads',\n 'New Prospects',\n 'New Business Opportunities'\n ]\"></span>\n <span class=\"blinking-cursor\">|</span>\n <br />regularly delivered to you\n </h1>\n\n <h3 class=\"my-5\">\n We use growth hacking tools - mainly crawlers and machine learning - to automate the\n sourcing of new prospect lists.\n </h3>\n\n <div class=\"row services\">\n <div class=\"col-lg-6 col-md-12 service-desc service-image\">\n <figure>\n <img src=\"/assets/img/products/smart-crm/crm-effective-solution.png\"\n alt=\"Effective Solution\"\n class=\"img-fluid\" />\n </figure>\n </div>\n <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n <h2><span>A More Effective</span> solution to increase your sales funnel.</h2>\n <p>Our proprietary technology automates the sourcing of new leads.</p>\n\n <ul class=\"list-unstyled\">\n <li>\n <span class=\"icon-check branding-color\"></span> Stop wasting time\n searching for new prospects. Let us automate the process instead.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> We provide all you need\n to contact prospects effectively.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> Focus on what's really\n important - talking to your clients.\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"row services\">\n <div class=\"col-lg-6 col-md-12 service-desc product-features text-start\">\n <h2>The full power of <span>Machine Learning</span>.</h2>\n <p>\n We have built a system that is able to understand when a prospect is most\n likely to be looking for new vendors.\n </p>\n <ul class=\"list-unstyled\">\n <li>\n <span class=\"icon-check branding-color\"></span> Don't waste time. Reach\n out to prospects at exactly the right moment.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> Let us tell you the most\n efficient way to engage in conversation with your prospect.\n </li>\n <li>\n <span class=\"icon-check branding-color\"></span> Maximize the chances to\n convert the prospect into a paying customer.\n </li>\n </ul>\n </div>\n <div class=\"col-lg-6 col-md-12 service-image\">\n <figure>\n <img src=\"/assets/img/products/smart-crm/crm-machine-learning.png\"\n alt=\"Machine Learning\"\n class=\"img-fluid\" />\n </figure>\n </div>\n </div>\n </div>\n\n <div class=\"register-right-wrapper\">\n <div class=\"register-right\">\n <ul class=\"nav nav-tabs nav-justified\"\n role=\"tablist\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\"\n id=\"login-tab\"\n data-bs-toggle=\"tab\"\n href=\"#login\"\n role=\"tab\"\n aria-controls=\"login\"\n aria-selected=\"true\">Login</a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\"\n id=\"join-tab\"\n data-bs-toggle=\"tab\"\n href=\"#join\"\n role=\"tab\"\n aria-controls=\"join\"\n aria-selected=\"false\">Interested?</a>\n </li>\n </ul>\n\n <div class=\"tab-content social-inline\">\n <div class=\"tab-pane fade show\"\n id=\"join\"\n role=\"tabpanel\"\n aria-labelledby=\"join-tab\">\n <h3>\n Contact us for a demo.<br />\n It's worth more than a 1000 words.\n </h3>\n <pw-contact-us [masterProductId]=\"masterProductId\"\n [productKey]=\"productKey\"\n [subject]=\"subject\"></pw-contact-us>\n </div>\n\n <div class=\"tab-pane fade show active\"\n id=\"login\"\n role=\"tabpanel\"\n aria-labelledby=\"login-tab\">\n <h3>Welcome back</h3>\n <pw-login></pw-login>\n </div>\n </div>\n </div>\n </div>\n </div>\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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.register{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%;min-height:100vh;opacity:0;padding:40px}.register ul{border-top-left-radius:10px;border-top-right-radius:10px}.register ul.nav-tabs li{margin-bottom:-2px}.register ul.nav-tabs li:last-child a{border-top-right-radius:10px}.register ul.nav-tabs li:first-child a{border-top-left-radius:10px}.register ul.nav-tabs li a{background-color:#fff;border:0;border-radius:10px 10px 0 0;color:#000;font-family:Roboto,sans-serif;outline:none}.register ul.nav-tabs li a.active{background-color:#36c283;color:#fff}.register-container{margin:0 auto;max-width:100%;padding-right:15px}.register-container h1{color:#45d292}.register-container h3{color:var(--text)}.register-outer{color:#fff;padding-right:50px;text-align:center}.register-outer .logo-div{text-align:left}.register-outer .logo-div img{margin-bottom:0}.register-outer.fixed{position:absolute;top:8%;width:62%}.register-outer .txt-rotate{color:var(--text)}.register-outer input{background:#f8f9fa;border:0;border-radius:1.5rem;color:#383d41;cursor:pointer;font-weight:700;margin-bottom:3%;margin-top:30%;padding:2%;width:60%}.register-outer img{animation:mover 2s infinite alternate;margin-bottom:5%}.register-right{background:#f8f9fa;border-radius:10px;box-shadow:0 0 2px #00000080;flex:0 0 25%;margin-left:0!important;max-width:350px;padding:0;position:fixed;right:50px;top:20%;width:100%}.register-form{position:relative}.register-form iframe{left:50%;position:absolute;transform:translate(-50%) scale(.8)}.card{background-color:#fff;border-radius:20px;box-shadow:0 0 5px 1px #0003}.card-header i{background-color:var(--second);border-radius:50px;box-shadow:0 0 5px 2px #0003;color:#fff;font-size:20px;height:60px;padding:20px;width:60px}.card-block{color:var(--text);font:14px/1.5 Roboto,sans-serif}form .form-control{border-radius:50px;font-size:13px}form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.tab-content{background-color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top:6px solid var(--second);padding:20px!important}.tab-content h3{font-size:20px;margin:30px 0;text-align:center;text-transform:uppercase}.tab-content form .form-control{border-radius:50px;font-size:13px}.tab-content form input[type=submit]{font-size:16px;margin-bottom:20px;padding:8px 30px}.form-check-input{cursor:pointer;height:100%;left:0;opacity:0;top:0;z-index:1}label{font:400 13px/1.3 Roboto,sans-serif;text-transform:none}label:after,label:before{top:0}.blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.product-features{color:var(--text);letter-spacing:.3px}.product-features.service-desc h2{font-size:32px;font-weight:700}.product-features.service-desc h2 span{color:var(--second)}.product-features .product-features ul li span{margin-right:15px}.product-features .branding-color{color:var(--second)}.product-features .icon-check:before{content:\"\\e080\"}.product-features p{color:var(--text);font-size:18px;font-weight:400;line-height:27px}.product-features ul li{align-items:center;-webkit-box-align:center;display:flex;-ms-flex-align:center;font-size:18px;line-height:25px;margin:0 0 15px}.product-features ul li span{margin-right:15px}.services{padding:50px 0}.forgot-pwd{color:#2e3238;font-size:.8rem;text-decoration:underline}.msp-container{padding:0!important}.msp-container .register-container{min-height:100vh!important}.msp-container .services{padding:0}.msp-container .services .service-points{font-size:18px;line-height:1.15em}.msp-container .branding-color{color:#fff}.msp-container .product-features ul li{color:#fff!important;margin:0 0 15px}.msp-container .register-outer{background:linear-gradient(var(--first),var(--second))}.msp-container .register-outer h1,.msp-container .register-outer h2,.msp-container .register-outer h3,.msp-container .register-outer p{color:#fff!important}.msp-container .register-right .tab-content{border-top:6px solid var(--first)}.msp-container .register-right .tab-content h3{color:var(--first);font-weight:700}.msp-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container{padding:0!important}.vendor-container .register-outer h1{color:var(--first)}.vendor-container .service-points{font-size:18px;line-height:1.15em}.vendor-container .branding-color{color:var(--first)!important}.vendor-container .register-right .tab-content{border-top:6px solid var(--first)}.vendor-container .register-right .tab-content h3{color:var(--first);font-weight:700}.vendor-container .register-right ul.nav-tabs li a.active{background-color:var(--first)}.vendor-container .form-container{background-image:url(/assets/img/products/trial/login-form-background-img.png)}@keyframes blink{0%{color:transparent}50%{color:#45d292}to{color:transparent}}@media (max-width: 991px){.services{padding:25px 0}}@media only screen and (max-width: 768px){.register-container{max-width:100%;padding-right:0}.service-image{display:none}.register-outer{margin-top:30px;order:2;padding-right:0;transform:none}.register-outer h1{font-size:30px;padding:0}.register-outer h2{font-size:22px}.register-right{margin-top:10px;order:1;position:unset;top:0;transform:translateY(0)}.register-right,.register-outer{flex:100%;max-width:100%;width:100%}.product-features.service-desc h2{font-size:30px!important}.vendor-container .logo-div img{margin-bottom:0!important;padding-right:65px}.vendor-container .form-container{background:none}}app-social-login{padding:0 15px;width:100%}@media only screen and (min-width: 768px){.register-left{padding-right:40px}}@media only screen and (max-width: 480px){.register{padding:10px}.vendor-container{padding:10px!important}.vendor-container .form-container{padding:0!important}}@media screen and (min-width: 769px){.vendor-container .form-container{background-size:cover;height:100vh;position:fixed;right:0}}@media screen and (max-width: 768px){.vendor-container{background-image:url(/assets/img/products/c/login-form-background-img.png);background-position:right;background-repeat:no-repeat;background-size:60vw 100%}.vendor-container h3{letter-spacing:.03px;line-height:27px}.vendor-container .product-features li{margin:0 0 15px!important}}@media screen and (max-width: 575px){.vendor-container .logo-div{margin:0 auto 30px;text-align:center;width:300px}.vendor-container .logo-div img{margin-top:0!important;padding-right:0!important}}@media (min-width: 768px) and (max-width: 768px){.logo-div img{flex:0 0 33.3333%;max-width:33.3333%}}@media (min-width: 769px) and (max-width: 820px){.register-outer{flex:0 0 50%;max-width:50%}}@media (min-width: 1200px) and (max-width: 1280px){.register-outer{flex:0 0 66.6667%;max-width:66.6667%}}pw-cloudolive-signup-tabs-a{width:100%}.register-right-wrapper{width:100%}.register-outer.fixed{position:static}@media (min-width: 1600px){.register-right-wrapper{display:flex;justify-content:flex-end;width:100%}.register-right{right:auto}.register-container{max-width:85%}.register-container .form-container{background:none;position:static;right:auto}}@media (min-width: 1800px){.register-container{max-width:73%}}@media (min-width: 2560px){.register-container{max-width:65%}}.wrapper-register-content{margin-top:50px;padding:0!important}.wrapper-register-content .register-outer{margin:0 auto!important;padding:0 20px!important}.cloudolive-header h1,.blinking-text-wrapper h1{color:#45d292}.cloudolive-header h3,.blinking-text-wrapper h3,.cloudolive-header .txt-rotate,.blinking-text-wrapper .txt-rotate{color:var(--text)}.cloudolive-header .blinking-cursor,.blinking-text-wrapper .blinking-cursor{animation:1s blink step-end infinite;font-size:40px;font-weight:100}.tech-features-wrapper .container{padding-left:20px!important;padding-right:20px!important}.tech-features-wrapper section{padding:70px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:100px 0}@media (max-width: 768px){.tech-features-wrapper section{padding:40px 0}.tech-features-wrapper section.blinking-text-wrapper{padding:50px 0}}.testimonial-bg{background:#fff url(/assets/img/landing-page/testimonial-bg.png) fixed center top;background-size:100%}\n"], dependencies: [{ kind: "component", type: i2$4.ProductLoginComponent, selector: "pw-login", inputs: ["gaEventObj", "googleCode"] }, { kind: "component", type: i2$4.ContactUsComponent, selector: "pw-contact-us", inputs: ["productKey", "subject", "masterProductId", "gaEventObj"] }] }); }
|
|
6410
6425
|
}
|
|
6411
6426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmSignupComponent, decorators: [{
|
|
6412
6427
|
type: Component,
|