@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,417 @@
+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, Plotly, Subscription } from '@posiwise/common-utilities';
+import { CrmAccountResponse } from '../../../shared/interface/crm-account.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { CommonService, LogoCacheService } from '@posiwise/common-services';
+import { HelperService } from '@posiwise/helper-service';
+import {
+    OpportunityCategory,
+    OrganizationType,
+    UserAccount
+} from '../../../shared/interface/smart-crm-module.interface';
+
+@Component({
+    selector: 'pw-smart-crm-companies',
+    templateUrl: './smart-crm-accounts.component.html',
+    styleUrls: ['./smart-crm-accounts.component.scss']
+})
+export class SmartCrmCompaniesComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    data: CrmAccountResponse = {
+        accounts: [],
+        object_count: 0,
+        unfiltered_count: 0
+    };
+
+    searchText = '';
+
+    loading = true;
+
+    subscriptionId: number;
+
+    organizationSizes = [];
+
+    userId: number;
+
+    hasAccess = false;
+
+    isLoaded = false;
+
+    private allIndustries: OrganizationType[];
+
+    searchOptions: OpportunityCategory[] = [];
+
+    filterByIndustries = [];
+
+    status = [];
+
+    priority = [];
+
+    source = [];
+
+    filterBySource = [];
+
+    filterByStatus = [];
+
+    filterByPriority = [];
+
+    filterBySizeId = [];
+
+    searchLocationText: string;
+
+    private filterByLocation: string;
+
+    accountGeography: Plotly.Figure;
+
+    accountActivities = [];
+
+    accountLastInvoices: string[];
+
+    accountInsight: string[];
+
+    private page = 1;
+
+    subscription: Subscription;
+
+    routers = ROUTERS;
+    actionNames = [];
+
+    constructor(
+        private crmService: CrmService,
+        private commonService: CommonService,
+        private logoCacheService: LogoCacheService,
+        injector: Injector,
+        private cdr: ChangeDetectorRef
+    ) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.accountDefaultValues(this.subscription.id);
+                this.hasAccess = this.hasAdminAccess(this.subscription.id);
+                this.getUserInfo();
+            }
+        });
+        this.getIndustries();
+        this.getAllOrganizationSize();
+    }
+
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+
+    onLazyLoad(event: LazyLoadEvent) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getAllAccounts({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+    }
+
+    /** Function to get user details */
+    private getUserInfo() {
+        this.userStore().subscribe(user => {
+            if (user) {
+                this.userId = user?.id;
+                if (this.permissionService.isGranted('Pages.Beta')) {
+                    this.getAccountGeography();
+                    this.getAccountActivities();
+                    this.getAccountLastInvoices();
+                    this.getAccountInsight();
+                }
+            }
+        });
+    }
+
+    /** Function to call account default values */
+    private accountDefaultValues(id: number) {
+        this.crmService.getCrmAccountDefaultValues(id).subscribe(response => {
+            const { status } = response;
+            status.forEach(val => {
+                const data = {
+                    label: val,
+                    value: val
+                };
+                this.status.push(data);
+            });
+            const { priority } = response;
+            priority.forEach(val => {
+                const data = {
+                    label: val,
+                    value: val
+                };
+                this.priority.push(data);
+            });
+            const { source } = response;
+            source.forEach(val => {
+                const data = {
+                    label: val.name,
+                    value: val.id
+                };
+                this.source.push(data);
+            });
+        });
+    }
+
+    /** Function to get the accounts list */
+    private getAllAccounts(paging: Paging) {
+        this.data.accounts = [];
+
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAllAccounts(
+                        this.subscriptionId,
+                        paging,
+                        this.filterByIndustries.join() || '',
+                        this.filterBySizeId.join() || '',
+                        this.filterByStatus.join() || '',
+                        this.filterByPriority.join() || '',
+                        this.filterBySource.join() || '',
+                        this.filterByLocation || ''
+                    )
+                    .subscribe(res => {
+                        this.data = res;
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    /** Function to call accounts size */
+    private getAllOrganizationSize() {
+        this.commonService.getOrganizationSizes().subscribe(response => {
+            const organizationSizes = response.organization_sizes;
+            organizationSizes.forEach(val => {
+                const data = {
+                    label: val.name,
+                    value: val.id
+                };
+                this.organizationSizes.push(data);
+            });
+        });
+    }
+
+    /** Function to get organization industries */
+    private getIndustries() {
+        this.commonService.getOrganizationIndustries().subscribe(response => {
+            this.allIndustries = response.organization_industries;
+            this.allIndustries.forEach(val => {
+                const industries = {
+                    label: val.name,
+                    value: val.id
+                };
+                this.searchOptions.push(industries);
+            });
+        });
+    }
+
+    /** Function to execute on delete button click  */
+    onDelete(id: number, subscription_id: number) {
+        HelperService.raiseDeletePopup().then(res => {
+            if (res.value) {
+                this.crmService.deleteAccount(id, subscription_id).subscribe(() => {
+                    this.getAllAccounts({
+                        page: this.page,
+                        page_size: PAGE_SIZE,
+                        search: this.searchText
+                    });
+                    this.toast.success(
+                        this.translation.translate('Crm.AccountMessage.DeletedMessage')
+                    );
+                });
+            }
+        });
+    }
+
+    /** filtering accounts */
+    onSearchOptionChange(event, filterBy: string) {
+        if (filterBy === 'industry') {
+            this.filterByIndustries = event.value;
+            this.getAllAccounts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+        if (filterBy === 'size') {
+            this.filterBySizeId = event.value;
+            this.getAllAccounts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+        if (filterBy === 'status') {
+            this.filterByStatus = event.value;
+            this.getAllAccounts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+        if (filterBy === 'priority') {
+            this.filterByPriority = event.value;
+            this.getAllAccounts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+        if (filterBy === 'source') {
+            this.filterBySource = event.value;
+            this.getAllAccounts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+    }
+
+    /** Function to execute on location select */
+    handleAddressChange(event) {
+        this.filterByLocation = event.formatted_address;
+        this.getAllAccounts({
+            page: this.page,
+            page_size: PAGE_SIZE
+        });
+    }
+
+    /** Location filter while keyup */
+    locationSearch(event) {
+        if (event.target.value.length === 0) {
+            this.filterByLocation = '';
+            this.getAllAccounts({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+    }
+
+    /** Function to clear all filters */
+    clearFilters() {
+        this.filterBySizeId = [];
+        this.filterByIndustries = [];
+        this.filterByPriority = [];
+        this.filterBySource = [];
+        this.filterByStatus = [];
+        this.searchText = '';
+        this.filterByLocation = '';
+        this.searchLocationText = '';
+        this.getAllAccounts({
+            page: this.page,
+            page_size: PAGE_SIZE
+        });
+    }
+
+    /** Function to call account geography */
+    private getAccountGeography() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'accounts_geography')
+            .subscribe(response => {
+                this.accountGeography = response;
+            });
+    }
+
+    getUserAccountInfo(account: UserAccount): { message: string; iconClass: string } {
+        if (account.signed_up_at !== null) {
+            if (account.unsubscribed_at === null) {
+                return { message: 'Paid Customer', iconClass: 'fas fa-dollar-sign money-icon' };
+            } else {
+                return {
+                    message: 'Old Customer',
+                    iconClass: 'fas fa-exclamation-triangle text-danger'
+                };
+            }
+        } else if (account.child_subscription_id !== null) {
+            return {
+                message: 'Account with existing subscription',
+                iconClass: 'fas fa-link account-link-icon'
+            };
+        }
+        return { message: null, iconClass: null };
+    }
+
+    formatMRR(mrrInCents: number) {
+        const mrrInDollars = (mrrInCents / 100).toFixed(2);
+        return '$' + mrrInDollars.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    /** Function to call account activities */
+    private getAccountActivities() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'accounts_last_activities')
+            .subscribe(response => {
+                if (typeof response === 'object' && Object.keys(response).length === 0) {
+                    this.accountActivities = [];
+                } else {
+                    this.accountActivities = response;
+                    this.actionNames = response?.map(action => {
+                        return action?.crm_action?.name;
+                    });
+                }
+            });
+    }
+
+    /** Function to call last invoice */
+    private getAccountLastInvoices() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'accounts_last_invoices')
+            .subscribe(response => {
+                if (typeof response === 'object' && Object.keys(response).length === 0) {
+                    this.accountLastInvoices = [];
+                } else this.accountLastInvoices = response;
+            });
+    }
+
+    /** Function to call account insight */
+    private getAccountInsight() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'accounts_insights')
+            .subscribe(response => {
+                if (typeof response === 'object' && Object.keys(response).length === 0) {
+                    this.accountInsight = [];
+                } else this.accountInsight = response;
+            });
+    }
+
+    getCountryFromLocation(location: string): string {
+        const parts = location?.split(',') || [];
+        return parts[parts.length - 1]?.trim() || '';
+    }
+
+    getAccountLogo(url: string) {
+        if (url) {
+            return this.logoCacheService.getLogo(
+                `https://logo.clearbit.com/${url?.split('.')[1]}.${
+                    url?.split('.')[2]?.split('/')[0]
+                }`
+            );
+        }
+
+        return '';
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,75 @@
+<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>Action: {{ isLoading ? '' : data?.name ? data?.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" *ngIf="!isLoading">
+  <form [formGroup]="form" (ngSubmit)="onSave()">
+    <div class="row">
+      <div class="col-12 col-md-3">
+        <pw-input-container [label]="'Crm.Settings.Name' | transloco" name="name"
+          [errorMsg]="'Crm.Settings.NameFieldErrorMessage' | transloco">
+          <input type="text" class="form-control" formControlName="name" id="name"
+            [ngClass]="{ 'is-invalid': submitted && f['name'].errors }" />
+        </pw-input-container>
+      </div>
+      <div class="col-12 col-sm-4 col-md-2">
+         <label class="info-circle mb-2">{{ 'Crm.Settings.TargetWeek' | transloco }} <span
+            class="tooltiptext gradient-custom-branding">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>
+        </label>
+        <select formControlName="target_week" class="form-control form-select"
+          [ngClass]="{ 'is-invalid': submitted && f['target_week'].errors }">
+          <option *ngFor="let option of targetWeek" [value]="option">{{ option }}</option>
+        </select>
+        <div class="danger" *ngIf="
+                        form.get('target_week').touched && form.get('target_week')?.errors?.required
+                    ">
+          <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-4 col-md-2">
+        <label class="info-circle mb-2">{{ 'Crm.Settings.TargetWeekMin' | transloco }} <span
+            class="tooltiptext gradient-custom-branding">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>
+        </label>
+        <select formControlName="target_week_min" class="form-control form-select"
+          [ngClass]="{ 'is-invalid': submitted && f['target_week_min'].errors }">
+          <option *ngFor="let option of targetWeekMin" [value]="option"> {{ option }} </option>
+        </select>
+        <div class="danger" *ngIf="
+                        form.get('target_week_min').touched &&
+                        form.get('target_week_min')?.errors?.required
+                    ">
+          <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-4 col-md-2">
+        <pw-input-container [showTooltip]="true" [tooltipText]="'Crm.Settings.Tooltip.PreviousAction' | transloco"
+          [label]="'Crm.Settings.PreviousAction' | transloco" name="previous_action_id"
+          *ngIf="actions$ | async as actions">
+          <p-dropdown [options]="actions['crm_actions']" formControlName="previous_action_id" optionLabel="name"
+            [showClear]="true" placeholder="Select a PreviousAction"></p-dropdown>
+        </pw-input-container>
+      </div>
+      <div class="col-md-2 col-lg-2 pe-0 mx-2">
+        <div class="mb-3">
+          <label class="info-circle mb-2">{{ 'Crm.Settings.Visible' | transloco }} <span
+              class="tooltiptext gradient-custom-branding">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>
+          </label>
+          <ui-switch checked class="d-block" (change)="onChange($event)" name="visible" formControlName="visible">
+          </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>

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

@@ -0,0 +1,3 @@
+.vertical-bottom {
+    vertical-align: text-bottom;
+}

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

@@ -0,0 +1,123 @@
+// import { TestBed } from '@angular/core/testing';
+// import { byText } from '@ngneat/spectator';
+// import { SmartCrmSettingsDetailsComponent } from '@smart-crm/private/components/smart-crm-configuration/smart-crm-actions/smart-crm-actions-details/smart-crm-actions-details.component';
+// import { MockProvider } from 'ng-mocks';
+// import { of } from 'rxjs';
+//
+// import { AppModule } from '@app/app.module';
+// import { SmartCrmPrivateModule } from '@app/modules/products/smart-crm/private/smart-crm-private.module';
+// import { CrmService } from '@app/modules/products/smart-crm/shared/services/crm.service';
+// import { PermissionService } from '@app/shared/services/permission.service';
+// import { UserService } from '@app/shared/services/user.service';
+// import { SharedModule } from '@app/shared/shared.module';
+//
+// import { DEFAULT_USER } from '@testing/data/database';
+// import { TestHelper } from '@testing/test-helper';
+//
+// class UserServiceMock {
+//     getUserState() {
+//         return of({ currentUser: DEFAULT_USER });
+//     }
+// }
+// describe('SmartCrmSettingsDetailsComponent', () => {
+//     const createComponent = TestHelper.createComponentFactory({
+//         component: SmartCrmSettingsDetailsComponent,
+//         imports: [AppModule, 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
+//                     }),
+//                 updateActionCon: () => of({}),
+//                 getAction: () =>
+//                     of({
+//                         id: 9,
+//                         name: 'test',
+//                         subscription_id: 31,
+//                         target_week_min: 2,
+//                         target_week: 3,
+//                         visible: true,
+//                         previous_action_id: null,
+//                         contact_required: false
+//                     }),
+//                 postNewAction: () => 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, 'postNewAction').and.callThrough();
+//         spectator.typeInElement('test', 'input[formControlName="name"]');
+//         spectator.selectOption(
+//             'select[formControlName="target_week"]',
+//             // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+//             spectator.query(byText('1')) as HTMLOptionElement
+//         );
+//         spectator.selectOption(
+//             'select[formControlName="target_week_min"]',
+//             // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+//             spectator.query(byText('1')) as HTMLOptionElement
+//         );
+//         spectator.selectOption(
+//             'select[formControlName="previous_action_id"]',
+//             // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+//             spectator.query(byText('test')) as HTMLOptionElement
+//         );
+//         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, 'updateActionCon').and.callThrough();
+//         spectator.typeInElement('test2', 'input[formControlName="name"]');
+//         spectator.click('button[type="submit"]');
+//         expect(spy).toHaveBeenCalledTimes(1);
+//     });
+// });