@posiwise/smart-crm 0.0.19 → 0.0.21

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

@@ -0,0 +1,187 @@
+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 swal from 'sweetalert2';
+
+import { PAGE_SIZE } from '@posiwise/common-utilities';
+import {
+    CrmNewsLetter,
+    CrmNewsLetterResponse
+} from '../../../../shared/interface/crm-newsletter.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { Paging } from '@posiwise/common-utilities';
+import { Plotly } from '@posiwise/common-utilities';
+import { Subscription } from '@posiwise/common-utilities';
+import { User } from '@posiwise/common-utilities';
+import { HelperService } from '@posiwise/helper-service';
+
+@Component({
+    selector: 'pw-smart-crm-communications',
+    templateUrl: './smart-crm-marketing-list.component.html',
+    styleUrls: ['./smart-crm-marketing-list.component.scss']
+})
+export class SmartCrmCommunicationsComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    subscriptionId: number;
+
+    searchText = '';
+
+    data: CrmNewsLetterResponse = {
+        crm_newsletters: [],
+        object_count: 0,
+        unfiltered_count: 0
+    };
+
+    isLoaded = false;
+
+    loading = true;
+
+    user: User;
+
+    communicationsInsight;
+
+    communicationEngagement: Plotly.Figure;
+
+    private page = 1;
+
+    subscription: Subscription;
+
+    routers = ROUTERS;
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService,
+        private cdr: ChangeDetectorRef
+    ) {
+        super(injector);
+    }
+
+    ngOnInit() {
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.getUserInfo();
+            }
+        });
+    }
+
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+
+    onLazyLoad(event: LazyLoadEvent) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getAllCommunications({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+    }
+
+    // /** Function to get user info */
+    private getUserInfo() {
+        this.userStore().subscribe(user => {
+            if (user) {
+                this.user = user;
+                if (this.permissionService.isGranted('Pages.Beta')) {
+                    this.getCommunicationInsight();
+                    this.getCommunicationEngagement();
+                }
+            }
+        });
+    }
+
+    /** Function to call all communications */
+    private getAllCommunications(paging: Paging) {
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAllCrmNewsletters(this.subscriptionId, paging)
+                    .subscribe(res => {
+                        this.data = res;
+                    })
+                    .add(() => {
+                        this.isLoaded = true;
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    /** Function to delete communication */
+    onDelete(id: number) {
+        HelperService.raiseDeletePopup().then(res => {
+            if (res.value) {
+                this.crmService.deleteCrmNewsletter(this.subscription?.id, id).subscribe(() => {
+                    this.getAllCommunications({
+                        page: this.page,
+                        page_size: PAGE_SIZE,
+                        search: this.searchText
+                    });
+                    this.toast.success(
+                        this.translation.translate('Crm.CommunicationsMessage.DeletedMessage')
+                    );
+                });
+            }
+        });
+    }
+
+    /** Function to send mail */
+    sendTestEmail(item: CrmNewsLetter) {
+        swal.fire({
+            title: 'Send Email',
+            text: `A test email will be sent to "${this.user.email}". Do you want to continue?`,
+            showCancelButton: true,
+            reverseButtons: true,
+            icon: 'warning'
+        }).then(sendOk => {
+            if (sendOk.value === true) {
+                this.crmService.sendTestMail(this.subscription?.id, item.id).subscribe({
+                    next: response => {
+                        if (response) {
+                            this.toast.success(
+                                this.translation.translate('Newsletter test email sent correctly')
+                            );
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    /** Function to call communication insight */
+    private getCommunicationInsight() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'communications_insights')
+            .subscribe(response => {
+                this.communicationsInsight = response;
+            });
+    }
+
+    /** Function to call communication engagement */
+    private getCommunicationEngagement() {
+        this.crmService
+            .getCrmAnalytics(this.subscription?.id, 'communications_engagement')
+            .subscribe(response => {
+                this.communicationEngagement = response;
+            });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

package/src/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-view-details/smart-crm-marketing-view-details.component.html

@@ -0,0 +1,33 @@
+<div class="container-fluid pw-tab overflow-hidden" *ngIf="communicationDetails">
+  <div class="card pb-0">
+    <div class="card-body p-4">
+      <div class="row mb-3">
+        <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2">
+          <div class="d-flex flex-wrap mb-3 mb-md-0">
+            <span [ngClass]="communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'" class="me-2 mb-2 mb-md-0">
+              {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}
+            </span>
+            <span [ngClass]="communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'" class="me-2 mb-2 mb-md-0">
+              {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}
+            </span>
+          </div>
+          <div class="d-flex flex-wrap mb-3 mb-md-0">
+            <span class="badge bg-blue-grey mb-2 me-2 mb-md-0">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>
+            <span class="badge bg-grey mb-2 mb-md-0">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 mb-3 ms-2">
+          <span><i class="fas fa-map-marker-alt"></i> <span class="ms-2">{{ communicationDetails?.location || 'Not set' }}</span></span>
+        </div>
+        <div class="col-12 mb-3 ms-2">
+          <h5>{{ communicationDetails?.title }}</h5>
+        </div>
+        <div class="col-12 ms-2">
+          <p [innerHTML]="communicationDetails?.body"></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-view-details/smart-crm-marketing-view-details.component.scss

@@ -0,0 +1,82 @@
+.badge-success,
+.badge-danger {
+    padding: 0.5rem 1rem; /* Adjust padding as needed */
+    border: 1px solid black; /* Set border color to black */
+    font-size: 1rem;
+    display: inline-block;
+    text-align: center;
+}
+
+.badge-success {
+    background-color: green;
+    color: white;
+}
+
+.badge-danger {
+    background-color: red;
+    color: white;
+}
+
+.date-span {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    border: 1px solid black; /* Set border color to black */
+    display: inline-block;
+    text-align: center;
+}
+
+.light-gray {
+    background-color: lightgray;
+    color: white;
+}
+
+.gray {
+    background-color: gray;
+    color: white;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+h4,
+h5 {
+    font-weight: bold;
+    margin-bottom: 0.5rem; /* Adjust margin for spacing */
+}
+
+p {
+    margin-bottom: 1rem; /* Adjust margin for spacing */
+}
+
+.d-flex {
+    display: flex;
+    align-items: center;
+}
+
+.me-3 {
+    margin-right: 1rem; /* Increased margin for spacing between elements */
+}
+
+.container-fluid {
+    padding: 0;
+}
+
+.mb-3 {
+    margin-bottom: 1rem;
+}
+
+.mb-2 {
+    margin-bottom: 0.5rem; /* Smaller margin for closer spacing */
+}
+
+.justify-content-between {
+    justify-content: space-between;
+}
+
+.align-items-center {
+    align-items: center;
+}
+.button-width {
+    width: 100px; /* Set a fixed width for the buttons */
+}

package/src/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-view-details/smart-crm-marketing-view-details.component.spec.ts

@@ -0,0 +1,63 @@
+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 { SmartCrmCommunicationViewDetailsComponent } from './smart-crm-marketing-view-details.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmCommunicationViewDetailsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmCommunicationViewDetailsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                },
+                isGranted: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getCrmNewsletter: () =>
+                    of({
+                        id: 1,
+                        title: 'test',
+                        body: 'test',
+                        is_sent: false,
+                        is_pushed: true,
+                        send_until: '2021-11-19',
+                        subscription_id: 20,
+                        owner_id: 1,
+                        location: 'test',
+                        send_at: '2021-11-14'
+                    })
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            params: { Id: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+});

package/src/lib/private/components/smart-crm-marketing/smart-crm-marketing-list/smart-crm-marketing-view-details/smart-crm-marketing-view-details.component.ts

@@ -0,0 +1,62 @@
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { CrmService } from '@posiwise/smart-crm-shared';
+
+import { CrmNewsLetter } from '../../../../../shared/interface/crm-newsletter.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+
+@Component({
+    selector: 'pw-smart-crm-communication-view-details',
+    templateUrl: './smart-crm-marketing-view-details.component.html',
+    styleUrls: ['./smart-crm-marketing-view-details.component.scss']
+})
+export class SmartCrmCommunicationViewDetailsComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy
+{
+    id: number;
+
+    isLoaded = false;
+
+    communicationDetails: CrmNewsLetter;
+    subscriptionId: number;
+    constructor(
+        injector: Injector,
+        private crmService: CrmService
+    ) {
+        super(injector);
+    }
+
+    ngOnInit(): void {
+        this.route.params.subscribe(data => {
+            this.id = Number(data['Id']);
+            if (this.id) {
+                this.getSubscription();
+            }
+        });
+    }
+    /**subscriptionId */
+    getSubscription() {
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            if (this.subscriptionId) {
+                this.getCommunicationDetails(this.id);
+            }
+        });
+    }
+
+    /** Function to get edit communication details */
+    private getCommunicationDetails(id: number) {
+        this.crmService
+            .getCrmNewsletter(this.subscriptionId, id)
+            .subscribe(response => {
+                this.communicationDetails = response;
+            })
+            .add(() => {
+                this.isLoaded = true;
+            });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1,27 @@
+<div class="row">
+  <div class="col-12 d-flex">
+    <a href="javascript:void(0)"
+      (click)="back()"
+      class="previous"><i class="fa fa-arrow-alt-circle-left" aria-hidden="true"></i></a>
+    <h2 class="mt-3">Your Marketing Email at a Glance</h2>
+  </div>
+</div>
+
+<ul ngbNav
+  #nav="ngbNav"
+  class="nav-tabs">
+  <li [ngbNavItem]="1">
+    <a ngbNavLink>View</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-communication-view-details></pw-smart-crm-communication-view-details>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="2">
+    <a ngbNavLink>Recipients</a>
+    <ng-template ngbNavContent>
+      <pw-smart-crm-marketing-users-list></pw-smart-crm-marketing-users-list>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav"></div>

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

@@ -0,0 +1,3 @@
+.actions-column {
+    min-width: 170px;
+}

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

@@ -0,0 +1,28 @@
+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 { TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { SmartCrmMarketingViewComponent } from './smart-crm-marketing.component';
+
+describe('SmartCrmMarketingViewComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmMarketingViewComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            })
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+    it('should create', async () => {
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,13 @@
+import { Component, Injector } from '@angular/core';
+
+import { AppBaseComponent } from '@posiwise/app-base-component';
+
+@Component({
+    selector: 'pw-smart-crm-marketing-view',
+    templateUrl: './smart-crm-marketing.component.html'
+})
+export class SmartCrmMarketingViewComponent extends AppBaseComponent {
+    constructor(injector: Injector) {
+        super(injector);
+    }
+}

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

@@ -0,0 +1,75 @@
+<div class="w-100 text-center mt-3">
+  <ng-template [ngIf]="!isLoaded">
+    <p-progressSpinner strokeWidth="2"></p-progressSpinner>
+  </ng-template>
+</div>
+
+<div class="row mb-4" *ngIf="isLoaded">
+  <div class="col-12 col-sm-4">
+    <select class="form-select" (change)="onChangeCategory($event.target.value)">
+      <option *ngFor="let option of categories" [value]="option.id">{{ option.name }}</option>
+    </select>
+  </div>
+  <div class="col-12 col-sm-8 mt-2 mt-sm-0 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>
+<div *ngIf="isLoaded && !hasOpportunities()">
+  <pw-no-data [withImage]="true" [message]="'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco">
+  </pw-no-data>
+</div>
+<div *ngIf="isLoaded && hasOpportunities()" class="list-container d-flex" cdkDropList [cdkDropListData]="opportunitiesGroup" (cdkDropListDropped)="dropGroup($event)">
+  <div cdkDropListGroup class="opportunities-container main-div crm-board-primary" [class.dynamic-columns-wrapper]="group.stage.collapsed" [style.--border-color]="group.stage.color_code" *ngFor="let group of opportunitiesGroup; let i = index" cdkDrag [cdkDragData]="group">
+    <div class="opportunities-board-title d-flex align-items-center py-1">
+      <span class="collapse-column-toggle">
+        <i class="fas" [ngClass]="{'fa-angle-right': !group.stage.collapsed, 'fa-angle-down': group.stage.collapsed}" (click)="toggleColumn($event, group)" aria-hidden="true"></i>
+      </span>
+      <p class="stage-name mb-0 py-2 ps-4">
+        <span class="badge rounded-pill text-white px-3" [style.--background-color]="group.stage.color_code">{{ group.stage.name }}</span>
+      </p>
+      <span class="ms-auto me-4 add-opportunity-icon">
+        <a class="text-secondary" [routerLink]="['/' + subscription?.slug + routers.opportunityAdd]" [queryParams]="{ stage_id: group?.stage?.id, category: group.stage.crm_opportunity_category_ids }"><i class="fa fa-plus-square" aria-hidden="true"></i></a>
+      </span>
+    </div>
+    <div class="opportunities-list items-container" cdkDropList [id]="group.stage.name" [cdkDropListData]="group.opportunities" (cdkDropListDropped)="dropItem($event)" [cdkDropListConnectedTo]="getConnectedList()" (scroll)="onColumnScroll(i)">
+      <div *ngFor="let item of group.opportunities; let idx = index">
+        <div class="opportunities-box mb-3" cdkDrag [cdkDragData]="item">
+          <span ngbTooltip="Edit" class="float-end edit-button" [routerLink]="['/' + subscription?.slug + routers.opportunities, item.id]">
+            <i class="fa fa-edit edit-icon" aria-hidden="true"></i>
+          </span>
+          <p class="fw-bold mb-1">{{ item.title }}</p>
+          <a class="mb-1" [routerLink]="['/' + subscription?.slug + routers.accountInfo, item?.crm_account_id ]">{{ item?.crm_account?.name }}</a>
+          <p class="mb-1">{{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR</p>
+          <a *ngIf="item?.owner[0]?.user_avatar" [routerLink]="['/members', item?.owner[0]?.slug]">
+            <img alt="member image" [src]="item?.owner[0]?.user_avatar[0]?.url" [width]="'30'" class="squared_logo float-end" [height]="'30'" onerror="this.onerror=null;this.src='assets/img/icons/male.png';" />
+          </a>
+          <p class="mb-1">{{ item.starting_at | dateFormat }}</p>
+          <p class="mb-1 badge bg-warning">{{ item?.crm_opportunity_stage?.name }}</p>
+        </div>
+        <div class="w-100 text-center mt-3" *ngIf="(idx + 1) % 5 === 0 && group.isLoadingMore">
+          <div class="custom-loader">
+            <p-progressSpinner strokeWidth="2"></p-progressSpinner>
+            <div class="loading-text">Loading opportunities...</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer footer-list">
+      <div class="footer-item">
+        <span class="footer-label">Total One-Time:</span>
+        <span class="footer-value">{{ group.totals.oneTime / 100 | currency }}</span>
+      </div>
+      <div class="footer-item">
+        <span class="footer-label">Total MRR:</span>
+        <span class="footer-value">{{ group.totals.mrr / 100 | currency }}</span>
+      </div>
+      <div class="footer-item">
+        <span class="footer-label">Total Count:</span>
+        <span class="footer-value">{{ group.totals.count }}</span>
+      </div>
+    </div>
+  </div>
+</div>