@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,344 @@
+import {
+    AfterViewChecked,
+    ChangeDetectorRef,
+    Component,
+    Injector,
+    OnDestroy,
+    OnInit
+} from '@angular/core';
+import { NavigationEnd } from '@angular/router';
+import { ROUTERS } from '../../../shared/routers/routers';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { LazyLoadEvent } from 'primeng/api';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { PAGE_SIZE, Paging, Plotly, User, Subscription } from '@posiwise/common-utilities';
+import { CrmContactResponse } from '../../../shared/interface/crm-contact.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { HelperService } from '@posiwise/helper-service';
+import { OpportunityInsight } from '../../../shared/interface/smart-crm-module.interface';
+import { CrmAccount } from '../../../shared/interface/crm-account.interface';
+
+@Component({
+    selector: 'pw-crm-contacts',
+    templateUrl: './smart-crm-contacts.component.html',
+    styleUrls: ['./smart-crm-contacts.component.scss']
+})
+export class SmartCrmContactComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    data: CrmContactResponse = {
+        contacts: [],
+        object_count: 0,
+        unfiltered_count: 0
+    };
+
+    searchText = '';
+
+    loading = true;
+
+    contactId: number;
+
+    accountData: CrmAccount;
+
+    accountId: number;
+
+    subscriptionId: number;
+
+    hasAccess = false;
+
+    userId: number;
+
+    isLoaded = false;
+
+    filterByPotentials: string;
+
+    potential = [];
+
+    labels = [];
+
+    filterByStatus: string;
+
+    user: User;
+
+    contactInsight: OpportunityInsight[];
+
+    contactGeography: Plotly.Figure;
+
+    private page = 1;
+
+    subscription: Subscription;
+
+    routers = ROUTERS;
+
+    selectedLabels = [];
+    selectedAccount = [];
+    accountDropDown = [];
+    crmAccountIds: string;
+    constructor(
+        private crmService: CrmService,
+        injector: Injector,
+        private cdr: ChangeDetectorRef
+    ) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.route.params.subscribe(data => {
+            this.contactId = Number(data['accountId']);
+        });
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.getDefaultValues(this.subscription?.id);
+                this.getTableState();
+                this.hasAccess = this.hasAdminAccess(this.subscription?.id);
+                this.getUserInfo();
+                this.getAccountsDropdown();
+            }
+        });
+    }
+
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+    /**get accounts dropdown */
+    public getAccountsDropdown() {
+        this.crmService.getAllAccounts(this.subscription?.id).subscribe({
+            next: res => {
+                this.accountDropDown = res?.accounts.map(x => {
+                    return {
+                        id: x?.id,
+                        name: x?.name
+                    };
+                });
+            }
+        });
+    }
+    /**select option from account dropdown */
+    onSelectAccount() {
+        this.crmAccountIds = this.selectedAccount.map(y => y.id).join();
+        this.getAllContacts({
+            page: this.page,
+            page_size: PAGE_SIZE
+        });
+    }
+    private getTableState() {
+        this.searchText =
+            JSON.parse(this.localStorage.getItem('smart-crm-contacts'))?.filters?.global.value ||
+            '';
+        const data = JSON.parse(this.localStorage.getItem('crmContactsState'));
+        this.filterByStatus = data?.label;
+        this.filterByPotentials = data?.potential;
+        this.selectedLabels = data?.label ? data?.label.split(',') : [];
+    }
+
+    onLazyLoad(event: LazyLoadEvent) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getData({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+    }
+
+    private getData(paging: Paging) {
+        if (this.contactId > 0) {
+            this.getAccountContacts(paging);
+            this.getAccountDetail();
+        } else {
+            this.getAllContacts(paging);
+        }
+    }
+
+    /** Function to get user details */
+    private getUserInfo() {
+        this.userStore().subscribe(user => {
+            if (user) {
+                this.user = user;
+                this.userId = user.id;
+                if (this.permissionService.isGranted('Pages.Beta')) {
+                    this.getContactInsight();
+                    this.getContactGeography();
+                }
+            }
+        });
+    }
+
+    /** Function to get all contacts */
+    private getAllContacts(paging: Paging) {
+        this.getUserSubscriptionId().subscribe(id => {
+            this.subscriptionId = id;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAllContacts(
+                        this.subscriptionId,
+                        this.filterByPotentials || '',
+                        paging,
+                        this.filterByStatus || '',
+                        this.crmAccountIds || ''
+                    )
+                    .subscribe(response => {
+                        this.data = response;
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    /** Function to get the contacts related to accounts */
+    private getAccountContacts(paging: Paging) {
+        this.data.contacts = [];
+        this.isLoaded = true;
+        this.getUserSubscriptionId().subscribe(id => {
+            this.subscriptionId = id;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAccountContacts(
+                        this.contactId,
+                        this.subscriptionId,
+                        this.filterByPotentials || '',
+                        paging,
+                        this.filterByStatus || ''
+                    )
+                    .subscribe(response => {
+                        this.data = response;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    /** Function to get the account name */
+    private getAccountDetail() {
+        this.crmService
+            .getAccountDetail(this.subscription?.id, this.contactId)
+            .subscribe(response => {
+                this.accountData = response;
+                this.accountId = response.id;
+            });
+    }
+
+    /** Function to delete contact */
+    onDelete(id: number) {
+        HelperService.raiseDeletePopup().then(resp => {
+            if (resp.value) {
+                this.crmService.deleteContact(this.subscription?.id, id).subscribe(() => {
+                    this.toast.success(
+                        this.translation.translate('Crm.ContactMessage.DeletedMessage')
+                    );
+                    this.data.contacts = [];
+                    this.getAllContacts({
+                        page: this.page,
+                        page_size: PAGE_SIZE,
+                        search: this.searchText
+                    });
+                });
+            }
+        });
+    }
+
+    /** Function to filter by potential */
+    filterByPotential(event) {
+        this.filterByPotentials = event.target.value;
+        this.localStorage.setItem$(
+            'crmContactsState',
+            JSON.stringify({ label: this.filterByStatus, potential: this.filterByPotentials })
+        );
+        if (this.contactId > 0) {
+            this.getAccountContacts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+            this.getAccountDetail();
+        } else {
+            this.getAllContacts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+    }
+
+    /** Function to call contact insight */
+    private getContactInsight() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'contacts_insights')
+            .subscribe(response => {
+                if (typeof response === 'object' && Object.keys(response).length === 0) {
+                    this.contactInsight = [];
+                } else this.contactInsight = response;
+            });
+    }
+
+    /** Function to call contact geography */
+    getContactGeography() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'contacts_geography')
+            .subscribe(response => {
+                this.contactGeography = response;
+            });
+    }
+
+    navigateToOpportunities() {
+        this.router.navigate([`/${this.subscription?.slug}${this.routers.opportunityAdd}`], {
+            queryParams: { account_id: this.accountId }
+        });
+    }
+
+    getDefaultValues(id: number) {
+        this.crmService.getCrmContactDefaultValues(id).subscribe(res => {
+            this.potential = res['potential'];
+            const label = res['labels'];
+            label.forEach(val => {
+                const data = {
+                    label: val,
+                    value: val
+                };
+                this.labels.push(data);
+            });
+            this.getTableState();
+        });
+    }
+
+    onLabelChange(event) {
+        this.filterByStatus = event.value.join();
+        this.localStorage.setItem$(
+            'crmContactsState',
+            JSON.stringify({ label: this.filterByStatus, potential: this.filterByPotentials })
+        );
+        if (this.contactId > 0) {
+            this.getAccountContacts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+            this.getAccountDetail();
+        } else {
+            this.getAllContacts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+    }
+
+    override ngOnDestroy() {
+        const notifier = new Subject();
+        this.router.events.pipe(takeUntil(notifier)).subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                if (!event.urlAfterRedirects.includes('/contacts')) {
+                    this.localStorage.removeItem$('smart-crm-contacts');
+                    this.localStorage.removeItem$('crmContactsState');
+                    notifier.complete();
+                }
+            }
+        });
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1 @@
+<pw-coming-soon message="Customer Success"></pw-coming-soon>

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

@@ -0,0 +1,18 @@
+import { CommonServicesModule } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { TestHelper } from '@posiwise/test-helpers';
+import { SmartCrmPrivateModule } from '../../../smart-crm-private.module';
+import { SmartCrmCustomerSuccessComponent } from './smart-crm-customer-success.component';
+
+describe('SmartCrmCustomerSuccessComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmCustomerSuccessComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule]
+    });
+
+    it('should create', async () => {
+        const spectator = await createComponent();
+
+        expect(spectator.component).toBeTruthy();
+    });
+});

package/src/lib/private/components/smart-crm-customer/smart-crm-customer-success/smart-crm-customer-success.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'pw-smart-crm-customer-success',
+    templateUrl: './smart-crm-customer-success.component.html'
+})
+export class SmartCrmCustomerSuccessComponent {}

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

@@ -0,0 +1,27 @@
+<div class="row">
+  <div class="col-12 mb-0">
+    <h2>Insight</h2>
+    <p>
+      You'll find below some insights for your CRM. <br />
+      Please note that the graphs are refreshed every few hours.
+    </p>
+    <ul ngbNav
+      #nav="ngbNav"
+      class="nav-tabs">
+      <li [ngbNavItem]="1">
+        <a ngbNavLink>Overview</a>
+        <ng-template ngbNavContent>
+          <pw-smart-crm-overview></pw-smart-crm-overview>
+        </ng-template>
+      </li>
+      <li [ngbNavItem]="2">
+        <a ngbNavLink>Analysis</a>
+        <ng-template ngbNavContent>
+          <pw-coming-soon message="Analysis"></pw-coming-soon>
+        </ng-template>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="nav"></div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonServicesModule } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { TestHelper } from '@posiwise/test-helpers';
+import { SmartCrmInsightComponent } from './smart-crm-insight.component';
+import { SmartCrmPrivateModule } from '../../smart-crm-private.module';
+
+describe('SmartCrmInsightComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmInsightComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+    it('should create', async () => {
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'pw-smart-crm-insight',
+    templateUrl: './smart-crm-insight.component.html'
+})
+export class SmartCrmInsightComponent {}

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

@@ -0,0 +1,46 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <div *ngIf="hasAccess">
+      <div class="row">
+        <div class="w-100 text-center mt-3"
+          *ngIf="!isLoaded">
+          <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+        </div>
+        <!-- Activities          -->
+        <div class="col-12 col-lg-8 my-3 px-2">
+          <ng-template [ngIf]="graph">
+            <plotly-plot [data]="graph?.data"
+              [layout]="graph?.layout"></plotly-plot>
+          </ng-template>
+        </div>
+        <!-- Opportunities funnel    -->
+        <div class="col-12 col-lg-4 my-3 px-2"
+          *rbacAllow="'Pages.Beta'">
+          <ng-template [ngIf]="graph">
+            <plotly-plot [data]="graph?.data"
+              [layout]="graph?.layout"></plotly-plot>
+          </ng-template>
+        </div>
+        <div class="col-12 col-lg-4 my-3 px-2"
+          *rbacAllow="'Pages.Beta'">
+          <ng-template [ngIf]="graph">
+            <plotly-plot [data]="graph?.data"
+              [layout]="graph?.layout"></plotly-plot>
+          </ng-template>
+        </div>
+        <!-- Opportunities timeline          -->
+        <div class="col-12 col-lg-8 my-3 px-2"
+          *rbacAllow="'Pages.Beta'">
+          <ng-template [ngIf]="graph">
+            <plotly-plot [data]="graph?.data"
+              [layout]="graph?.layout"></plotly-plot>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="!hasAccess && isLoaded"
+      class="w-100">
+      <pw-no-data [withImage]="true" [message]="'Crm.Insight.NoDataMessage' | transloco"> </pw-no-data>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,50 @@
+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 { SmartCrmOverviewComponent } from './smart-crm-overview.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmOverviewComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmOverviewComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                },
+                isGranted: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getChartData: () => of({ data: [], layout: {} })
+            }),
+            {
+                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();
+    });
+});

package/src/lib/private/components/smart-crm-insight/smart-crm-overview/smart-crm-overview.component.ts

@@ -0,0 +1,60 @@
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { CrmService } from '@posiwise/smart-crm-shared';
+
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { Plotly } from '@posiwise/common-utilities';
+
+@Component({
+    selector: 'pw-smart-crm-overview',
+    templateUrl: './smart-crm-overview.component.html'
+})
+export class SmartCrmOverviewComponent extends AppBaseComponent implements OnInit, OnDestroy {
+    graph: Plotly.Figure;
+
+    subscriptionId: number;
+
+    hasAccess = false;
+
+    userId: number;
+
+    isLoaded = false;
+
+    constructor(
+        private crmService: CrmService,
+        injector: Injector
+    ) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.userStore().subscribe(user => {
+            if (user) {
+                if (this.permissionService.isGranted('Pages.Beta')) {
+                    this.getChartData();
+                }
+            }
+        });
+    }
+
+    /** Function to get the data for the graph */
+    private getChartData() {
+        this.getUserSubscriptionId().subscribe(subscriptionId => {
+            this.subscriptionId = subscriptionId;
+            if (this.subscriptionId) {
+                this.hasAccess = this.hasAdminAccess(this.subscriptionId);
+                this.crmService
+                    .getChartData(this.subscriptionId)
+                    .subscribe(response => {
+                        this.graph = response;
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                    });
+            }
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}