@posiwise/smart-crm 0.0.20 → 0.0.21

package/src/lib/private/components/smart-crm-contacts/smart-crm-contact-info/smart-crm-contact-info.component.ts

@@ -0,0 +1,553 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, EventEmitter, Inject, Injector, OnDestroy, OnInit } from '@angular/core';
+import { UntypedFormGroup, Validators } from '@angular/forms';
+import { NgbCalendar, NgbDateStruct, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { CRM_ACCOUNT_FILES_PATH } from '@posiwise/smart-crm-shared';
+import { AppSmartCrm } from '../../../../shared/models/smart-crm.model';
+import { ROUTERS } from '../../../../shared/routers/routers';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { UploadFile, UploadInput, UploadOutput, UploadStatus, UploaderOptions } from 'ngx-uploader';
+import swal from 'sweetalert2';
+
+import { DOCUMENT_TYPE_EXT, TOKEN_HEADER_KEY, Subscription } from '@posiwise/common-utilities';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { AuthService, FormHelperService } from '@posiwise/common-services';
+import { HelperService } from '@posiwise/helper-service';
+import moment from 'moment';
+import {
+    OpportunityComment,
+    SmartCrmAction
+} from 'libs/smart-crm/src/lib/shared/interface/smart-crm-module.interface';
+import { CrmAccount } from 'libs/smart-crm/src/lib/shared/interface/crm-account.interface';
+import { CrmContact } from 'libs/smart-crm/src/lib/shared/interface/crm-contact.interface';
+
+@Component({
+    selector: 'pw-smart-crm-contact-info',
+    templateUrl: './smart-crm-contact-info.component.html',
+    styleUrls: ['./smart-crm-contact-info.component.scss']
+})
+export class SmartCrmContactInfoComponent extends AppBaseComponent implements OnInit, OnDestroy {
+    actionControls: UntypedFormGroup;
+
+    aboutControls: UntypedFormGroup;
+
+    contactId: number;
+
+    data: CrmContact;
+
+    isDisabled = false;
+
+    actions: SmartCrmAction[] = [];
+
+    model: NgbDateStruct;
+
+    date: { year: number; month: number };
+
+    subscriptionId: number;
+
+    isFormEdit = true;
+
+    accounts = [];
+
+    submitted = false;
+    buttonBusy = false;
+
+    contactComments = [];
+
+    userId: number;
+
+    hasAccess = false;
+
+    contactVersioning = [];
+
+    isDataLoaded = false;
+
+    updating = false;
+
+    actionId: number;
+
+    dangerColor: boolean;
+
+    potentials = ['low', 'medium', 'high'];
+
+    labels = [];
+
+    buttonDisable: boolean;
+
+    filteredAccounts: CrmAccount[] = [];
+
+    showFullComment = false;
+
+    commentId: number;
+
+    accountId: number;
+
+    options: UploaderOptions;
+
+    uploadInput: EventEmitter<UploadInput>;
+
+    files: UploadFile[];
+
+    token: string;
+
+    dragOver: boolean;
+
+    isLoaded = false;
+
+    submitAction = false;
+
+    subscription: Subscription;
+
+    routers = ROUTERS;
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService,
+        private calendar: NgbCalendar,
+        private modalService: NgbModal,
+        private authService: AuthService,
+        @Inject(DOCUMENT) private document: Document
+    ) {
+        super(injector);
+        this.options = { concurrency: 1, maxUploads: 3 };
+        this.uploadInput = new EventEmitter<UploadInput>();
+        this.token = btoa(this.authService.getToken());
+        this.files = [];
+        this.actionControls = AppSmartCrm.getContactActionsForm(this.isDisabled);
+        this.aboutControls = AppSmartCrm.getContactsForm();
+    }
+
+    ngOnInit() {
+        this.route.params.subscribe(data => {
+            this.contactId = Number(data['id']);
+        });
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.getDefaultValues(this.subscription?.id);
+                this.getActions();
+                this.getContactComments();
+            }
+        });
+        this.actionControls.get('crm_contact_id').setValue(this.contactId);
+        this.model = this.calendar.getToday();
+        this.actionControls.get('when').setValue(this.model);
+        this.userStore().subscribe(res => {
+            if (res) {
+                this.userId = res.id;
+                this.actionControls.get('owner_id').setValue(res.id);
+            }
+        });
+        this.onDateSelected();
+        this.getContactVersion();
+    }
+
+    getDefaultValues(id) {
+        this.crmService.getCrmContactDefaultValues(id).subscribe(res => {
+            const label = res['labels'];
+            label.forEach(val => {
+                const data = {
+                    label: val,
+                    value: val
+                };
+                this.labels.push(data);
+            });
+        });
+    }
+
+    /** Function to get contact versions */
+    private getContactVersion() {
+        this.crmService
+            .getContactVersion(this.subscription?.id, this.contactId, 'CrmContact')
+            .subscribe(response => {
+                this.contactVersioning = response.versions;
+            });
+    }
+
+    showEditControls(event) {
+        const comments = this.document.getElementsByClassName('card-header');
+        for (let i = 0; i < comments.length; i++) {
+            comments[i].classList.remove('show-controls');
+        }
+        if (event && event !== undefined) {
+            event.target.closest('.card-header').classList.add('show-controls');
+        }
+    }
+
+    updateComment(item) {
+        const commentObj = {
+            comment: item.comment,
+            completed: item.completed,
+            cancelled: item.cancelled,
+            crm_account_id: item.crm_account_id
+        };
+        this.crmService
+            .updateAccountComment(this.subscription?.id, item.id, commentObj)
+            .subscribe(() => {
+                this.toast.success('comment updated successfully');
+                this.showEditControls(undefined);
+                this.getContactComments();
+            });
+    }
+
+    showDatePicker(event, id) {
+        this.actionControls.get('when').setValidators([Validators.required]);
+        const actionButtons = this.document.getElementsByClassName('action-btn');
+        for (let i = 0; i < actionButtons.length; i++) {
+            actionButtons[i].classList.remove('active');
+        }
+        event.target.classList.add('active');
+        this.actionControls.get('crm_action_id').setValue(id);
+    }
+
+    /**
+     * Function to get the list of accounts by subscriptionId
+     */
+    private getAccountsBySubscription() {
+        this.crmService
+            .getAccountsBySubscription(this.subscription?.id, { page_size: this.PAGE_SIZE })
+            .subscribe(res => {
+                this.getUserInfo();
+                this.accounts = res.accounts;
+            });
+    }
+
+    get f() {
+        return this.aboutControls.controls;
+    }
+
+    get actionFormControls() {
+        return this.actionControls.controls;
+    }
+
+    updateContactInfo() {
+        if (this.aboutControls.invalid) {
+            this.submitted = true;
+        } else {
+            this.aboutControls
+                .get('crm_account_id')
+                .setValue(this.aboutControls.get('crm_account_id').value.id);
+            this.crmService
+                .updateContactById(this.subscription?.id, this.contactId, this.aboutControls.value)
+                .subscribe(() => {
+                    this.toast.success(
+                        this.translation.translate('Crm.ContactMessage.UpdatedMessage')
+                    );
+                    this.isFormEdit = true;
+                    this.getUserInfo();
+                })
+                .add(() => {
+                    this.submitted = false;
+                });
+        }
+    }
+
+    private getContactComments() {
+        this.crmService
+            .getContactComments(this.contactId, this.subscription?.id)
+            .subscribe(resp => {
+                if (resp?.crm_account_actions?.length) {
+                    this.contactComments = resp.crm_account_actions;
+
+                    this.contactComments.forEach(data => {
+                        data.when_short_date = moment(data.when).format('DD-MMM-YYYY');
+                        const diff = moment(new Date(data.when)).diff(moment(new Date()), 'days');
+                        if (moment(new Date(data.when)) < moment(new Date())) {
+                            data['due'] = `Overdue by ${Math.abs(diff)} days`;
+                            data['color'] = this.dangerColor;
+                        } else {
+                            data['due'] = `In ${diff} days`;
+                            data['color'] = !this.dangerColor;
+                        }
+                    });
+
+                    this.contactComments.sort((a, b) => {
+                        return new Date(a.when).getTime() - new Date(b.when).getTime();
+                    });
+                    this.contactComments.forEach(item => {
+                        item['when'] = moment(item['when']).format('DD-MMM-YYYY');
+                        item['year'] = moment(item['when']).format('YYYY');
+                        item['month'] = moment(item['when']).format('MM');
+                    });
+                    const completedCancelledActions: OpportunityComment[] =
+                        this.contactComments.filter(
+                            action => action.completed === true || action.cancelled === true
+                        );
+                    completedCancelledActions.reverse();
+                    const notCompletedCancelledActions: OpportunityComment[] =
+                        this.contactComments.filter(
+                            action => action.completed === false && action.cancelled === false
+                        );
+                    this.contactComments =
+                        notCompletedCancelledActions.concat(completedCancelledActions);
+                    this.isLoaded = true;
+                } else {
+                    this.isLoaded = true;
+                }
+            });
+    }
+
+    onSave() {
+        this.submitAction = true;
+        this.buttonBusy = true;
+        if (this.actionControls.invalid) {
+            FormHelperService.validateAllFormFields(this.actionControls);
+        } else {
+            const data = this.actionControls.value;
+            data.when = HelperService.dateFormat(data?.when);
+            this.crmService
+                .postAccountComment(this.subscription?.id, data)
+                .subscribe(() => {
+                    this.actionControls.get('comment').reset();
+                    this.getContactComments();
+                    this.toast.success(
+                        this.translation.translate('Crm.ContactMessage.CommentSubmittedMessage')
+                    );
+                })
+                .add(() => {
+                    this.submitAction = false;
+                    this.buttonBusy = false;
+                });
+        }
+    }
+
+    onDateSelected() {
+        this.actionControls.get('when').valueChanges.subscribe(() => {
+            const selectedDate = this.document.getElementById('when')?.['value'];
+            const todayDate = moment(new Date()).format('DD-MMM-YYYY');
+            if (todayDate < selectedDate) {
+                this.isDisabled = true;
+                this.actionControls.get('completed').disable({ onlySelf: true });
+                this.actionControls.get('completed').setValue(false);
+            } else {
+                this.actionControls.get('completed').enable({ onlySelf: true });
+                this.isDisabled = false;
+            }
+        });
+    }
+
+    /** Function to get and show all the actions */
+    getActions() {
+        this.crmService.getActionsBySubscriptionId(this.subscription?.id).subscribe(resp => {
+            if (resp && resp.crm_actions && resp.crm_actions.length > 0) {
+                this.actions = resp.crm_actions;
+                this.buttonDisable = this.actions.every(
+                    x => x.visible === false || x.visible === null
+                );
+            } else {
+                this.buttonDisable = true;
+            }
+        });
+        this.hasAccess = this.hasAdminAccess(this.subscription?.id);
+        this.getAccountsBySubscription();
+    }
+
+    /** Function to get the contact details by Id */
+    getUserInfo() {
+        this.isDataLoaded = false;
+        this.crmService
+            .getContactById(this.subscription?.id, this.contactId)
+            .subscribe(response => {
+                this.data = response;
+                this.aboutControls.patchValue(response);
+                this.actionControls.get('crm_account_id').patchValue(response.crm_account_id);
+                this.accounts.forEach(account => {
+                    if (this.data.crm_account_id === account.id) {
+                        this.aboutControls.get('crm_account_id').patchValue(account);
+                        this.accountId = response.crm_account_id;
+                    }
+                });
+            })
+            .add(() => {
+                this.isDataLoaded = true;
+            });
+    }
+
+    /** Function to set the action as completed */
+    setAsCompletedOrUncompleted(id, action, completedOrUncompleted) {
+        const alertTitle = completedOrUncompleted ? 'InCompleted' : 'Completed';
+
+        return swal
+            .fire({
+                title: alertTitle,
+                html: `Are you sure you want to set as ${alertTitle}?`,
+                showCancelButton: true,
+                reverseButtons: true,
+                icon: 'warning'
+            })
+            .then(res => {
+                if (res.value) {
+                    const actionObj = {
+                        comment: action.comment,
+                        completed: !completedOrUncompleted,
+                        cancelled: action.cancelled,
+                        crm_account_id: action.crm_account_id
+                    };
+                    this.crmService
+                        .updateAccountComment(this.subscription?.id, id, actionObj)
+                        .subscribe(() => {
+                            this.toast.success(
+                                this.translation.translate('Crm.Settings.UpdatedMessage')
+                            );
+                            this.actions.splice(action, 1);
+                            this.getActions();
+                            this.getContactComments();
+                        });
+                }
+            });
+    }
+
+    /** Function to set the action as cancelled */
+    setAsCancelled(id, action) {
+        return swal
+            .fire({
+                title: 'Cancel',
+                html: `Are you sure you want to set as cancelled?`,
+                showCancelButton: true,
+                reverseButtons: true,
+                icon: 'warning'
+            })
+            .then(res => {
+                if (res.value) {
+                    const actionObj = {
+                        comment: action.comment,
+                        completed: action.completed,
+                        cancelled: true,
+                        crm_account_id: action.crm_account_id
+                    };
+                    this.crmService
+                        .updateAccountComment(this.subscription?.id, id, actionObj)
+                        .subscribe(() => {
+                            this.toast.success(
+                                this.translation.translate('Crm.Settings.UpdatedMessage')
+                            );
+                            this.actions.splice(action, 1);
+                            this.getActions();
+                            this.getContactComments();
+                        });
+                }
+            });
+    }
+
+    /** Function to show DatePicker */
+    showDatePickerUpdate(actionId) {
+        this.updating = !this.updating;
+        this.actionId = actionId;
+    }
+
+    /** Function to update the date */
+    onDateSelect(event, action) {
+        const commentObj = {
+            when: HelperService.dateFormat(event),
+            comment: action.comment,
+            completed: action.completed,
+            cancelled: action.cancelled,
+            crm_account_id: action.crm_accounts_id
+        };
+        this.crmService
+            .updateAccountComment(this.subscription?.id, action.id, commentObj)
+            .subscribe(() => {
+                this.toast.success('date updated successfully');
+                this.getContactComments();
+                this.updating = false;
+            });
+    }
+
+    /** search accounts */
+    search(event) {
+        let data = [];
+        if (event.query) {
+            data = this.accounts.filter((x: CrmAccount) => {
+                return x.name.toLowerCase().includes(event.query.toLowerCase());
+            });
+        } else {
+            this.accounts.forEach(element => {
+                data.push(element);
+            });
+        }
+        this.filteredAccounts = data;
+    }
+
+    openModal(content) {
+        this.modalService.open(content, { centered: true, windowClass: 'modal-holder' });
+    }
+
+    onClose() {
+        this.modalService.dismissAll();
+    }
+
+    onUploadOutput(output: UploadOutput): void {
+        switch (output.type) {
+            case 'allAddedToQueue':
+                if (this.files.length > 0) {
+                    const event: UploadInput = {
+                        type: 'uploadAll',
+                        url: CRM_ACCOUNT_FILES_PATH,
+                        method: 'POST',
+                        data: {
+                            owner_id: `${this.userId}`,
+                            crm_accounts_id: `${this.accountId}`,
+                            crm_contact_id: `${this.contactId}`
+                        },
+                        headers: {
+                            [TOKEN_HEADER_KEY]: this.token
+                        }
+                    };
+                    this.uploadInput.emit(event);
+                }
+
+                break;
+            case 'addedToQueue':
+                if (typeof output.file !== 'undefined') {
+                    const ext = output.file.name.split('.').pop();
+                    if (DOCUMENT_TYPE_EXT.includes(ext)) {
+                        this.files.push(output.file);
+                    } else {
+                        this.toast.error('file formats is not supported.');
+                    }
+                }
+                break;
+            case 'uploading':
+                if (typeof output.file !== 'undefined') {
+                    const index = this.files.findIndex(
+                        file => typeof output.file !== 'undefined' && file.id === output.file.id
+                    );
+                    this.files[index] = output.file;
+                }
+                break;
+            case 'removed':
+                this.files = this.files.filter((file: UploadFile) => file !== output.file);
+                break;
+            case 'dragOver':
+                this.dragOver = true;
+                break;
+            case 'dragOut':
+            case 'drop':
+                this.dragOver = false;
+                break;
+            case 'done':
+                break;
+            default:
+        }
+
+        this.files.forEach(file => {
+            if (file.progress.status === UploadStatus.Done) {
+                file['uploaded'] = true;
+            }
+        });
+        // wait for 500ms before filter files
+        setTimeout(() => {
+            this.files = this.files.filter(file => file.progress.status !== UploadStatus.Done);
+        }, 500);
+    }
+
+    navigateToOpportunities() {
+        this.router.navigate([`/${this.subscription?.slug}${this.routers.opportunityAdd}`], {
+            queryParams: { contact_id: this.contactId }
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}