@adlfe/campaign-management-library 2.11.5 → 2.11.7

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

@@ -1,8 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,123 +0,0 @@
-<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>

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

@@ -1,74 +0,0 @@
-@import '../../../../styles/abstracts/variables';
-
-.dashboard-container {
-	width: 100%;
-	padding: 24px;
-
-	.mat-button-toggle-group {
-		border-radius: 15px;
-	}
-	.mat-button-toggle {
-		background-color: #ffffff;
-		color: #000000;
-	}
-
-	.mat-button-toggle-checked {
-		background: #ed1c24;
-		color: #ffffff;
-	}
-	.mat-button-toggle-label-content:visited {
-		color: #ffffff;
-	}
-	.left-side {
-		flex: 50%;
-		min-height: 231px;
-		padding: 24px;
-		border-radius: 10px;
-		background-color: white;
-		box-shadow: 12px 12px 20px rgba(44, 59, 113, 0.04);
-	}
-	.right-side {
-		flex: 50%;
-	}
-	.widget-card {
-		width: 39%;
-		min-height: 231px;
-		padding: 24px;
-		border-radius: 10px;
-		background-color: #ffffff;
-		box-shadow: 12px 12px 20px rgba(44, 59, 113, 0.04);
-	}
-	.line-chart {
-		height: 65vh;
-		width: 70%;
-		margin-left: 2%;
-		background-color: white;
-		border-radius: 15px;
-		margin-bottom: 50px;
-		margin-right: 20px;
-		padding: 30px;
-	}
-	.doughnut-chart {
-		margin-right: 2%;
-		border-radius: 15px;
-		height: 65vh;
-		background-color: white;
-		width: 22.5%;
-		margin-bottom: 20px;
-		padding: 40px;
-	}
-	.greenpercent {
-		color: green;
-	}
-	.redpercent {
-		color: red;
-	}
-	.left-card {
-		box-shadow: 12px 12px 20px rgba(44, 59, 113, 0.04);
-		border-radius: 8px;
-		border-style: none;
-		.card-body {
-			min-height: 440px;
-		}
-	}
-}

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

@@ -1,301 +0,0 @@
-import {
-	Component,
-	EventEmitter,
-	OnDestroy,
-	OnInit,
-	Output,
-} from '@angular/core';
-import { EChartsOption } from 'echarts';
-import { Subscription } from 'rxjs';
-import {
-	CampaignPerformanceChartConfig,
-	ConversationInsightsChartConfig,
-	PlatformOptionConst,
-	WidgetLiveCampaignConst,
-} from '../../../core/const';
-import { PastTimeEnum } from '../../../core/enums';
-import { MainArea } from '../../../core/enums/main-area.enum';
-import { Parameter } from '../../../core/models/util/api-adapter-service-models';
-import { AppResponse } from '../../../core/models/util/api-dto/response-models/app-response';
-import { AppResponseAdl } from '../../../core/models/util/api-dto/response-models/app-response-adl';
-import { ApiAdapterServiceService } from '../../../core/services';
-import { CampaignCountFinalResponseDtoExternal } from '../../models/campaign-count-final-response-dto.model';
-import { ConversationChartResponseDto } from '../campaign-index/models/conversation-chart-response-dto.model';
-import { PerformanceChartResponseDto } from '../campaign-index/models/performance-chart-response-dto.model';
-
-@Component({
-	selector: 'lib-dashboard',
-	templateUrl: './dashboard.component.html',
-	styleUrls: ['./dashboard.component.scss'],
-})
-export class DashboardComponent implements OnInit, OnDestroy {
-	public currentViews = MainArea;
-	public pastTime = PastTimeEnum;
-
-	public channelOption: any[] = PlatformOptionConst;
-	public performanceCategories: string[] = [];
-	public totalCmpn: number[] = [];
-	public deliveryRt: number[] = [];
-	public costDesc: number[] = [];
-	public convsData: any[][] = [];
-
-	public widgetLiveCampaign = WidgetLiveCampaignConst;
-	public conversationChartData: EChartsOption;
-	public performanceChartData: EChartsOption;
-	public selectedPlatform: any = '';
-	public filterEvent: any = 'currentWeek';
-
-	private subscribers: Subscription[] = [];
-
-	@Output() currentView = new EventEmitter<MainArea>();
-
-	constructor(private apiAdapterService: ApiAdapterServiceService) {}
-
-	ngOnInit(): void {}
-
-	public changeCurrentView(area: MainArea) {
-		this.currentView.emit(area);
-	}
-
-	public filterChart(event: string) {
-		if (!this.selectedPlatform) {
-			return;
-		}
-
-		const timeUnit =
-			event == PastTimeEnum.Today
-				? 'daily'
-				: event == PastTimeEnum.CurrentWeek
-				? 'weekly'
-				: event == PastTimeEnum.CurrentMonth
-				? 'monthly'
-				: '';
-
-		/* const parameterList: Array<Parameter> = [
-			{
-				name: 'timeUnit',
-				value: timeUnit,
-				in: 'query',
-				type: 'String',
-			},
-			{
-				name: 'clientId',
-				value: localStorage.getItem('telin.clientId'),
-				in: 'query',
-				type: 'String',
-			},
-			{
-				name: 'platform',
-				value: this.selectedPlatform,
-				in: 'query',
-				type: 'String',
-			},
-		]; */
-
-		const subs = this.apiAdapterService
-			.executeApiRequest([], '/campaign/count', 'GET')
-			.subscribe(
-				(res: AppResponse<CampaignCountFinalResponseDtoExternal>) => {
-					const date =
-						(res?.data?.totalCampaignPercent ?? 0) +
-						'% Since ' +
-						this.getStatictsWidgetString(event);
-
-					this.widgetLiveCampaign[0].arrow =
-						res?.data?.totalCampaignPercent > 0
-							? '../../../../assets/svg/icon-up-arrow.svg'
-							: '../../../../assets/svg/icon-down-arrow.svg';
-					this.widgetLiveCampaign[0].value =
-						res?.data?.totalCampaign ?? 0;
-					this.widgetLiveCampaign[0].date = date;
-					this.widgetLiveCampaign[0].dateclass =
-						res?.data?.totalCampaignPercent > 0
-							? 'greenpercent'
-							: 'redpercent';
-
-					this.widgetLiveCampaign[1].arrow =
-						res?.data?.totalCampaignPercent > 0
-							? '../../../../assets/svg/icon-up-arrow.svg'
-							: '../../../../assets/svg/icon-down-arrow.svg';
-					this.widgetLiveCampaign[1].value =
-						res?.data?.totalLive ?? 0;
-					this.widgetLiveCampaign[1].date = date;
-					this.widgetLiveCampaign[1].dateclass =
-						res?.data?.totalCampaignPercent > 0
-							? 'greenpercent'
-							: 'redpercent';
-
-					this.widgetLiveCampaign[2].arrow =
-						res?.data?.totalCampaignPercent > 0
-							? '../../../../assets/svg/icon-up-arrow.svg'
-							: '../../../../assets/svg/icon-down-arrow.svg';
-					this.widgetLiveCampaign[2].value =
-						res?.data?.totalPending ?? 0;
-					this.widgetLiveCampaign[2].date = date;
-					this.widgetLiveCampaign[2].dateclass =
-						res?.data?.totalCampaignPercent > 0
-							? 'greenpercent'
-							: 'redpercent';
-				}
-			);
-
-		this.subscribers.push(subs);
-
-		this.getPerformanceDetails(timeUnit);
-		this.getConversationDetails(timeUnit);
-	}
-
-	private getPerformanceDetails(timeUnit: string) {
-		if (!this.selectedPlatform) {
-			return;
-		}
-
-		this.setPerformanceChartData();
-
-		const parameterList: Array<Parameter> = [
-			{
-				name: 'timeUnit',
-				value: timeUnit,
-				in: 'query',
-				type: 'String',
-			},
-			{
-				name: 'clientId',
-				value: localStorage.getItem('telin.clientId'),
-				in: 'query',
-				type: 'String',
-			},
-			{
-				name: 'platform',
-				value:
-					this.selectedPlatform === 'WHATSAPP'
-						? 'WA'
-						: this.selectedPlatform,
-				in: 'query',
-				type: 'String',
-			},
-		];
-
-		const subs = this.apiAdapterService
-			.executeApiRequest(
-				parameterList,
-				'/report/campaign/performance',
-				'GET'
-			)
-			.subscribe((res: AppResponseAdl<PerformanceChartResponseDto>) => {
-				this.performanceCategories = [];
-				this.totalCmpn = [];
-				this.deliveryRt = [];
-				this.costDesc = [];
-
-				if (res?.data && Object.entries(res.data).length !== 0) {
-					for (let item of res.data.categories) {
-						this.performanceCategories.push(item);
-					}
-					for (let series of res.data.series) {
-						if (series.name === 'Total Campaign') {
-							this.totalCmpn = series.data?.map(value => value);
-						} else if (series.name === 'Delivery Rate') {
-							this.deliveryRt = series.data?.map(value => value);
-						} else if (series.name === 'Cost Distribution') {
-							this.costDesc = series.data?.map(value => value);
-						}
-					}
-
-					this.setPerformanceChartData();
-				}
-			});
-
-		this.subscribers.push(subs);
-	}
-
-	private setPerformanceChartData() {
-		this.performanceChartData = ConversationInsightsChartConfig;
-		this.performanceChartData.xAxis.data = this.performanceCategories;
-		this.performanceChartData.series[0].data = this.deliveryRt;
-		this.performanceChartData.series[1].data = this.totalCmpn;
-		this.performanceChartData.series[2].data = this.costDesc;
-	}
-
-	private getConversationDetails(timeUnit: string) {
-		if (!this.selectedPlatform) {
-			return;
-		}
-
-		this.setConversationChartData();
-
-		const parameterList: Array<Parameter> = [
-			{
-				name: 'timeUnit',
-				value: timeUnit,
-				in: 'query',
-				type: 'String',
-			},
-			{
-				name: 'clientId',
-				value: localStorage.getItem('telin.clientId'),
-				in: 'query',
-				type: 'String',
-			},
-			{
-				name: 'platform',
-				value:
-					this.selectedPlatform === 'WHATSAPP'
-						? 'WA'
-						: this.selectedPlatform,
-				in: 'query',
-				type: 'String',
-			},
-		];
-
-		const subs = this.apiAdapterService
-			.executeApiRequest(
-				parameterList,
-				'/report/campaign/conversation',
-				'GET'
-			)
-			.subscribe((res: AppResponseAdl<ConversationChartResponseDto>) => {
-				this.convsData = [];
-
-				if (res?.data) {
-					for (let i = 0; i < res.data.categories?.length; i++) {
-						this.convsData[i] = new Array();
-						this.convsData[i].push(res.data.categories[i]);
-
-						for (let j = 1; j <= res.data.series?.length; j++) {
-							this.convsData[i].push(
-								res.data.series[j - 1].data[i]
-							);
-						}
-					}
-
-					this.setConversationChartData();
-				}
-			});
-
-		this.subscribers.push(subs);
-	}
-
-	private setConversationChartData() {
-		this.conversationChartData = CampaignPerformanceChartConfig;
-		this.convsData.forEach(data => {
-			if (data) {
-				this.conversationChartData.dataset.source.push(data);
-			}
-		});
-	}
-
-	private getStatictsWidgetString(event: string): string {
-		return event == PastTimeEnum.Today
-			? PastTimeEnum.Yesterday
-			: event == PastTimeEnum.CurrentWeek
-			? PastTimeEnum.LastWeek
-			: event == PastTimeEnum.CurrentMonth
-			? PastTimeEnum.LastMonth
-			: '';
-	}
-
-	ngOnDestroy(): void {
-		this.subscribers.forEach(each => each.unsubscribe());
-	}
-}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/dashboard/dashboard.module.ts

@@ -1,49 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTabsModule } from '@angular/material/tabs';
-import { PickerModule } from '@ctrl/ngx-emoji-mart';
-import { AngularEditorModule } from '@kolkov/angular-editor';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxEchartsModule } from 'ngx-echarts';
-import { DashboardComponent } from './dashboard.component';
-
-@NgModule({
-	declarations: [DashboardComponent],
-	imports: [
-		CommonModule,
-		MatAutocompleteModule,
-		FormsModule,
-		MatGridListModule,
-		ReactiveFormsModule,
-		MatFormFieldModule,
-		MatInputModule,
-		MatSelectModule,
-		MatRadioModule,
-		MatListModule,
-		MatButtonModule,
-		MatIconModule,
-		PickerModule,
-		AngularEditorModule,
-		MatButtonToggleModule,
-		MatDialogModule,
-		MatTabsModule,
-		MatBadgeModule,
-		NgbDropdownModule,
-		NgxEchartsModule,
-	],
-	exports: [DashboardComponent],
-})
-export class DashboardModule {}