@adlfe/campaign-management-library 2.10.0 → 2.10.2

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.html

@@ -0,0 +1,574 @@
+<form autocomplete="off"
+	[formGroup]="form">
+	<div class="form-group">
+		<mat-form-field appearance="outline"
+			floatLabel="always"
+			class="w-100">
+			<mat-label class="asterix--after">Message Type</mat-label>
+
+			<mat-select placeholder="Select message type"
+				formControlName="channel">
+				<mat-option *ngFor="let option of msgTypeWAOption"
+					[value]="option.code"
+					(click)="formReset()">
+					{{ option.name }}
+				</mat-option>
+			</mat-select>
+		</mat-form-field>
+
+		<mat-error align="end"
+			*ngFor="let validation of validationMessages.channel">
+			<p class="font-12px mb-0"
+				*ngIf="form.get('channel').touched 
+					&& form.get('channel').hasError(validation.type)">
+				{{ validation.message }}
+			</p>
+		</mat-error>
+
+		<div *ngIf="!getIsTemplate"
+			role="alert"
+			class="alert alert-warning d-flex align-items-center"
+			style="margin-top: 16px;border:1px solid rgb(243, 124, 44)">
+			<mat-icon style="margin-right: 10px !important;">error_outline</mat-icon>
+			<div>
+				If you select this channel, keep in mind that the message might not be delivered to
+				all selected customers. This is because the customer must have had a conversation
+				previously with BSP.
+			</div>
+		</div>
+	</div>
+
+	<ng-container *ngIf="getIsText">
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100"
+				style="margin-bottom: 20;">
+				<mat-label class="asterix--after">From</mat-label>
+
+				<mat-select matSelectInfiniteScroll
+					formControlName="from"
+					placeholder="Select from"
+					[complete]="isHaveNextAccountOption === false"
+					[compareWith]="accountSelectedDisplay"
+					(infiniteScroll)="getNextAccountBatch()">
+					<div style="margin: 20px">
+						<lib-search [placeholder]="'Search'"
+							[currentValue]="form?.get('from').value?.name"
+							(searchRes)="updateSearchAccount($event)"></lib-search>
+					</div>
+
+					<mat-option *ngFor="let option of accountOption"
+						[value]="option">
+						{{ option.name + ' (' + option.accountNo + ')' }}
+					</mat-option>
+					<mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.from">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('from').touched 
+						&& form.get('from').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always">
+				<mat-label class="asterix--after">Text</mat-label>
+
+				<textarea matInput
+					rows="6"
+					cols="50"
+					cdkTextareaAutosize
+					cdkAutosizeMinRows="2"
+					cdkAutosizeMaxRows="15"
+					formControlName="text"
+					placeholder="Enter text"
+					#autosize="cdkTextareaAutosize"></textarea>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.text">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('text').touched 
+						&& form.get('text').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+	</ng-container>
+
+	<ng-container *ngIf="getIsMedia">
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100">
+				<mat-label class="asterix--after">Media Type</mat-label>
+
+				<mat-select placeholder="Select media type"
+					formControlName="media"
+					(selectionChange)="updateMediaType($event.value)">
+					<mat-option *ngFor="let option of mediaTypeOption"
+						[value]="option.code">
+						{{ option.name }}
+					</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.media">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('media').touched 
+						&& form.get('media').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100"
+				style="margin-bottom: 20;">
+				<mat-label class="asterix--after">From</mat-label>
+
+				<mat-select matSelectInfiniteScroll
+					formControlName="from"
+					placeholder="Select from"
+					[complete]="isHaveNextAccountOption === false"
+					[compareWith]="accountSelectedDisplay"
+					(infiniteScroll)="getNextAccountBatch()">
+					<div style="margin: 20px">
+						<lib-search [placeholder]="'Search'"
+							[currentValue]="form?.get('from').value?.name"
+							(searchRes)="updateSearchAccount($event)"></lib-search>
+					</div>
+
+					<mat-option *ngFor="let option of accountOption"
+						[value]="option">
+						{{ option.name + ' (' + option.accountNo + ')' }}
+					</mat-option>
+					<mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.from">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('from').touched 
+						&& form.get('from').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<ng-container *ngIf="form.get('media').value?.toLowerCase() !== 'location'">
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					class="w-100">
+					<mat-label class="asterix--after">File</mat-label>
+
+					<input matInput
+						type="text"
+						autocomplete="off"
+						(click)="filePicker.click()"
+						formControlName="fileName">
+
+					<button mat-button
+						matSuffix
+						mat-icon-button
+						aria-label="Choose File"
+						(click)="filePicker.click()">
+						<mat-icon>attach_file</mat-icon>
+					</button>
+
+					<input #filePicker
+						hidden
+						type="file"
+						[accept]="extFileAccepted"
+						(change)="onFileSelected($event)" />
+				</mat-form-field>
+
+				<mat-error align="end"
+					*ngFor="let validation of validationMessages.fileName">
+					<p class="font-12px mb-0"
+						*ngIf="form.get('fileName').touched 
+							&& form.get('fileName').hasError(validation.type)">
+						{{ validation.message }}
+					</p>
+				</mat-error>
+			</div>
+		</ng-container>
+
+		<ng-container *ngIf="form.get('media').value?.toLowerCase() === 'location'">
+			<div class="w-100">
+				<h4 class="asterix--after">Location</h4>
+
+				<div class="w-100">
+					<agm-map style="width:100%; height:400px;"
+						[latitude]="maps.latitude"
+						[longitude]="maps.longitude"
+						[disableDoubleClickZoom]="maps.isDoubleClickZoom"
+						[zoom]="maps.zoom">
+						<agm-marker [latitude]="maps.latitude"
+							[longitude]="maps.longitude"
+							[markerDraggable]="maps.isDraggable"
+							(dragEnd)="markerDragEnd($event)"></agm-marker>
+					</agm-map>
+				</div>
+
+				<div class="form-group">
+					<mat-form-field appearance="outline"
+						floatLabel="always"
+						class="w-100">
+						<mat-label>Location</mat-label>
+
+						<input #mapSearch
+							matInput
+							type="text"
+							maxlength="100"
+							placeholder="Enter location here">
+					</mat-form-field>
+				</div>
+			</div>
+		</ng-container>
+	</ng-container>
+
+	<ng-container *ngIf="getIsTemplate">
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100"
+				style="margin-bottom: 20;">
+				<mat-label class="asterix--after">From</mat-label>
+
+				<mat-select matSelectInfiniteScroll
+					formControlName="from"
+					placeholder="Select from"
+					[complete]="isHaveNextAccountOption === false"
+					[compareWith]="accountSelectedDisplay"
+					(infiniteScroll)="getNextAccountBatch()"
+					(selectionChange)="getTemplateOptionService($event.value)">
+					<div style="margin: 20px">
+						<lib-search [placeholder]="'Search'"
+							[currentValue]="form?.get('from').value?.name"
+							(searchRes)="updateSearchAccount($event)"></lib-search>
+					</div>
+
+					<mat-option *ngFor="let option of accountOption"
+						[value]="option">
+						{{ option.name + ' (' + option.accountNo + ')' }}
+					</mat-option>
+					<mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.from">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('from').touched 
+						&& form.get('from').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100">
+				<mat-label class="asterix--after">Template</mat-label>
+
+				<mat-select matSelectInfiniteScroll
+					formControlName="template"
+					placeholder="Select template"
+					[complete]="isHaveNextTemplateOption === false"
+					[compareWith]="templateSelectedDisplay"
+					(infiniteScroll)="getNextTemplateBatch()"
+					(selectionChange)="updateTemplate($event.value)">
+					<div style="margin: 20px">
+						<lib-search [placeholder]="'Search'"
+							[currentValue]="form?.get('template').value?.name"
+							(searchRes)="updateSearch($event)"></lib-search>
+					</div>
+
+					<mat-option *ngFor="let option of templateOption"
+						[value]="option">
+						{{ option.name }}
+					</mat-option>
+					<mat-option *ngIf="isLoadingTemplateOption">Loading...</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.template">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('template').touched 
+						&& form.get('template').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<div *ngIf="isHaveTemplateParam"
+			class="d-flex justify-content-end">
+			<mat-checkbox labelPosition="before"
+				formControlName="isUpload"
+				(change)="updateDownloadCSV($event.checked)">
+				Using Download XLSX
+			</mat-checkbox>
+		</div>
+
+		<ng-container *ngIf="!form.get('isUpload').value">
+			<div *ngIf="form.get('template').value?.category === 'AUTHENTICATION'"
+				class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-100">
+					<mat-label> OTP Value </mat-label>
+
+					<input matInput
+						type="text"
+						formControlName="otpValue">
+				</mat-form-field>
+			</div>
+
+			<ng-container *ngIf="getParamHeader?.length > 0">
+				<p class="font-16px font-PoppinsBold">Header Parameter</p>
+
+				<div *ngFor="
+					let param of getParamHeader;
+					let paramHeaderIndex = index
+				"
+					class="form-group">
+					<mat-form-field appearance="outline"
+						floatLabel="always"
+						class="w-100">
+						<mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>
+
+						<input matInput
+							type="text"
+							[placeholder]="'Parameter ' + (paramHeaderIndex + 1)"
+							[formControl]="param.get('name')" />
+					</mat-form-field>
+				</div>
+			</ng-container>
+
+			<ng-container *ngIf="getParamBody?.length > 0">
+				<p class="font-16px font-PoppinsBold mt-3">Body Parameter</p>
+
+				<div *ngFor="
+						let param of getParamBody;
+						let paramBodyIndex = index
+					"
+					class="form-group">
+					<mat-form-field appearance="outline"
+						floatLabel="always"
+						class="w-100">
+						<mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>
+
+						<input matInput
+							type="text"
+							[placeholder]="'Parameter ' + (paramBodyIndex + 1)"
+							[formControl]="param.get('name')" />
+					</mat-form-field>
+				</div>
+			</ng-container>
+
+			<ng-container *ngIf="isShowParameter">
+				<p class="font-16px font-PoppinsBold mt-3">Button Parameter</p>
+
+				<ng-container *ngFor="let button of getButton; let buttonIndex = index">
+					<ng-container *ngIf="getParamButton(buttonIndex)?.length > 0">
+						<p class="font-14px font-PoppinsBold mt-3">Button {{ buttonIndex + 1 }}</p>
+
+						<div *ngFor="let param of getParamButton(buttonIndex); let paramIndex = index"
+							class="form-group">
+							<mat-form-field appearance="outline"
+								floatLabel="always"
+								class="w-100">
+								<mat-label>Parameter {{ paramIndex + 1 }}</mat-label>
+
+								<input matInput
+									type="text"
+									[placeholder]="'Parameter ' + (paramIndex + 1)"
+									[formControl]="param.get('name')" />
+							</mat-form-field>
+						</div>
+					</ng-container>
+				</ng-container>
+			</ng-container>
+		</ng-container>
+
+		<ng-container
+			*ngIf="['image','video','document'].includes(form.get('template').value?.header?.type?.toLowerCase())">
+			<p class="font-16px font-PoppinsBold mt-3">File</p>
+
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					class="w-100">
+					<mat-label class="asterix--after">File</mat-label>
+
+					<input matInput
+						type="text"
+						autocomplete="off"
+						(click)="filePicker.click()"
+						formControlName="fileName">
+
+					<button mat-button
+						matSuffix
+						mat-icon-button
+						aria-label="Choose File"
+						(click)="filePicker.click()">
+						<mat-icon>attach_file</mat-icon>
+					</button>
+
+					<input #filePicker
+						hidden
+						type="file"
+						[accept]="extFileAccepted"
+						(change)="onFileSelected($event)" />
+				</mat-form-field>
+			</div>
+		</ng-container>
+	</ng-container>
+
+	<ng-container *ngIf="getIsCatalogue">
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100"
+				style="margin-bottom: 20;">
+				<mat-label class="asterix--after">From</mat-label>
+
+				<mat-select matSelectInfiniteScroll
+					formControlName="from"
+					placeholder="Select from"
+					[complete]="isHaveNextAccountOption === false"
+					[compareWith]="accountSelectedDisplay"
+					(infiniteScroll)="getNextAccountBatch()">
+					<div style="margin: 20px">
+						<lib-search [placeholder]="'Search'"
+							[currentValue]="form?.get('from').value?.name"
+							(searchRes)="updateSearchAccount($event)"></lib-search>
+					</div>
+
+					<mat-option *ngFor="let option of accountOption"
+						[value]="option">
+						{{ option.name + ' (' + option.accountNo + ')' }}
+					</mat-option>
+					<mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.from">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('from').touched 
+						&& form.get('from').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100"
+				style="margin-bottom: 20;">
+				<mat-label class="asterix--after">Category</mat-label>
+
+				<mat-select formControlName="category"
+					placeholder="Select category">
+					<mat-option *ngFor="let option of categoryOption"
+						[value]="option.value">
+						{{ option.label }}
+					</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.category">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('category').touched 
+						&& form.get('category').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<div class="form-group">
+			<mat-form-field appearance="outline"
+				floatLabel="always"
+				class="w-100"
+				style="margin-bottom: 20;">
+				<mat-label class="asterix--after">Catalog</mat-label>
+
+				<mat-select formControlName="catalogue"
+					placeholder="Select catalog">
+					<mat-option *ngFor="let option of accountOption"
+						[value]="option">
+						{{ option.name }}
+					</mat-option>
+				</mat-select>
+			</mat-form-field>
+
+			<mat-error align="end"
+				*ngFor="let validation of validationMessages.catalogue">
+				<p class="font-12px mb-0"
+					*ngIf="form.get('catalogue').touched 
+						&& form.get('catalogue').hasError(validation.type)">
+					{{ validation.message }}
+				</p>
+			</mat-error>
+		</div>
+
+		<div *ngIf="form.get('category').value === 'product'"
+			style="padding: 8px;border-radius: 8px;border: 1px solid #6177c4;">
+
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-100">
+					<mat-label class="asterix--after">Product</mat-label>
+
+					<mat-select formControlName="product"
+						placeholder="Select product">
+						<mat-option *ngFor="let option of accountOption"
+							[value]="option">
+							{{ option.name }}
+						</mat-option>
+					</mat-select>
+				</mat-form-field>
+
+				<mat-error align="end"
+					*ngFor="let validation of validationMessages.product">
+					<p class="font-12px mb-0"
+						*ngIf="form.get('product').touched 
+							&& form.get('product').hasError(validation.type)">
+						{{ validation.message }}
+					</p>
+				</mat-error>
+			</div>
+
+			<div class="form-group">
+				<mat-form-field appearance="outline"
+					floatLabel="always"
+					class="w-100">
+					<mat-label>Body</mat-label>
+
+					<input matInput
+						type="text"
+						maxlength="100"
+						formControlName="body"
+						placeholder="Enter body">
+				</mat-form-field>
+			</div>
+		</div>
+	</ng-container>
+</form>

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.scss

@@ -0,0 +1,4 @@
+.asterix--after:after {
+	content: '*';
+	color: red;
+}

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.spec.ts

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