@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,204 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <a class="btn btn-sm btn-outline-primary float-end" data-cy="add-opportunities"
+      [routerLink]="['/' + subscription?.slug + routers.opportunityAdd]">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | 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_opportunities" [paginator]="data.object_count !== 0" [lazy]="true" [rows]="PAGE_SIZE"
+        class="contact-table" [totalRecords]="data.object_count" [loading]="loading" filterDelay="1000"
+        (onLazyLoad)="onLazyLoad($event)" [customSort]="true">
+        <ng-template pTemplate="caption">
+          <div class="row">
+            <div class="col-sm-3 col-6 mb-2 mb-sm-0">
+                <p-multiSelect placeholder="Select Stage" [options]="searchStages" [(ngModel)]="filterByStages"
+                    (onChange)="onSearchOptionChange($event, 'stage')" [filter]="false" [showHeader]="true"
+                    [showToggleAll]="true" appendTo="body">
+                </p-multiSelect>
+            </div>
+            <div class="col-sm-3 col-6">
+                <p-multiSelect placeholder="Select Category" [options]="categories" [(ngModel)]="filterByCategories"
+                    (onChange)="onSearchOptionChange($event, 'category')" [filter]="false" [showHeader]="true"
+                    [showToggleAll]="true" appendTo="body">
+                </p-multiSelect>
+            </div>
+            <!-- Empty column occupying the same space -->
+            <div class="col-sm-3 col-6"></div>
+            <div class="col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end">
+                <div class="d-flex w-100">
+                  <i class="fa fa-search mt-2 me-2" aria-hidden="true"></i>
+                  <input type="text" [(ngModel)]="searchText" pInputText placeholder="Search opportunities.."
+                      (input)="dt.filterGlobal($event.target.value, 'contains')" class="form-control search-opportunities-search-input" />
+                </div>
+            </div>
+        </div>
+          <div class="search-filter">
+            <a class="mt-3 ms-3 text-start text-primary" (click)="clearFilters()">Clear all filters</a>
+          </div>
+        </ng-template>
+        <ng-template pTemplate="header">
+          <tr>
+            <th scope="true" pSortableColumn="title"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon
+                field="title"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="crm_contact_id"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}
+              <p-sortIcon field="crm_contact_id"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="crm_account_id"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}
+              <p-sortIcon field="crm_account_id"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="one_time_amount"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco
+              }} <p-sortIcon field="one_time_amount"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="win_chances"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}
+              <p-sortIcon field="win_chances"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="monthly_amount"> {{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco
+              }} <p-sortIcon field="monthly_amount"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="crm_opportunity_stage_id"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco
+              }} <p-sortIcon field="crm_opportunity_stage_id"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="crm_opportunity_category_ids"> {{ 'Crm.OpportunitiesMessage.Categories' |
+              transloco }} <p-sortIcon field="crm_opportunity_category_ids"></p-sortIcon>
+            </th>
+            <th scope="true" pSortableColumn="starting_at"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}
+              <p-sortIcon field="starting_at"></p-sortIcon>
+            </th>
+            <th class="actions-list-two" scope="true"> {{ 'Label.Actions' | transloco }} </th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-opportunities>
+          <tr>
+            <td data-head="Title">
+              <a *ngIf="
+                                    hasAccess ||
+                                    opportunities?.owner_id === userId ||
+                                    checkPermission('Pages.Product.CRM.Role.Admin')
+                                " [routerLink]="[
+                                    '/' + subscription?.slug + routers.opportunityInfo,
+                                    opportunities.id
+                                ]">
+                <span>{{ opportunities?.title | textTruncate: 15 }} </span>
+              </a>
+              <a *ngIf="
+                                    !hasAccess &&
+                                    opportunities?.owner_id !== userId &&
+                                    checkPermission('Pages.Product.CRM.Role.Admin')
+                                "> {{ opportunities?.title | textTruncate: 15 }} </a>
+            </td>
+            <td class="contactname" data-head="Crm Contact">
+              <a *ngIf="opportunities?.crm_contact_id" [routerLink]="[
+                                    '/' + subscription?.slug + routers.contactInfo,
+                                    opportunities.crm_contact_id.id
+                                ]">{{ opportunities.crm_contact?.first_name + ' ' +
+                opportunities.crm_contact?.last_name }}</a>
+            </td>
+            <td data-head="Account">
+              <a [routerLink]="[
+                                    '/' + subscription?.slug + routers.accountInfo,
+                                    opportunities.crm_account.id
+                                ]">{{ opportunities.crm_account.name }}</a>
+            </td>
+            <td data-head="Amount"> {{ opportunities.one_time_amount / 100 | currency }} </td>
+            <td data-head="WinChance"> {{ opportunities.win_chances / 100 | percent }} <span class="text-danger"
+                *ngIf="opportunities.cancelled">!Cancelled!</span>
+            </td>
+            <td data-head="Monthly Amount"> {{ opportunities.monthly_amount / 100 | currency }} </td>
+            <td data-head="Stage">
+              <span class="badge" [appDynamicBadge]="{
+                                    itemsArray: stages,
+                                    item: opportunities?.crm_opportunity_stage?.name
+                                }" color="cyan">{{ opportunities?.crm_opportunity_stage?.name }}</span>
+            </td>
+            <td data-head="Categories">
+              <span *ngFor="let category of opportunities?.crm_opportunity_categories" class="badge ms-1"
+                [appDynamicBadge]="{ itemsArray: categories, item: category?.name }" color="blue-grey">{{ category?.name
+                }}</span>
+            </td>
+            <td data-head="Starting At"> {{ opportunities.starting_at | dateFormat }} </td>
+            <td data-head="Action">
+              <ul class="list-unstyled list-inline">
+                <ng-container *ngIf="hasAccess || opportunities?.owner_id === userId">
+                  <ng-container *rbacAllow="'SubscriptionAdmin'">
+                    <li ngbTooltip="Edit" class="me-2 me-sm-3" [routerLink]="[
+                                                '/' + subscription?.slug + routers.opportunities,
+                                                opportunities.id
+                                            ]">
+                      <i class="fa fa-edit edit-icon" aria-hidden="true"></i>
+                    </li>
+                  </ng-container>
+                  <ng-container *rbacAllow="'SubscriptionAdmin'">
+                    <li ngbTooltip="Delete" class="me-2 me-sm-3">
+                      <i class="fa fa-trash delete-icon" (click)="onDelete(opportunities.id)" aria-hidden="true"></i>
+                    </li>
+                  </ng-container>
+                </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.OpportunitiesMessage.NoOpportunitiesMessage' | transloco">
+  </pw-no-data>
+</div>
+<ng-container *rbacAllow="'Pages.Beta'">
+  <div class="row mt-5" *ngIf="data.unfiltered_count !== 0 && isLoaded">
+    <!-- Drill Down -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Drill Down</h5>
+      <div class="primeng-datatable-container table-responsive" *ngIf="opportunitiesInsight?.length">
+        <p-table class="table" #dt [value]="opportunitiesInsight" [paginator]="opportunitiesInsight?.length !== 0" [rows]="PAGE_SIZE"
+          [totalRecords]="opportunitiesInsight.length" [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">{{ 'Crm.OpportunitiesMessage.Title' | transloco }}</th>
+              <th scope="true">{{ 'Crm.OpportunitiesMessage.Value' | transloco }}</th>
+              <th scope="true"> {{ 'Crm.OpportunitiesMessage.Reason' | transloco }} </th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body" let-insight>
+            <tr>
+              <td data-head="Title"> {{ insight.title }} </td>
+              <td data-head="Value"> {{ insight.value }} </td>
+              <td data-head="Reason"> {{ insight.reason }} </td>
+            </tr>
+          </ng-template>
+        </p-table>
+        <span class="total-records-count" *ngIf="opportunitiesInsight?.length !== 0">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>
+      </div>
+      <div *ngIf="opportunitiesInsight?.length === 0">
+        <pw-no-data [withImage]="true" [message]="'Crm.OpportunitiesMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+    <!-- Geography -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Geography</h5>
+      <div>
+        <ng-template [ngIf]="opportunitiesGeography">
+          <plotly-plot [data]="opportunitiesGeography?.data" [layout]="opportunitiesGeography?.layout">
+          </plotly-plot>
+        </ng-template>
+      </div>
+      <div *ngIf="!opportunitiesGeography">
+        <pw-no-data [withImage]="true" [message]="'Crm.OpportunitiesMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+  </div>
+</ng-container>

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

@@ -0,0 +1,11 @@
+@import 'variables';
+
+@media (min-width: 640px) and (max-width: 768px) {
+    .primeng-datatable-container tr td {
+        width: 350px;
+    }
+}
+
+.search-opportunities-search-input {
+    background-color: #fff !important;
+}

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

@@ -0,0 +1,123 @@
+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 { MockDirective, MockProvider } from 'ng-mocks';
+import { GooglePlaceDirective } from 'ngx-google-places-autocomplete';
+import { of } from 'rxjs';
+import Swal from 'sweetalert2';
+import { SmartCrmPrivateModule } from '../../../smart-crm-private.module';
+import { SmartCrmOpportunitiesListComponent } from './smart-crm-opportunities-list.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmOpportunitiesListComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmOpportunitiesListComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        declarations: [MockDirective(GooglePlaceDirective)],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllOpportunities: () =>
+                    of({
+                        crm_opportunities: [
+                            {
+                                id: 7,
+                                title: 'test',
+                                crm_contact_id: 37,
+                                description: 'test',
+                                one_time_amount: 100,
+                                win_chances: 10,
+                                starting_at: '2021-10-06T00:00:00.000+00:00',
+                                monthly_amount: 100,
+                                crm_account_id: 7,
+                                owner_id: 1,
+                                crm_opportunity_stage_id: 14,
+                                crm_contact: {
+                                    id: 37,
+                                    first_name: 'test1',
+                                    last_name: 'test'
+                                },
+                                crm_account: {
+                                    id: 7,
+                                    name: 'test'
+                                },
+                                crm_opportunity_stage: {
+                                    id: 14,
+                                    name: 'test'
+                                },
+                                crm_opportunity_categories: []
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                deleteOpportunities: () => of({}),
+                getAvailableOpportunityStages: () =>
+                    of({
+                        available_crm_opportunity_stages: [
+                            {
+                                id: 14,
+                                name: 'test'
+                            }
+                        ]
+                    }),
+                getAllOpportunityCategories: () =>
+                    of({
+                        crm_opportunity_categories: [
+                            {
+                                id: 7,
+                                name: 'test'
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getCrmAnalytics: () => of({}),
+                getAllStages: () => of({})
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+        [PermissionService.selectedSubscription] = DEFAULT_USER.subscriptions;
+        [PermissionService.selectedProduct] = DEFAULT_USER.subscriptions[0].products;
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+
+    it('should delete account ', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'deleteOpportunities').and.callThrough();
+        spectator.click('tbody tr:first-child .fa-trash');
+        expect(Swal.isVisible()).toBeTruthy();
+        Swal.clickConfirm();
+        await TestHelper.stabilize(spectator);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -0,0 +1,260 @@
+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 } from '@posiwise/common-utilities';
+import { CrmOpportunityResponse } from '../../../../shared/interface/crm-opportunity.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { Paging, Plotly, Subscription, User } from '@posiwise/common-utilities';
+import { HelperService } from '@posiwise/helper-service';
+import { ProductService } from '@posiwise/common-services';
+import { OpportunityInsight } from 'libs/smart-crm/src/lib/shared/interface/smart-crm-module.interface';
+
+@Component({
+    selector: 'pw-smart-crm-opportunities-list',
+    templateUrl: './smart-crm-opportunities-list.component.html',
+    styleUrls: ['./smart-crm-opportunities-list.component.scss']
+})
+export class SmartCrmOpportunitiesListComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    subscription: Subscription;
+
+    subscriptionId: number;
+
+    hasAccess = false;
+
+    searchText = '';
+
+    data: CrmOpportunityResponse = {
+        crm_opportunities: [],
+        object_count: 0,
+        unfiltered_count: 0
+    };
+
+    id = '';
+
+    isLoaded = false;
+
+    loading = true;
+
+    opportunitiesInsight: OpportunityInsight[];
+
+    opportunitiesGeography: Plotly.Figure;
+
+    user: User;
+
+    userId: number;
+
+    searchStages: object[] = [];
+    filterByStages: string[] = [];
+    filterByCategories = [];
+    searchCategories: object[] = [];
+
+    page = 1;
+
+    stages = [];
+
+    categories = [];
+
+    routers = ROUTERS;
+
+    constructor(
+        private crmService: CrmService,
+        injector: Injector,
+        private cdr: ChangeDetectorRef,
+        private productService: ProductService
+    ) {
+        super(injector);
+    }
+
+    ngOnInit(): void {
+        this.getAllStages();
+        this.getUserSubscription().subscribe(subscription => {
+            this.subscription = subscription;
+            if (this.subscription?.id) {
+                this.hasAccess = this.hasAdminAccess(this.subscription.id);
+                this.getUserInfo();
+                this.getAvailableOpportunityStages();
+                this.getAllOpportunityCategories();
+            }
+        });
+    }
+
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+
+    onLazyLoad(event: LazyLoadEvent) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getAllOpportunities({
+            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.user = user;
+                this.userId = user.id;
+                if (this.permissionService.isGranted('Pages.Beta')) {
+                    this.getOpportunitiesInsight();
+                    this.getContactGeography();
+                }
+            }
+        });
+    }
+
+    private getAllStages(paging: Paging = {}) {
+        this.getUserSubscriptionId().subscribe(res => {
+            if (res) {
+                this.subscriptionId = res;
+                this.crmService
+                    .getAllStages(this.subscriptionId, paging)
+                    .subscribe(response => {
+                        console.log(response?.crm_opportunity_stages);
+                        this.searchStages = response?.crm_opportunity_stages?.map(element => {
+                            return {
+                                value: element.id,
+                                label: element.name || ''
+                            };
+                        });
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    onSearchOptionChange(event, filterBy: string) {
+        if (filterBy === 'stage') {
+            this.filterByStages = event.value;
+            this.getAllOpportunities({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+        if (filterBy === 'category') {
+            this.filterByCategories = event.value;
+            this.getAllOpportunities({
+                page: this.page,
+                page_size: PAGE_SIZE
+            });
+        }
+    }
+
+    clearFilters() {
+        this.filterByCategories = [];
+        this.filterByStages = [];
+        this.searchText = '';
+        this.getAllOpportunities({
+            page: this.page,
+            page_size: PAGE_SIZE
+        });
+    }
+
+    private getAllOpportunities(paging?: Paging) {
+        this.getUserSubscriptionId().subscribe(subscriptionId => {
+            this.subscriptionId = subscriptionId;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAllOpportunities(
+                        this.subscriptionId,
+                        paging,
+                        this.filterByCategories.join() || '',
+                        this.filterByStages.join() || ''
+                    )
+                    .subscribe(response => {
+                        this.data = response;
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    onDelete(id: number) {
+        HelperService.raiseDeletePopup().then(resp => {
+            if (resp.value) {
+                this.crmService.deleteOpportunities(this.subscription?.id, id).subscribe(() => {
+                    this.getAllOpportunities({
+                        page: this.page,
+                        page_size: PAGE_SIZE,
+                        search: this.searchText
+                    });
+                    this.toast.success(
+                        this.translation.translate('Crm.OpportunitiesMessage.DeletedMessage')
+                    );
+                });
+            }
+        });
+    }
+
+    /** Function to get available opportunities */
+    private getAvailableOpportunityStages() {
+        this.crmService.getAvailableOpportunityStages(this.subscription?.id).subscribe(response => {
+            this.stages = response?.available_crm_opportunity_stages?.map(stage => {
+                return stage?.name;
+            });
+        });
+    }
+
+    /** Function to get all categories */
+    private getAllOpportunityCategories() {
+        this.crmService.getAllOpportunityCategories(this.subscription?.id).subscribe(response => {
+            this.categories = response?.crm_opportunity_categories?.map(category => {
+                return {
+                    value: category.id,
+                    label: category.name
+                };
+            });
+        });
+    }
+
+    /** Function to call opportunities insight */
+    private getOpportunitiesInsight() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'opportunities_insights')
+            .subscribe(response => {
+                if (typeof response === 'object' && Object.keys(response).length === 0) {
+                    this.opportunitiesInsight = [];
+                } else this.opportunitiesInsight = response;
+            });
+    }
+
+    /** Function to call contact geography */
+    private getContactGeography() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'opportunities_geography')
+            .subscribe(response => {
+                this.opportunitiesGeography = response;
+            });
+    }
+
+    checkPermission(permission: string) {
+        return this.permissionService.evaluatePermissions(permission);
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1,25 @@
+<div class="row">
+  <div class="col-12 mb-0">
+    <h2>Opportunities</h2>
+    <p>In this section you can track your business opportunities.</p>
+  </div>
+</div>
+
+<ul ngbNav
+  #nav="ngbNav"
+  class="nav-tabs">
+  <li [ngbNavItem]="1">
+    <a ngbNavLink>List</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-opportunities-list></pw-smart-crm-opportunities-list>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="2">
+    <a ngbNavLink>Board view</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-board></pw-smart-crm-board>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav"></div>

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

@@ -0,0 +1,7 @@
+@import 'variables';
+
+@media (min-width: 640px) and (max-width: 768px) {
+    .primeng-datatable-container tr td {
+        width: 350px;
+    }
+}

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

@@ -0,0 +1,38 @@
+import { CommonServicesModule, PermissionService } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { SmartCrmPrivateModule } from '../../smart-crm-private.module';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { DEFAULT_USER, TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { SmartCrmOpportunitiesComponent } from './smart-crm-opportunities.component';
+import { of } from 'rxjs';
+
+describe('SmartCrmOpportunitiesComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmOpportunitiesComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            })
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+        [PermissionService.selectedSubscription] = DEFAULT_USER.subscriptions;
+        [PermissionService.selectedProduct] = DEFAULT_USER.subscriptions[0].products;
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+});