@adlfe/campaign-management-library 2.11.5 → 2.11.7

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

@@ -1,391 +0,0 @@
-<form autocomplete="off" [formGroup]="form">
-    <div class="campaign-info">
-        <div class="campaign-info-child">
-            <mat-card>
-                <mat-card-content>
-                    <h3 class="font-22px font-PoppinsBold mb-4">General Information</h3>
-
-                    <div class="form-group">
-                        <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                            <mat-label class="asterix--after">Broadcast Name</mat-label>
-
-                            <input
-                                matInput
-                                type="text"
-                                formControlName="campaignName"
-                                placeholder="Enter Broadcast name"
-                            />
-                        </mat-form-field>
-
-                        <div class="d-flex justify-content-between align-items-center w-100">
-                            <mat-hint align="start">
-                                {{ form.get('campaignName').value?.length || 0 }}/100
-                            </mat-hint>
-
-                            <div>
-                                <mat-error
-                                    align="end"
-                                    *ngFor="let validation of validationMessages.campaignName"
-                                >
-                                    <p
-                                        class="font-12px mb-0"
-                                        *ngIf="
-                                            form.get('campaignName').touched &&
-                                            form.get('campaignName').hasError(validation.type)
-                                        "
-                                    >
-                                        {{ validation.message }}
-                                    </p>
-                                </mat-error>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                            <mat-label class="asterix--after">Channel</mat-label>
-
-                            <mat-select placeholder="Select channel" formControlName="medium">
-                                <mat-option
-                                    *ngFor="let option of channelOption"
-                                    [value]="option.value"
-                                >
-                                    {{ option.label }}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-
-                        <mat-error align="end" *ngFor="let validation of validationMessages.medium">
-                            <p
-                                class="font-12px mb-0"
-                                *ngIf="
-                                    form.get('medium').touched &&
-                                    form.get('medium').hasError(validation.type)
-                                "
-                            >
-                                {{ validation.message }}
-                            </p>
-                        </mat-error>
-                    </div>
-
-                    <ng-container *ngIf="form.get('medium').value === 'WA'">
-                        <lib-general-information-wa
-                            [isTouchedForm]="isTouchedWAForm"
-                            [isReadOnlyMode]="isReadOnlyMode"
-                            (updateGeneralInformationForm)="updateGeneralInformationForm($event)"
-                        ></lib-general-information-wa>
-                    </ng-container>
-
-                    <ng-container *ngIf="form.get('medium').value === 'LINE'">
-                        <lib-general-information-line
-                            [isTouchedForm]="isTouchedSMSForm"
-                            [isReadOnlyMode]="isReadOnlyMode"
-                            (updateGeneralInformationForm)="updateGeneralInformationForm($event)"
-                        ></lib-general-information-line>
-                    </ng-container>
-
-                    <ng-container *ngIf="form.get('medium').value === 'SMS'">
-                        <lib-general-information-sms
-                            [isTouchedForm]="isTouchedSMSForm"
-                            [isReadOnlyMode]="isReadOnlyMode"
-                            (updateGeneralInformationForm)="updateGeneralInformationForm($event)"
-                        ></lib-general-information-sms>
-                    </ng-container>
-
-                    <ng-container *ngIf="form.get('medium').value === 'EMAIL'">
-                        <lib-general-information-email
-                            [isTouchedForm]="isTouchedEmailForm"
-                            [isReadOnlyMode]="isReadOnlyMode"
-                            (updateGeneralInformationForm)="updateGeneralInformationForm($event)"
-                        ></lib-general-information-email>
-                    </ng-container>
-                </mat-card-content>
-            </mat-card>
-        </div>
-
-        <div class="campaign-info-child pl-20px">
-            <h3 class="font-22px font-PoppinsBold">Broadcast Content</h3>
-
-            <div
-                [ngClass]="
-                    form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'
-                        ? 'campaign-border-preview'
-                        : 'campaign-preview'
-                "
-            >
-                <section
-                    *ngIf="
-                        form.get('medium').value === 'SMS' || form.get('medium').value === 'EMAIL'
-                    "
-                >
-                    <p
-                        *ngIf="getBody"
-                        class="body my-2"
-                        style="max-width: 500px; word-wrap: break-word"
-                        [innerHTML]="getBody"
-                    ></p>
-                </section>
-
-                <section *ngIf="form.get('medium').value === 'WA'" class="campaign-preview__wa">
-                    <div class="header-preview">
-                        <div class="heading">
-                            {{ getHeader }}
-                        </div>
-                    </div>
-                    <div class="body-preview">
-                        <section *ngIf="getBody || getMedia || displayFile">
-                            <div
-                                class="chat"
-                                [ngClass]="{ 'no-bottom-border': getTemplate?.buttons?.length > 0 }"
-                            >
-                                <img
-                                    *ngIf="
-                                        (getMedia === 'IMAGE' ||
-                                            getTemplate?.header?.type?.toLowerCase() === 'image') &&
-                                        displayFile
-                                    "
-                                    style="max-width: 100%"
-                                    alt="image"
-                                    [src]="displayFile"
-                                />
-
-                                <video
-                                    *ngIf="
-                                        (getMedia === 'VIDEO' ||
-                                            getTemplate?.header?.type?.toLowerCase() === 'video') &&
-                                        displayFile
-                                    "
-                                    id="video"
-                                    style="width: 100%"
-                                    [src]="displayFile"
-                                    controls
-                                ></video>
-
-                                <div *ngIf="getMedia === 'DOCUMENT'" style="display: flex">
-                                    <img
-                                        style="width: 13px; height: 18px"
-                                        alt="document"
-                                        src="../../../../../assets/images/icon-file.png"
-                                    />
-
-                                    <span style="margin-left: 10px">Document</span>
-                                </div>
-
-                                <ng-container *ngIf="getMedia === 'LOCATION'">
-                                    <agm-map
-                                        style="width: 100%; height: 200px"
-                                        [disableDefaultUI]="true"
-                                        [latitude]="maps.latitude"
-                                        [longitude]="maps.longitude"
-                                        [zoom]="maps.zoom"
-                                    >
-                                        <agm-marker
-                                            [latitude]="maps.latitude"
-                                            [longitude]="maps.longitude"
-                                            [markerDraggable]="false"
-                                        ></agm-marker>
-                                    </agm-map>
-                                    <a
-                                        [href]="
-                                            'https://www.google.com/maps/search/?api=1&query=' +
-                                            maps.latitude +
-                                            ',' +
-                                            maps.longitude
-                                        "
-                                    >
-                                        https://www.google.com/maps/search/?api=1&query={{
-                                            maps.latitude
-                                        }},{{ maps.longitude }}
-                                    </a>
-                                </ng-container>
-
-                                <p *ngIf="getBody" class="body my-2" [innerHTML]="getBody"></p>
-
-                                <p
-                                    *ngIf="getTemplate?.footer"
-                                    class="mb-2"
-                                    style="color: rgb(160, 160, 160)"
-                                >
-                                    {{ getTemplate.footer }}
-                                </p>
-                            </div>
-                        </section>
-                        <section *ngIf="getTemplate?.buttons?.length > 0">
-                            <div
-                                *ngFor="let button of getTemplateButton"
-                                class="params-btn pb-0 pointer"
-                            >
-                                <p class="mb-0">
-                                    {{ button?.text || button?.type }}
-                                </p>
-                            </div>
-
-                            <div
-                                *ngIf="getTemplate?.buttons?.length > 3"
-                                class="params-btn pb-0 pointer"
-                                (click)="isShowMore = !isShowMore"
-                            >
-                                <p class="mb-0"><mat-icon>list</mat-icon> See all options</p>
-                            </div>
-                        </section>
-                    </div>
-                </section>
-
-                <section *ngIf="form.get('medium').value === 'LINE'" class="campaign-preview__line">
-                    <div class="header-preview">
-                        <div class="heading">
-                            {{ getHeader }}
-                        </div>
-                    </div>
-                    <div class="body-preview">
-                        <!-- Template Line Text -->
-                        <section *ngIf="isText || !isJSON" class="chat">
-                            <p class="body my-2" [innerHTML]="getBody"></p>
-                        </section>
-
-                        <!-- Template Line Button | Confirmation -->
-                        <section
-                            *ngIf="['buttons', 'confirm'].includes(getTemplateLine?.type)"
-                            class="chat"
-                            [ngClass]="{ 'no-bottom-border': getTemplateLine?.actions?.length > 0 }"
-                        >
-                            <img
-                                *ngIf="getTemplateLine?.thumbnailImageUrl"
-                                style="max-width: 100%"
-                                class="mb-1"
-                                [src]="getTemplateLine?.thumbnailImageUrl"
-                            />
-
-                            <p
-                                *ngIf="getTemplateLine?.title"
-                                class="font-PoppinsBold mb-1"
-                                [innerHTML]="getTemplateLine?.title"
-                            ></p>
-
-                            <p
-                                *ngIf="getTemplateLine?.text"
-                                class="mb-0"
-                                [innerHTML]="getTemplateLine?.text"
-                            ></p>
-                        </section>
-
-                        <!-- Template Line Carousel -->
-                        <div
-                            *ngIf="['carousel'].includes(getTemplateLine?.type)"
-                            class="d-flex gap-2 overflow-auto"
-                        >
-                            <div *ngFor="let column of getTemplateLine?.columns">
-                                <section
-                                    class="chat w-100"
-                                    [ngClass]="{ 'no-bottom-border': column?.actions?.length > 0 }"
-                                >
-                                    <img
-                                        *ngIf="column.thumbnailImageUrl"
-                                        style="max-width: 100%"
-                                        class="mb-1"
-                                        [src]="column.thumbnailImageUrl"
-                                    />
-
-                                    <p
-                                        *ngIf="column.title"
-                                        class="font-PoppinsBold mb-1"
-                                        [innerHTML]="column.title"
-                                    ></p>
-
-                                    <p
-                                        *ngIf="column.text"
-                                        class="mb-0"
-                                        [innerHTML]="column.text"
-                                    ></p>
-                                </section>
-                                <section *ngIf="column?.actions?.length > 0">
-                                    <div
-                                        *ngFor="let button of column?.actions"
-                                        class="params-btn mw-100 pb-0 pointer"
-                                    >
-                                        <p class="mb-0">
-                                            {{ button?.text }}
-                                        </p>
-                                    </div>
-                                </section>
-                            </div>
-                        </div>
-
-                        <!-- Template Line Image Carousel -->
-                        <div
-                            *ngIf="['image_carousel'].includes(getTemplateLine?.type)"
-                            class="d-flex gap-2 overflow-auto"
-                        >
-                            <div *ngFor="let column of getTemplateLine?.columns">
-                                <div class="image-container">
-                                    <img [src]="column.imageUrl" alt="image" />
-
-                                    <div class="d-flex justify-content-center">
-                                        <p class="font-13px overlay-text">
-                                            {{ column.action.label }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Button Line -->
-                        <section
-                            *ngIf="
-                                getTemplateLine?.type !== 'confirm' &&
-                                getTemplateLine?.actions?.length > 0
-                            "
-                        >
-                            <div
-                                *ngFor="let button of getTemplateLine?.actions"
-                                class="params-btn pb-0 pointer"
-                            >
-                                <p class="mb-0">
-                                    {{ button?.text }}
-                                </p>
-                            </div>
-                        </section>
-                        <section
-                            *ngIf="
-                                getTemplateLine?.type === 'confirm' &&
-                                getTemplateLine?.actions?.length > 0
-                            "
-                            class="d-flex justify-content-around mw-70 bg-white"
-                        >
-                            <div
-                                *ngFor="let button of getTemplateLine?.actions"
-                                class="params-btn flex pb-0 pointer"
-                            >
-                                <p class="mb-0">
-                                    {{ button?.text }}
-                                </p>
-                            </div>
-                        </section>
-                        <!-- ./ Button Line -->
-                    </div>
-                </section>
-            </div>
-
-            <div class="d-flex" style="flex-direction: column">
-                <span
-                    *ngIf="form.get('medium').value === 'SMS'"
-                    style="text-align: right; width: 100%"
-                >
-                    {{ twilioResultCounter.fulltext }}
-                </span>
-                <span
-                    style="text-align: right; width: 100%; color: red"
-                    *ngIf="twilioResultCounter.segments > 10 && form.get('medium').value === 'SMS'"
-                >
-                    Maximum Segment is 10
-                </span>
-            </div>
-        </div>
-    </div>
-</form>
-
-<ng-template #isSpinner>
-    <div class="text-center my-auto">
-        <img src="../../../../../assets/images/spinner.svg" />
-    </div>
-</ng-template>

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

@@ -1,141 +0,0 @@
-@import '../../../../../styles/abstracts/variables';
-
-.campaign-info {
-	display: flex;
-	&-child {
-		flex: 1;
-	}
-	.asterix--after:after {
-		content: '*';
-		color: red;
-	}
-	.pl-20px {
-		padding-left: 20px;
-	}
-	.mw-70 {
-		max-width: 70%;
-	}
-	.campaign-preview {
-		width: 75%;
-		.header-preview {
-			padding: 15px;
-			min-height: 60px;
-			border-radius: 10px 10px 0px 0px;
-			.heading {
-				width: 100%;
-				color: #e0e0e0;
-				margin-left: 5px;
-				font-size: 20px;
-			}
-		}
-		.body-preview {
-			padding: 15px;
-			min-height: 470px;
-			.chat {
-				width: 70%;
-				padding: 11px;
-				font-size: 14px;
-				line-height: 22px;
-				color: #494949;
-				border-radius: 8px;
-				background: #ffffff;
-				overflow-wrap: break-word;
-				white-space: pre-line;
-				box-shadow: 12px 12px 20px rgba(44, 59, 113, 0.04);
-				.body {
-					max-height: 400px;
-					overflow-y: auto;
-					overscroll-behavior-y: contain;
-				}
-				&.no-bottom-border {
-					border-bottom-left-radius: 0;
-					border-bottom-right-radius: 0;
-				}
-			}
-		}
-		&__wa {
-			.header-preview {
-				background: #065f54;
-			}
-			.body-preview {
-				border-bottom-left-radius: 8px;
-				border-bottom-right-radius: 8px;
-				background-image: url('../../../../../assets/svg/whatsapp-bg.svg');
-				background-position: center;
-				background-repeat: no-repeat;
-				background-size: cover;
-				.params-btn {
-					width: auto;
-					max-width: 70%;
-					color: #34b7f1;
-					background: #ffffff;
-					box-shadow: 12px 12px 20px rgba(44, 59, 113, 0.04);
-					border-radius: 0;
-					font-size: 16px;
-					line-height: 43px;
-					padding: 0px;
-					text-align: center;
-					font-family: 'Poppins';
-					overflow-wrap: break-word;
-
-					b {
-						font-family: 'PoppinsBold';
-					}
-				}
-			}
-		}
-		&__line {
-			.header-preview {
-				background: #273046;
-			}
-			.body-preview {
-				background: #7692bf;
-				border-bottom-left-radius: 8px;
-				border-bottom-right-radius: 8px;
-				.params-btn {
-					width: auto;
-					max-width: 70%;
-					color: #34b7f1;
-					background: #ffffff;
-					box-shadow: 12px 12px 20px rgba(44, 59, 113, 0.04);
-					border-radius: 0;
-					font-size: 16px;
-					line-height: 43px;
-					padding: 0px;
-					text-align: center;
-					font-family: 'Poppins';
-					overflow-wrap: break-word;
-
-					b {
-						font-family: 'PoppinsBold';
-					}
-				}
-				.image-container {
-					position: relative;
-					width: 200px;
-					height: 200px;
-					img {
-						display: block;
-						width: 100%;
-						height: 100%;
-					}
-					.overlay-text {
-						top: 170px;
-						position: absolute;
-						padding: 2px 5px;
-						color: #ffffff;
-						background-color: rgba(49, 57, 60, 0.62);
-						border-radius: 10px;
-					}
-				}
-			}
-		}
-	}
-	.campaign-border-preview {
-		width: 100%;
-		min-height: 100px;
-		padding: 32px;
-		border: 1px solid #e2e2e2;
-		border-radius: 8px;
-	}
-}

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

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