sms gateway screen

sms gateway screen dynamically renders different forms

src/app/sms-gateway/sms-gateway.component.html

@@ -20,12 +20,13 @@
                                             <div class="card mb-0 mt-2">
                                                 <div
                                                     class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
-                                                   <span>{{selectedGateway || 'smsGateway' | translate}}</span>
+                                                    <span *ngIf="!selectedGateway"></span>
+                                                    <span *ngIf="selectedGateway">{{(selectedGateway === selectedGatewayType.SYRIATEL ? 'syriatelCredentials' : (selectedGateway === selectedGatewayType.TWILIO ? 'twilioCredentials' : (selectedGateway === selectedGatewayType.JAZZ ? 'jazzCredentials' : ''))) | translate}}</span>
                                                     <select class="form-select"style="min-width: 200px; width: auto;"  [(ngModel)]="selectedGateway">
-                                                        <option value="">Select Gateway</option>
-                                                        <option value="Syriatel">Syriatel</option>
-                                                        <option value="Twilio">Twilio</option>
-                                                        <option value="Jazz">Jazz</option>
+                                                        <option value="">{{'SMSGatewaySelect' | translate}}</option>
+                                                        <option [value]="selectedGatewayType.SYRIATEL">{{'SMSGatewaySyriatel' | translate}}</option>
+                                                        <option [value]="selectedGatewayType.TWILIO">{{'SMSGatewayTwillio' | translate}}</option>
+                                                        <option [value]="selectedGatewayType.JAZZ">{{'SMSGatewayJazz' | translate}}</option>
                                                     </select>
                                                 </div>
                                                 <div class="card-body">

src/app/sms-gateway/sms-gateway.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgSelectComponent } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
+import { selectedGatewayType } from '../utils/enums';
 
 @Component({
   selector: 'app-sms-gateway',
@@ -12,5 +13,6 @@ import { TranslateModule } from '@ngx-translate/core';
 })
 export class SmsGatewayComponent {
 selectedGateway: string = '';
+selectedGatewayType = selectedGatewayType
 
 }

src/app/utils/enums.ts

@@ -18,4 +18,10 @@ export enum directions{
 
 export enum APP_URL_KEY{
     API_PATH = 'API_PATH'
+}
+
+export enum selectedGatewayType{
+    SYRIATEL = 'Syriatel',
+    TWILIO = 'Twilio',
+    JAZZ = 'Jazz'
 }

src/assets/i18n/Arabic.json

@@ -113,12 +113,14 @@
     "SMSGatewaySyriatel":"سيريتل",
     "SMSGatewayTwillio":"تويليو",
     "SMSGatewayJazz":"جاز",
-    "SyriatelCredentials":"أوراق اعتماد سيريتل",
-    "TwilioCredentials":"أوراق اعتماد تويليو",
-    "JazzCredentials":"أوراق اعتماد جاز",
+    "syriatelCredentials":"أوراق اعتماد سيريتل",
+    "twilioCredentials":"أوراق اعتماد تويليو",
+    "jazzCredentials":"أوراق اعتماد جاز",
     "accountSID":"الحساب SID",
     "authToken":"رمز المصادقة",
     "fromNumber":"من الرقم",
+    "senderName":"اسم المرسل",
+    "senderNamePlaceHolder":"أدخل اسم المرسل",
     "message": "رسالة",
     "template": "قالب",
     "language":"اللغة",

src/assets/i18n/English.json

@@ -115,9 +115,9 @@
     "SMSGatewaySyriatel":"Syriatel",
     "SMSGatewayTwillio":"Twilio",
     "SMSGatewayJazz":"Jazz",
-    "SyriatelCredentials":"Syriatel Credentials",
-    "TwilioCredentials":"Twilio Credentials",
-    "JazzCredentials":"Jazz Credentials",
+    "syriatelCredentials":"Syriatel Credentials",
+    "twilioCredentials":"Twilio Credentials",
+    "jazzCredentials":"Jazz Credentials",
     "accountSID":"Account SID",
     "authToken":"Auth Token",
     "fromNumber":"From Number",