@adlfe/campaign-management-library 2.9.21 → 2.10.2

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.scss

@@ -0,0 +1,23 @@
+::ng-deep .mat-dialog-content {
+	&.campaign-view {
+		max-height: 100%;
+		overflow-x: hidden;
+	}
+}
+
+.overlay-bg {
+	position: absolute;
+    top: 18px;
+    left: 18px;
+    right: 28px;
+    bottom: 18px;
+    z-index: 99;
+    background-color: rgb(0 0 0 / 25%);
+	border-radius: 16px;
+	&__center {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PendingApprovalDialogViewComponent } from './pending-approval-dialog-view.component';
+
+describe('PendingApprovalDialogViewComponent', () => {
+  let component: PendingApprovalDialogViewComponent;
+  let fixture: ComponentFixture<PendingApprovalDialogViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PendingApprovalDialogViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PendingApprovalDialogViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/dialog/pending-approval-dialog-view/pending-approval-dialog-view.component.ts

@@ -0,0 +1,217 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+import { Subscription } from 'rxjs';
+import { AppResponse } from '../../../../../core/models/util/api-dto/response-models';
+import { ApiAdapterServiceService } from '../../../../../core/services';
+
+@Component({
+	selector: 'lib-pending-approval-dialog-view',
+	templateUrl: './pending-approval-dialog-view.component.html',
+	styleUrls: ['./pending-approval-dialog-view.component.scss'],
+})
+export class PendingApprovalDialogViewComponent implements OnInit, OnDestroy {
+	public isLoading: boolean = false;
+	public isSubmit: boolean = false;
+	public isShowButton: boolean = false;
+
+	private subscribers: Subscription[] = [];
+
+	constructor(
+		private dialogRef: MatDialogRef<PendingApprovalDialogViewComponent>,
+		private apiAdapterService: ApiAdapterServiceService,
+		private toastr: ToastrService
+	) {}
+
+	ngOnInit(): void {
+		this.getCampaignDetailService();
+
+		this.isShowButton =
+			this.getCampaignStorage?.generalInformation?.isShowButton ?? false;
+	}
+
+	get getCampaignStorage(): any {
+		return localStorage.getItem('telin.campaign')
+			? JSON.parse(localStorage.getItem('telin.campaign'))
+			: {};
+	}
+
+	private convertUTCDateToLocalDate(date: Date) {
+		const newDate = new Date(
+			date.getTime() - date.getTimezoneOffset() * 60 * 1000
+		);
+		return newDate;
+	}
+
+	private getCampaignDetailService(): void {
+		if (!this.getCampaignStorage?.generalInformation?.id) return;
+
+		this.isLoading = true;
+
+		const subs = this.apiAdapterService
+			.executeApiRequest(
+				[],
+				`/campaign/${this.getCampaignStorage?.generalInformation?.id}`,
+				'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.isLoading = false;
+				},
+				() => {
+					this.isLoading = false;
+				}
+			);
+
+		this.subscribers.push(subs);
+	}
+
+	public rejectCampaignService(): void {
+		this.isSubmit = true;
+
+		const subs = this.apiAdapterService
+			.executeApiRequest(
+				[],
+				`/campaign/${this.getCampaignStorage?.generalInformation?.id}/reject`,
+				'POST'
+			)
+			.subscribe(
+				(resp: AppResponse<any>) => {
+					this.isSubmit = false;
+
+					if (!resp || !resp?.data)
+						return this.toastr.error('Error Rejecting Campaign!');
+
+					this.toastr.success('Campaign Rejected Successfully!');
+					this.onClose();
+				},
+				() => {
+					this.toastr.error('Error Rejecting Campaign!');
+					this.isSubmit = false;
+				}
+			);
+
+		this.subscribers.push(subs);
+	}
+
+	public approveCampaignService(): void {
+		this.isSubmit = true;
+
+		const subs = this.apiAdapterService
+			.executeApiRequest(
+				[],
+				`/campaign/${this.getCampaignStorage?.generalInformation?.id}/approve`,
+				'POST'
+			)
+			.subscribe(
+				(resp: AppResponse<any>) => {
+					this.isSubmit = false;
+
+					if (!resp || !resp?.data)
+						return this.toastr.error('Error Approving Campaign!');
+
+					this.toastr.success('Campaign Approved Successfully!');
+					this.onClose();
+				},
+				() => {
+					this.toastr.error('Error Approving Campaign!');
+					this.isSubmit = false;
+				}
+			);
+
+		this.subscribers.push(subs);
+	}
+
+	public onClose(): void {
+		localStorage.removeItem('telin.campaign');
+		this.dialogRef.close();
+	}
+
+	ngOnDestroy(): void {
+		this.subscribers.forEach(each => each.unsubscribe());
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/campaign-response-dto.model.ts

@@ -0,0 +1,48 @@
+export interface CampaignResponseDtoApi {
+	id: string | null;
+	name: string | null;
+	accountId: string | null;
+	accountName: string | null;
+	type: string | null;
+	platform: string | null;
+	clientId: string | null;
+	clientName: string | null;
+	status: string | null;
+	statusName: string | null;
+	scheduleType: string | null;
+	startTime: string | null;
+	endTime: string | null;
+	approver1: string | null;
+	approver1Time: string | null;
+	approver2: string | null;
+	approver2Time: string | null;
+	targetType: string | null;
+	fileId: string | null;
+	targets: string[] | null;
+	delivCount: number | null;
+	numberCount: number | null;
+	repeatCount: number | null;
+	createdDate: string | null;
+	endDate: string | null;
+	wabaId: string | null;
+	accountNo: string | null;
+	repeat: string | null;
+	fileName: string | null;
+	targetURL: string | null;
+	sentCount: number | null;
+	readCount: number | null;
+	failedCount: number | null;
+	queuedCount: number | null;
+	platformQueueCount: number | null;
+	notProcessCount: number | null;
+	templateName: string | null;
+	failover: {
+		active: false;
+		type: string | null;
+		intervalType: string | null;
+		interval: number | null;
+		parentBulkId: string | null;
+		counter: number | null;
+		accounts: any[];
+	};
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/campaign-table-config.const.ts

@@ -0,0 +1,37 @@
+export const CampaignListTableLabelConst = [
+	'Broadcast ID',
+	'Business Name',
+	'Broadcast Name',
+	'Template Name',
+	'Channel',
+	'Status',
+	'Number Count',
+	'On Progress',
+	'Sent',
+	'Delivered',
+	'Read',
+	'Failed',
+	'Repeat Count',
+	'Start Date',
+	'End Date',
+	'Action',
+];
+
+export const CampaignListTableColumnConst = [
+	'id',
+	'clientName',
+	'name',
+	'templateName',
+	'platform',
+	'statusName',
+	'numberCount',
+	'queuedCount',
+	'sentCount',
+	'delivCount',
+	'readCount',
+	'failedCount',
+	'repeatCount',
+	'startTime',
+	'endTime',
+	'action',
+];

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/campaigns-list.model.ts

@@ -0,0 +1,63 @@
+export class CampaignsListModel {
+	public campaignID: string;
+	public businessName: string;
+	public campaignName: string;
+	public medium: string;
+	public status: string;
+	public numberCount: number;
+	public deilveredCount: number;
+	public seenCount: number;
+	public responseCount: number;
+	public estimatedCost: number;
+	public actualCost: number;
+	public startDate: string;
+	public endDate: string;
+	public id: string;
+
+	public convert(dto: any): CampaignsListModel {
+		if (dto.campaignID) {
+			this.campaignID = dto.campaignID;
+		}
+		if (dto.businessName) {
+			this.businessName = dto.businessName;
+		}
+		if (dto.campaignName) {
+			this.campaignName = dto.campaignName;
+		}
+		if (dto.medium) {
+			this.medium = dto.medium;
+		}
+		if (dto.status) {
+			this.status = dto.status;
+		}
+		if (dto.numberCount) {
+			this.numberCount = dto.numberCount;
+		}
+		if (dto.deilveredCount) {
+			this.deilveredCount = dto.deilveredCount;
+		}
+		if (dto.seenCount) {
+			this.seenCount = dto.seenCount;
+		}
+		if (dto.responseCount) {
+			this.responseCount = dto.responseCount;
+		}
+		if (dto.estimatedCost) {
+			this.estimatedCost = dto.estimatedCost;
+		}
+		if (dto.actualCost) {
+			this.actualCost = dto.actualCost;
+		}
+		if (dto.startDate) {
+			this.startDate = dto.startDate;
+		}
+		if (dto.endDate) {
+			this.endDate = dto.endDate;
+		}
+		if (dto.id) {
+			this.id = dto.id;
+		}
+
+		return this;
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/client-dto.model.ts

@@ -0,0 +1,13 @@
+export interface ClientDto {
+	id: string;
+	name: string;
+	country: string;
+	ownerId: string;
+	ownerName: string;
+	ownerEmail: string;
+	parentId: string;
+	parentName: string;
+	webhookMethod: string;
+	webhookURL: string;
+	children: ClientDto[];
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/conversation-chart-response-dto.model.ts

@@ -0,0 +1,8 @@
+import { PerformanceChartSeriesResponseDto } from "./performance-chart-sereies-response-dto.model";
+
+
+export interface ConversationChartResponseDto {
+  categories : string[],
+  series: PerformanceChartSeriesResponseDto[]
+
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/paging-response-dto.model.ts

@@ -0,0 +1,5 @@
+export interface PagingResponseDto {
+    page_number: number,
+    page_size: number,
+    total_records: number
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/performance-chart-response-dto.model.ts

@@ -0,0 +1,8 @@
+import { PerformanceChartSeriesResponseDto } from "./performance-chart-sereies-response-dto.model";
+
+
+export interface PerformanceChartResponseDto {
+  categories : string[],
+  series: PerformanceChartSeriesResponseDto[]
+
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/performance-chart-sereies-response-dto.model.ts

@@ -0,0 +1,5 @@
+export interface PerformanceChartSeriesResponseDto {
+  name : string,
+  data: number[]
+
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/campaign-index/models/table.model.ts

@@ -0,0 +1,63 @@
+import { MatTableDataSource } from '@angular/material/table';
+
+export class TableModel {
+	public columns: any[];
+	public dataSource: MatTableDataSource<any>;
+	public labels: string[];
+	public page: number;
+	public pageSize: number;
+	public totalData: number;
+
+	constructor() {
+		this.columns = [];
+		this.dataSource = new MatTableDataSource();
+		this.labels = [];
+		this.page = 1;
+		this.pageSize = 10;
+		this.totalData = 0;
+	}
+
+	public getNumber(index: number, limit: number): number {
+		return (this.page - 1) * limit + index;
+	}
+
+	public getPageIndex(): number {
+		return this.page - 1;
+	}
+
+	public isEmpty(): boolean {
+		return this.totalData === 0;
+	}
+
+	public setPage(page: number): void {
+		this.page = page;
+	}
+
+	public setPageSize(size: number): void {
+		this.pageSize = size;
+	}
+
+	public resetPage(): void {
+		this.page = 1;
+	}
+
+	public setNextPage(isNext: boolean): void {
+		if (!isNext && this.page === 1) {
+			this.totalData = this.dataSource.data?.length ?? 0;
+			return;
+		}
+
+		this.totalData =
+			this.page === 1
+				? this.pageSize * 2
+				: this.pageSize * (this.page + 1);
+
+		const diffData = this.pageSize - this.dataSource.data?.length;
+
+		/* totalData substracted by diffData if data < pageSize  */
+		if (diffData !== 0) this.totalData -= diffData;
+
+		/* totalData substracted by pageSize if isNext false */
+		if (!isNext) this.totalData -= this.pageSize;
+	}
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/dashboard/dashboard.component.html

@@ -0,0 +1,123 @@
+<section class="dashboard-container">
+	<h2 class="font-PoppinsBold font-32px">Campaign</h2>
+
+	<p class="font-PoppinsLight">Welcome to your Campaign Dashboard!</p>
+
+	<div class="d-flex align-items-center w-100 mb-4">
+		<mat-grid-list cols="2"
+			rowHeight="50px">
+			<mat-button-toggle-group name="fontStyle"
+				aria-label="Font Style"
+				value="week">
+				<mat-button-toggle (click)="filterChart(pastTime.Today)"
+					value="day">
+					Today
+				</mat-button-toggle>
+				<mat-button-toggle (click)="filterChart(pastTime.CurrentWeek)"
+					value="week">
+					Current Week
+				</mat-button-toggle>
+				<mat-button-toggle (click)="filterChart(pastTime.CurrentMonth)"
+					value="month">
+					Current Month
+				</mat-button-toggle>
+			</mat-button-toggle-group>
+		</mat-grid-list>
+
+		<div class="px-5">
+			<span> Channel: </span>
+			<mat-form-field appearance="outline"
+				class="w-50">
+				<mat-select placeholder="Choose .."
+					[(ngModel)]="selectedPlatform">
+					<mat-option *ngFor="let option of channelOption"
+						[value]="option.value"
+						(click)="filterChart(filterEvent)">
+						{{ option.label }}
+					</mat-option>
+				</mat-select>
+			</mat-form-field>
+		</div>
+	</div>
+
+	<div class="d-flex gap-4">
+		<div class="left-side">
+			<div class="d-flex justify-content-between gap-4">
+				<div>
+					<h5 class="font-PoppinsBold font-24px mb-3">
+						Deliver more engaging campaigns to your customers on WhatsApp
+					</h5>
+
+					<p class="mb-3">
+						Turn conversations into sales, generate more qualified leads and recommend the right
+						product or services!
+					</p>
+				</div>
+
+				<img src="../../../../assets/svg/bg_widget_campaign.svg"
+					alt="communicate" />
+			</div>
+
+			<button mat-flat-button
+				type="button"
+				color="primary-telin-blue2"
+				style="height: 42px"
+				(click)="changeCurrentView(currentViews.CampaignIndex)">
+				Go to Broadcast Messaging
+			</button>
+		</div>
+
+		<div class="right-side">
+			<div class="d-flex gap-4">
+				<div *ngFor="let widgetLive of widgetLiveCampaign"
+					class="widget-card">
+					<img style="width: 56px"
+						[src]="widgetLive.icon"
+						[alt]="widgetLive.title" />
+
+					<p class="font-PoppinsLight mt-3">{{ widgetLive.title }}</p>
+
+					<p class="d-flex align-items-center">
+						<span class="font-PoppinsBold font-36px mr-2"
+							style="font-size: 36px">
+							{{ widgetLive.value }}
+						</span>
+
+						<img style="margin-top: 5px"
+							width="25"
+							[src]="widgetLive.arrow" />
+					</p>
+
+					<span class="font-10px"
+						[classList]="widgetLive.dateclass">
+						{{ widgetLive.date }}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="d-flex gap-4 mt-4">
+		<div class="card left-card w-50">
+			<div class="card-body">
+				<p class="font-PoppinsBold font-20px">Campaign's Performance</p>
+
+				<div echarts
+					class="demo-chart"
+					[options]="performanceChartData"></div>
+			</div>
+		</div>
+
+		<div class="card left-card w-50">
+			<div class="card-body">
+				<p class="font-PoppinsBold font-20px">Conversation Insights</p>
+
+				<div id="chart">
+					<div echarts
+						class="demo-chart"
+						[options]="conversationChartData"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>