@adlfe/campaign-management-library 2.11.4 → 2.11.5

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,828 @@
+<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>
+
+    <ng-container *ngIf="getIsUtility">
+        <div style="display: grid; gap: 0.5rem">
+            <mat-label class="asterix--after">Template</mat-label>
+            <mat-radio-group
+                style="display: flex; gap: 0.5rem; flex-wrap: wrap"
+                formControlName="isUseExistingTemplate"
+                (change)="handleChangeTemplate($event.value)"
+            >
+                <mat-radio-button
+                    [value]="option.value"
+                    *ngFor="let option of templates"
+                    color="primary"
+                >
+                    {{ option.label }}
+                </mat-radio-button>
+            </mat-radio-group>
+        </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()"
+                    (selectionChange)="handleChangeFrom($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>
+
+        <ng-container *ngIf="!form.get('isUseExistingTemplate')?.value; else existingTmpl">
+            <div
+                role="alert"
+                class="alert alert-warning d-flex align-items-center"
+                style="margin-top: 8px; border: 1px solid rgb(243, 124, 44)"
+            >
+                <mat-icon style="margin-right: 10px !important">error_outline</mat-icon>
+                <div>
+                    Direct Send access restricted for 30 days due to continued misuse. Final warning
+                    before permanent revocation.
+                </div>
+            </div>
+
+            <div class="form-group">
+                <mat-form-field appearance="outline" floatLabel="always">
+                    <mat-label class="asterix--after">Body</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>
+
+            <div class="form-group">
+                <app-input
+                    type="numeric"
+                    formControlName="ttl"
+                    label="TTL"
+                    placeholder="Enter ttl"
+                    [trimLeadingZeros]="true"
+                ></app-input>
+            </div>
+
+            <div *ngIf="!isReadOnlyMode">
+                <mat-checkbox formControlName="isNeedSave">
+                    Save this message as future template
+                </mat-checkbox>
+            </div>
+
+            <div
+                role="alert"
+                class="alert alert-warning d-flex align-items-center"
+                style="margin-top: 8px; border: 1px solid rgb(243, 124, 44)"
+                *ngIf="!isUtility"
+            >
+                <mat-icon style="margin-right: 10px !important">error_outline</mat-icon>
+                <div>
+                    Copy mismatch. This copy is not Utility content. Please revise to proceed.
+                </div>
+            </div>
+        </ng-container>
+
+        <ng-template #existingTmpl>
+            <div
+                role="alert"
+                class="alert alert-warning d-flex align-items-center"
+                style="margin-top: 8px; border: 1px solid rgb(243, 124, 44)"
+            >
+                <mat-icon style="margin-right: 10px !important">error_outline</mat-icon>
+                <div>
+                    Direct Send access restricted for 30 days due to continued misuse. Final warning
+                    before permanent revocation.
+                </div>
+            </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 class="form-group">
+                <app-input
+                    type="numeric"
+                    formControlName="ttl"
+                    label="TTL"
+                    placeholder="Enter ttl"
+                    [trimLeadingZeros]="true"
+                ></app-input>
+            </div>
+        </ng-template>
+    </ng-container>
+</form>