@adlfe/campaign-management-library 2.9.21 → 2.10.2

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/new-campaign.component.ts

@@ -0,0 +1,598 @@
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+import { Subscription } from 'rxjs';
+import { SegmentedMessage } from 'sms-segments-calculator';
+import { MainArea } from '../../../core/enums';
+import { Parameter } from '../../../core/models/util/api-adapter-service-models';
+import { AppResponse } from '../../../core/models/util/api-dto/response-models';
+import { ApiAdapterServiceService } from '../../../core/services';
+import { ConfirmationComponent } from '../../../global/confirmation/confirmation';
+import { ConfirmationModel } from '../../../global/confirmation/shared/model';
+import { FailoverReqModel, GeneralInformationWAReqModel, SchedulerReqModel } from '../../models';
+
+@Component({
+    selector: 'lib-new-campaign',
+    templateUrl: './new-campaign.component.html',
+    styleUrls: ['./new-campaign.component.scss'],
+})
+export class NewCampaignComponent implements OnInit, OnDestroy {
+    @Output() currentView = new EventEmitter<MainArea>();
+
+    public campaignID: string;
+    public currentViews = MainArea;
+    public positionWizard: number = 1;
+    public dataWizard: string[];
+    public isLoading: boolean = false;
+    public isSubmit: boolean = false;
+    public isGeneralInformationValid: boolean = false;
+    public isFailoverMechanismValid: boolean = false;
+    public isNumberBaseInformationValid: boolean = false;
+    public isSchedulerInformationValid: boolean = false;
+    public isLine: boolean = false;
+    public generalInformationData: any;
+    public failoverMechanismData: any;
+    public targetAudienceData: string[];
+    public targetAudienceCount: number;
+    public targetAudienceFile: any;
+    public schedulerData: any;
+
+    private isUploadTargetAudience: boolean = false;
+    private subscribers: Subscription[] = [];
+
+    constructor(
+        private dialog: MatDialog,
+        private apiAdapterService: ApiAdapterServiceService,
+        private toastr: ToastrService
+    ) {}
+
+    ngOnInit(): void {
+        this.campaignID = window.location.pathname?.split('/')?.pop();
+
+        this.initWizard();
+        this.getCampaignDetailService();
+    }
+
+    private initWizard(): void {
+        if (!this.isLine) {
+            this.dataWizard = [
+                'General Information',
+                'Failover Mechanism',
+                'Target Audience',
+                'Scheduler',
+                'Summary',
+            ];
+            return;
+        }
+
+        this.dataWizard = ['General Information', 'Target Audience', 'Scheduler', 'Summary'];
+    }
+
+    private getCampaignDetailService(): void {
+        if (this.campaignID?.length < 10) return;
+
+        this.isLoading = true;
+
+        const subs = this.apiAdapterService
+            .executeApiRequest([], `/campaign/${this.campaignID}`, 'GET')
+            .subscribe(
+                (resp: AppResponse<any>) => {
+                    if (!resp) return;
+
+                    const generalInformation = {
+                        campaignName: resp.data?.name,
+                        medium: resp.data?.platform,
+                        channel: ['image', 'video', 'document'].includes(resp.data?.type)
+                            ? 'MEDIA'
+                            : resp.data?.type?.toUpperCase(),
+                        media: resp.data?.type?.toUpperCase(),
+                        from: {
+                            id: resp.data?.accountId,
+                            name: resp.data?.accountName,
+                            platform: resp.data?.platform,
+                            clientId: resp.data?.clientId,
+                            clientName: resp.data?.clientName,
+                            accountNo: resp.data?.accountNo,
+                            wabaId: resp.data?.wabaId ?? '',
+                        },
+                        text: resp.data?.details?.text,
+                        targetURL:
+                            resp.data?.details?.image?.url ??
+                            resp.data?.details?.document?.url ??
+                            resp.data?.details?.video?.url ??
+                            resp.data?.details?.template?.headerURL,
+                        paramHeader: resp.data?.details?.template?.header,
+                        paramBody: resp.data?.details?.template?.data,
+                        paramButton: resp.data?.details?.template?.button,
+                        otpValue: [...(resp.data?.details?.template?.data ?? [])]?.pop(),
+                        template: {
+                            ID: resp.data?.details?.template?.id,
+                            name: resp.data?.details?.template?.name,
+                            lang: resp.data?.details?.template?.lang,
+                            platform: resp.data?.platform,
+                            headerURL: resp.data?.details?.template?.headerURL,
+                            header: {
+                                examples: resp.data?.details?.template?.header,
+                            },
+                            body: {
+                                examples: resp.data?.details?.template?.data,
+                            },
+                            buttons: resp.data?.details?.template?.button,
+                            ClientId: resp.data?.clientId,
+                            ClientName: resp.data?.clientName,
+                        },
+                        isUpload: resp.data?.fileId !== '',
+                        fileId: resp.data?.fileId,
+                    };
+
+                    localStorage.setItem(
+                        'telin.campaign',
+                        JSON.stringify({
+                            ...this.getCampaignStorage,
+                            ...{
+                                generalInformation: {
+                                    id: resp.data?.id,
+                                    form: generalInformation,
+                                },
+                                failover: resp.data?.failover,
+                                targetAudience: resp.data?.targets,
+                                targetAudienceFile: {
+                                    name: resp.data?.fileName,
+                                    targetURL: resp.data?.targetURL,
+                                },
+                                scheduler: {
+                                    schedulerType:
+                                        resp.data?.scheduleType === 'MULTI'
+                                            ? 'ONE_TIME'
+                                            : resp.data?.scheduleType,
+                                    startDate: resp.data?.startTime?.split(' ')[0],
+                                    startTime: resp.data?.startTime?.split(' ')[1],
+                                    isRepeat: resp.data?.scheduleType === 'MULTI',
+                                    delivery: resp.data?.repeat,
+                                },
+                            },
+                        })
+                    );
+
+                    this.isLine = resp.data?.platform === 'LINE';
+                    this.isLoading = false;
+
+                    this.initWizard();
+                },
+                () => {
+                    this.isLoading = false;
+                }
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    public generalInformation(form: { parent: FormGroup; child: FormGroup }): void {
+        this.isGeneralInformationValid = form.parent.valid && form.child && form.child?.valid;
+        this.isLine = form.parent?.getRawValue()?.medium === 'LINE';
+
+        this.initWizard();
+
+        if (form.parent && form.child)
+            this.generalInformationData = {
+                ...form.parent.getRawValue(),
+                ...form.child.getRawValue(),
+            };
+    }
+
+    public failoverMechanism(form: FormGroup): void {
+        this.isFailoverMechanismValid = form.valid;
+        this.failoverMechanismData = form.getRawValue();
+    }
+
+    public targetAudience(target: {
+        targetAudience: string[];
+        numberCount: number;
+        isUpload: boolean;
+        file: any;
+    }): void {
+        this.targetAudienceFile = target.file;
+        this.targetAudienceData = target.targetAudience;
+        this.targetAudienceCount = target.numberCount;
+        this.isUploadTargetAudience = target.isUpload;
+        this.isNumberBaseInformationValid =
+            (target.isUpload && target.file?.name) ||
+            (!target.isUpload && target.targetAudience.length > 0) ||
+            this.getCampaignStorage?.generalInformation?.form?.fileId;
+    }
+
+    public scheduler(form: FormGroup): void {
+        this.schedulerData = form.getRawValue();
+        this.isSchedulerInformationValid = form.valid;
+    }
+
+    public onClickSaveAndNextButton(): void {
+        this.isSubmit = true;
+
+        switch (this.positionWizard) {
+            case 1:
+                this.saveGeneralInformationService();
+                break;
+            case 2:
+                !this.isLine ? this.saveFailoverMechanismService() : this.saveNumberBasesService();
+                break;
+            case 3:
+                !this.isLine ? this.saveNumberBasesService() : this.saveSchedulerService();
+                break;
+            case 4:
+                if (!this.isLine) this.saveSchedulerService();
+                break;
+            default:
+                this.isSubmit = false;
+                break;
+        }
+    }
+
+    get getCampaignStorage(): any {
+        return localStorage.getItem('telin.campaign')
+            ? JSON.parse(localStorage.getItem('telin.campaign'))
+            : {};
+    }
+
+    get getBody(): string {
+        const body =
+            this.generalInformationData?.text ||
+            this.generalInformationData?.template?.body?.text ||
+            this.generalInformationData?.body?.text;
+
+        return (
+            body
+                ?.split(/\\n|\n/)
+                .join('<br />')
+                .split(/\\t|\t/)
+                .join('    ') ?? ''
+        );
+    }
+
+    public onCheckTwilioCounterValid = (): boolean => {
+        const valuesGeneral = this.generalInformationData;
+
+        if (valuesGeneral?.medium !== 'SMS') {
+            return true;
+        }
+
+        if (valuesGeneral?.channel === 'TEXT') {
+            const segmentedMessage = new SegmentedMessage(this.getBody);
+            const result = {
+                segments: segmentedMessage.segmentsCount,
+                encoding: segmentedMessage.encodingName,
+                characters: segmentedMessage.numberOfUnicodeScalars,
+            };
+
+            if (result.segments > 10) {
+                return false;
+            } else {
+                return true;
+            }
+        } else {
+            let valueResult = this.getBody;
+            Array.from(valuesGeneral.template?.body?.examples || []).map((entry, index) => {
+                if (valuesGeneral.paramBody.length > 0) {
+                    const placeholder = `{{${entry}}}`;
+                    const value = valuesGeneral.paramBody[index].name;
+                    valueResult = valueResult.split(placeholder).join(value);
+                }
+            });
+
+            const segmentedMessage = new SegmentedMessage(valueResult);
+            const result = {
+                segments: segmentedMessage.segmentsCount,
+                encoding: segmentedMessage.encodingName,
+                characters: segmentedMessage.numberOfUnicodeScalars,
+            };
+
+            if (result.segments > 10) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+    };
+
+    private saveGeneralInformationService(): void {
+        if (!this.onCheckTwilioCounterValid()) {
+            this.toastr.error('Segment cannot more than 10');
+            this.isSubmit = false;
+            return;
+        }
+
+        const bodyReq = new GeneralInformationWAReqModel().clone({
+            ...this.generalInformationData,
+        });
+
+        const parameterList: Array<Parameter> = [
+            {
+                name: 'data',
+                value: bodyReq.convert(),
+                in: 'body',
+                type: 'object',
+                withoutKeyData: true,
+            },
+        ];
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(
+                parameterList,
+                this.generalInformationData.id
+                    ? `/campaign/${this.generalInformationData.id}`
+                    : '/campaign',
+                this.generalInformationData.id ? 'PUT' : 'POST'
+            )
+            .subscribe(
+                (resp) => {
+                    if (resp?.message?.toLowerCase() !== 'success') {
+                        this.isSubmit = false;
+                        return;
+                    }
+
+                    localStorage.setItem(
+                        'telin.campaign',
+                        JSON.stringify({
+                            ...this.getCampaignStorage,
+                            ...{
+                                generalInformation: {
+                                    id: resp.data.id,
+                                    form: this.generalInformationData,
+                                },
+                            },
+                        })
+                    );
+
+                    this.isSubmit = false;
+                    this.positionWizard += 1;
+                },
+                () => (this.isSubmit = false)
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    private saveFailoverMechanismService(): void {
+        const bodyReq = new FailoverReqModel().clone({
+            ...this.failoverMechanismData,
+        });
+
+        const parameterList: Array<Parameter> = [
+            {
+                name: 'data',
+                value: bodyReq.convert(),
+                in: 'body',
+                type: 'object',
+                withoutKeyData: true,
+            },
+        ];
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(
+                parameterList,
+                `/campaign/${this.getCampaignStorage?.generalInformation?.id}/failover`,
+                'POST'
+            )
+            .subscribe(
+                (resp) => {
+                    if (resp?.message?.toLowerCase() !== 'success') {
+                        this.isSubmit = false;
+                        return;
+                    }
+
+                    localStorage.setItem(
+                        'telin.campaign',
+                        JSON.stringify({
+                            ...this.getCampaignStorage,
+                            ...{
+                                failover: this.failoverMechanismData,
+                            },
+                        })
+                    );
+
+                    this.isSubmit = false;
+                    this.positionWizard += 1;
+                },
+                () => (this.isSubmit = false)
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    private saveNumberBasesService(): void {
+        if (this.targetAudienceData.length === 0 || this.isUploadTargetAudience) {
+            localStorage.setItem(
+                'telin.campaign',
+                JSON.stringify({
+                    ...this.getCampaignStorage,
+                    ...{
+                        targetAudience: this.targetAudienceData,
+                        targetAudienceCount: this.targetAudienceCount,
+                        targetAudienceFile: this.targetAudienceFile,
+                    },
+                })
+            );
+
+            this.isSubmit = false;
+            this.positionWizard += 1;
+            return;
+        }
+
+        const parameterList: Array<Parameter> = [
+            {
+                name: 'data',
+                value: {
+                    targets: this.targetAudienceData,
+                    numberCount: this.targetAudienceCount,
+                },
+                in: 'body',
+                type: 'object',
+                withoutKeyData: true,
+            },
+        ];
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(
+                parameterList,
+                `/campaign/${this.getCampaignStorage?.generalInformation?.id}/targetcategory`,
+                'POST'
+            )
+            .subscribe(
+                (resp) => {
+                    if (resp?.message?.toLowerCase() !== 'success') {
+                        this.isSubmit = false;
+                        return;
+                    }
+
+                    localStorage.setItem(
+                        'telin.campaign',
+                        JSON.stringify({
+                            ...this.getCampaignStorage,
+                            ...{
+                                targetAudience: this.targetAudienceData,
+                                targetAudienceCount: this.targetAudienceCount,
+                                targetAudienceFile: this.targetAudienceFile,
+                            },
+                        })
+                    );
+
+                    this.isSubmit = false;
+                    this.positionWizard += 1;
+                },
+                () => (this.isSubmit = false)
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    private saveSchedulerService(): void {
+        const bodyReq = new SchedulerReqModel().clone({
+            ...this.schedulerData,
+        });
+
+        const parameterList: Array<Parameter> = [
+            {
+                name: 'data',
+                value: bodyReq.convert(),
+                in: 'body',
+                type: 'object',
+                withoutKeyData: true,
+            },
+        ];
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(
+                parameterList,
+                `/campaign/${this.getCampaignStorage?.generalInformation?.id}/schedule`,
+                'POST'
+            )
+            .subscribe(
+                (resp) => {
+                    if (resp?.message?.toLowerCase() !== 'success') {
+                        this.isSubmit = false;
+                        return;
+                    }
+
+                    localStorage.setItem(
+                        'telin.campaign',
+                        JSON.stringify({
+                            ...this.getCampaignStorage,
+                            ...{
+                                scheduler: this.schedulerData,
+                            },
+                        })
+                    );
+
+                    this.isSubmit = false;
+                    this.positionWizard += 1;
+                },
+                () => (this.isSubmit = false)
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    public onPrevious(): void {
+        this.positionWizard -= 1;
+    }
+
+    public changeCurrentView(area: MainArea) {
+        this.openConfirmationDialog(area);
+    }
+
+    private openConfirmationDialog(area: MainArea): void {
+        const confirmation = new ConfirmationModel();
+
+        confirmation.title = 'Cancel Add Broadcast';
+        confirmation.content = `Are you sure you want to cancel<br/> Add Broadcast?`;
+        confirmation.btnSubmitRed = 'Yes';
+        confirmation.btnCancel = 'No';
+
+        const subs = this.dialog
+            .open(ConfirmationComponent, {
+                autoFocus: false,
+                backdropClass: 'overlay-backdrop-dialog',
+                data: confirmation,
+            })
+            .afterClosed()
+            .subscribe((resp) => {
+                if (resp) {
+                    window.history.replaceState(
+                        {},
+                        `/${this.getCampaignStorage?.generalInformation?.id}`,
+                        '/secure/campaign'
+                    );
+
+                    this.currentView.emit(area);
+                }
+            });
+
+        this.subscribers.push(subs);
+    }
+
+    public onSubmitForApproval(): void {
+        const parameterList: Array<Parameter> = [];
+        this.isSubmit = true;
+
+        if (this.getCampaignStorage?.targetAudienceFile?.name)
+            parameterList.push({
+                name: 'isFile',
+                value: true,
+                in: 'query',
+                type: 'string',
+            });
+
+        const subs = this.apiAdapterService
+            .executeApiRequest(
+                parameterList,
+                `/campaign/${this.getCampaignStorage?.generalInformation?.id}/submit`,
+                'POST'
+            )
+            .subscribe(
+                (resp) => {
+                    if (resp?.message?.toLowerCase() !== 'success') {
+                        this.isSubmit = false;
+                        return;
+                    }
+
+                    window.history.replaceState(
+                        {},
+                        `/${this.getCampaignStorage?.generalInformation?.id}`,
+                        '/secure/campaign'
+                    );
+
+                    this.toastr.success('Campaign submitted for approval!');
+                    this.isSubmit = false;
+                    this.currentView.emit(this.currentViews.CampaignIndex);
+                },
+                () => (this.isSubmit = false)
+            );
+
+        this.subscribers.push(subs);
+    }
+
+    ngOnDestroy(): void {
+        this.subscribers.forEach((each) => each.unsubscribe());
+    }
+}