@posiwise/smart-crm 0.0.20 → 0.0.21

package/src/lib/private/components/smart-crm-leads/smart-crm-leads-details/smart-crm-leads-details.component.html

@@ -0,0 +1,142 @@
+<div class="me-auto col-xs-6">
+  <a href="javascript:void(0)" (click)="back()" class="previous"><i class="fa fa-arrow-alt-circle-left"
+      aria-hidden="true"></i></a>
+  <h3 class="m-subheader__title m-subheader__title--separator">
+    <span>{{ 'Crm.LeadCrmLeads.' | transloco }}: {{ isLoading ? '' : (data?.first_name || data?.last_name ? data?.first_name ||
+      data?.last_name : ('Label.AddNew' | transloco)) }}</span>
+  </h3>
+</div>
+<div class="w-100 text-center mt-3"
+  *ngIf="isLoading">
+  <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+  </div>
+<div class="p-2 mt-3"   *ngIf="!isLoading">
+  <form [formGroup]="form" (ngSubmit)="onSave()">
+    <div class="row">
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.FirstName' | transloco" name="first_name"
+          [errorMsg]="'Crm.ContactMessage.FirstNameErrorMessage' | transloco">
+          <input type="text" class="form-control" formControlName="first_name" id="first_name"
+            [ngClass]="{ 'is-invalid': submitted && f['first_name'].errors }" />
+        </pw-input-container>
+      </div>
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.LastName' | transloco" name="last_name"
+          [errorMsg]="'Crm.ContactMessage.LastNameErrorMessage' | transloco">
+          <input type="text" class="form-control" formControlName="last_name" id="last_name"
+            [ngClass]="{ 'is-invalid': submitted && f['last_name'].errors }" />
+        </pw-input-container>
+      </div>
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.Headline' | transloco" name="headline"
+          [errorMsg]="'Crm.ContactMessage.HeadlineErrorMessage' | transloco">
+          <input type="text" class="form-control" formControlName="headline" id="headline"
+            [ngClass]="{ 'is-invalid': submitted && f['headline'].errors }" />
+        </pw-input-container>
+      </div>
+      <div class="col-12 col-sm-4 col-lg-4">
+        <pw-input-container [label]="'Crm.ContactMessage.Tel' | transloco" name="tel"
+          [errorMsg]="'Crm.ContactMessage.TelErrorMessage' | transloco">
+          <input type="text" class="form-control" formControlName="tel" id="tel"
+            [ngClass]="{ 'is-invalid': submitted && f['tel'].errors }" />
+        </pw-input-container>
+      </div>
+      <div class="col-12 col-sm-4">
+        <div class="mb-3">
+          <label>{{ 'Crm.ContactMessage.Email' | transloco }} <span class="text-danger required-icon">*</span>
+            <span *ngIf="data && data.email_verified" class="text-success fw-bold">Verified</span>
+          </label>
+          <input type="text" class="form-control" formControlName="email"
+            [ngClass]="{ 'is-invalid': submitted && f['email'].errors }" />
+          <pw-field-error-display [displayError]="(submitted || f['email'].touched) && f['email'].errors" [errorMsg]="
+                            f['email']?.errors?.required
+                                ? 'Please enter email'
+                                : 'Please Enter valid email'
+                        ">
+          </pw-field-error-display>
+        </div>
+      </div>
+      <div class="col-12 col-sm-4">
+        <div class="mb-3">
+          <!-- <pw-input-container [label]="'Crm.ContactMessage.EmailVerfied' | transloco" class="nowrap"
+            <pw-input-containername="email_verified"> -->
+          <label class="info-circle mb-2">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span
+              class="tooltiptext gradient-custom-branding"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco
+              }} </span>
+          </label>
+          <pw-input-container class="nowrap" name="email_verified">
+            <ui-switch formControlName="email_verified" name="email_verified"
+              [ngClass]="{ 'is-invalid': submitted && f['email_verified'].errors }">
+            </ui-switch>
+          </pw-input-container>
+          <!-- </pw-input-container> -->
+        </div>
+      </div>
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.LinkedInUrl' | transloco" name="linkedin_url">
+          <input type="text" class="form-control" formControlName="linkedin_url" id="linkedin_url" />
+        </pw-input-container>
+      </div>
+      <div class="ui-fluid skills-modal col-sm-4">
+        <label class="info-circle mb-2">{{ 'Crm.ContactMessage.Account' | transloco }} <span
+            class="tooltiptext gradient-custom-branding">After assigning a company the contact will be visible in the
+            Contacts tabs</span></label>
+        <p-autoComplete [suggestions]="filteredAccounts" formControlName="crm_account_id" dataKey="id"
+          autocomplete="off" field="name" [dropdown]="true" (completeMethod)="search($event)" styleClass="w-100"
+          [inputStyle]="
+                        submitted && f['crm_account_id'].errors
+                            ? { border: '1px solid #ff586b' }
+                            : { border: '1px solid gray' }
+                    " placeholder="Search accounts" [multiple]="false">
+        </p-autoComplete>
+      </div>
+      <div class="col-12 col-sm-4">
+        <label class="info-circle mb-2">{{ 'Crm.CrmLeads.Source' | transloco }} <span class="text-danger required-icon">*</span><span
+            class="tooltiptext gradient-custom-branding">{{ 'Crm.CrmLeads.Tooltip.Source' | transloco }}</span>
+        </label>
+        <pw-input-container name="crm_source_id" errorMsg="source is required" *ngIf="source$ | async as source">
+          <select class="form-select" formControlName="crm_source_id"
+            [ngClass]="{ 'is-invalid': submitted && f['crm_source_id'].errors }">
+            <option *ngFor="let option of source['crm_sources']" [value]="option.id"> {{ option.name }} </option>
+          </select>
+        </pw-input-container>
+      </div>
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.DateOfBirth' | transloco" name="dob">
+          <div class="input-group">
+            <input class="form-control" placeholder="dd-mm-yyyy" formControlName="dob" ngbDatepicker
+              #d="ngbDatepicker" />
+            <div class="input-group-append">
+              <button class="btn btn-primary" (click)="d.toggle()" type="button">
+                <i class="fa fa-calendar" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+        </pw-input-container>
+      </div>
+      <div class="col-12 col-sm-4">
+        <label class="info-circle mb-2">{{ 'Crm.ContactMessage.Potential' | transloco }} <span
+            class="tooltiptext gradient-custom-branding"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco
+            }}</span>
+        </label>
+        <select formControlName="potential" class="form-control form-select"
+          [ngClass]="{ 'is-invalid': submitted && f['potential'].errors }">
+          <option *ngFor="let option of potentials" [value]="option">{{ option }}</option>
+        </select>
+      </div>
+      <div class="col-12 col-sm-4">
+        <label class="info-circle mb-2">{{ 'Crm.ContactMessage.Labels' | transloco }} <span
+            class="tooltiptext gradient-custom-branding"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}
+          </span>
+        </label>
+        <p-multiSelect [options]="labels" formControlName="labels" appendTo="body"></p-multiSelect>
+      </div>
+      <div class="col-12 text-end mt-3">
+        <button type="button" class="btn btn-outline-default me-2" (click)="back()"> {{ 'Button.Cancel' | transloco }}
+        </button>
+        <button type="submit" [buttonBusy]="buttonBusy" class="btn btn-primary" [disabled]="form.invalid"> {{ 'Button.Submit' | transloco }}
+        </button>
+      </div>
+    </div>
+  </form>
+</div>

package/src/lib/private/components/smart-crm-leads/smart-crm-leads-details/smart-crm-leads-details.component.spec.ts

@@ -0,0 +1,125 @@
+import { TestBed } from '@angular/core/testing';
+import { byText } from '@ngneat/spectator';
+import { CommonServicesModule, PermissionService, UserService } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { DEFAULT_USER, TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+import { SmartCrmPrivateModule } from '../../../smart-crm-private.module';
+import { SmartCrmLeadsDetailsComponent } from './smart-crm-leads-details.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmLeadsDetailsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmLeadsDetailsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getContactById: () =>
+                    of({
+                        id: 37,
+                        first_name: 'test1',
+                        last_name: 'test',
+                        email: 'test3@gmail.com',
+                        created_at: '2021-10-05T11:34:17.172+00:00',
+                        headline: 'test',
+                        linkedin_url: 'https://www.linkedin.com',
+                        crm_source_id: 6,
+                        subscription_id: 31,
+                        labels: ['vip'],
+                        email_verified: false,
+                        newsletter_subscribed: true
+                    }),
+                getAccountsBySubscription: () =>
+                    of({
+                        accounts: [
+                            {
+                                id: 6,
+                                name: 'test'
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getAllAccountSource: () =>
+                    of({
+                        crm_sources: [
+                            {
+                                id: 6,
+                                name: 'test',
+                                is_default: true,
+                                subscription_id: 31
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getCrmContactDefaultValues: () =>
+                    of({
+                        potential: [],
+                        labels: ['vip', 'legal advisor']
+                    }),
+                updateContact: () => of({}),
+                postCrmLead: () => of({})
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+
+    it('should add submit form ', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'postCrmLead').and.callThrough();
+        spectator.typeInElement('test', 'input[formControlName="first_name"]');
+        spectator.typeInElement('test@gmail.com', 'input[formControlName="email"]');
+        spectator.selectOption(
+            'select[formControlName="crm_source_id"]',
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            spectator.query(byText('test')) as HTMLOptionElement
+        );
+        spectator.click('button[type="submit"]');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should edit', async () => {
+        TestHelper.setActivatedRoute({
+            params: { Id: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'updateContact').and.callThrough();
+        spectator.typeInElement('test2', 'input[formControlName="first_name"]');
+        spectator.click('button[type="submit"]');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});

package/src/lib/private/components/smart-crm-leads/smart-crm-leads-details/smart-crm-leads-details.component.ts

@@ -0,0 +1,192 @@
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { AppSmartCrm } from '../../../../shared/models/smart-crm.model';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { Observable } from 'rxjs';
+
+import { CrmAccount } from '../../../../shared/interface/crm-account.interface';
+import { CrmLead } from '../../../../shared/interface/crm-lead.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { HelperService } from '@posiwise/helper-service';
+
+@Component({
+    selector: 'pw-smart-crm-leads-details',
+    templateUrl: './smart-crm-leads-details.component.html'
+})
+export class SmartCrmLeadsDetailsComponent extends AppBaseComponent implements OnInit, OnDestroy {
+    form: UntypedFormGroup;
+
+    data: CrmLead;
+
+    submitted = false;
+    buttonBusy = false;
+    isLoading = true;
+
+    id: number;
+
+    subscriptionId: number;
+
+    accounts: CrmAccount[];
+
+    filteredAccounts: string[] = [];
+
+    source$: Observable<string>;
+
+    potentials = [];
+
+    labels = [];
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService
+    ) {
+        super(injector);
+        this.form = AppSmartCrm.getLeadsForm();
+    }
+
+    ngOnInit(): void {
+        this.route.params.subscribe(data => {
+            if (!Number(data['Id'])) {
+                this.isLoading = false;
+            }
+            this.id = Number(data['Id']);
+        });
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            if (this.subscriptionId) {
+                this.getDefaultValues(this.subscriptionId);
+                this.form.get('subscription_id').setValue(this.subscriptionId);
+                this.getAccountsBySubscription();
+                this.source$ = this.crmService.getAllAccountSource(this.subscriptionId);
+            }
+        });
+    }
+
+    /** Function to get the specific contact details on edit form */
+    private getLeadDetails() {
+        this.crmService.getContactById(this.subscriptionId, this.id).subscribe(response => {
+            this.data = response;
+            let dobObject: NgbDateStruct;
+            if (response.dob) {
+                dobObject = {
+                    year: Number(response.dob.substring(0, 4)),
+                    month: Number(response.dob.substring(5, 7)),
+                    day: Number(response.dob.substring(8, 10))
+                };
+            }
+            this.isLoading = false;
+            this.form.patchValue(response);
+            this.form.patchValue({ dob: dobObject });
+            this.accounts.forEach(account => {
+                if (this.data.crm_account_id === account.id) {
+                    this.form.get('crm_account_id').patchValue(account);
+                }
+            });
+        });
+    }
+
+    /** Function to execute on form submission */
+    onSave() {
+        this.submitted = true;
+        if (this.form.valid) {
+            const { form } = this;
+            this.buttonBusy = true;
+            if (form.value.crm_account_id) {
+                form.get('crm_account_id').setValue(form.get('crm_account_id').value.id);
+                form.value.crm_account_id = Number(form.value.crm_account_id);
+            }
+            if (this.id) {
+                this.onUpdateLead();
+            } else {
+                this.onPostLead();
+            }
+        }
+    }
+
+    /** Function to get form controls */
+    get f() {
+        return this.form.controls;
+    }
+
+    /** Function to post the new lead */
+    private onPostLead() {
+        const data = { ...this.form.value };
+        data.dob = HelperService.dateFormat(this.form.get('dob').value);
+        data.is_manual = true;
+        this.crmService
+            .postCrmLead(this.subscriptionId, data)
+            .subscribe(() => {
+                this.toast.success(this.translation.translate('Crm.CrmLeads.AddedMessage'));
+                this.back();
+            })
+            .add(() => {
+                this.submitted = false;
+                this.buttonBusy = false;
+            });
+    }
+
+    /** Function to update the leads */
+    private onUpdateLead() {
+        const data = { ...this.form.value };
+        data.dob = HelperService.dateFormat(this.form.get('dob').value);
+        this.crmService
+            .updateContact(this.subscriptionId, this.id, data)
+            .subscribe(() => {
+                this.back();
+                this.toast.success(this.translation.translate('Crm.CrmLeads.UpdatedMessage'));
+            })
+            .add(() => {
+                this.buttonBusy = false;
+            });
+    }
+
+    /** Function to get the list of accounts by subscriptionId */
+    private getAccountsBySubscription() {
+        this.crmService
+            .getAccountsBySubscription(this.subscriptionId)
+            .subscribe(res => {
+                this.accounts = res.accounts;
+                if (this.id) {
+                    this.getLeadDetails();
+                }
+            })
+            .add(() => {
+                this.submitted = false;
+            });
+    }
+
+    /** search accounts */
+    search(event) {
+        let data = [];
+        if (event.query) {
+            data = this.accounts?.filter((x: CrmAccount) => {
+                return x.name.toLowerCase().includes(event.query.toLowerCase());
+            });
+        } else {
+            this.accounts?.forEach(element => {
+                data.push(element);
+            });
+        }
+
+        this.filteredAccounts = data;
+    }
+
+    getDefaultValues(id: number) {
+        this.crmService.getCrmContactDefaultValues(id).subscribe(res => {
+            this.potentials = res['potential'];
+            const label = res['labels'];
+            label.forEach(val => {
+                const data = {
+                    label: val,
+                    value: val
+                };
+                this.labels.push(data);
+            });
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

package/src/lib/private/components/smart-crm-leads/smart-crm-leads.component.html

@@ -0,0 +1,176 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <h2>Leads</h2>
+    <p>
+      In this section you'll find a list of prospects we found for you - based on your domain
+      of activity - and we think you should reach out to.
+    </p>
+    <a class="btn btn-sm btn-outline-primary float-end"
+      data-cy="add-leads"
+      [routerLink]="['/' + subscription?.slug + routers.leadsDetails + 'add']">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.CrmLeads.AddLead' | transloco }}
+    </a>
+  </div>
+</div>
+<div class="w-100 text-center mt-3"
+  *ngIf="!isLoaded">
+  <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+</div>
+
+<div class="primeng-datatable-container table-responsive"
+  [class.hideTable]="data.unfiltered_count === 0">
+  <p-table #dt
+    [value]="data.crm_leads"
+    [paginator]="data.object_count !== 0"
+    [lazy]="true"
+    [rows]="PAGE_SIZE"
+    [totalRecords]="data.object_count"
+    [loading]="loading"
+    filterDelay="1000"
+    (onLazyLoad)="onLazyLoad($event)"
+    [customSort]="true">
+    <ng-template pTemplate="caption">
+      <div class="d-flex">
+        <div class="col-sm-3">
+          <p-multiSelect placeholder="Select Source"
+            [options]="crmSources"
+            [filter]="false"
+            (onChange)="onSourceChange($event)"
+            [showHeader]="true"
+            [showToggleAll]="true"
+            appendTo="body">
+          </p-multiSelect>
+        </div>
+        <div class="text-end ms-auto">
+          <i class="fa fa-search mt-2 me-2" aria-hidden="true"></i>
+          <input type="text"
+            [(ngModel)]="searchText"
+            pInputText
+            size="50"
+            placeholder="Search leads..."
+            (input)="dt.filterGlobal($event.target.value, 'contains')"
+            class="mw-90" />
+        </div>
+      </div>
+    </ng-template>
+    <ng-template pTemplate="header">
+      <tr>
+        <th scope="true"
+          pSortableColumn="first_name">
+          {{ 'Crm.ContactMessage.Name' | transloco }}
+          <p-sortIcon field="first_name"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="email">
+          {{ 'Crm.CrmLeads.Email' | transloco }}
+          <p-sortIcon field="email"></p-sortIcon>
+        </th>
+        <th scope="true">
+          {{ 'Crm.CrmLeads.EmailVerified' | transloco }}
+        </th>
+        <th scope="true"
+          pSortableColumn="created_at">
+          {{ 'Crm.CrmLeads.CreatedAt' | transloco }}
+          <p-sortIcon field="created_at"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="crm_source_id">
+          {{ 'Crm.CrmLeads.Source' | transloco }}
+          <p-sortIcon field="crm_source_id"></p-sortIcon>
+        </th>
+        <th scope="true">{{ 'Label.Actions' | transloco }}</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body"
+      let-lead>
+      <tr>
+        <td data-head="Name"
+          class="contactname">
+          <a [routerLink]="['/' + subscription?.slug + routers.contactInfo, lead?.id]">
+            {{
+                            !lead?.first_name && !lead.last_name
+                                ? 'N/A'
+                                : ((lead?.first_name || '') + ' ' + (lead?.last_name || '') | textTruncate: 20)
+                        }}
+          </a>
+        </td>
+        <td data-head="Email">
+          <a href="mailto:{{ lead?.email }}">{{ lead?.email }}</a>
+          <span *ngIf="lead?.enquiry"
+            class="ms-2"
+            [pTooltip]="lead?.enquiry"
+            tooltipPosition="top">
+            <i class="fas fa-info-circle"></i>
+          </span>
+        </td>
+        <td data-head="Email Verified">
+          <span [appDynamicBadge]="{
+                            itemsArray: [true, false],
+                            item: lead?.email_verified
+                        }"
+            color="success-danger"
+            class="badge">{{ lead?.email_verified ? 'true' : 'false' }}</span>
+          <span class="ms-2 cursor-pointer"
+            [pTooltip]="'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco"
+            tooltipPosition="top"
+            *ngIf="!lead?.newsletter_subscribed"><i class="fas fa-exclamation-triangle text-danger"></i></span>
+        </td>
+        <td data-head="Created At">
+          {{ lead?.created_at | dateFormat }}
+        </td>
+        <td>
+          <span class="badge"
+            [appDynamicBadge]="{ itemsArray: allSource, item: lead?.crm_source?.name }"
+            color="default">{{ lead?.crm_source?.name }}</span>
+        </td>
+        <td data-head="Action">
+          <ul class="list-unstyled list-inline">
+            <li ngbTooltip="Show"
+              class="me-2 me-sm-3"
+              [routerLink]="[
+                                '/' + subscription?.slug + routers.contactInfo,
+                                lead?.id
+                            ]">
+              <i class="fa fa-eye see-icon" aria-hidden="true"></i>
+            </li>
+            <li *ngIf="
+                                hasAccess ||
+                                lead?.owner_id === userId ||
+                                lead?.crm_account?.owner_id === userId
+                            "
+              ngbTooltip="Edit"
+              class="me-2 me-sm-3"
+              [routerLink]="[
+                                '/' + subscription?.slug + routers.leadsDetails,
+                                lead?.id
+                            ]">
+              <i class="fa fa-edit edit-icon" aria-hidden="true"></i>
+            </li>
+            <li *ngIf="
+                                hasAccess ||
+                                lead?.owner_id === userId ||
+                                lead?.crm_account?.owner_id === userId
+                            "
+              ngbTooltip="Delete"
+              class="me-2 me-sm-3">
+              <i
+                                class="fa fa-trash delete-icon"
+                                (click)="onDelete(lead.id)"
+                                aria-hidden="true"
+                            ></i>
+            </li>
+          </ul>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+<div *ngIf="data.object_count === 0 && data.unfiltered_count !== 0">
+    <pw-no-data [withImage]="true" [message]="'Search.NoDataMessage'| transloco" [description]="'Search.NoDataDescription' | transloco" >
+    </pw-no-data>
+</div>
+  <span class="total-records-count" *ngIf="data.object_count !== 0">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>
+</div>
+<div *ngIf="data.unfiltered_count === 0 && isLoaded">
+  <pw-no-data [withImage]="true" [message]="'Crm.CrmLeads.NoCrmLeadMessage' | transloco"> </pw-no-data>
+</div>