@posiwise/smart-crm 0.0.19 → 0.0.21

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

@@ -0,0 +1,117 @@
+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 { CrmAction } from '../../../../../shared/interface/crm-action.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { Subscription, User } from '@posiwise/common-utilities';
+import { HelperService } from '@posiwise/helper-service';
+
+@Component({
+    selector: 'pw-smart-crm-settings-details',
+    templateUrl: './smart-crm-actions-details.component.html',
+    styleUrls: ['./smart-crm-actions-details.component.scss']
+})
+export class SmartCrmSettingsDetailsComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy
+{
+    form: UntypedFormGroup;
+
+    id: number;
+
+    submitted = false;
+    buttonBusy = false;
+    isLoading = true;
+
+    user: User;
+
+    data: CrmAction;
+
+    targetWeek = [];
+
+    targetWeekMin = [];
+
+    subscriptionId: number;
+
+    actions$: Observable<string>;
+
+    subscription: Subscription;
+    constructor(
+        private crmService: CrmService,
+        injector: Injector
+    ) {
+        super(injector);
+        this.form = AppSmartCrm.getSettingsForm();
+    }
+
+    ngOnInit() {
+        this.targetWeek = HelperService.getNumbersRange(100);
+        this.targetWeekMin = HelperService.getNumbersRange(100);
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.form.get('subscription_id').setValue(this.subscription?.id);
+                this.actions$ = this.crmService.getAllActions(this.subscription?.id);
+            }
+        });
+        this.route.params.subscribe(data => {
+            this.id = Number(data['id']);
+        });
+        if (this.id) {
+            this.getActionDetails();
+        } else {
+            this.isLoading = false;
+        }
+    }
+
+    /** Function to get form controls */
+    get f() {
+        return this.form.controls;
+    }
+
+    /** Function to get action details on edit form */
+    private getActionDetails() {
+        this.crmService.getAction(this.subscription?.id, this.id).subscribe({
+            next: resp => {
+                this.data = resp;
+                this.form.patchValue(resp);
+                this.isLoading = false;
+            },
+            error: error => this.toast.showToast(error)
+        });
+    }
+
+    /** Function to update existing action */
+    onSave() {
+        this.buttonBusy = true;
+        this.form.value['previous_action_id'] = this.form.value['previous_action_id']
+            ? this.form.value['previous_action_id'].id
+            : null;
+        Number(this.form.get('target_week').value);
+        Number(this.form.get('target_week_min').value);
+        this.submitted = true;
+        const sub$ = this.id
+            ? this.crmService.updateActionCon(this.subscription?.id, this.form.value, this.id)
+            : this.crmService.postNewAction(this.subscription?.id, this.form.value);
+        sub$.subscribe(() => {
+            this.toast.success(this.translation.translate('Crm.Settings.UpdatedMessage'));
+            this.back();
+        }).add(() => {
+            this.submitted = false;
+            this.buttonBusy = false;
+        });
+    }
+
+    onChange(event) {
+        if (event === true) {
+            this.form.get('visible').setValue(true);
+        }
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1,125 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <p>
+      Please define the actions you want to associate with your contacts. For example you
+      could choose Phone Call, or Meeting, or Email Sent, etc.
+    </p>
+    <a *ngIf="data.object_count === 0 && data.unfiltered_count === 0 && isLoaded"
+      class="btn btn-sm btn-outline-primary float-end build-default-action-button"
+      (click)="buildDefaultActions()"
+      data-cy="add-action">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}
+    </a>
+    <a *ngIf="hasAccess"
+      class="btn btn-sm btn-outline-primary float-end"
+      [routerLink]="['/' + subscription?.slug + routers.configurationDetails + 'add']"
+      data-cy="add-action">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.Settings.AddAction' | transloco }}
+    </a>
+  </div>
+  <div class="w-100 text-center mt-3"
+    *ngIf="!isLoaded">
+    <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+  </div>
+  <div class="col-12">
+    <div class="primeng-datatable-container table-responsive"
+    [class.hideTable]="data.unfiltered_count === 0">
+      <p-table #dt
+        [value]="data.crm_actions"
+        [paginator]="data.object_count!==0"
+        [lazy]="true"
+        [rows]="100"
+        [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 action..."
+              (input)="dt.filterGlobal($event.target.value, 'contains')"
+              class="mw-90" />
+          </div>
+        </ng-template>
+          <ng-template pTemplate="header" >
+            <tr>
+              <th scope="true"
+                pSortableColumn="name">
+                {{ 'Crm.Settings.Name' | transloco }}
+                <p-sortIcon field="name"></p-sortIcon>
+              </th>
+              <th scope="true"
+                pSortableColumn="target_week">
+                {{ 'Crm.Settings.TargetWeek' | transloco }}
+                <p-sortIcon field="target_week"></p-sortIcon>
+              </th>
+              <th scope="true"
+                pSortableColumn="target_week_min">
+                {{ 'Crm.Settings.TargetWeekMin' | transloco }}
+                <p-sortIcon field="target_week_min"></p-sortIcon>
+              </th>
+              <th scope="true"
+                pSortableColumn="visible">
+                {{ 'Crm.Settings.Visible' | transloco }}
+                <p-sortIcon field="visible"></p-sortIcon>
+              </th>
+              <th scope="true"
+                *ngIf="hasAccess">{{ 'Label.Actions' | transloco }}</th>
+            </tr>
+          </ng-template>
+        <ng-template pTemplate="body"
+          let-action>
+          <tr>
+            <td data-head="Name">{{ action.name }}</td>
+            <td data-head="TargetWeek">{{ action.target_week }}</td>
+            <td data-head="TargetWeekMin">{{ action.target_week_min }}</td>
+            <td data-head="Visible">
+              <span [appDynamicBadge]="{
+                                    itemsArray: [true, false],
+                                    item: action?.visible
+                                }"
+                color="success-danger"
+                class="badge">{{ !!action?.visible }}</span>
+            </td>
+            <td data-head="Action"
+              *ngIf="hasAccess">
+              <ul class="list-unstyled list-inline">
+                <li ngbTooltip="Edit"
+                  class="me-2 me-sm-3"
+                  [routerLink]="[
+                                        '/' + subscription?.slug + routers.configurationDetails,
+                                        action.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(action.id)"
+                                        aria-hidden="true"
+                                    ></i>
+                </li>
+              </ul>
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+      <div *ngIf="data.object_count === 0 && data.unfiltered_count !== 0">
+        <pw-no-data [withImage]="true" [message]="'Search.NoDataMessage'| transloco" [description]="'Search.NoDataDescription' | transloco" >
+    </pw-no-data>
+      </div>
+      <span class="total-records-count" *ngIf="data.object_count!==0">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>
+    </div>
+    <div *ngIf="data.unfiltered_count === 0 && isLoaded">
+      <pw-no-data [withImage]="true" [message]="'Crm.Settings.NoActionMessage' | transloco"> </pw-no-data>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+@import 'variables';
+
+.build-default-action-button {
+    margin-left: 7px;
+}

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

@@ -0,0 +1,136 @@
+import { TestBed } from '@angular/core/testing';
+import { CommonServicesModule, PermissionService, UserService } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { DEFAULT_USER, TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+import Swal from 'sweetalert2';
+import { SmartCrmPrivateModule } from '../../../smart-crm-private.module';
+import { SmartCrmActionsComponent } from './smart-crm-actions.component';
+import { ToastrService } from 'ngx-toastr';
+import { Subscription } from '@posiwise/common-utilities';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+
+describe('SmartCrmActionsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmActionsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllActions: () =>
+                    of({
+                        crm_actions: [
+                            {
+                                id: 9,
+                                name: 'test',
+                                subscription_id: 31,
+                                target_week_min: 2,
+                                target_week: 3,
+                                visible: true,
+                                previous_action_id: null,
+                                contact_required: false
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                deleteAction: () => of({}),
+                buildDefaultActions: () => 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 delete action', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'deleteAction').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 call buildDefaultActions and display a success message', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const crmService = TestBed.inject(CrmService);
+        const spyBuildDefaultActions = spyOn(crmService, 'buildDefaultActions').and.callThrough();
+        const toastService = TestBed.inject(ToastrService);
+        const spyToastSuccess = spyOn(toastService, 'success').and.callThrough();
+
+        // Only set the necessary property for the test
+        spectator.component.subscription = { id: 123 } as Subscription;
+
+        // Mock the CrmService response for getAllActions
+        const mockActions = {
+            crm_actions: [
+                {
+                    id: 9,
+                    name: 'test',
+                    subscription_id: 31,
+                    target_week_min: 2,
+                    target_week: 3,
+                    visible: true,
+                    previous_action_id: null,
+                    contact_required: false
+                }
+            ],
+            object_count: 1,
+            unfiltered_count: 1
+        };
+        spyOn(crmService, 'getAllActions').and.returnValue(of(mockActions));
+
+        // Invoke the buildDefaultActions method
+        spectator.component.buildDefaultActions();
+
+        // Ensure buildDefaultActions was called with correct arguments
+        expect(spyBuildDefaultActions).toHaveBeenCalledWith(123);
+
+        // Verify the state change as a result of getActions being called
+        spectator.component.invokeGetActions({
+            page: 1,
+            page_size: 10
+        });
+
+        expect(spectator.component.data.crm_actions.length).toBe(1);
+        expect(spyToastSuccess).toHaveBeenCalledWith(
+            'Record Successfully Added',
+            '',
+            jasmine.objectContaining({ timeOut: 10000 })
+        );
+    });
+});

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

@@ -0,0 +1,143 @@
+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 { CrmActionResponse } from '../../../../shared/interface/crm-action.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { HelperService } from '@posiwise/helper-service';
+
+@Component({
+    selector: 'pw-smart-crm-actions',
+    templateUrl: './smart-crm-actions.component.html',
+    styleUrls: ['./smart-crm-actions.component.scss']
+})
+export class SmartCrmActionsComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    data: CrmActionResponse = {
+        crm_actions: [],
+        object_count: 0,
+        unfiltered_count: 0
+    };
+
+    subscriptionId: number;
+
+    searchText = '';
+
+    loading = true;
+
+    userId: number;
+
+    hasAccess = false;
+
+    isLoaded = false;
+
+    private page = 1;
+
+    subscription: Subscription;
+
+    routers = ROUTERS;
+
+    constructor(
+        private crmService: CrmService,
+        injector: Injector,
+        private cdr: ChangeDetectorRef
+    ) {
+        super(injector);
+    }
+
+    ngOnInit(): void {
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.hasAccess = this.hasAdminAccess(this.subscription?.id);
+            }
+        });
+    }
+
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+
+    onLazyLoad(event: LazyLoadEvent) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getActions({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+    }
+
+    shouldShowTableContent(): boolean {
+        return this.data.unfiltered_count !== 0;
+    }
+
+    /** Function to get and show all the actions */
+    private getActions(paging: Paging) {
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAllActions(this.subscriptionId, paging)
+                    .subscribe(resp => {
+                        this.data = resp;
+                    })
+                    .add(() => {
+                        this.loading = false;
+                        this.isLoaded = true;
+                    });
+            }
+        });
+    }
+
+    public invokeGetActions(paging: Paging) {
+        this.getActions(paging);
+    }
+
+    buildDefaultActions() {
+        this.crmService.buildDefaultActions(this.subscription?.id).subscribe(() => {
+            this.getActions({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+            this.toast.success(this.translation.translate('Crm.CommonMessage.AddedMessage'));
+        });
+    }
+
+    /** Function to delete existing setting */
+    onDelete(id: number) {
+        HelperService.raiseDeletePopup()
+            .then(resp => {
+                if (resp.value) {
+                    this.crmService.deleteAction(this.subscription?.id, id).subscribe(() => {
+                        this.toast.success(
+                            this.translation.translate('Crm.Settings.DeletedMessage')
+                        );
+                        this.getActions({
+                            page: this.page,
+                            page_size: PAGE_SIZE,
+                            search: this.searchText
+                        });
+                    });
+                }
+            })
+            .catch(error => this.toast.showToast(error));
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1,60 @@
+<div class="row">
+  <div class="col-12 mb-0">
+    <h2>CRM Configuration</h2>
+  </div>
+</div>
+<ul ngbNav
+  #nav="ngbNav"
+  [(activeId)]="activeTab"
+  (navChange)="onTabChange($event)"
+  class="nav-tabs">
+  <li [ngbNavItem]="'actions'"
+    *rbacAllow="'SubscriptionAdmin'">
+    <a ngbNavLink>Actions</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-actions></pw-smart-crm-actions>
+    </ng-template>
+  </li>
+
+  <li [ngbNavItem]="'categories'"
+    *rbacAllow="'SubscriptionAdmin'">
+    <a ngbNavLink>Categories</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>
+    </ng-template>
+  </li>
+
+  <li [ngbNavItem]="'stage'"
+    *rbacAllow="'SubscriptionAdmin'">
+    <a ngbNavLink>Stages</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-stages></pw-smart-crm-stages>
+    </ng-template>
+  </li>
+
+  <li [ngbNavItem]="'source'"
+    *rbacAllow="'SubscriptionAdmin'">
+    <a ngbNavLink>Sources</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-source></pw-smart-crm-source>
+    </ng-template>
+  </li>
+
+  <li [ngbNavItem]="'widget'"
+    *rbacAllow="'SubscriptionAdmin' && 'SuperAdmin'">
+    <a ngbNavLink>Widgets</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-widgets></pw-smart-crm-widgets>
+    </ng-template>
+  </li>
+
+  <li [ngbNavItem]="'admin'"
+    *rbacAllow="'SubscriptionAdmin' && 'SuperAdmin'">
+    <a ngbNavLink>Admin</a>
+    <ng-template ngbNavContent>
+      <pw-coming-soon message="Admin"></pw-coming-soon>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav"></div>

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

@@ -0,0 +1 @@
+@import 'variables';

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

@@ -0,0 +1,55 @@
+import { CommonServicesModule, PermissionService, UserService } from '@posiwise/common-services';
+import { SmartCrmPrivateModule } from '../../smart-crm-private.module';
+import { SharedModule } from '@posiwise/shared-module';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { DEFAULT_USER, TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+import { SmartCrmConfigurationComponent } from './smart-crm-configuration.component';
+import { CrmService } from '@posiwise/smart-crm-shared';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmConfigurationComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmConfigurationComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllActions: () =>
+                    of({
+                        crm_actions: [],
+                        object_count: 0,
+                        unfiltered_count: 0
+                    })
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+        const router = TestBed.inject(Router);
+        spyOn(router, 'navigate').and.stub();
+        spectator.component.onTabChange({ nextId: 1 });
+    });
+});

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

@@ -0,0 +1,29 @@
+import { Component, Injector, OnInit } from '@angular/core';
+import { ROUTERS } from '../../../shared/routers/routers';
+
+import { AppBaseComponent } from '@posiwise/app-base-component';
+
+@Component({
+    selector: 'pw-configuration',
+    templateUrl: './smart-crm-configuration.component.html',
+    styleUrls: ['./smart-crm-configuration.component.scss']
+})
+export class SmartCrmConfigurationComponent extends AppBaseComponent implements OnInit {
+    activeTab = 'actions';
+
+    constructor(injector: Injector) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.route.params.subscribe(data => {
+            this.activeTab = data['tabId'] || 'actions';
+        });
+    }
+
+    onTabChange(event) {
+        this.getUserSubscription().subscribe(subscription => {
+            this.router.navigate([`${subscription.slug}${ROUTERS.configurations}${event.nextId}`]);
+        });
+    }
+}