@posiwise/smart-crm 0.0.19 → 0.0.21

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'pw-smart-crm-opportunities',
+    templateUrl: './smart-crm-opportunities.component.html',
+    styleUrls: ['./smart-crm-opportunities.component.scss']
+})
+export class SmartCrmOpportunitiesComponent {}

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

@@ -0,0 +1,213 @@
+<div class="row">
+  <div class="col-12 mb-3">
+    <div class="col-12 col-sm-3 float-start mb-2"
+      *ngIf="showFilter">
+      <select class="form-select"
+        (change)="filterByUser($event)">
+        <option value="0">Filter by user</option>
+        <option *ngFor="let member of allSubscriptionMembers"
+          [value]="member.id">
+          {{ member.first_name }} {{ member.last_name }}
+        </option>
+      </select>
+    </div>
+    <div>
+      <a class="btn btn-sm btn-outline-primary float-end"
+        data-cy="add-contact"
+        [routerLink]="['/' + subscription?.slug + routers.addAccount]">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i>
+        {{ 'Crm.AccountMessage.AddAccount' | transloco }}
+      </a>
+      <a class="btn btn-sm btn-outline-primary float-end me-3"
+        [routerLink]="['/' + subscription?.slug + routers.contactDetails, 0]"
+        data-cy="add-action">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i>
+        {{ 'Crm.ContactMessage.AddContact' | transloco }}
+      </a>
+    </div>
+  </div>
+  <!-- Pending Actions -->
+  <div class="col-12 col-md-6 mb-3">
+    <h5 class="accordion-heading">Pending Actions</h5>
+    <div class="w-100 text-center mt-3"
+      *ngIf="!isLoaded">
+      <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+    </div>
+    <div *ngIf="contactActions?.length === 0 && isLoaded"
+      class="px-2">
+      <pw-no-data [withImage]="true" [message]="'Crm.Summary.SummaryMessage' | transloco"> </pw-no-data>
+    </div>
+    <!-- wrapper for infinite scroll -->
+    <div class="pending-actions-wrapper"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      [infiniteScrollContainer]="selector"
+      [fromRoot]="true"
+      (scrolled)="onScrollPendingActions()">
+      <div class="mb-4 action-card bg-white"
+        *ngFor="let action of contactActions; let i = index">
+        <div class="p-2">
+          <ul class="list-inline">
+            <li class="list-inline-item me-2">
+              <h6 *ngIf="!updating || actionId !== action.id">
+                {{ action.when_short_date }}
+              </h6>
+              <input *ngIf="updating && actionId === action.id"
+                placeholder="dd-mm-yyyy"
+                [value]="action.when_short_date"
+                ngbDatepicker
+                #d="ngbDatepicker"
+                (focus)="d.toggle()"
+                (dateSelect)="onDateSelect($event, action)" />
+            </li>
+            <li>
+              <button type="button"
+                class="btn btn-sm when-btn"
+                (click)="showDatePicker(action?.id)">
+                <i
+                                    class="fa fa-edit edit-icon"
+                                    ngbTooltip="Click to Edit"
+                                    aria-hidden="true"
+                                ></i>
+              </button>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge bg-primary">{{ action.crm_action?.name }}</span>
+            </li>
+            <li class="list-inline-item float-end">
+              <a *ngIf="action?.crm_contact"
+                ngbTooltip="See this contact"
+                [routerLink]="[
+                                    '/' + subscription?.slug + routers.contactInfo,
+                                    action?.crm_contact?.id
+                                ]">
+                <i class="fa fa-eye me-3 see-icon" aria-hidden="true"></i>
+              </a>
+              <a ngbTooltip="Set as completed"
+                class="me-3"
+                href="javascript:void(0);"
+                (click)="setAsCompleted(action.id, action, i)">
+                <i class="fa fa-tasks cta1-icon" aria-hidden="true"></i>
+              </a>
+              <a ngbTooltip="Set as cancelled"
+                href="javascript:void(0);"
+                (click)="setAsCancelled(action.id, action, i)">
+                <i
+                                    class="fa fa-times text-danger delete-icon"
+                                    aria-hidden="true"
+                                ></i>
+              </a>
+            </li>
+          </ul>
+          <p [class.text-danger]="!action.color"
+            class="mb-0"
+            *ngIf="action.due">
+            {{ action.due }}
+          </p>
+          <p *ngIf="action.owner?.id !== userId"
+            class="m-0 mt-1">
+            <a class="font-italic grey"
+              [routerLink]="['/members', action?.owner?.slug]">Added by
+              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>
+          </p>
+          <p class="mt-1 mb-1 fw-bold">
+            <a class="text-secondary"
+              *ngIf="action?.crm_contact"
+              [routerLink]="[
+                                '/' + subscription?.slug + routers.contactInfo,
+                                action?.crm_contact?.id
+                            ]">
+              {{
+                                action?.crm_contact?.first_name +
+                                    ' ' +
+                                    action?.crm_contact?.last_name
+                            }}
+            </a>
+            <a *ngIf="!action.crm_contact_id">N/A</a> at
+            <a *ngIf="action.crm_account_id"
+              [routerLink]="[
+                                '/' + subscription?.slug + routers.accountInfo,
+                                action?.crm_account?.id
+                            ]">
+              {{ action?.crm_account?.name }}
+            </a>
+          </p>
+          <div class="comment-section">
+            <textarea class="mt-1 textarea form-control mb-2"
+              [(ngModel)]="action.comment">{{ action.comment }}</textarea>
+            <div class="d-flex">
+              <p class="my-1 comment"
+                *ngIf="!showFullComment || action.id !== commentId">
+                {{ action.comment | slice: 0:230
+                                }}<a *ngIf="action.comment.length > 230"
+                  class="text-secondary"
+                  (click)="showFullComment = true; commentId = action.id">...show more
+                </a>
+              </p>
+              <p class="my-1 comment"
+                *ngIf="showFullComment && action.id === commentId">
+                {{ action.comment }}
+                <a *ngIf="action.comment.length > 230 && showFullComment"
+                  (click)="showFullComment = false"
+                  class="text-secondary">...show less</a>
+              </p>
+              <button class="btn btn-md edit-btn"
+                (click)="editComment($event)">
+                <i class="fa fa-edit edit-icon" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="control-btns edit-control-btns">
+              <button type="button"
+                class="btn btn-sm btn-outline-default me-2"
+                (click)="editComment(undefined)">
+                {{ 'Button.Cancel' | transloco }}
+              </button>
+              <button class="btn btn-sm btn-primary"
+                (click)="updateComment(action)">
+                {{ 'Button.Submit' | transloco }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Suggested Actions -->
+  <div class="col-12 col-md-6 mb-3">
+    <h5 class="accordion-heading">Suggested Actions</h5>
+    <div class="w-100 text-center mt-3"
+      *ngIf="!isLoaded">
+      <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+    </div>
+
+    <div class="mb-4 action-card bg-white"
+      *ngFor="
+                let suggestedAction of accountActionSuggested
+                    | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };
+                let i = index
+            ">
+      <div class="p-2">
+        <p class="mt-1 mb-1 fw-bold">
+          <a [routerLink]="[
+                            '/' + subscription?.slug + routers.accountInfo,
+                            suggestedAction?.crm_account?.id
+                        ]">{{ suggestedAction?.crm_account?.name }}</a>
+        </p>
+        <p class="fw-bold mb-1">{{ suggestedAction.crm_action }}</p>
+        <p class="mb-0">{{ suggestedAction.reason }}</p>
+      </div>
+    </div>
+    <div class="text-center pagination-controls w-100 mt-3"
+      *ngIf="accountActionSuggested?.length > 10">
+      <pagination-controls id="suggestedAction"
+        (pageChange)="p1 = $event">
+      </pagination-controls>
+    </div>
+    <div *ngIf="accountActionSuggested.length === 0 && isLoadedSuggested"
+      class="px-2">
+      <pw-no-data [withImage]="true" [message]="'Crm.Summary.SummarySuggestionsMessage' | transloco">
+      </pw-no-data>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,73 @@
+@import 'variables/branding-variables';
+@import 'variables';
+
+.textarea,
+.control-btns {
+    display: none;
+}
+
+.comment,
+.edit-btn {
+    display: block;
+}
+
+.comment {
+    border: 0;
+    border-bottom: 1px solid rgb(242 242 242);
+    color: rgb(0 0 0);
+    font-size: 1rem;
+    resize: none;
+}
+
+.textarea {
+    border: 0;
+    border-bottom: 1px solid rgb(242 242 242);
+    color: $heading-color-main;
+    display: none;
+    font-size: 17px;
+}
+
+.comment-section {
+    min-width: 350px;
+    padding-right: 45px;
+    position: relative;
+
+    p {
+        word-break: break-all;
+    }
+
+    &.show-controls {
+        .textarea,
+        .control-btns {
+            display: block;
+        }
+
+        .comment,
+        .edit-btn {
+            display: none;
+        }
+
+        .control-btns {
+            &.edit-control-btns {
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+    }
+}
+
+.edit-btn {
+    margin-top: -15px;
+}
+
+.when-btn {
+    &:focus {
+        border: 0;
+        box-shadow: none;
+    }
+}
+
+.pending-actions-wrapper {
+    height: 500px;
+    overflow-y: auto;
+}

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

@@ -0,0 +1,147 @@
+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 { SmartCrmSummaryActionsComponent } from './smart-crm-summary-actions.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmSummaryActionsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmSummaryActionsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAccountActions: () =>
+                    of({
+                        crm_account_actions: [
+                            {
+                                id: 7,
+                                crm_action_id: 9,
+                                comment: 'test222',
+                                when: '2021-09-29T00:00:00.000+00:00',
+                                crm_contact_id: 33,
+                                completed: false,
+                                cancelled: false,
+                                owner_id: 25,
+                                crm_account_id: 7,
+                                owner: {
+                                    id: 25,
+                                    first_name: 'saurabh',
+                                    slug: 'saurabh-13702-176034-57934'
+                                },
+                                crm_account: {
+                                    id: 7,
+                                    name: 'test'
+                                },
+                                crm_action: {
+                                    id: 9,
+                                    name: 'test'
+                                },
+                                crm_contact: {
+                                    id: 33,
+                                    first_name: 'test2',
+                                    last_name: 'test2'
+                                }
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getAccountActionSuggested: () => of({ crm_account_actions: [] }),
+                updateAccountComment: () => 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();
+        expect(spectator.component.contactActionsAll).toHaveLength(1);
+    });
+
+    it('should set as cancelled ', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'updateAccountComment').and.callThrough();
+        spectator.click('.pending-actions-wrapper .action-card:first-child .fa-times');
+        expect(Swal.isVisible()).toBeTruthy();
+        Swal.clickConfirm();
+        await TestHelper.stabilize(spectator);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should set as completed', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'updateAccountComment').and.callThrough();
+        spectator.click('.pending-actions-wrapper .action-card:first-child .fa-tasks');
+        expect(Swal.isVisible()).toBeTruthy();
+        Swal.clickConfirm();
+        await TestHelper.stabilize(spectator);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should change action name ', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'updateAccountComment').and.callThrough();
+        spectator.click('.edit-btn:first-of-type');
+        spectator.typeInElement('testname', 'textarea');
+        spectator.click('.control-btns button:nth-child(2)');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should change action date ', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'updateAccountComment').and.callThrough();
+        spectator.click('.when-btn');
+        spectator.fixture.detectChanges();
+        spectator.focus(
+            '.pending-actions-wrapper .action-card:first-child ul li:first-child input'
+        );
+        spectator.click(
+            'ngb-datepicker > div.ngb-dp-months > div > ngb-datepicker-month  div.ngb-dp-day.ngb-dp-today div'
+        );
+        spectator.click('.when-btn');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});