@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,296 @@
+import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { AppSmartCrm } from '../../../../../shared/models/smart-crm.model';
+import { CrmService } from '@posiwise/smart-crm-shared';
+
+import { CrmNewsLetter } from '../../../../../shared/interface/crm-newsletter.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { User, Product } from '@posiwise/common-utilities';
+import { CommonService } from '@posiwise/common-services';
+import { HelperService } from '@posiwise/helper-service';
+import { ValidateForm } from '@posiwise/utils';
+
+@Component({
+    selector: 'pw-smart-crm-communications-details',
+    templateUrl: './smart-crm-marketing-details.component.html'
+})
+export class SmartCrmCommunicationsDetailsComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy
+{
+    subscriptionId: number;
+
+    hasAccess: boolean;
+
+    form: UntypedFormGroup;
+
+    user: User;
+
+    data: CrmNewsLetter;
+
+    submitted = false;
+    buttonBusy = false;
+
+    crmProduct: Product;
+
+    status = [];
+
+    priority = [];
+
+    source = [];
+
+    organizationSizes = [];
+
+    featureKeys = [];
+
+    labels = [];
+
+    contactSource = [];
+
+    potentials = [
+        { label: 'low', value: 'low' },
+        { label: 'medium', value: 'medium' },
+        { label: 'high', value: 'high' }
+    ];
+
+    allCommunications = [];
+
+    id: number;
+    isLoading = true;
+
+    daysToNewsletterField: boolean;
+
+    userNameSyntax = '{{ @user.share_name }}';
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService,
+        private commonService: CommonService
+    ) {
+        super(injector);
+        this.form = AppSmartCrm.getMarketingForm();
+    }
+
+    ngOnInit(): void {
+        this.route.params.subscribe(data => {
+            this.id = Number(data['Id']);
+            if (!this.id) {
+                this.isLoading = false;
+            }
+        });
+
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            this.getDefaultValues(this.subscriptionId);
+
+            if (this.subscriptionId) {
+                this.getAllCrmProducts();
+                this.accountDefaultValues(this.subscriptionId);
+                this.hasAccess = this.hasAdminAccess(this.subscriptionId);
+                this.form.get('subscription_id').setValue(response);
+                this.getAllCrmNewsletters(this.subscriptionId);
+            }
+        });
+        this.getUserInfo();
+    }
+
+    private getAllCrmNewsletters(id: number) {
+        this.crmService.getAllCrmNewsletters(id).subscribe(res => {
+            if (res.crm_newsletters?.length) {
+                const data = res['crm_newsletters'];
+                this.allCommunications = data.filter(x => x.id !== this.id);
+            }
+        });
+    }
+
+    // /** Function to get user info */
+    private getUserInfo() {
+        this.userStore().subscribe(user => {
+            if (user) {
+                this.form.get('owner_id').setValue(user.id);
+                this.user = user;
+            }
+        });
+    }
+
+    /** Function to get form controls */
+    get f() {
+        return this.form.controls;
+    }
+
+    @ValidateForm('form')
+    onSave() {
+        this.submitted = true;
+        this.buttonBusy = true;
+        const data = { ...this.form.value };
+        data.send_until = HelperService.dateFormat(this.form.get('send_until').value);
+        data.send_at = HelperService.dateFormat(this.form.get('send_at').value);
+        this.submitted = true;
+        const sub$ = this.data?.id
+            ? this.crmService.updateCrmNewsLetter(this.subscriptionId, this.data?.id, data)
+            : this.crmService.saveCrmNewsletter(this.subscriptionId, data);
+        sub$.subscribe(() => {
+            this.toast.success(
+                this.translation.translate('Crm.CommunicationsMessage.AddedMessage')
+            );
+            this.back();
+        }).add(() => {
+            this.submitted = false;
+            this.buttonBusy = false;
+        });
+    }
+
+    /** Function to get edit communication details */
+    private getCommunicationDetails(id: number) {
+        this.crmService.getCrmNewsletter(this.subscriptionId, id).subscribe(response => {
+            this.data = response;
+            let sendUntilObj: NgbDateStruct;
+            if (response.send_until) {
+                sendUntilObj = {
+                    year: Number(response.send_until.substring(0, 4)),
+                    month: Number(response.send_until.substring(5, 7)),
+                    day: Number(response.send_until.substring(8, 10))
+                };
+            }
+            let sendAtlObj: NgbDateStruct;
+            if (response.send_at) {
+                sendAtlObj = {
+                    year: Number(response.send_at.substring(0, 4)),
+                    month: Number(response.send_at.substring(5, 7)),
+                    day: Number(response.send_at.substring(8, 10))
+                };
+            }
+            this.isLoading = false;
+            this.form.patchValue(response);
+            this.form.patchValue({ send_until: sendUntilObj });
+            this.form.patchValue({ send_at: sendAtlObj });
+            if (response.days_to_wait_from_previous_newsletter) {
+                this.daysToNewsletterField = true;
+            } else {
+                this.daysToNewsletterField = false;
+            }
+        });
+    }
+
+    /** Function to execute on location select */
+    handleAddressChange(event) {
+        this.form.get('location').setValue(event.formatted_address);
+    }
+
+    /** Function for toggle */
+    onChange(event: boolean, formControlName: string) {
+        if (event === false) {
+            this.form.get(formControlName).setValue(false);
+        } else {
+            this.form.get(formControlName).setValue(true);
+        }
+    }
+
+    /** Function to call Crm products */
+    private getAllCrmProducts() {
+        this.crmService.getCrmProducts(this.subscriptionId).subscribe(response => {
+            const data = response.available_crm_subscription_products;
+            if (data?.length) {
+                this.crmProduct = response.available_crm_subscription_products.map(item => {
+                    return {
+                        label: item.name,
+                        value: item.id
+                    };
+                });
+                const featureKeys = Array.from(new Set(data.map(item => item.feature_key)));
+                this.featureKeys = featureKeys.map(item => {
+                    return {
+                        label: item,
+                        value: item
+                    };
+                });
+            }
+        });
+    }
+
+    /** Function to call account Default Values */
+    private accountDefaultValues(id: number) {
+        this.crmService.getCrmAccountDefaultValues(id).subscribe(response => {
+            this.getAccountSize();
+            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 call account size */
+    private getAccountSize() {
+        this.commonService.getOrganizationSizes().subscribe(res => {
+            if (this.id) {
+                this.getCommunicationDetails(this.id);
+            }
+            const organizationSizes = res.organization_sizes;
+            organizationSizes.forEach(val => {
+                const data = {
+                    label: val.name,
+                    value: val.id
+                };
+                this.organizationSizes.push(data);
+            });
+        });
+    }
+
+    getDefaultValues(id: number) {
+        this.crmService.getCrmContactDefaultValues(id).subscribe(res => {
+            const label = res['labels'];
+            const contactSource = res['source'];
+            label.forEach(val => {
+                const data = {
+                    label: val,
+                    value: val
+                };
+                this.labels.push(data);
+            });
+            contactSource.forEach(val => {
+                const data = {
+                    label: val.name,
+                    value: val.id
+                };
+                this.contactSource.push(data);
+            });
+        });
+    }
+
+    /** Function on select previous newsletter */
+    onNewsletterSelect(event) {
+        if (event.target.value) {
+            const newsletterId = Number(event.target.value);
+            if (newsletterId > 0) {
+                this.daysToNewsletterField = true;
+            }
+        } else {
+            this.daysToNewsletterField = false;
+        }
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

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

@@ -0,0 +1,215 @@
+<div class="row">
+  <div class="col-12">
+    <h2>Email Marketing</h2>
+    <p>In this section you can create and manage your email marketing strategy.</p>
+  </div>
+  <div class="col-12 col-md-12 text-end">
+    <button class="btn btn-sm btn-outline-primary"
+      [routerLink]="['/' + subscription?.slug + routers.marketingDetails + 'add']">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'Add New Email' }}
+    </button>
+  </div>
+</div>
+<div class="w-100 text-center mt-3"
+  *ngIf="!isLoaded">
+  <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+</div>
+<div class="primeng-datatable-container mt-3 table-responsive"
+  [class.hideTable]="data.unfiltered_count === 0">
+  <p-table #dt
+    [value]="data.crm_newsletters"
+    [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 communication emails..."
+          (input)="dt.filterGlobal($event.target.value, 'contains')"
+          class="mw-90" />
+      </div>
+    </ng-template>
+    <ng-template pTemplate="header">
+      <tr>
+        <th scope="true"
+          pSortableColumn="title">
+          {{ 'Crm.CommunicationsMessage.Title' | transloco }}
+          <p-sortIcon field="title"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="body">
+          {{ 'Crm.CommunicationsMessage.Body' | transloco }}
+          <p-sortIcon field="body"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="location">
+          {{ 'Crm.CommunicationsMessage.Location' | transloco }}
+          <p-sortIcon field="location'"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="send_until">
+          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}
+          <p-sortIcon field="send_until"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="is_pushed">
+          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}
+          <p-sortIcon field="is_pushed"></p-sortIcon>
+        </th>
+        <th scope="true"
+          pSortableColumn="is_sent">
+          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}
+          <p-sortIcon field="is_sent"></p-sortIcon>
+        </th>
+        <th scope="true"
+          class="actions-column">{{ 'Label.Actions' | transloco }}</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body"
+      let-item>
+      <tr class="table-row">
+        <td data-head="Title">
+          <a [routerLink]="['/' + subscription?.slug + routers.marketing, item.id]">{{
+                        item.title
+                    }}</a>
+        </td>
+        <td data-head="Body"
+          [innerHtml]="item.body | removeHtml | textTruncate: 200"></td>
+        <td data-head="Location">{{ item.location }}</td>
+        <td data-head="Send Until">{{ item.send_until | dateFormat }}</td>
+        <td data-head="Pushed?">
+          <span [appDynamicBadge]="{ itemsArray: [true, false], item: item?.is_pushed }"
+            color="success-danger"
+            class="badge">{{ !!item?.is_pushed }}</span>
+        </td>
+        <td data-head="Sent?">
+          <span [appDynamicBadge]="{ itemsArray: [true, false], item: item?.is_sent }"
+            color="success-danger"
+            class="badge">{{ !!item?.is_sent }}</span>
+        </td>
+        <td data-head="Action">
+          <ul class="list-unstyled list-inline">
+            <li ngbTooltip="Send test email"
+              class="me-2 me-sm-3">
+              <i
+                                class="fa fa-comment-alt cta1-icon"
+                                (click)="sendTestEmail(item)"
+                                aria-hidden="true"
+                            ></i>
+            </li>
+            <li ngbTooltip="Edit"
+              class="me-2 me-sm-3">
+              <i
+                                class="fa fa-edit edit-icon"
+                                [routerLink]="[
+                                    '/' + subscription?.slug + routers.marketingDetails,
+                                    item.id
+                                ]"
+                                aria-hidden="true"
+                            ></i>
+            </li>
+            <li ngbTooltip="Delete"
+              class="me-2 me-sm-3">
+              <i
+                                class="fa fa-trash delete-icon"
+                                (click)="onDelete(item.id)"
+                                aria-hidden="true"
+                            ></i>
+            </li>
+            <li ngbTooltip="Newsletter recipients"
+              class="me-2 me-sm-3">
+              <i
+                                class="fa fa-fw fa-list"
+                                [routerLink]="[
+                                    '/' + subscription?.slug + routers.marketing,
+                                    item.id
+                                ]"
+                                aria-hidden="true"
+                            ></i>
+            </li>
+          </ul>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+<div *ngIf="data.object_count === 0 && data.unfiltered_count !== 0">
+    <pw-no-data [withImage]="true" [message]="'Search.NoDataMessage'| transloco" [description]="'Search.NoDataDescription' | transloco" >
+    </pw-no-data>
+</div>
+  <span class="total-records-count" *ngIf="data.object_count !== 0">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>
+</div>
+<div *ngIf="data.unfiltered_count === 0 && isLoaded">
+  <pw-no-data [withImage]="true" [message]="'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco">
+  </pw-no-data>
+</div>
+<ng-container *rbacAllow="'Pages.Beta'">
+  <div class="row mt-5"
+    *ngIf="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="communicationsInsight?.length">
+        <p-table class="table"
+          #dt
+          [value]="communicationsInsight"
+          [paginator]="communicationsInsight.length !== 0"
+          [rows]="PAGE_SIZE"
+
+          [totalRecords]="communicationsInsight.length"
+          [lazy]="true">
+          <ng-template pTemplate="header">
+            <tr>
+              <th scope="true">
+                {{ 'Crm.CommunicationsMessage.Title' | transloco }}
+              </th>
+              <th scope="true">
+                {{ 'Crm.CommunicationsMessage.Value' | transloco }}
+              </th>
+              <th scope="true">
+                {{ 'Crm.CommunicationsMessage.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="communicationsInsight.length !== 0">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>
+      </div>
+      <div *ngIf="!communicationsInsight?.length">
+        <pw-no-data [withImage]="true" [message]="'Crm.CommunicationsMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+    <!-- Geography -->
+    <div class="col-12 col-md-6 mb-3 analytics">
+      <h5 class="accordion-heading">Engagement</h5>
+      <div>
+        <ng-template [ngIf]="communicationEngagement">
+          <plotly-plot [data]="communicationEngagement?.data"
+            [layout]="communicationEngagement?.layout">
+          </plotly-plot>
+        </ng-template>
+      </div>
+      <div *ngIf="!communicationEngagement">
+        <pw-no-data [withImage]="true" [message]="'Crm.CommunicationsMessage.NoInsightMessage' | transloco">
+        </pw-no-data>
+      </div>
+    </div>
+  </div>
+</ng-container>

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

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

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

@@ -0,0 +1,117 @@
+import { TestBed } from '@angular/core/testing';
+import { CommonServicesModule, PermissionService, UserService } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { DEFAULT_USER, TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+import Swal from 'sweetalert2';
+import { SmartCrmPrivateModule } from '../../../smart-crm-private.module';
+import { SmartCrmCommunicationsComponent } from './smart-crm-marketing-list.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmCommunicationsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmCommunicationsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                },
+                isGranted: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllCrmNewsletters: () =>
+                    of({
+                        crm_newsletters: [
+                            {
+                                id: 4,
+                                title: 'test',
+                                body: '\u003cp\u003etest\u003c/p\u003e',
+                                contact_potential: [],
+                                account_status: [],
+                                account_priority: [],
+                                location: '',
+                                latitude: null,
+                                longitude: null,
+                                is_sent: false,
+                                is_pushed: true,
+                                send_until: '2021-11-19',
+                                subscription_id: 20,
+                                owner_id: 1,
+                                days_to_wait_from_previous_newsletter: null,
+                                send_at: '2021-11-14',
+                                account_size: [],
+                                account_source: [],
+                                product_ids: null,
+                                feature_keys: [],
+                                contact_label: [],
+                                contact_source: []
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                deleteCrmNewsletter: () => of({}),
+                sendTestMail: () => of({}),
+                getCrmAnalytics: (_id, type) =>
+                    type === 'communications_insights'
+                        ? of([{ title: 'Title', value: 'Value', reason: 'This is the reason' }])
+                        : of({ data: [], layout: {} })
+            }),
+            {
+                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();
+        expect(spectator.query('h2')).toContainText('Email Marketing');
+    });
+
+    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, 'deleteCrmNewsletter').and.callThrough();
+        spectator.click('tbody tr:first-child .fa-trash');
+        expect(Swal.isVisible()).toBeTruthy();
+        Swal.clickConfirm();
+        await TestHelper.stabilize(spectator);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should send email', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'sendTestMail').and.callThrough();
+        spectator.click('tbody tr:first-child .fa-comment-alt');
+        expect(Swal.isVisible()).toBeTruthy();
+        Swal.clickConfirm();
+        await TestHelper.stabilize(spectator);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});