@posiwise/smart-crm 0.0.19 → 0.0.21

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

@@ -0,0 +1,129 @@
+import {
+    AfterViewChecked,
+    ChangeDetectorRef,
+    Component,
+    Injector,
+    OnDestroy,
+    OnInit
+} from '@angular/core';
+import { ROUTERS } from '../../../../shared/routers/routers';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { LazyLoadEvent } from 'primeng/api';
+
+import { PAGE_SIZE, Paging, Subscription } from '@posiwise/common-utilities';
+import { CrmSourceResponse } from '../../../../shared/interface/crm-source.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { HelperService } from '@posiwise/helper-service';
+
+@Component({
+    selector: 'pw-smart-crm-source',
+    templateUrl: './smart-crm-source.component.html',
+    styleUrls: ['./smart-crm-source.component.scss']
+})
+export class SmartCrmCompanySourceComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    searchText = '';
+
+    loading = true;
+
+    hasAccess = false;
+
+    isLoaded = false;
+
+    data: CrmSourceResponse = {
+        crm_sources: [],
+        object_count: 0,
+        unfiltered_count: 0
+    };
+
+    subscriptionId: number;
+
+    page = 1;
+
+    subscription: Subscription;
+
+    routers = ROUTERS;
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService,
+        private cdr: ChangeDetectorRef
+    ) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.getUserSubscription().subscribe(subscription => {
+            this.subscription = subscription;
+        });
+    }
+
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+
+    onLazyLoad(event: LazyLoadEvent) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getAllSource({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+    }
+
+    /** Function to all account source */
+    getAllSource(paging: Paging) {
+        this.getUserSubscription().subscribe(subscription => {
+            this.subscription = subscription;
+            if (this.subscription?.id) {
+                this.hasAccess = this.hasAdminAccess(this.subscription?.id);
+                this.crmService
+                    .getAllAccountSource(subscription?.id, paging)
+                    .subscribe(response => {
+                        this.data = response;
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    buildAccountSource() {
+        this.crmService.buildAccountSources(this.subscription?.id).subscribe(() => {
+            this.getAllSource({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+            this.toast.success(this.translation.translate('Crm.CommonMessage.AddedMessage'));
+        });
+    }
+
+    /** Function to delete account source */
+    onDelete(id) {
+        HelperService.raiseDeletePopup().then(res => {
+            if (res.value) {
+                this.crmService.deleteSource(this.subscription?.id, id).subscribe(() => {
+                    this.getAllSource({
+                        page: this.page,
+                        page_size: PAGE_SIZE,
+                        search: this.searchText
+                    });
+                    this.toast.success(
+                        this.translation.translate('Crm.AccountSourceMessage.DeletedMessage')
+                    );
+                });
+            }
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

package/src/lib/private/components/smart-crm-configuration/smart-crm-stages/smart-crm-stage-details/smart-crm-stage-details.component.html

@@ -0,0 +1,108 @@
+<div class="col-12 d-flex ps-0">
+  <a href="javascript:void(0)"
+    (click)="back()"
+    class="previous"><i class="fa fa-arrow-alt-circle-left" aria-hidden="true"></i></a>
+  <div class="me-auto col-xs-6">
+    <h3 class="m-subheader__title m-subheader__title--separator">
+      <span>{{ 'Crm.StageMessages.Stage' | transloco }}:
+        {{ isLoading ? '' : (data?.name || ('Label.AddNew' | transloco)) }}</span>
+    </h3>
+  </div>
+</div>
+<div class="w-100 text-center mt-3"
+  *ngIf="isLoading">
+  <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+  </div>
+<div class="container-fluid pw-tab">
+  <div class="p-2 mt-3">
+    <form [formGroup]="form"
+      *ngIf="!isLoading"
+      (ngSubmit)="onSave()">
+      <div class="row mb-3">
+        <div class="col-12 col-sm-4 col-md-3">
+          <pw-input-container [label]="'Crm.StageMessages.Name' | transloco"
+            name="name"
+            [errorMsg]="'Crm.StageMessages.NameRequired' | transloco">
+            <input type="text"
+              class="form-control"
+              formControlName="name"
+              [ngClass]="{ 'is-invalid': submitted && f['name'].errors }" />
+          </pw-input-container>
+        </div>
+         <div class="col-12 col-sm-4 col-md-3">
+            <pw-input-container [label]="'Crm.StageMessages.ColorCode' | transloco"
+              [showTooltip]="true"
+              [tooltipText]="'Crm.StageMessages.Tooltip.ColorCode' | transloco"
+              name="color_code">
+              <input type="color"
+                class="form-control color-code-stage account-color-code"
+                formControlName="color_code"
+                [ngClass]="{ 'is-invalid': submitted && f['color_code'].errors }" />
+            </pw-input-container>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3">
+          <pw-input-container [showTooltip]="true"
+            [tooltipText]="'Crm.StageMessages.Tooltip.PreviousStage' | transloco"
+            [label]="'Crm.StageMessages.PreviousStage' | transloco"
+            name="previous_stage_id"
+            [errorMsg]="'Crm.StageMessages.PreviousStageRequired' | transloco"
+            *ngIf="stages$ | async as stages">
+            <select formControlName="previous_stage_id"
+              class="form-control form-select"
+              [ngClass]="{ 'is-invalid': submitted && f['previous_stage_id'].errors }">
+              <option value="">select previous stage</option>
+              <option *ngFor="let option of stages['crm_opportunity_stages']"
+                [value]="option.id">
+                {{ option.name }}
+              </option>
+            </select>
+          </pw-input-container>
+        </div>
+        <div class="col-12 col-sm-4 col-md-3" *ngIf="categories.length > 0">
+          <pw-input-container [showTooltip]="true"
+            [tooltipText]="'Crm.StageMessages.Tooltip.OpportunityCategory' | transloco"
+            [label]="'Crm.StageMessages.OpportunityCategory' | transloco"
+            name="crm_opportunity_category_ids"
+            errorMsg="category is required">
+            <p-multiSelect [options]="categories"
+              formControlName="crm_opportunity_category_ids"
+              appendTo="body"></p-multiSelect>
+          </pw-input-container>
+        </div>
+        <div class="col-12 col-sm-2 col-md-1">
+          <div class="mb-3">
+            <label class="info-circle mb-2">{{ 'Crm.StageMessages.Visible' | transloco
+                            }}<span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.StageMessages.Tooltip.Visible' | transloco
+                            }}</span></label><br />
+            <ui-switch formControlName="visible"
+              name="visible"></ui-switch>
+          </div>
+        </div>
+        <div class="col-12 col-sm-2 col-md-1"
+          *rbacAllow="'SuperAdmin'">
+          <div class="mb-3">
+            <label class="info-circle mb-2">{{ 'Crm.StageMessages.Default' | transloco
+                            }}<span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.StageMessages.Tooltip.Default' | transloco
+                            }}</span></label><br />
+            <ui-switch formControlName="is_default"
+              name="is_default"> </ui-switch>
+          </div>
+        </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">
+            {{ 'Button.Submit' | transloco }}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

package/src/lib/private/components/smart-crm-configuration/smart-crm-stages/smart-crm-stage-details/smart-crm-stage-details.component.scss

@@ -0,0 +1,3 @@
+.account-color-code {
+    height: 31.5px;
+}

package/src/lib/private/components/smart-crm-configuration/smart-crm-stages/smart-crm-stage-details/smart-crm-stage-details.component.spec.ts

@@ -0,0 +1,124 @@
+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 { SmartCrmPrivateModule } from '../../../../smart-crm-private.module';
+import { SmartCrmStageDetailsComponent } from './smart-crm-stage-details.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmStageDetailsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmStageDetailsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllStages: () =>
+                    of({
+                        crm_opportunity_stages: [
+                            {
+                                id: 14,
+                                subscription_id: 31,
+                                name: 'test',
+                                previous_stage_id: null,
+                                visible: true,
+                                is_default: true,
+                                crm_opportunity_category_ids: [9]
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getAllOpportunityCategories: () =>
+                    of({
+                        crm_opportunity_categories: [
+                            {
+                                id: 9,
+                                subscription_id: 20,
+                                name: 'testcategory',
+                                previous_category_id: null,
+                                is_visible: true,
+                                is_default: false,
+                                previous_category: null
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getStageDetails: () =>
+                    of({
+                        id: 14,
+                        subscription_id: 31,
+                        name: 'test',
+                        previous_stage_id: null,
+                        visible: true,
+                        is_default: true,
+                        crm_opportunity_category_ids: [9]
+                    }),
+                editStage: () => of({}),
+                postStage: () => 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, 'postStage').and.callThrough();
+        spectator.typeInElement('test', 'input[formControlName="name"]');
+        spectator.click(
+            'p-multiSelect[formcontrolname="crm_opportunity_category_ids"] .p-multiselect-trigger'
+        );
+        spectator.click(
+            spectator.query('.p-multiselect-items-wrapper >:first-child >:nth-child(1) > li', {
+                root: true
+            })
+        );
+        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, 'editStage').and.callThrough();
+        spectator.typeInElement('test2', 'input[formControlName="name"]');
+        spectator.click('button[type="submit"]');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});

package/src/lib/private/components/smart-crm-configuration/smart-crm-stages/smart-crm-stage-details/smart-crm-stage-details.component.ts

@@ -0,0 +1,111 @@
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { AppSmartCrm } from '../../../../../shared/models/smart-crm.model';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { Observable } from 'rxjs';
+
+import { CrmStage } from '../../../../../shared/interface/crm-stages.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+
+@Component({
+    selector: 'pw-smart-crm-stage-details',
+    templateUrl: './smart-crm-stage-details.component.html',
+    styleUrls: ['./smart-crm-stage-details.component.scss']
+})
+export class SmartCrmStageDetailsComponent extends AppBaseComponent implements OnInit, OnDestroy {
+    form: UntypedFormGroup;
+
+    data: CrmStage;
+
+    subscriptionId: number;
+
+    hasAccess: boolean;
+
+    submitted: boolean;
+    buttonBusy = false;
+    isLoading = true;
+
+    id: number;
+
+    stages$: Observable<string>;
+
+    categories = [];
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService
+    ) {
+        super(injector);
+        this.form = AppSmartCrm.getStageForm();
+    }
+
+    ngOnInit(): void {
+        this.getUserSubscriptionId().subscribe(response => {
+            if (response) {
+                this.subscriptionId = response;
+                this.hasAccess = this.hasAdminAccess(this.subscriptionId);
+                this.form.get('subscription_id').setValue(this.subscriptionId);
+                this.stages$ = this.crmService.getAllStages(this.subscriptionId);
+                this.getAllOpportunityCategories();
+            }
+        });
+        this.route.params.subscribe(data => {
+            this.id = Number(data['id']);
+            if (this.id) {
+                this.getStageDetails(this.id);
+            } else {
+                this.isLoading = false;
+            }
+        });
+    }
+
+    /** Function to get stage tDetails */
+    private getStageDetails(id) {
+        this.crmService.getStageDetails(this.subscriptionId, id).subscribe(response => {
+            this.isLoading = false;
+            this.data = response;
+            this.form.patchValue(response);
+        });
+    }
+
+    /** Function to get form controls */
+    get f() {
+        return this.form.controls;
+    }
+
+    onSave() {
+        if (this.form.valid) {
+            const data = this.form.value;
+            this.submitted = true;
+            this.buttonBusy = true;
+            const sub$ = this.id
+                ? this.crmService.editStage(this.subscriptionId, this.id, data)
+                : this.crmService.postStage(this.subscriptionId, data);
+            sub$.subscribe(() => {
+                this.toast.success(this.translation.translate('Crm.StageMessages.UpdatedMessage'));
+                this.back();
+            }).add(() => {
+                this.buttonBusy = false;
+                this.submitted = false;
+            });
+        }
+    }
+
+    /** Function to get all categories */
+    private getAllOpportunityCategories() {
+        this.crmService.getAllOpportunityCategories(this.subscriptionId).subscribe(response => {
+            const categories = response?.crm_opportunity_categories || [];
+            categories.forEach(val => {
+                const data = {
+                    label: val.name,
+                    value: val.id
+                };
+                this.categories.push(data);
+            });
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1,134 @@
+<div class="row">
+  <div class="col-12">
+    <p>{{ 'Crm.StageMessages.StageTitle' | transloco }}</p>
+    <a *ngIf="data.object_count === 0 && data.unfiltered_count === 0 && isLoaded"
+    class="btn btn-sm btn-outline-primary float-end build-default-stage-button"
+    (click)="buildDefaultStages()"
+    data-cy="add-contact">
+    <i class="fa fa-plus-circle" aria-hidden="true"></i>
+    {{ 'Crm.StageMessages.BuildDefaultStage' | transloco }}
+    </a>
+    <a class="btn btn-sm btn-outline-primary float-end"
+      data-cy="add-contact"
+      [routerLink]="['/' + subscription?.slug + routers.stageDetails + 'add']">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.StageMessages.AddStage' | transloco }}
+    </a>
+  </div>
+  <div class="w-100 text-center mt-3">
+    <ng-template [ngIf]="!isLoaded">
+      <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+    </ng-template>
+  </div>
+  <div class="col-12">
+    <div class="primeng-datatable-container table-responsive"
+      [class.hideTable]="data.unfiltered_count === 0">
+      <p-table #dt
+        [value]="data.crm_opportunity_stages"
+        [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="text-end">
+            <i class="fa fa-search mt-2 me-2" aria-hidden="true"></i>
+            <input type="text"
+              [(ngModel)]="searchText"
+              pInputText
+              size="50"
+              placeholder="Search stages..."
+              (input)="dt.filterGlobal($event.target.value, 'contains')"
+              class="mw-90" />
+          </div>
+        </ng-template>
+        <ng-template pTemplate="header">
+          <tr>
+            <th scope="true"
+              pSortableColumn="name">
+              {{ 'Crm.StageMessages.Name' | transloco }}
+              <p-sortIcon field="name"></p-sortIcon>
+            </th>
+            <th scope="true"
+              pSortableColumn="previous_stage_id">
+              {{ 'Crm.StageMessages.PreviousStage' | transloco }}
+              <p-sortIcon field="previous_stage_id"></p-sortIcon>
+            </th>
+            <th scope="true"
+              pSortableColumn="crm_opportunity_category_ids">
+              {{ 'Crm.StageMessages.OpportunityCategory' | transloco }}
+              <p-sortIcon field="crm_opportunity_category_ids"></p-sortIcon>
+            </th>
+            <th scope="true"
+              pSortableColumn="visible">
+              {{ 'Crm.StageMessages.Visible' | transloco }}
+              <p-sortIcon field="visible"></p-sortIcon>
+            </th>
+            <th scope="true">{{ 'Label.Actions' | transloco }}</th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body"
+          let-stage>
+          <tr>
+            <td data-head="Name">{{ stage?.name }}</td>
+            <td data-head="Previous Stage">
+              <span class="badge"
+                [appDynamicBadge]="{
+                                    itemsArray: stageNames,
+                                    item: stage?.crm_previous_stage?.name
+                                }"
+                color="warning">{{ stage?.crm_previous_stage?.name }}</span>
+            </td>
+            <td data-head="Opportunity Category">
+              <span *ngFor="let category of stage?.crm_opportunity_categories"
+                class="badge ms-1"
+                [appDynamicBadge]="{ itemsArray: categories, item: category?.name }"
+                color="blue-grey">{{ category?.name }}</span>
+            </td>
+            <td data-head="Visible">
+              <span [appDynamicBadge]="{
+                                    itemsArray: [true, false],
+                                    item: stage?.visible
+                                }"
+                color="success-danger"
+                class="badge">{{ !!stage?.visible }}</span>
+            </td>
+            <td data-head="Action">
+              <ul class="list-unstyled list-inline">
+                <ng-container *ngIf="hasAccess">
+                  <li ngbTooltip="Edit"
+                    class="me-2 me-sm-3"
+                    [routerLink]="[
+                                            '/' + subscription?.slug + routers.stageDetails,
+                                            stage.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(stage.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>
+</div>
+<div *ngIf="data.unfiltered_count === 0 && isLoaded">
+  <pw-no-data [withImage]="true" [message]="'Crm.StageMessages.NoStageMessage' | transloco"> </pw-no-data>
+</div>

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

@@ -0,0 +1,3 @@
+.build-default-stage-button {
+    margin-left: 7px;
+}