@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,568 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, EventEmitter, Inject, Injector, OnDestroy, OnInit } from '@angular/core';
+import { UntypedFormGroup, Validators } from '@angular/forms';
+import { 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 } from '@posiwise/common-utilities';
+import { CrmAccount } from '../../../../../shared/interface/crm-account.interface';
+import { CrmAction } from '../../../../../shared/interface/crm-action.interface';
+import { CrmVersion } from '../../../../../shared/interface/crm-opportunity.interface';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { Subscription } from '@posiwise/common-utilities';
+import { AuthService } from '@posiwise/common-services';
+import { HelperService } from '@posiwise/helper-service';
+import { ValidateForm } from '@posiwise/utils';
+import moment from 'moment';
+import {
+    OpportunityComment,
+    OpportunityContact,
+    OpportunityData
+} from 'libs/smart-crm/src/lib/shared/interface/smart-crm-module.interface';
+
+@Component({
+    selector: 'pw-smart-crm-opportunities-info',
+    templateUrl: './smart-crm-opportunities-info.component.html',
+    styleUrls: ['./smart-crm-opportunities-info.component.scss']
+})
+export class SmartCrmOpportunitiesInfoComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy
+{
+    isLoaded = false;
+
+    isFormEdit = true;
+
+    opportunitiesId: number;
+
+    data: OpportunityData;
+
+    aboutControls: UntypedFormGroup;
+
+    submitted = false;
+    buttonBusy = false;
+
+    accounts: CrmAccount[];
+
+    filteredAccounts: CrmAccount[] = [];
+
+    subscriptionId: number;
+
+    actions: CrmAction[];
+
+    buttonDisable: boolean;
+
+    hasAccess: boolean;
+
+    options: UploaderOptions;
+
+    uploadInput: EventEmitter<UploadInput>;
+
+    files: UploadFile[];
+
+    token: string;
+
+    dragOver: boolean;
+
+    contactId: number;
+
+    accountId: number;
+
+    userId: number;
+
+    actionControls: UntypedFormGroup;
+
+    isDisabled = false;
+
+    updating = false;
+
+    actionId: number;
+
+    showFullComment = false;
+
+    commentId: number;
+
+    opportunitiesComments: OpportunityComment[];
+
+    dangerColor: boolean;
+
+    allContacts: OpportunityContact[];
+
+    filteredContacts: OpportunityContact[];
+
+    opportunitiesVersioning: CrmVersion[];
+
+    submitAction = false;
+
+    subscription: Subscription;
+
+    routers = ROUTERS;
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService,
+        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.getOpportunityActionsForm(this.isDisabled);
+        this.aboutControls = AppSmartCrm.getOpportunitiesForm();
+    }
+
+    ngOnInit(): void {
+        this.route.params.subscribe(data => {
+            this.opportunitiesId = Number(data['id']);
+            if (this.opportunitiesId) {
+                this.getOpportunityDetails();
+                this.actionControls.get('crm_opportunity_id').setValue(this.opportunitiesId);
+            }
+        });
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.getActions();
+                this.getOpportunitiesComments();
+            }
+        });
+        this.onDateSelected();
+        this.getContactVersion();
+        this.userInfo();
+    }
+
+    /** Function to call user info */
+    private userInfo() {
+        this.userStore().subscribe(res => {
+            if (res) {
+                this.userId = res.id;
+                this.actionControls.get('owner_id').setValue(res.id);
+            }
+        });
+    }
+
+    /** Function to get opportunities details */
+    getOpportunityDetails() {
+        this.crmService
+            .getOpportunityDetails(this.subscriptionId, this.opportunitiesId)
+            .subscribe(response => {
+                if (response) {
+                    if (response.crm_contact_id) {
+                        response.crm_contact.displayName = `${response.crm_contact.first_name} ${response.crm_contact.last_name}`;
+                    }
+                    this.data = response;
+                    // eslint-disable-next-line operator-assignment
+                    this.data.monthly_amount = this.data.monthly_amount / 100;
+                    // eslint-disable-next-line operator-assignment
+                    this.data.one_time_amount = this.data.one_time_amount / 100;
+                    this.contactId = response.crm_contact_id;
+                    this.accountId = response.crm_account_id;
+                    this.aboutControls.patchValue(response);
+                    this.aboutControls.get('crm_contact_id').patchValue(response.crm_contact);
+                    this.aboutControls.get('crm_account_id').patchValue(response.crm_account);
+                    this.actionControls.get('crm_contact_id').setValue(this.contactId);
+                    this.actionControls.get('crm_account_id').setValue(this.accountId);
+                }
+            });
+    }
+
+    /** Function to update opportunities */
+    updateOpportunities() {
+        if (this.aboutControls.invalid) {
+            this.submitted = true;
+        } else {
+            const formData = this.aboutControls;
+            formData.get('crm_account_id').setValue(formData.get('crm_account_id').value?.id);
+            formData.get('crm_contact_id').setValue(formData.get('crm_contact_id').value?.id);
+            formData.get('one_time_amount').setValue(formData.get('one_time_amount').value * 100);
+            formData.get('monthly_amount').setValue(formData.get('monthly_amount').value * 100);
+            this.crmService
+                .updateOpportunities(this.subscription?.id, this.opportunitiesId, formData.value)
+                .subscribe(() => {
+                    this.toast.success(
+                        this.translation.translate('Crm.OpportunitiesMessage.UpdatedMessage')
+                    );
+                    this.isFormEdit = true;
+                    this.getOpportunityDetails();
+                })
+                .add(() => {
+                    this.submitted = false;
+                });
+        }
+    }
+
+    /** Function to save comment */
+    @ValidateForm('actionControls')
+    onCommentSave() {
+        this.buttonBusy = true;
+        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.getOpportunitiesComments();
+                this.toast.success(
+                    this.translation.translate('Crm.OpportunitiesMessage.CommentSubmittedMessage')
+                );
+            })
+            .add(() => {
+                this.submitAction = false;
+                this.buttonBusy = false;
+            });
+    }
+
+    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);
+    }
+
+    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 all comments */
+    private getOpportunitiesComments() {
+        this.crmService
+            .getOpportunitiesComments(this.opportunitiesId, this.subscription?.id)
+            .subscribe(resp => {
+                if (resp?.crm_account_actions?.length) {
+                    this.opportunitiesComments = resp.crm_account_actions;
+
+                    this.opportunitiesComments.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.opportunitiesComments.sort((a, b) => {
+                        return new Date(a.when).getTime() - new Date(b.when).getTime();
+                    });
+                    this.opportunitiesComments.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.opportunitiesComments.filter(
+                            action => action.completed === true || action.cancelled === true
+                        );
+                    completedCancelledActions.reverse();
+                    const notCompletedCancelledActions: OpportunityComment[] =
+                        this.opportunitiesComments.filter(
+                            action => action.completed === false && action.cancelled === false
+                        );
+                    this.opportunitiesComments =
+                        notCompletedCancelledActions.concat(completedCancelledActions);
+                    this.isLoaded = true;
+                } else {
+                    this.isLoaded = true;
+                }
+            });
+    }
+
+    get f() {
+        return this.aboutControls.controls;
+    }
+
+    get actionFormControls() {
+        return this.actionControls.controls;
+    }
+
+    /** Function to get the list of accounts by subscriptionId */
+    getAccountsBySubscription() {
+        this.crmService.getAccountsBySubscription(this.subscription?.id).subscribe(res => {
+            this.accounts = res.accounts;
+        });
+    }
+
+    /** Function to get and show all the actions */
+    private 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);
+    }
+
+    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');
+        }
+    }
+
+    /** 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_account_id
+        };
+        this.crmService
+            .updateAccountComment(this.subscription?.id, action.id, commentObj)
+            .subscribe(() => {
+                this.toast.success('date updated successfully');
+                this.getOpportunitiesComments();
+                this.updating = false;
+            });
+    }
+
+    /** Function to show DatePicker */
+    showDatePickerUpdate(actionId) {
+        this.updating = !this.updating;
+        this.actionId = actionId;
+    }
+
+    /** 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.getOpportunitiesComments();
+                        });
+                }
+            });
+    }
+
+    /** Function to update comment */
+    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.getOpportunitiesComments();
+            });
+    }
+
+    /** 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.getOpportunityDetails();
+                        });
+                }
+            });
+    }
+
+    /** Function to call contacts */
+    getAllContacts() {
+        this.crmService.getAllContacts(this.subscription?.id, '').subscribe(response => {
+            this.allContacts = response.contacts;
+            this.allContacts.forEach(member => {
+                member.displayName = `${member.first_name || ''} ${member.last_name || ''} - ${
+                    member.email
+                }`.trim();
+            });
+        });
+    }
+
+    /** search accounts */
+    accountSearch(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.filteredContacts = data;
+    }
+
+    onContactSearch(event) {
+        let data = [];
+        if (event.query) {
+            data = this.allContacts.filter((x: OpportunityContact) => {
+                return x.displayName.toLowerCase().includes(event.query.toLowerCase());
+            });
+        } else {
+            this.allContacts.forEach(element => {
+                data.push(element);
+            });
+        }
+        this.filteredContacts = data;
+    }
+
+    openModal(content) {
+        this.modalService.open(content, { centered: true, windowClass: 'modal-holder' });
+    }
+
+    onClose() {
+        this.modalService.dismissAll();
+    }
+
+    /** Function to get opportunities versions */
+    private getContactVersion() {
+        this.crmService
+            .getContactVersion(this.subscription?.id, this.opportunitiesId, 'CrmOpportunity')
+            .subscribe(response => {
+                this.opportunitiesVersioning = response.versions;
+            });
+    }
+
+    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_account_id: `${this.accountId}`,
+                            crm_contact_id: `${this.contactId}`,
+                            crm_opportunity_id: `${this.opportunitiesId}`
+                        },
+                        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);
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}