@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,292 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <h2>Accounts</h2>
+    <a class="btn btn-sm btn-outline-primary float-end" data-cy="add-contact"
+      [routerLink]="['/' + subscription?.slug + routers.addAccount]">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'Crm.AccountMessage.AddAccount' | 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.accounts" [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="row m-0">
+        <div class="col-sm-4">
+          <p-multiSelect placeholder="Select Industry" [options]="searchOptions" [(ngModel)]="filterByIndustries"
+            (onChange)="onSearchOptionChange($event, 'industry')" [filter]="false" [showHeader]="true"
+            [showToggleAll]="true" appendTo="body">
+          </p-multiSelect>
+        </div>
+        <div class="col-sm-4">
+          <p-multiSelect placeholder="Select Size" [options]="organizationSizes" [(ngModel)]="filterBySizeId"
+            (onChange)="onSearchOptionChange($event, 'size')" [filter]="false" [showHeader]="true"
+            [showToggleAll]="true" appendTo="body">
+          </p-multiSelect>
+        </div>
+        <div class="col-sm-4">
+          <p-multiSelect placeholder="Select Status" [options]="status" [(ngModel)]="filterByStatus"
+            (onChange)="onSearchOptionChange($event, 'status')" [filter]="false" [showHeader]="true"
+            [showToggleAll]="true" appendTo="body">
+          </p-multiSelect>
+        </div>
+        <div class="col-sm-4">
+          <p-multiSelect placeholder="Select Priority" [options]="priority" [(ngModel)]="filterByPriority"
+            (onChange)="onSearchOptionChange($event, 'priority')" [filter]="false" [showHeader]="true"
+            [showToggleAll]="true" appendTo="body">
+          </p-multiSelect>
+        </div>
+        <div class="col-sm-4">
+          <p-multiSelect placeholder="Select Source" [options]="source" [(ngModel)]="filterBySource"
+            (onChange)="onSearchOptionChange($event, 'source')" [filter]="false" [showHeader]="true"
+            [showToggleAll]="true" appendTo="body">
+          </p-multiSelect>
+        </div>
+        <div class="col-sm-4 mb-2">
+          <input ngx-gp-autocomplete class="form-control location" #places="ngx-places" [(ngModel)]="searchLocationText"
+            placeholder="Search location..." (keyup)="locationSearch($event)"
+            (onAddressChange)="handleAddressChange($event)" />
+        </div>
+      </div>
+      <div class="search-filter">
+        <a class="mt-3 ms-3 text-start btn-filter-primary" (click)="clearFilters()">Clear all filters</a>
+        <div class="text-end mt-0 mt-sm-3">
+          <i class="fa fa-search mt-2 me-2" aria-hidden="true"></i>
+          <input type="text" [(ngModel)]="searchText" pInputText size="50" placeholder="Search accounts..."
+            (input)="dt.filterGlobal($event.target.value, 'contains')" class="mw-90" />
+        </div>
+      </div>
+    </ng-template>
+    <ng-template pTemplate="header">
+      <tr>
+        <th scope="true" pSortableColumn="name"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field="name">
+          </p-sortIcon>
+        </th>
+        <th scope="true" pSortableColumn="location"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon
+            field="location"></p-sortIcon>
+        </th>
+        <th scope="true" pSortableColumn="owner_id"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon
+            field="owner_id"></p-sortIcon>
+        </th>
+        <th scope="true" pSortableColumn="organization_size_id"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon
+            field="organization_size_id"></p-sortIcon>
+        </th>
+        <th scope="true" pSortableColumn="expected_mrr" class="mrr-header"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field="expected_mrr">
+        </p-sortIcon>
+        </th>
+        <th scope="true" pSortableColumn="signed_up_at"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field="signed_up_at">
+        </p-sortIcon>
+        </th>
+        <th scope="true" pSortableColumn="sessions_last_quarter"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field="sessions_last_quarter">
+        </p-sortIcon>
+        </th>
+        <th scope="true" pSortableColumn="sessions_last_month"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field="sessions_last_month">
+        </p-sortIcon>
+        <th scope="true" pSortableColumn="sessions_last_month"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field="sessions_staus">
+        </p-sortIcon>
+        <th scope="true" pSortableColumn="sessions_last_month"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field="sessions_priority">
+        </p-sortIcon>
+        </th>
+        <th scope="true">{{ 'Label.Actions' | transloco }}</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-account>
+      <tr>
+        <td data-head="Name" class="name-column">
+          <a [routerLink]="['/' + subscription?.slug + routers.accountInfo, account.id]" class="name-link">
+            <img alt="company image" [src]="getAccountLogo(account.company_url)" class="img-fluid company-logo me-2"
+                 onerror="this.onerror=null;this.src='assets/img/icons/company.png';" />
+            <span [ngbTooltip]="account.name" class="account-name" [title]="account.name">{{ account.name | textTruncate:30 }}</span>
+            <i [ngClass]="getUserAccountInfo(account).iconClass" [ngbTooltip]="getUserAccountInfo(account).message"
+               class="info-icon"></i>
+          </a>
+        </td>
+        <td data-head="Location" class="no-wrap"><span [ngbTooltip]="account.location">{{ getCountryFromLocation(account.location) }}</span></td>
+        <td data-head="Owner">
+          <a [routerLink]="['/members', account?.owner?.slug]"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>
+        </td>
+        <td data-head="Size" class="no-wrap">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}
+</td>
+<td data-head="MRR" class="no-wrap fw-bold expected-mrr">
+  {{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}
+</td>
+        <td data-head="Signed Up">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>
+        <td data-head="Quarter">{{ account.sessions_last_quarter }}</td>
+        <td data-head="Month">{{ account.sessions_last_month }}</td>
+        <td data-head="Status">
+          <span *ngIf="account.status === 'Prospect'" class="badge bg-primary">{{account.status}}</span>
+          <span *ngIf="account.status === 'Trial - Active'" class="badge bg-success">{{account.status}}</span>
+          <span *ngIf="account.status === 'Trial - Inactive'" class="badge bg-secondary">{{account.status}}</span>
+          <span *ngIf="account.status === 'Customer - New'" class="badge bg-info">{{account.status}}</span>
+          <span *ngIf="account.status === 'Customer - Active'" class="badge bg-success">{{account.status}}</span>
+          <span *ngIf="account.status === 'Customer - Inactive'" class="badge bg-warning">{{account.status}}</span>
+          <span *ngIf="account.status === 'Customer - Old'" class="badge bg-dark">{{account.status}}</span>
+          <span *ngIf="account.status === 'Dead'" class="badge bg-danger">{{account.status}}</span>
+          <span *ngIf="account.status === 'Competitor'" class="badge bg-danger">{{account.status}}</span>
+          <span *ngIf="account.status === 'Vendor'" class="badge bg-blue-grey">{{account.status}}</span>
+          <span *ngIf="account.status === 'Supplier'" class="badge bg-blue-grey">{{account.status}}</span>
+          <span *ngIf="account.status === 'Other'" class="badge bg-teal">{{account.status}}</span>
+        </td>
+
+        <td data-head="Priority">
+          <span *ngIf="account.priority === 'A - Ideal Fit'" class="badge bg-success">{{account.priority}}</span>
+          <span *ngIf="account.priority === 'B - High Potential'" class="badge bg-primary">{{account.priority}}</span>
+          <span *ngIf="account.priority === 'C - Low Potential'" class="badge bg-warning">{{account.priority}}</span>
+          <span *ngIf="account.priority === 'D - Out of market'" class="badge bg-secondary">{{account.priority}}</span>
+        </td>
+
+        <td data-head="Action">
+          <ul class="list-unstyled list-inline icon-ul">
+            <li ngbTooltip="See contacts" class="me-2 me-sm-3 see-icon"
+              [routerLink]="['/' + subscription?.slug + routers.contacts, account.id]">
+              <i class="fa fa-eye" aria-hidden="true"></i>
+            </li>
+            <ng-container *ngIf="hasAccess || account.owner_id === userId">
+              <li ngbTooltip="Edit" class="me-2 me-sm-3" [routerLink]="[
+                                    '/' + subscription?.slug + routers.accounts,
+                                    account.id
+                                ]">
+                <i class="fa fa-edit edit-icon" aria-hidden="true"></i>
+              </li>
+              <li ngbTooltip="Delete" class="me-2 me-sm-3">
+                <i class="fa fa-trash delete-icon" (click)="onDelete(account.id, subscription.id)"
+                  aria-hidden="true"></i>
+              </li>
+            </ng-container>
+          </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.AccountMessage.NoAccountMessage' | 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="accountInsight?.length">
+        <p-table class="table" #dt [value]="accountInsight" [paginator]="accountInsight?.length !== 0" [rows]="PAGE_SIZE"
+          [totalRecords]="accountInsight.length" [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.AccountMessage.Title' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.Value' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.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="accountInsight?.length !== 0">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>
+      </div>
+      <div *ngIf="accountInsight?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.AccountMessage.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]="accountGeography">
+          <plotly-plot [data]="accountGeography?.data" [layout]="accountGeography?.layout">
+          </plotly-plot>
+        </ng-template>
+      </div>
+      <div *ngIf="!accountGeography">
+        <pw-no-data [withImage]="true" [message]="'Crm.AccountMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+    <!-- Last Activities -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Last Activities</h5>
+      <div class="primeng-datatable-container table-responsive" *ngIf="accountActivities?.length">
+        <p-table class="table" #dt [value]="accountActivities" [paginator]="accountInsight?.length !== 0" [rows]="PAGE_SIZE"
+          [totalRecords]="accountActivities.length" [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.Account' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.Action' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.When' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body" let-activities>
+            <tr>
+              <td data-head="Owner"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>
+              <td data-head="Account">{{ activities.crm_account?.name }}</td>
+              <td data-head="Contact"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}
+              </td>
+
+              <td data-head="Action">
+                <span [ngbTooltip]="activities.comment" [appDynamicBadge]="{
+                                  itemsArray: actionNames,
+                                  item: activities.crm_action?.name
+                              }"
+                  color="blue-grey"
+                  class="badge">{{ activities.crm_action?.name }}</span>
+              </td>
+              <td data-head="When">{{ activities.when | date:'dd-MMM-YYYY' }}</td>
+            </tr>
+          </ng-template>
+        </p-table>
+      <span class="total-records-count" *ngIf="accountInsight?.length !== 0">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>
+      </div>
+      <div *ngIf="accountActivities?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.AccountMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+    <!-- Last Invoices -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Last Invoices</h5>
+      <div class="primeng-datatable-container table-responsive" *ngIf="accountLastInvoices?.length">
+        <p-table class="table" #dt [value]="accountLastInvoices" [paginator]="accountLastInvoices?.length !== 0" [rows]="PAGE_SIZE"
+          [totalRecords]="accountLastInvoices.length" [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.Account' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>
+              <th scope="true">{{ 'Crm.AccountMessage.File' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body" let-invoice>
+            <tr>
+              <td data-head="Owner"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>
+              <td data-head="Organization"> {{ invoice.subscription?.organization }} </td>
+              <td data-head="Contact">{{ invoice.subscription?.contact_name }}</td>
+              <td data-head="File">
+                <a target="blank" href="{{ invoice.file }}">{{ invoice.file.split('/')[invoice.file.split('/').length -
+                  1] }}</a>
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="accountLastInvoices?.length !== 0">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>
+      </div>
+      <div *ngIf="accountLastInvoices?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.AccountMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+  </div>
+</ng-container>

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

@@ -0,0 +1,63 @@
+@import 'variables';
+
+.location {
+    background-color: rgb(255 255 255);
+}
+
+.company-logo {
+    height: 20px;
+    width: 20px;
+}
+
+::ng-deep {
+    .ui-multiselect {
+        display: inline-block;
+    }
+
+    body .ui-multiselect .ui-multiselect-label {
+        font-weight: bold;
+    }
+}
+
+.name-column {
+    text-align: left;
+}
+
+.account-name {
+    margin-right: 5px;
+}
+
+.info-icon {
+    vertical-align: middle;
+    margin-left: 5px;
+}
+.account-link-icon {
+    color: grey;
+}
+.money-icon {
+    color: green;
+    font-size: 0.85em;
+    background-color: lightgreen;
+    border-radius: 50%;
+    padding: 5px;
+    width: 18.5px;
+    box-shadow: 0 0 10px rgba(0, 128, 0, 0.5);
+}
+.icon-ul {
+    width: 111px;
+}
+
+.no-wrap {
+    word-break: keep-all;
+    white-space: pre-line;
+}
+
+.expected-mrr,
+.mrr-header {
+    filter: saturate(0.5);
+}
+
+/* Specific styles for .expected-mrr */
+.expected-mrr {
+    background-color: #d8e8f1 !important;
+}

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

@@ -0,0 +1,145 @@
+import { TestBed } from '@angular/core/testing';
+import {
+    CommonService,
+    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 { SmartCrmCompaniesComponent } from './smart-crm-accounts.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmCompaniesComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmCompaniesComponent,
+        imports: [SharedModule, CommonServicesModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                },
+                isGranted: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllAccounts: () =>
+                    of({
+                        accounts: [
+                            {
+                                id: 7,
+                                name: 'test',
+                                subscription_id: 31,
+                                location: 'Hyderabad, Telangana, India',
+                                tel: '',
+                                country: 'IN',
+                                owner_id: 25,
+                                company_url: '',
+                                status: '{}',
+                                priority: 'A - Ideal Fit',
+                                owner: {
+                                    id: 25,
+                                    first_name: 'saurabh',
+                                    last_name: null
+                                }
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                deleteAccount: () => of({}),
+                getCrmAnalytics: () => of({}),
+                getCrmAccountDefaultValues: () =>
+                    of({
+                        status: ['Prospect'],
+                        priority: ['A - Ideal Fit'],
+                        source: [{ id: 6, name: 'test', is_default: true, subscription_id: 31 }]
+                    })
+            }),
+            MockProvider(CommonService, {
+                getOrganizationSizes: () =>
+                    of({
+                        organization_sizes: [
+                            {
+                                id: 1,
+                                name: 'Less than 20'
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getOrganizationIndustries: () =>
+                    of({
+                        organization_industries: [
+                            {
+                                id: 1,
+                                name: 'Community Services'
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    })
+            }),
+            {
+                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();
+        expect(spectator.query('h2')).toContainText('Accounts');
+    });
+
+    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, 'deleteAccount').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', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'getAllAccounts').and.callThrough();
+        spectator.component.onSearchOptionChange({ value: [1] }, 'industry');
+        spectator.component.onSearchOptionChange({ value: [1] }, 'size');
+        spectator.component.onSearchOptionChange({ value: [1] }, 'status');
+        spectator.component.onSearchOptionChange({ value: [1] }, 'priority');
+        spectator.component.onSearchOptionChange({ value: [1] }, 'source');
+        spectator.component.locationSearch({ target: { value: 'test' } });
+        spectator.component.handleAddressChange({ formatted_address: 'test' });
+        expect(spy).toHaveBeenCalledTimes(6);
+        spectator.component.clearFilters();
+    });
+});