@posiwise/smart-crm 0.0.19 → 0.0.21

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

@@ -0,0 +1,281 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <h2 *ngIf="!accountData?.name">Contacts</h2>
+    <h3 *ngIf="accountData?.name"
+      class="mb-2">
+      {{ accountData.name }}
+      <span [routerLink]="[routers.accounts, accountData.id]"><i class="fa fa-edit edit-icon" aria-hidden="true"></i></span>
+    </h3>
+    <h4 *ngIf="accountData?.location"
+      class="mb-1">Location: {{ accountData.location }}</h4>
+    <h4 *ngIf="accountData?.tel">Tel: {{ accountData.tel }}</h4>
+    <h4 *ngIf="accountData?.company_url">
+      URL:
+      <a href="{{ accountData.company_url }}"
+        target="_blank"
+        rel="noopener noreferrer">
+        {{ accountData.company_url }}
+      </a>
+    </h4>
+    <a class="btn btn-sm btn-outline-primary float-end mb-3 ms-2"
+      data-cy="add-opportunities"
+      (click)="navigateToOpportunities()">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}
+    </a>
+    <a class="btn btn-sm btn-outline-primary float-end"
+      data-cy="add-contact"
+      [routerLink]="['/' + subscription?.slug + routers.contactAdd, accountId]"
+      *ngIf="accountData?.name">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.ContactMessage.AddContact' | transloco }}
+    </a>
+    <a class="btn btn-sm btn-outline-primary float-end"
+      data-cy="add-contact"
+      [routerLink]="['/' + subscription?.slug + routers.contactAdd, accountId]"
+      *ngIf="!accountData?.name">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.ContactMessage.AddContact' | transloco }}
+    </a>
+    <a class="btn btn-sm btn-outline-primary me-3 float-end"
+      data-cy="list-contact"
+      [routerLink]="['/' + subscription?.slug + routers.contacts]"
+      *ngIf="accountData?.name">
+      <i class="fa fa-plus-list" aria-hidden="true"></i>
+      {{ 'Crm.ContactMessage.ShowAllContacts' | 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 class="table"
+    #dt
+    [value]="data.contacts"
+    [paginator]="data.object_count !== 0"
+    [rows]="PAGE_SIZE"
+    [totalRecords]="data.object_count"
+    [loading]="loading"
+    [lazy]="true"
+    [filterDelay]="1000"
+    stateStorage="local"
+    stateKey="smart-crm-contacts"
+    (onLazyLoad)="onLazyLoad($event)"
+    [customSort]="true">
+    <ng-template pTemplate="caption">
+      <div class="row">
+        <div class="col-sm-3 col-6 mb-2 mb-sm-0">
+            <select class="form-select" (change)="filterByPotential($event)">
+                <option value="">Select Priority</option>
+                <option *ngFor="let option of potential" [selected]="filterByPotentials === option" [value]="option">
+                    {{ option }}
+                </option>
+            </select>
+        </div>
+        <div class="col-sm-3 col-6">
+            <p-multiSelect [(ngModel)]="selectedLabels" placeholder="Select Label" [options]="labels" [filter]="false"
+                [showHeader]="true" [showToggleAll]="true" (onChange)="onLabelChange($event)" appendTo="body">
+            </p-multiSelect>
+        </div>
+        <!-- multiple select account drop down -->
+        <div class="col-sm-3 col-6">
+            <p-multiSelect [(ngModel)]="selectedAccount" placeholder="Select Account" [options]="accountDropDown" [filter]="false"
+                [showHeader]="true" [showToggleAll]="true" optionLabel="name" (onChange)="onSelectAccount()" appendTo="body">
+            </p-multiSelect>
+        </div>
+        <div class="col-sm-3 col-md-4 col-lg-3">
+         <div class="d-flex">
+          <i class="fa fa-search mt-2 me-2" aria-hidden="true"></i>
+          <input type="text" [(ngModel)]="searchText" pInputText placeholder="Search contact..."
+              (input)="dt.filterGlobal($event.target.value, 'contains')" class="form-control" />
+         </div>
+      </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="owner_id">
+          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}
+          <p-sortIcon field="owner_id"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="crm_account_id">
+          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}
+          <p-sortIcon field="crm_account_id"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="labels">
+          {{ 'Crm.ContactMessage.Labels' | transloco }}
+          <p-sortIcon field="labels"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="potential">
+          {{ 'Crm.ContactMessage.Potential' | transloco }}
+          <p-sortIcon field="potential"></p-sortIcon>
+        </th>
+        <th scope="true">{{ 'Label.Actions' | transloco }}</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body"
+      let-contact>
+      <tr>
+        <td data-head="Name"
+        class="contactname">
+          <a ngbTooltip="{{contact.headline ? contact.headline : 'No headline for this contact'}}"
+              [routerLink]="['/' + subscription?.slug + routers.contactInfo, contact.id]">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}
+          </a>
+        </td>
+        <td data-head="OwnerName">{{ contact.owner | ifNameNullShowEmail }}</td>
+        <td data-head="Account Name">
+          <a [routerLink]="[
+                            '/' + subscription?.slug + routers.accountInfo,
+                            contact.crm_account.id
+                        ]" ngbTooltip="{{contact?.crm_account.name}}">{{ contact?.crm_account.name | textTruncate: 20 }}</a>
+        </td>
+        <td data-head="Labels">
+          <span class="badge bg-info m-1"
+            *ngFor="let item of contact.labels">{{
+                        item
+                    }}</span>
+        </td>
+        <td data-head="Potential">
+          <span [appDynamicBadge]="{ itemsArray: potential, item: contact.potential }"
+            color="warning"
+            class="badge">{{ contact.potential }}</span>
+        </td>
+        <td data-head="Action">
+          <ul class="list-unstyled list-inline">
+            <li ngbTooltip="Show"
+              class="me-2 me-sm-3"
+              [routerLink]="[
+                                '/' + subscription?.slug + '/crm/contacts/info',
+                                contact.id
+                            ]">
+              <i class="fa fa-eye see-icon" aria-hidden="true"></i>
+            </li>
+            <li *ngIf="
+                                hasAccess ||
+                                contact.owner_id === userId ||
+                                contact.crm_account.owner_id === userId
+                            "
+              ngbTooltip="Add opportunity"
+              class="me-2 me-sm-3"
+              [routerLink]="['/' + subscription?.slug + routers.opportunityAdd]"
+              [queryParams]="{ contact_id: contact.id }">
+              <i class="fa fa-plus-circle add-icon" aria-hidden="true"></i>
+            </li>
+            <!-- <ng-container *ngIf="contact"> -->
+            <li *ngIf="
+                                hasAccess ||
+                                contact.owner_id === userId ||
+                                contact.crm_account.owner_id === userId
+                            "
+              ngbTooltip="Edit"
+              class="me-2 me-sm-3"
+              [routerLink]="[
+                                '/' + subscription?.slug + routers.contactDetails,
+                                contact.id
+                            ]">
+              <i class="fa fa-edit edit-icon" aria-hidden="true"></i>
+            </li>
+            <li *ngIf="
+                                hasAccess ||
+                                contact.owner_id === userId ||
+                                contact.crm_account.owner_id === userId
+                            "
+              ngbTooltip="Delete"
+              class="me-2 me-sm-3">
+              <i
+                                class="fa fa-trash delete-icon"
+                                (click)="onDelete(contact.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.ContactMessage.ContactsAdminMessage' | transloco"> </pw-no-data>
+</div>
+
+<ng-container *rbacAllow="'Pages.Beta'">
+  <div class="row mt-5"
+    *ngIf="data.unfiltered_count !== 0 && isLoaded">
+    <!-- Drill Down -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Drill Down</h5>
+      <div class="primeng-datatable-container table-responsive"
+        *ngIf="contactInsight?.length">
+        <p-table class="table"
+          #dt
+          [value]="contactInsight"
+          [paginator]="contactInsight?.length !== 0"
+          [rows]="PAGE_SIZE"
+
+          [totalRecords]="contactInsight.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.ContactMessage.Title' | transloco }}</th>
+              <th scope="true">{{ 'Crm.ContactMessage.Value' | transloco }}</th>
+              <th scope="true">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body"
+            let-insight>
+            <tr>
+              <td data-head="Title">
+                {{ insight.title }}
+              </td>
+              <td data-head="Value">
+                {{ insight.value }}
+              </td>
+              <td data-head="Reason">
+                {{ insight.reason }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="contactInsight?.length !== 0">Total: {{ contactInsight.length }}</span>
+      </div>
+      <div *ngIf="contactInsight?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.ContactMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+    <!-- Geography -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Geography</h5>
+      <div>
+        <ng-template [ngIf]="contactGeography">
+          <plotly-plot [data]="contactGeography?.data"
+            [layout]="contactGeography?.layout">
+          </plotly-plot>
+        </ng-template>
+      </div>
+      <div *ngIf="!contactGeography">
+        <pw-no-data [withImage]="true" [message]="'Crm.ContactMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+  </div>
+</ng-container>

package/src/lib/private/components/smart-crm-contacts/smart-crm-contacts.component.scss

@@ -0,0 +1,19 @@
+@import 'variables';
+
+.table {
+    tr {
+        vertical-align: baseline;
+    }
+}
+
+@media (min-width: 640px) {
+    .list-inline {
+        width: 150px;
+    }
+}
+
+@media (min-width: 640px) and (max-width: 768px) {
+    .primeng-datatable-container tr td {
+        width: 350px;
+    }
+}

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

@@ -0,0 +1,138 @@
+import { TestBed } from '@angular/core/testing';
+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 Swal from 'sweetalert2';
+import { SmartCrmPrivateModule } from '../../smart-crm-private.module';
+import { SmartCrmContactComponent } from './smart-crm-contacts.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+xdescribe('SmartCrmContactComponent', () => {
+    const data = {
+        contacts: [
+            {
+                id: 35,
+                first_name: 'test',
+                last_name: 'test',
+                email: 'test@gmail.com',
+                crm_account_id: 7,
+                created_at: '2021-10-04T10:23:01.501+00:00',
+                headline: 'test',
+                potential: 'medium',
+                crm_source_id: 6,
+                subscription_id: 31,
+                labels: ['vip'],
+                email_verified: false,
+                newsletter_subscribed: true,
+                owner: {
+                    first_name: 'not',
+                    last_name: 'available'
+                },
+                crm_account: {
+                    id: 7,
+                    name: 'test',
+                    owner_id: 25
+                }
+            }
+        ],
+        object_count: 1,
+        unfiltered_count: 1
+    };
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmContactComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                },
+                isGranted: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAccountContacts: () => of(data),
+                getAccountDetail: () => of({ id: 1 }),
+                getAllContacts: () => of(data),
+                deleteContact: () => of({}),
+                getCrmAnalytics: (_id, type) =>
+                    type === 'contacts_insights'
+                        ? of([{ title: 'Title', value: 'Value', reason: 'This is the reason' }])
+                        : of({ data: [], layout: {} }),
+                getCrmContactDefaultValues: () =>
+                    of({
+                        potential: ['low', 'medium', 'high'],
+                        labels: ['vip']
+                    })
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+    });
+
+    afterEach(() => {
+        localStorage.clear();
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+        expect(spectator.query('h2')).toContainText('Contacts');
+    });
+
+    it('should delete account ', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'deleteContact').and.callThrough();
+        spectator.click('tbody tr:first-child .fa-trash');
+        expect(Swal.isVisible()).toBeTruthy();
+        Swal.clickConfirm();
+        await TestHelper.stabilize(spectator);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should filter by potential', async () => {
+        TestHelper.setActivatedRoute({
+            params: { accountId: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        spectator.selectOption(spectator.query('select'), 'medium', { emitEvents: true });
+        expect(spectator.component.filterByPotentials).toEqual('medium');
+    });
+
+    it('should filter by label', async () => {
+        TestHelper.setActivatedRoute({
+            params: { accountId: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        spectator.click('p-multiSelect .p-multiselect-trigger');
+        spectator.click(
+            spectator.query('.p-multiselect-items-wrapper >:first-child >:nth-child(1) > li', {
+                root: true
+            })
+        );
+        expect(spectator.component.filterByStatus).toContain('vip');
+    });
+});