@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,115 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <p>Please define the widgets you want to use.</p>
+    <a class="btn btn-sm btn-outline-primary float-end"
+      data-cy="add-contact"
+      [routerLink]="['/' + subscription?.slug + routers.widgetsDetails + 'add']">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.Widgets.AddWidgets' | 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_widget_relationships"
+        [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 source..."
+              (input)="dt.filterGlobal($event.target.value, 'contains')"
+              class="mw-90" />
+          </div>
+        </ng-template>
+        <ng-template pTemplate="header">
+          <tr>
+            <th scope="true"
+              pSortableColumn="crm_widget_id">
+              {{ 'Crm.Widgets.CrmWidget' | transloco }}
+              <p-sortIcon field="crm_widget_id"></p-sortIcon>
+            </th>
+            <th scope="true"
+              pSortableColumn="position">
+              {{ 'Crm.Widgets.Position' | transloco }}
+              <p-sortIcon field="position"></p-sortIcon>
+            </th>
+            <th scope="true"
+              pSortableColumn="visible">
+              {{ 'Crm.Widgets.Visible' | transloco }}
+              <p-sortIcon field="visible"></p-sortIcon>
+            </th>
+            <th scope="true">{{ 'Label.Actions' | transloco }}</th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body"
+          let-widget>
+          <tr>
+            <td data-head="Crm Widget">{{ widget.crm_widget }}</td>
+            <td data-head="Position">
+              <span class="badge"
+                [appDynamicBadge]="{
+                                    itemsArray: positions,
+                                    item: widget?.position
+                                }"
+                color="default">{{ widget.position }}</span>
+            </td>
+            <td data-head="Visible">
+              <span [appDynamicBadge]="{
+                                    itemsArray: [true, false],
+                                    item: widget?.visible
+                                }"
+                color="success-danger"
+                class="badge">{{ !!widget?.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.widgetsDetails,
+                                            widget.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(widget.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.Widgets.NoDataMessage' | transloco"> </pw-no-data>
+</div>

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

@@ -0,0 +1,93 @@
+import { waitForAsync } 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 { SmartCrmWidgetsComponent } from './smart-crm-widgets.component';
+import { ActivatedRoute } from '@angular/router';
+import { LazyLoadEvent } from 'primeng/api';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+
+describe('SmartCrmWidgetsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmWidgetsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => true
+            }),
+            MockProvider(CrmService, {
+                getAllSubscriptionWidgets: () =>
+                    of({
+                        crm_subscription_widgets: [
+                            {
+                                id: 1,
+                                subscription_id: 31,
+                                name: 'Test Widget',
+                                position: 'top_left',
+                                visible: false,
+                                crm_widget_id: 1,
+                                owner_id: 25
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getAllWidgets: () =>
+                    of({
+                        crm_widgets: [{ id: 1, name: 'Feature1', code: 'feature1', active: true }],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getWidgetPositions: () => of(['top_left', 'bottom_left', 'middle-left']),
+                deleteSubscriptionWidget: () => of({})
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            },
+            {
+                provide: ActivatedRoute,
+                useValue: {
+                    parent: {
+                        params: of({ slug: 'posiwise-263' })
+                    }
+                }
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+    });
+
+    it('should create', waitForAsync(async () => {
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    }));
+
+    it('should populate the table with widgets data', waitForAsync(async () => {
+        const spectator = await createComponent();
+        spectator.component.ngOnInit();
+
+        const lazyLoadEvent: LazyLoadEvent = {
+            first: 0,
+            rows: 10,
+            sortField: 'name',
+            sortOrder: 1
+        };
+
+        spectator.component.onLazyLoad(lazyLoadEvent);
+        spectator.detectChanges();
+        expect(spectator.query('table')).toContainText('Crm Widget  Position  Visible Actions');
+    }));
+});

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

@@ -0,0 +1,150 @@
+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 { CrmWidgetResponse } from '../../../../shared/interface/crm-widget.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { HelperService } from '@posiwise/helper-service';
+import { FilteredData } from 'libs/smart-crm/src/lib/shared/interface/smart-crm-module.interface';
+
+@Component({
+    selector: 'pw-smart-crm-widgets',
+    templateUrl: './smart-crm-widgets.component.html'
+})
+export class SmartCrmWidgetsComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    searchText = '';
+
+    loading = true;
+
+    data: CrmWidgetResponse = {
+        crm_widget_relationships: [],
+        object_count: 0,
+        unfiltered_count: 0
+    };
+
+    hasAccess = false;
+
+    isLoaded = false;
+
+    subscriptionId: number;
+
+    allWidgets: FilteredData[];
+
+    positions = [];
+
+    private 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;
+            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.getAllSubscriptionWidgets({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+        this.getWidgetPositions();
+    }
+
+    /** Function to get all widgets */
+    private getAllSubscriptionWidgets(paging: Paging) {
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            if (response) {
+                this.crmService
+                    .getAllSubscriptionWidgets(this.subscriptionId, paging)
+                    .subscribe(res => {
+                        this.getAllWidgets();
+                        this.data = res;
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    /** Function to get all widgets */
+    private getAllWidgets() {
+        this.crmService.getAllWidgets(this.subscriptionId).subscribe(widgets => {
+            this.allWidgets = widgets.crm_widgets || [];
+            this.data.crm_widget_relationships?.forEach(subscriptionWidget => {
+                this.allWidgets?.forEach(widget => {
+                    if (subscriptionWidget.crm_widget_id === widget.id) {
+                        subscriptionWidget['crm_widget'] = widget.name;
+                    }
+                });
+            });
+        });
+    }
+
+    /** Function to delete widget */
+    onDelete(id: number) {
+        HelperService.raiseDeletePopup().then(res => {
+            if (res.value) {
+                this.crmService
+                    .deleteSubscriptionWidget(id, this.subscription?.id)
+                    .subscribe(() => {
+                        this.getAllSubscriptionWidgets({
+                            page: this.page,
+                            page_size: PAGE_SIZE,
+                            search: this.searchText
+                        });
+                        this.toast.success(
+                            this.translation.translate('Crm.Widgets.DeletedMessage')
+                        );
+                    });
+            }
+        });
+    }
+
+    /** Function to get positions */
+    private getWidgetPositions() {
+        this.crmService.getWidgetPositions(this.subscriptionId).subscribe(response => {
+            this.positions = response;
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

package/src/lib/private/components/smart-crm-contacts/smart-crm-contact-details/smart-crm-contact-details.component.html

@@ -0,0 +1,205 @@
+<div class="me-auto col-xs-6">
+  <a href="javascript:void(0)"
+    (click)="back()"
+    class="previous"><i class="fa fa-arrow-alt-circle-left" aria-hidden="true"></i></a>
+  <h3 class="m-subheader__title m-subheader__title--separator">
+    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:
+      {{ isLoading ? '' :
+               (data?.first_name
+                    ? data?.first_name + ' ' + data.last_name
+                    : ('Label.AddNew' | transloco))
+            }}</span>
+  </h3>
+</div>
+<div class="w-100 text-center mt-3"
+  *ngIf="isLoading">
+  <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+  </div>
+<div class="p-2 mt-3">
+  <form [formGroup]="form"
+    *ngIf="!isLoading"
+    (ngSubmit)="onSave()">
+    <div class="row">
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.FirstName' | transloco"
+          name="first_name"
+          [errorMsg]="'Crm.ContactMessage.FirstNameErrorMessage' | transloco">
+          <input type="text"
+            class="form-control"
+            formControlName="first_name"
+            id="first_name"
+            [ngClass]="{ 'is-invalid': submitted && f['first_name'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.LastName' | transloco"
+          name="last_name"
+          [errorMsg]="'Crm.ContactMessage.LastNameErrorMessage' | transloco">
+          <input type="text"
+            class="form-control"
+            formControlName="last_name"
+            id="last_name"
+            [ngClass]="{ 'is-invalid': submitted && f['last_name'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.Headline' | transloco"
+          name="headline"
+          [errorMsg]="'Crm.ContactMessage.HeadlineErrorMessage' | transloco">
+          <input type="text"
+            class="form-control"
+            formControlName="headline"
+            id="headline"
+            [ngClass]="{ 'is-invalid': submitted && f['headline'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4 col-lg-4">
+        <pw-input-container [label]="'Crm.ContactMessage.Tel' | transloco"
+          name="tel"
+          [errorMsg]="'Crm.ContactMessage.TelErrorMessage' | transloco">
+          <input type="text"
+            class="form-control"
+            formControlName="tel"
+            id="tel"
+            [ngClass]="{ 'is-invalid': submitted && f['tel'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.Email' | transloco"
+          name="email"
+          errorMsg="{{
+                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'
+                    }}">
+          <input type="text"
+            class="form-control"
+            formControlName="email"
+            id="email"
+            [ngClass]="{ 'is-invalid': submitted && f['email'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <div class="mb-3">
+          <pw-input-container [label]="'Crm.ContactMessage.EmailVerified' | transloco"
+            class="nowrap"
+            name="email_verified">
+            <ui-switch formControlName="email_verified"
+              name="email_verified"
+              [ngClass]="{ 'is-invalid': submitted && f['email_verified'].errors }">
+            </ui-switch>
+          </pw-input-container>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.LinkedInUrl' | transloco"
+          name="linkedin_url">
+          <input type="text"
+            class="form-control"
+            formControlName="linkedin_url"
+            id="linkedin_url" />
+        </pw-input-container>
+      </div>
+
+      <div class="ui-fluid skills-modal col-sm-4">
+        <label class="mb-2">{{ 'Crm.ContactMessage.Account' | transloco
+                    }}<span class="text-danger required-icon">*</span></label>
+        <p-autoComplete [suggestions]="filteredAccounts"
+          formControlName="crm_account_id"
+          dataKey="id"
+          field="name"
+          [dropdown]="true"
+          (completeMethod)="search($event)"
+          styleClass="w-100"
+          placeholder="Search accounts"
+          [multiple]="false"
+          autocomplete="off">
+        </p-autoComplete>
+      </div>
+
+      <div class="col-12 col-sm-4 col-lg-4">
+        <pw-input-container [label]="'Crm.ContactMessage.Department' | transloco"
+          name="department_id"
+          *ngIf="departments$ | async as departments">
+          <select class="form-select"
+            formControlName="department_id"
+            [ngClass]="{ 'is-invalid': submitted && f['department_id'].errors }">
+            <option *ngFor="let option of departments['organization_departments']"
+              [value]="option.id">
+              {{ option.name }}
+            </option>
+          </select>
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4 col-lg-4">
+        <label>{{ 'Crm.ContactMessage.Potential' | transloco }}</label>
+        <select formControlName="potential"
+          class="form-control form-select"
+          [ngClass]="{ 'is-invalid': submitted && f['potential'].errors }">
+          <option *ngFor="let option of potentials"
+            [value]="option">{{ option }}</option>
+        </select>
+      </div>
+
+      <div class="col-12 col-sm-4 col-lg-4">
+        <label>{{ 'Crm.ContactMessage.Labels' | transloco }} </label>
+        <p-multiSelect [options]="labels"
+          formControlName="labels"
+          appendTo="body"></p-multiSelect>
+      </div>
+
+      <div class="col-12 col-sm-4 col-lg-4"
+        *ngIf="crmSources$ | async as source">
+        <label>{{ 'Crm.ContactMessage.Source' | transloco }}</label>
+        <select formControlName="crm_source_id"
+          class="form-control form-select"
+          [ngClass]="{ 'is-invalid': submitted && f['crm_source_id'].errors }">
+          <option value="">select crm source</option>
+          <option *ngFor="let option of source['crm_sources']"
+            [value]="option.id">
+            {{ option.name }}
+          </option>
+        </select>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <pw-input-container [label]="'Crm.ContactMessage.DateOfBirth' | transloco"
+          name="dob">
+          <div class="input-group">
+            <input class="form-control"
+              placeholder="dd-mm-yyyy"
+              formControlName="dob"
+              ngbDatepicker
+              #d="ngbDatepicker" />
+            <div class="input-group-append">
+              <button class="btn btn-primary"
+                (click)="d.toggle()"
+                type="button">
+                <i class="fa fa-calendar" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+        </pw-input-container>
+      </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"
+          [disabled]="form.invalid">
+          {{ 'Button.Submit' | transloco }}
+        </button>
+      </div>
+    </div>
+  </form>
+</div>