@posiwise/smart-crm 0.0.19 → 0.0.21

package/src/lib/private/components/smart-crm-accounts/smart-crm-account-info/smart-crm-account-info.component.ts

@@ -0,0 +1,792 @@
+import { DOCUMENT } from '@angular/common';
+import {
+    AfterViewChecked,
+    ChangeDetectorRef,
+    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 { LogoCacheService } from '@posiwise/common-services';
+import { UploadFile, UploadInput, UploadOutput, UploadStatus, UploaderOptions } from 'ngx-uploader';
+import { LazyLoadEvent } from 'primeng/api';
+import { Observable } from 'rxjs';
+import swal from 'sweetalert2';
+
+import {
+    DOCUMENT_TYPE_EXT,
+    PAGE_SIZE,
+    TOKEN_HEADER_KEY,
+    Paging,
+    Subscription,
+    User,
+    Country
+} from '@posiwise/common-utilities';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import {
+    AuthService,
+    CommonService,
+    FormHelperService,
+    GeoService,
+    SubscriptionService
+} from '@posiwise/common-services';
+import { HelperService } from '@posiwise/helper-service';
+import moment from 'moment';
+import {
+    CrmOwner,
+    CrmopportunityContact,
+    FilteredCrmComment,
+    FilteredData,
+    OrganizationIndustry,
+    OrganizationSize,
+    OrganizationType,
+    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';
+
+interface SubscriptionMember {
+    id: number;
+    first_name: string;
+    last_name: string;
+    email: string;
+    // Other properties of SubscriptionMember
+}
+
+@Component({
+    selector: 'pw-smart-crm-company-info',
+    templateUrl: './smart-crm-account-info.component.html',
+    styleUrls: ['./smart-crm-account-info.component.scss']
+})
+export class SmartCrmCompanyInfoComponent
+    extends AppBaseComponent
+    implements OnInit, OnDestroy, AfterViewChecked
+{
+    subscription: Subscription;
+
+    actionControls: UntypedFormGroup;
+
+    aboutControls: UntypedFormGroup;
+
+    accountId: number;
+
+    userId: number;
+
+    isFormEdit = true;
+
+    user: User;
+
+    allSubscriptionMembers: SubscriptionMember[];
+
+    filteredOwner: SubscriptionMember[];
+
+    data: CrmAccount;
+
+    isDataLoaded = false;
+
+    submitted = false;
+
+    accountComments = [];
+
+    hasAccess = false;
+
+    body: string;
+
+    editComment = false;
+
+    filteredContact: { displayName: string }[];
+
+    private isContactValid = true;
+
+    filteredContactComment: FilteredCrmComment[];
+
+    contactId: number;
+
+    isLoaded = false;
+
+    totalRecords: number;
+
+    totalRecordsUnFiltered = 0;
+
+    loading = true;
+
+    searchText = '';
+
+    potential = ['low', 'medium', 'high'];
+
+    filterByPotentials: string;
+
+    showFullComment = false;
+
+    commentId: number;
+
+    status: string[];
+
+    priority: FilteredData[];
+
+    source: FilteredData[];
+
+    organizationSizes$: Observable<OrganizationSize[]>;
+
+    organizationIndustries$: Observable<OrganizationIndustry[]>;
+
+    countries$: Observable<Country[]>;
+
+    organizationTypes$: Observable<OrganizationType[]>;
+
+    owner: CrmOwner;
+
+    actions: SmartCrmAction[];
+
+    buttonDisable: boolean;
+
+    isDisabled = false;
+
+    dangerColor: boolean;
+
+    updating = false;
+
+    actionId: number;
+
+    accountVersioning: string[];
+
+    contacts: CrmopportunityContact[];
+
+    options: UploaderOptions;
+
+    uploadInput: EventEmitter<UploadInput>;
+
+    files: UploadFile[];
+
+    token: string;
+
+    dragOver: boolean;
+
+    Done: boolean;
+
+    direction = '';
+
+    private page = 1;
+
+    currentPage = 1;
+
+    private totalContacts = 0;
+
+    selector = '.timeline-container';
+
+    submitAction = false;
+
+    subscriptionId: number;
+
+    routers = ROUTERS;
+    buttonBusy = false;
+
+    constructor(
+        injector: Injector,
+        private crmService: CrmService,
+        private subscriptionService: SubscriptionService,
+        private geoService: GeoService,
+        private commonService: CommonService,
+        private modalService: NgbModal,
+        private authService: AuthService,
+        private cdr: ChangeDetectorRef,
+        private logoCacheService: LogoCacheService,
+        @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.getAccountActionsForm(this.isDisabled);
+        this.aboutControls = AppSmartCrm.getAccountsForm();
+    }
+
+    ngOnInit() {
+        this.countries$ = this.geoService.getCountries();
+        this.organizationIndustries$ = this.commonService.getOrganizationIndustries();
+        this.organizationTypes$ = this.commonService.getOrganizationTypes();
+        this.organizationSizes$ = this.commonService.getOrganizationSizes();
+        this.userStore().subscribe(res => {
+            if (res) {
+                this.userId = res.id;
+                this.actionControls.get('owner_id').setValue(res.id);
+            }
+        });
+        this.getUserSubscription().subscribe(response => {
+            this.subscription = response;
+            if (this.subscription?.id) {
+                this.hasAccess = this.hasAdminAccess(this.subscription.id);
+                this.getActions();
+                this.accountDefaultValues(this.subscription.id);
+                this.aboutControls.get('subscription_id').setValue(this.subscription?.id);
+            }
+            this.route.params.subscribe(data => {
+                this.accountId = Number(data['id']);
+                if (this.accountId) {
+                    this.getAccountDetails();
+                    this.getContactVersion();
+                }
+            });
+        });
+        this.getAllComments();
+    }
+
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+
+    onLazyLoad(event: LazyLoadEvent) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getAccountContacts({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+    }
+
+    /** Function to call account default values */
+    private accountDefaultValues(id) {
+        this.crmService.getCrmAccountDefaultValues(id).subscribe(response => {
+            this.status = response.status;
+            this.priority = response.priority;
+            this.source = response.source;
+        });
+    }
+
+    /** Function to call account by ID */
+    getAccountDetails() {
+        this.isDataLoaded = false;
+        this.crmService
+            .getAccountDetail(this.subscription?.id, this.accountId)
+            .subscribe(response => {
+                this.data = response;
+                this.aboutControls.patchValue(response);
+                this.aboutControls.get('owner_id').setValue(response.owner);
+            })
+            .add(() => {
+                this.isDataLoaded = true;
+            });
+    }
+
+    get f() {
+        return this.aboutControls.controls;
+    }
+
+    updateAccountInfo() {
+        this.buttonBusy = true;
+        if (!this.aboutControls.valid) {
+            this.buttonBusy = false;
+            this.submitted = true;
+        } else {
+            this.aboutControls
+                .get('owner_id')
+                .setValue(this.aboutControls.get('owner_id').value.id);
+            this.crmService
+                .updateAccount(this.subscription?.id, this.accountId, this.aboutControls.value)
+                .subscribe(() => {
+                    this.toast.success(
+                        this.translation.translate('Crm.AccountMessage.UpdatedMessage')
+                    );
+                    this.isFormEdit = true;
+                    this.getAccountDetails();
+                })
+                .add(() => {
+                    this.buttonBusy = false;
+                    this.submitted = false;
+                });
+        }
+    }
+
+    onScrollTimeline() {
+        this.currentPage++;
+        const totalPages = Math.ceil(this.totalContacts / 5);
+        // Prevent API call if all messages have been fetched
+        if (this.currentPage <= totalPages) {
+            this.getAllComments();
+        }
+    }
+
+    /** Function to save comment */
+    onSave() {
+        this.submitAction = true;
+        const form = this.actionControls.value;
+        form.owner_id = this.data?.owner_id;
+        form.crm_account_id = this.accountId;
+        form.crm_contact_id = form?.crm_contact_id?.id;
+        form.when = HelperService.dateFormat(form.when);
+        if (this.actionControls.invalid) {
+            FormHelperService.validateAllFormFields(this.actionControls);
+        } else {
+            this.buttonBusy = true;
+            this.crmService
+                .postAccountComment(this.subscription?.id, form)
+                .subscribe(() => {
+                    this.actionControls.get('comment').reset();
+                    this.getAllComments();
+                    this.toast.success(
+                        this.translation.translate('Crm.AccountMessage.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);
+    }
+
+    /** Function to get comments */
+    private getAllComments() {
+        this.getUserSubscriptionId().subscribe(response => {
+            this.subscriptionId = response;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAccountComments(this.accountId, this.subscriptionId, {
+                        page: this.currentPage,
+                        page_size: 5
+                    })
+                    .subscribe(resp => {
+                        this.totalContacts = resp.object_count;
+                        if (resp?.crm_account_actions?.length) {
+                            const existingIds = new Set(
+                                this.accountComments.map(comment => comment.id)
+                            );
+
+                            this.accountComments = [
+                                ...this.accountComments,
+                                ...resp.crm_account_actions.filter(
+                                    comment => !existingIds.has(comment.id)
+                                )
+                            ];
+
+                            this.accountComments.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.accountComments.sort((a, b) => {
+                                return new Date(a.when).getTime() - new Date(b.when).getTime();
+                            });
+                            this.accountComments.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: string[] = this.accountComments.filter(
+                                action => action.completed === true || action.cancelled === true
+                            );
+                            completedCancelledActions.reverse();
+                            const notCompletedCancelledActions: string[] =
+                                this.accountComments.filter(
+                                    action =>
+                                        action.completed === false && action.cancelled === false
+                                );
+                            this.accountComments =
+                                notCompletedCancelledActions.concat(completedCancelledActions);
+                            this.isLoaded = true;
+                        } else {
+                            this.isLoaded = true;
+                        }
+                    });
+            }
+        });
+    }
+
+    /** Function to update comment */
+    updateComment(item) {
+        const commentObj = {
+            comment: item.comment,
+            completed: item.completed,
+            cancelled: item.cancelled,
+            crm_account_id: item.crm_account_id,
+            crm_contact_id: this.contactId
+        };
+        this.crmService
+            .updateAccountComment(this.subscription?.id, item.id, commentObj)
+            .subscribe(() => {
+                this.toast.success('comment updated successfully');
+                this.showEditControls(undefined, '');
+                this.getAllComments();
+            });
+    }
+
+    /** Function to execute on location select */
+    handleAddressChange(event) {
+        this.aboutControls.get('location').setValue(event.formatted_address);
+    }
+
+    /** Function to get subscription members */
+    getAllSubscriptionMembers() {
+        this.subscriptionService
+            .getEnrolledSubscription(this.subscription?.id)
+            .subscribe(member => {
+                this.allSubscriptionMembers = member.members;
+            });
+    }
+
+    /** Function to show edit comment section */
+    showEditControls(event, action) {
+        if (action && action.crm_contact) {
+            this.contactId = action.crm_contact.id;
+        }
+        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 get and show all the actions */
+    getActions() {
+        this.crmService.getActionsBySubscriptionId(this.subscription?.id).subscribe(resp => {
+            if (resp?.crm_actions?.length) {
+                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);
+    }
+
+    /** Function to set the action as completed */
+    setAsCompletedOrUncompleted(id: number, action, completedOrUncompleted: boolean) {
+        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.getAllComments();
+                        });
+                }
+            });
+    }
+
+    /** Function to set the action as cancelled */
+    setAsCancelled(id: number, 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.getAllComments();
+                        });
+                }
+            });
+    }
+
+    /** 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.getAllComments();
+                this.updating = false;
+            });
+    }
+
+    /** Function to show DatePicker */
+    showDatePickerUpdate(actionId) {
+        this.updating = !this.updating;
+        this.actionId = actionId;
+    }
+
+    /** Function to get the contacts related to account */
+    private getAccountContacts(paging: Paging) {
+        this.getUserSubscriptionId().subscribe(id => {
+            this.subscriptionId = id;
+            if (this.subscriptionId) {
+                this.crmService
+                    .getAccountContacts(
+                        this.accountId,
+                        this.subscriptionId,
+                        this.filterByPotentials || '',
+                        paging
+                    )
+                    .subscribe(response => {
+                        if (response.contacts) {
+                            this.contacts = response.contacts;
+                            this.totalRecords = response.object_count;
+                            this.totalRecordsUnFiltered = response.unfiltered_count;
+                            this.contacts.forEach(member => {
+                                member.displayName = `${member.first_name || ''} ${
+                                    member.last_name || ''
+                                } - ${member.email}`.trim();
+                            });
+                        }
+                    })
+                    .add(() => {
+                        this.loading = false;
+                    });
+            }
+        });
+    }
+
+    /** Function when auto-complete dropdown selected */
+    onDropdownClick() {
+        if (this.contacts.length === 0) {
+            this.filteredContact = [{ displayName: 'No contact to choose' }];
+            this.filteredContactComment = [{ first_name: 'No contact to choose' }];
+        }
+    }
+
+    /** search owner */
+    search(event) {
+        const values = [];
+        if (event.query) {
+            this.filteredOwner = this.allSubscriptionMembers.filter((x: SubscriptionMember) => {
+                return x.first_name.toLowerCase().includes(event.query.toLowerCase());
+            });
+        } else {
+            this.allSubscriptionMembers.forEach(element => {
+                values.push(element);
+            });
+        }
+        this.filteredOwner = values;
+    }
+
+    searchContact(event) {
+        this.isContactValid = false;
+        let values = [];
+        if (event.query) {
+            values = this.contacts.filter((x: CrmopportunityContact) => {
+                return x.displayName.toLowerCase().includes(event.query.toLowerCase());
+            });
+        } else {
+            this.contacts.forEach(element => {
+                values.push(element);
+            });
+        }
+        this.filteredContact = values;
+    }
+
+    selectContact(event) {
+        this.isContactValid = this.contacts.some(x => x.id === event.id);
+    }
+
+    OnContactBlur() {
+        if (!this.isContactValid) {
+            this.actionControls.get('crm_contact_id').setValue('');
+        }
+    }
+
+    searchContactInComment(event) {
+        let values = [];
+        if (event.query) {
+            values = this.contacts.filter((x: CrmopportunityContact) => {
+                return x.displayName.toLowerCase().includes(event.query.toLowerCase());
+            });
+        } else {
+            this.contacts.forEach(element => {
+                values.push(element);
+            });
+        }
+        this.filteredContactComment = values;
+    }
+
+    selectCommentContact(event) {
+        this.contactId = event.id;
+    }
+
+    /** Function to delete contact */
+    onDeleteContact(id: number) {
+        HelperService.raiseDeletePopup().then(resp => {
+            if (resp.value) {
+                this.crmService.deleteContact(this.subscription?.id, id).subscribe(() => {
+                    this.toast.success(
+                        this.translation.translate('Crm.ContactMessage.DeletedMessage')
+                    );
+                    this.getAccountContacts({
+                        page: this.page,
+                        page_size: PAGE_SIZE
+                    });
+                });
+            }
+        });
+    }
+
+    /** Function to get contact versions */
+    private getContactVersion() {
+        this.crmService
+            .getContactVersion(this.subscription?.id, this.accountId, 'CrmAccount')
+            .subscribe(response => {
+                this.accountVersioning = response.versions;
+            });
+    }
+
+    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_account_id: `${this.accountId}`
+                        },
+                        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);
+    }
+
+    getAccountLogo(url: string) {
+        if (url) {
+            return this.logoCacheService.getLogo(
+                `https://logo.clearbit.com/${url?.split('.')[1]}.${
+                    url?.split('.')[2]?.split('/')[0]
+                }`
+            );
+        }
+
+        return '';
+    }
+
+    navigateToAddOpportunities() {
+        this.router.navigate([`/${this.subscription?.slug}${this.routers.opportunityAdd}`], {
+            queryParams: { account_id: this.accountId }
+        });
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}