@adlfe/campaign-management-library 2.10.2 → 2.10.3

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/failover-mechanism/failover-mechanism.component.html

@@ -1,253 +0,0 @@
-<form [formGroup]="form"
-  class="failover-mechanism">
-  <mat-slide-toggle class="failover-activated mb-3"
-    formControlName="active"
-    (change)="activeChange($event.checked)">
-    <p class="font-18px font-PoppinsBold mb-0">Failover Mechanism</p>
-  </mat-slide-toggle>
-
-  <ng-container *ngIf="form.get('active').value">
-    <p>Switch to a backup communication channel if the primary channel experiences interference or failure.</p>
-
-    <p class="font-16px font-PoppinsBold asterix--after mt-4 mb-1">Main Rules</p>
-
-    <p>Set rule for failover main trigger</p>
-
-    <div class='d-flex'>
-      <mat-radio-group class="main-rule-type"
-        formControlName="type"
-        (change)="typeChange($event.value)">
-        <mat-radio-button value="Status">Delivery Status</mat-radio-button>
-        <mat-radio-button value="Time">Waiting Time</mat-radio-button>
-      </mat-radio-group>
-
-      <div class='information'>
-        <mat-icon svgIcon="information"
-          class="mr-2">
-        </mat-icon>
-        <ol class="tooltip-rules">
-          <li class="mb-3">
-            If <strong>Delivery Status</strong> is selected, failover messages will be triggered if the
-            previous message has failed to deliver.
-          </li>
-
-          <li>
-            If <strong>Waiting Time</strong> is selected, failover messages will be triggered according to
-            the configured time. Counting will start when a message is sent. If the time is reached before
-            the message is delivered/read, then a failover message will be triggered.
-          </li>
-        </ol>
-      </div>
-
-    </div>
-  </ng-container>
-
-  <div *ngIf="form.get('type').value === 'Time'"
-    class="form-group w-25 my-3">
-    <div class='d-flex align-items-baseline gap-2'>
-      <mat-form-field appearance="outline"
-        floatLabel="always"
-        class="w-100">
-        <mat-label class="asterix--after">Interval Time</mat-label>
-
-        <input matInput
-          type="number"
-          class="text-right"
-          formControlName="interval"
-          placeholder="Enter Interval Time">
-
-      </mat-form-field>
-      minute(s)
-    </div>
-
-    <mat-error align="start"
-      *ngFor="let validation of validationMessages.interval">
-      <p class="font-12px mb-0"
-        *ngIf="form.get('interval').touched
-							&& form.get('interval').hasError(validation.type)">
-        {{ validation.message }}
-      </p>
-    </mat-error>
-  </div>
-
-  <div *ngIf="form.get('active').value"
-    cdkDropList
-    class="mt-3"
-    formArrayName="accounts"
-    (cdkDropListDropped)="drop($event)">
-    <div *ngFor="let account of getAccount; let accountIndex = index"
-      cdkDrag
-      cdkDragHandle>
-      <div *ngIf="account.get('channel').value"
-        class="d-flex align-items-center gap-2">
-        <div class="accounts-card w-50 mb-3 px-3 pt-3">
-          <div class="form-group w-75">
-            <mat-form-field appearance="outline"
-              floatLabel="always"
-              class="account-option w-100">
-              <mat-label class="asterix--after">
-                {{ account.get('channel').value?.label }}
-              </mat-label>
-
-              <mat-icon class="icon-menu"
-                [svgIcon]="account.get('channel').value?.inputSvgIcon"></mat-icon>
-
-              <mat-select matSelectInfiniteScroll
-                placeholder="--- Select Account ---"
-                [formControl]="account.get('accountId')"
-                [complete]="isHaveNextAccountOption[account.get('platform').value] === false"
-                [compareWith]="accountSelectedDisplay"
-                (infiniteScroll)="getNextAccountBatch(account.get('platform').value)"
-                (selectionChange)="validationAccount($event.value, account)">
-                <div style="margin: 20px">
-                  <lib-search [placeholder]="'Search'"
-                    [currentValue]="account?.get('accountId').value?.name"
-                    (searchRes)="updateSearchAccount($event, account.get('platform').value)"></lib-search>
-                </div>
-
-                <mat-option value=""> --- Select Account --- </mat-option>
-                <mat-option *ngFor="let option of accountOption[account.get('platform').value]"
-                  [value]="option">
-                  {{ option.name + ' (' + option.accountNo + ')' }}
-                </mat-option>
-
-                <mat-option *ngIf="isLoadingAccountOption[account.get('platform').value]">Loading...</mat-option>
-              </mat-select>
-            </mat-form-field>
-
-            <mat-error align="start"
-              *ngFor="let validation of validationMessages.accountId">
-              <p class="font-12px mb-0"
-                *ngIf="account.get('accountId').touched
-                      && account.get('accountId').hasError(validation.type)">
-                {{ validation.message }}
-              </p>
-            </mat-error>
-          </div>
-
-          <ng-container *ngIf="account.get('accountId').value">
-            <div *ngIf="account.get('platform').value === 'EMAIL'"
-              class="form-group w-75">
-              <mat-form-field appearance="outline"
-                floatLabel="always"
-                class="w-100">
-                <mat-label class="asterix--after">Subject</mat-label>
-
-                <input matInput
-                  type="text"
-                  placeholder="Enter Subject"
-                  [formControl]="account.get('subject')">
-              </mat-form-field>
-
-              <mat-error align="start"
-                *ngFor="let validation of validationMessages.subject">
-                <p class="font-12px mb-0"
-                  *ngIf="account.get('subject').touched
-                        && account.get('subject').hasError(validation.type)">
-                  {{ validation.message }}
-                </p>
-              </mat-error>
-            </div>
-
-            <div *ngIf="['WA', 'SMS', 'EMAIL'].includes(account.get('platform').value)"
-              class="form-group w-75">
-              <mat-form-field appearance="outline"
-                floatLabel="always"
-                class="w-100">
-                <mat-label class="asterix--after">Template</mat-label>
-
-                <mat-select matSelectInfiniteScroll
-                  placeholder="Select template"
-                  [formControl]="account.get('template')"
-                  [complete]="isHaveNextTemplateOption[account.get('platform').value] === false"
-                  [compareWith]="templateSelectedDisplay"
-                  (infiniteScroll)="getNextTemplateBatch(account.get('platform').value, account.get('accountId').value)">
-                  <div style="margin: 20px">
-                    <lib-search [placeholder]="'Search'"
-                      [currentValue]="account.get('template').value?.name"
-                      (searchRes)="updateSearch($event, account.get('platform').value, account.get('accountId').value)"></lib-search>
-                  </div>
-
-                  <mat-option *ngFor="let option of templateOption[account.get('platform').value]"
-                    [value]="option">
-                    {{ option.name }}
-                  </mat-option>
-                  <mat-option *ngIf="isLoadingTemplateOption[account.get('platform').value]">Loading...</mat-option>
-                </mat-select>
-              </mat-form-field>
-
-              <mat-error align="start"
-                *ngFor="let validation of validationMessages.subject">
-                <p class="font-12px mb-0"
-                  *ngIf="account.get('template').touched
-                        && account.get('template').hasError(validation.type)">
-                  {{ validation.message }}
-                </p>
-              </mat-error>
-            </div>
-
-            <ng-container *ngIf="account.get('platform').value === 'VOICE'">
-              <div class="form-group w-75">
-                <mat-form-field appearance="outline"
-                  floatLabel="always"
-                  class="w-100">
-                  <mat-label class="asterix--after">Template</mat-label>
-
-                  <input matInput
-                    type="text"
-                    placeholder="Enter Template"
-                    [formControl]="account.get('template')">
-                </mat-form-field>
-
-                <mat-error align="start"
-                  *ngFor="let validation of validationMessages.subject">
-                  <p class="font-12px mb-0"
-                    *ngIf="account.get('template').touched
-                          && account.get('template').hasError(validation.type)">
-                    {{ validation.message }}
-                  </p>
-                </mat-error>
-              </div>
-
-              <div class="w-75 text-right mb-2">
-                <button class="btn btn-sm color-blue2"
-                  (click)="addParamBody(account)">
-                  + Add Parameter
-                </button>
-              </div>
-
-              <ng-container *ngIf="getParamBody(account)?.length > 0">
-                <p class="font-16px font-PoppinsBold mt-3">Body Parameter</p>
-
-                <div *ngFor="let param of getParamBody(account); let paramBodyIndex = index"
-                  class="form-group d-flex align-items-center gap-1 w-75">
-                  <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 class="action-icon pointer"
-                    (click)="deleteParamBody(account, paramBodyIndex)"
-                    title="Delete">
-                    <mat-icon class="icon-menu"
-                      svgIcon="icon_delete"></mat-icon>
-                  </div>
-                </div>
-              </ng-container>
-
-
-            </ng-container>
-          </ng-container>
-        </div>
-        <mat-icon class="ml-2"
-          svgIcon="drag-handle"></mat-icon>
-      </div>
-    </div>
-  </div>
-</form>

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/failover-mechanism/failover-mechanism.component.scss

@@ -1,97 +0,0 @@
-@import '../../../../../../src/styles/abstracts/variables';
-
-.failover-mechanism {
-	.accounts-card {
-		border: 1px solid #e2e2e2;
-		border-radius: 16px;
-	}
-	.information {
-		position: relative;
-		cursor: pointer;
-		margin-left: 20px;
-		.tooltip-rules {
-			position: absolute;
-			top: -100px;
-			left: 30px;
-			width: 400px;
-			padding: 30px 30px 14px;
-			background-color: #fff3cd;
-			font-size: 12px;
-			border-radius: 5px;
-			z-index: 10;
-			opacity: 0;
-			transition: all 0.35s;
-		}
-		&:hover {
-			.tooltip-rules {
-				opacity: 1;
-			}
-		}
-	}
-}
-
-.asterix--after:after {
-	content: '*';
-	color: red;
-}
-
-::ng-deep .mat-form-field {
-	&.account-option {
-		.mat-form-field-infix {
-			display: flex;
-			align-items: center;
-			gap: 10px;
-		}
-	}
-}
-
-::ng-deep .mat-slide-toggle {
-	&.failover-activated {
-		.mat-slide-toggle-bar {
-			width: 40px;
-			height: 20px;
-			border-radius: 13px;
-		}
-		.mat-slide-toggle-thumb-container {
-			width: 18px;
-			height: 18px;
-			top: 1px;
-			left: 1px;
-		}
-		.mat-slide-toggle-thumb {
-			width: 18px;
-			height: 18px;
-			border-radius: 50%;
-		}
-		&.mat-checked {
-			.mat-slide-toggle-bar {
-				background-color: #2bca3b;
-			}
-			.mat-slide-toggle-thumb-container {
-				left: 4px;
-			}
-			.mat-slide-toggle-thumb {
-				background-color: white;
-			}
-		}
-	}
-}
-
-::ng-deep .mat-radio-group {
-	&.main-rule-type {
-		.mat-radio-button {
-			&.mat-radio-checked {
-				.mat-radio-outer-circle {
-					border-color: $color-telin-blue2;
-				}
-				.mat-radio-inner-circle {
-					background-color: $color-telin-blue2;
-				}
-			}
-		}
-
-		.mat-radio-button ~ .mat-radio-button {
-			margin-left: 25px;
-		}
-	}
-}

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

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