@posiwise/smart-crm 0.0.19 → 0.0.21

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

@@ -0,0 +1,292 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, Injector, OnDestroy, OnInit } from '@angular/core';
+import { ROUTERS } from '../../../../shared/routers/routers';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import uniqBy from 'lodash/uniqBy';
+import swal from 'sweetalert2';
+
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { Subscription } from '@posiwise/common-utilities';
+import { HelperService } from '@posiwise/helper-service';
+import moment from 'moment';
+
+@Component({
+    selector: 'pw-smart-crm-summary-actions',
+    templateUrl: './smart-crm-summary-actions.component.html',
+    styleUrls: ['./smart-crm-summary-actions.component.scss']
+})
+export class SmartCrmSummaryActionsComponent extends AppBaseComponent implements OnInit, OnDestroy {
+    contactActions = [];
+
+    isLoaded = false;
+
+    contactId: number;
+
+    p: number;
+
+    p1: number;
+
+    accountActionSuggested = [];
+
+    updating = false;
+
+    actionId: number;
+
+    dangerColor: boolean;
+
+    isLoadedSuggested = false;
+
+    userId: number;
+
+    showFullComment = false;
+
+    commentId: number;
+
+    allSubscriptionMembers: string[];
+
+    contactActionsAll = [];
+
+    showFilter = false;
+
+    subscription: Subscription;
+
+    selector = '.pending-actions-wrapper';
+
+    private totalPendingActions = 0;
+
+    currentPage = 1;
+
+    routers = ROUTERS;
+
+    constructor(
+        private crmService: CrmService,
+        injector: Injector,
+        @Inject(DOCUMENT) private document: Document
+    ) {
+        super(injector);
+    }
+
+    ngOnInit(): void {
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.getAccountActions();
+                this.getAccountActionSuggested(this.subscription?.id);
+            }
+        });
+        this.userStore().subscribe(res => {
+            if (res) {
+                this.userId = res.id;
+            }
+        });
+    }
+
+    onScrollPendingActions() {
+        this.currentPage++;
+        const totalPages = Math.ceil(this.totalPendingActions / 5);
+        // Prevent API call if all records have been fetched
+        if (this.currentPage <= totalPages) {
+            this.getAccountActions();
+        }
+    }
+
+    /** Function to get all actions */
+    private getAccountActions() {
+        this.crmService
+            .getAccountActions(this.subscription?.id, { page: this.currentPage, page_size: 5 })
+            .subscribe({
+                next: response => {
+                    if (response?.crm_account_actions?.length) {
+                        this.totalPendingActions = response?.object_count;
+                        this.contactActionsAll = [
+                            ...this.contactActionsAll,
+                            ...response.crm_account_actions
+                        ];
+                        // unique values
+                        this.contactActionsAll = [
+                            ...uniqBy(this.contactActionsAll.reverse(), 'id').reverse()
+                        ];
+                        this.contactActionsAll.forEach(data => {
+                            data.when_short_date = moment(data.when).format('DD-MMM-YYYY');
+                            const diff = moment(new Date(data.when)).diff(
+                                moment(new Date()),
+                                'days'
+                            );
+                            if (moment(new Date(data.when)) < moment(new Date())) {
+                                data['due'] = `Overdue by ${Math.abs(diff)} days`;
+                                data['color'] = this.dangerColor;
+                            } else {
+                                data['due'] = `In ${diff} days`;
+                                data['color'] = !this.dangerColor;
+                            }
+                        });
+                        this.contactActionsAll.sort((a, b) => {
+                            return new Date(a.when).getTime() - new Date(b.when).getTime();
+                        });
+                        this.contactActions = [...this.contactActionsAll];
+                        this.allSubscriptionMembers = [];
+                        const ownerObject = {};
+                        this.contactActionsAll.forEach(data => {
+                            const { id } = data.owner;
+                            ownerObject[id] = data.owner;
+                        });
+                        // eslint-disable-next-line no-restricted-syntax
+                        for (const i of Object.keys(ownerObject)) {
+                            this.allSubscriptionMembers.push(ownerObject[i]);
+                        }
+                        this.showFilter = false;
+                        if (this.allSubscriptionMembers.length > 1) {
+                            this.showFilter = true;
+                        }
+                    }
+                }
+            })
+            .add(() => {
+                this.isLoaded = true;
+            });
+    }
+
+    /** Function to get account action suggested */
+    private getAccountActionSuggested(subscription_id: number) {
+        this.crmService
+            .getAccountActionSuggested(subscription_id)
+            .subscribe(response => {
+                this.accountActionSuggested = response?.crm_account_actions || [];
+            })
+            .add(() => {
+                this.isLoadedSuggested = true;
+            });
+    }
+
+    editComment(event) {
+        const comments = this.document.getElementsByClassName('comment-section');
+        if (event !== undefined) {
+            if (event.target.closest('.comment-section').classList.contains('show-controls')) {
+                for (let i = 0; i < comments.length; i++) {
+                    comments[i].classList.remove('show-controls');
+                }
+            } else {
+                event.target.closest('.comment-section').classList.add('show-controls');
+            }
+        } else {
+            for (let i = 0; i < comments.length; i++) {
+                comments[i].classList.remove('show-controls');
+            }
+        }
+
+        // if(event.target.closest('.comment-section').classList.find())
+    }
+
+    updateComment(action) {
+        const commentObj = {
+            comment: action.comment,
+            completed: action.completed,
+            cancelled: action.cancelled
+        };
+        this.crmService
+            .updateAccountComment(this.subscription?.id, action.id, commentObj)
+            .subscribe(() => {
+                this.toast.success('comment updated successfully');
+                this.editComment(undefined);
+                this.getAccountActions();
+            });
+    }
+
+    /** Function to set the action as completed */
+    setAsCompleted(id: number, action, index: number) {
+        return swal
+            .fire({
+                title: 'Completed',
+                html: `Are you sure you want to set as Completed?`,
+                showCancelButton: true,
+                reverseButtons: true,
+                icon: 'warning'
+            })
+            .then(res => {
+                if (res.value) {
+                    const actionObj = {
+                        comment: action.comment,
+                        completed: true,
+                        cancelled: action.cancelled
+                    };
+                    this.crmService
+                        .updateAccountComment(this.subscription?.id, id, actionObj)
+                        .subscribe(() => {
+                            this.toast.success(
+                                this.translation.translate('Crm.Settings.UpdatedMessage')
+                            );
+                            this.contactActions.splice(index, 1);
+                        });
+                }
+            });
+    }
+
+    /** Function to set the action as cancelled */
+    setAsCancelled(id: number, action, index: number) {
+        return swal
+            .fire({
+                title: 'Cancel',
+                html: `Are you sure you want to set as cancelled?`,
+                showCancelButton: true,
+                reverseButtons: true,
+                icon: 'warning'
+            })
+            .then(res => {
+                if (res.value) {
+                    const actionObj = {
+                        comment: action.comment,
+                        completed: action.completed,
+                        cancelled: true
+                    };
+                    this.crmService
+                        .updateAccountComment(this.subscription?.id, id, actionObj)
+                        .subscribe(() => {
+                            this.toast.success(
+                                this.translation.translate('Crm.Settings.UpdatedMessage')
+                            );
+                            this.contactActions.splice(index, 1);
+                        });
+                }
+            });
+    }
+
+    /** Function to show DatePicker */
+    showDatePicker(actionId: number) {
+        this.updating = !this.updating;
+        this.actionId = actionId;
+    }
+
+    /** Function to update the date */
+    onDateSelect(event, action) {
+        const commentObj = {
+            when: HelperService.dateFormat(event),
+            comment: action.comment,
+            completed: action.completed,
+            cancelled: action.cancelled
+        };
+        this.crmService
+            .updateAccountComment(this.subscription?.id, action.id, commentObj)
+            .subscribe(() => {
+                this.toast.success('date updated successfully');
+                this.getAccountActions();
+                this.updating = false;
+            });
+    }
+
+    /** Function to filter the data by user */
+    filterByUser(event) {
+        const userId = event.target.value;
+        if (userId !== '0') {
+            const filteredData = this.contactActionsAll.filter(
+                action => action.owner_id === Number(userId)
+            );
+            this.contactActions = filteredData;
+        } else {
+            this.contactActions = this.contactActionsAll;
+        }
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1,309 @@
+<div class="row">
+  <ng-container class="mt-5"
+    *rbacAllow="'Pages.Beta'">
+    <!-- Signed up last 30 days -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Signed up Last 30 Days</h5>
+      <div class="w-100 text-center mt-3">
+        <ng-template [ngIf]="!signUpLastThirtyDaysLoaded">
+          <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+        </ng-template>
+      </div>
+      <div class="primeng-datatable-container table-responsive"
+        *ngIf="signedUpLastThirtyDays?.length">
+        <p-table class="table"
+          #dt
+          [value]="signedUpLastThirtyDays"
+          [paginator]="true"
+          [rows]="PAGE_SIZE"
+          [totalRecords]="signedUpLastThirtyDays.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.Summary.Owner' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactName' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body"
+            let-signUp>
+            <tr>
+              <td data-head="Owner">
+                {{ signUp.owner?.first_name }} {{ signUp.owner?.last_name }}
+              </td>
+              <td data-head="Contact Name">
+                {{ signUp.contact_name }}
+              </td>
+              <td data-head="Contact Email">
+                {{ signUp.contact_email }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="signedUpLastThirtyDays.length!== 0">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>
+      </div>
+      <div *ngIf="signedUpLastThirtyDays?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.Summary.NoInsightMessage' | transloco"> </pw-no-data>
+      </div>
+    </div>
+    <!-- Active Opportunities -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Active Opportunities</h5>
+      <div class="w-100 text-center mt-3">
+        <ng-template [ngIf]="!activeOpportunitiesLoaded">
+          <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+        </ng-template>
+      </div>
+      <div class="primeng-datatable-container table-responsive"
+        *ngIf="activeOpportunities?.length">
+        <p-table class="table"
+          #dt
+          [value]="activeOpportunities"
+          [paginator]="true"
+          [rows]="PAGE_SIZE"
+
+          [totalRecords]="activeOpportunities.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.Summary.Title' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactName' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.Account' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.WinChance' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.MonthlyAmount' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body"
+            let-opportunities>
+            <tr>
+              <td data-head="Title">
+                {{ opportunities.title }}
+              </td>
+              <td data-head="Contact Name">
+                {{ opportunities.crm_contact?.first_name }}
+                {{ opportunities.crm_contact?.last_name }}
+              </td>
+              <td data-head="Account">
+                {{ opportunities.crm_account?.name }}
+              </td>
+              <td data-head="One Time Amount">
+                {{ opportunities.one_time_amount / 100 | currency }}
+              </td>
+              <td data-head="Monthly Amount">
+                {{ opportunities.monthly_amount / 100 | currency }}
+              </td>
+              <td data-head="Win Chance">
+                {{ opportunities.win_chances | percent }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="activeOpportunities.length !== 0">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>
+      </div>
+      <div *ngIf="activeOpportunities?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.Summary.NoInsightMessage' | transloco"> </pw-no-data>
+      </div>
+    </div>
+    <!-- Accounts at risk -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Accounts at Risk</h5>
+      <div class="w-100 text-center mt-3">
+        <ng-template [ngIf]="!accountAtRiskDetailsLoaded">
+          <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+        </ng-template>
+      </div>
+      <div class="primeng-datatable-container table-responsive"
+        *ngIf="accountAtRisk?.length">
+        <p-table class="table"
+          #dt
+          [value]="accountAtRisk"
+          [paginator]="true"
+          [rows]="PAGE_SIZE"
+
+          [totalRecords]="accountAtRisk.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.Summary.Owner' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactName' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.Organisation' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body"
+            let-account>
+            <tr>
+              <td data-head="Owner">
+                {{ account.owner?.first_name }} {{ account.owner?.last_name }}
+              </td>
+              <td data-head="Contact Name">
+                {{ account.contact_name }}
+              </td>
+              <td data-head="Organisation">
+                {{ account.name }}
+              </td>
+              <td data-head="Contact Email">
+                {{ account.contact_email }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count"  *ngIf="accountAtRisk.length !== 0">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>
+      </div>
+      <div *ngIf="accountAtRisk?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.Summary.NoInsightMessage' | transloco"> </pw-no-data>
+      </div>
+    </div>
+    <!-- Contract renewal -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Contract Renewal</h5>
+      <div class="w-100 text-center mt-3">
+        <ng-template [ngIf]="!contactRenewalLoaded">
+          <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+        </ng-template>
+      </div>
+      <div class="primeng-datatable-container table-responsive"
+        *ngIf="ContractRenewal?.length">
+        <p-table class="table"
+          #dt
+          [value]="ContractRenewal"
+          [paginator]="true"
+          [rows]="PAGE_SIZE"
+
+          [totalRecords]="ContractRenewal.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.Summary.Owner' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactName' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.Organisation' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body"
+            let-account>
+            <tr>
+              <td data-head="Owner">
+                {{ account.owner?.first_name }} {{ account.owner?.last_name }}
+              </td>
+              <td data-head="Contact Name">
+                {{ account.contact_name }}
+              </td>
+              <td data-head="Organisation">
+                {{ account.name }}
+              </td>
+              <td data-head="Contact Email">
+                {{ account.contact_email }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="ContractRenewal.length !== 0">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>
+      </div>
+      <div *ngIf="ContractRenewal?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.Summary.NoInsightMessage' | transloco"> </pw-no-data>
+      </div>
+    </div>
+    <!-- Credit Card Expiring -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Credit Card Expiring</h5>
+      <div class="w-100 text-center mt-3">
+        <ng-template [ngIf]="!creditCardExpiringDetailsLoaded">
+          <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+        </ng-template>
+      </div>
+      <div class="primeng-datatable-container table-responsive"
+        *ngIf="creditCardExpiring?.length">
+        <p-table class="table"
+          #dt
+          [value]="creditCardExpiring"
+          [paginator]="true"
+          [rows]="PAGE_SIZE"
+
+          [totalRecords]="creditCardExpiring.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.Summary.Owner' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactName' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.Organisation' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body"
+            let-account>
+            <tr>
+              <td data-head="Owner">
+                {{ account.owner?.first_name }} {{ account.owner?.last_name }}
+              </td>
+              <td data-head="Contact Name">
+                {{ account.contact_name }}
+              </td>
+              <td data-head="Organisation">
+                {{ account.name }}
+              </td>
+              <td data-head="Contact Email">
+                {{ account.contact_email }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="creditCardExpiring.length !== 0">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>
+      </div>
+      <div *ngIf="creditCardExpiring?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.Summary.NoInsightMessage' | transloco"> </pw-no-data>
+      </div>
+    </div>
+    <!-- Magic Moment -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Magic Moment</h5>
+      <div class="w-100 text-center mt-3">
+        <ng-template [ngIf]="!magicMomentLoaded">
+          <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+        </ng-template>
+      </div>
+      <div class="primeng-datatable-container table-responsive"
+        *ngIf="magicMoment?.length">
+        <p-table class="table"
+          #dt
+          [value]="magicMoment"
+          [paginator]="true"
+          [rows]="PAGE_SIZE"
+
+          [totalRecords]="magicMoment.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.Summary.Owner' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactName' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.Organisation' | transloco }}</th>
+              <th scope="true">{{ 'Crm.Summary.ContactEmail' | transloco }}</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body"
+            let-account>
+            <tr>
+              <td data-head="Owner">
+                {{ account.owner?.first_name }} {{ account.owner?.last_name }}
+              </td>
+              <td data-head="Contact Name">
+                {{ account.contact_name }}
+              </td>
+              <td data-head="Organisation">
+                {{ account.name }}
+              </td>
+              <td data-head="Contact Email">
+                {{ account.contact_email }}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="magicMoment.length !==0 ">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>
+      </div>
+      <div *ngIf="magicMoment?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.Summary.NoInsightMessage' | transloco"> </pw-no-data>
+      </div>
+    </div>
+  </ng-container>
+</div>

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

@@ -0,0 +1,75 @@
+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 { SmartCrmSummaryOthersComponent } from './smart-crm-summary-others.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+
+describe('SmartCrmSummaryOthersComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmSummaryOthersComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                },
+                isSuperAdmin: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getCrmAnalytics: (_id: number, type: string) => {
+                    if (type === 'accounts_active_opportunities') {
+                        return of([
+                            {
+                                id: 1,
+                                title: 'test ',
+                                one_time_amount: 1000,
+                                win_chances: 10,
+                                starting_at: '2021-02-04T00:00:00.000+00:00',
+                                owner: {
+                                    first_name: 'coming_soon',
+                                    last_name: 'coming_soon'
+                                },
+                                crm_account: {
+                                    id: 6,
+                                    name: 'saurabh'
+                                },
+                                crm_contact: null
+                            }
+                        ]);
+                    }
+
+                    return 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();
+        expect(spectator.component.activeOpportunities).toHaveLength(1);
+    });
+});