Refactored code.

src/app/pages/home/home.component.html

@@ -13,7 +13,7 @@
     </div>
 
     <section id="from-first-section">
-      <form [formGroup]="fileUploadForm" (submit)="submitForm()">
+      <form [formGroup]="fileUploadForm" (submit)="readExcelFile()">
         <div class="input-wrapper">
           <br />
           <input
@@ -27,7 +27,7 @@
 
         <!-- [disabled]="!fileUploadForm.valid || isLoading" -->
         <button type="submit">
-          {{ isLoading ? "Sending messages" : "Submit" }}
+          {{ isLoading ? "Sending messages..." : "Submit" }}
         </button>
       </form>
     </section>

src/app/pages/home/home.component.ts

@@ -33,7 +33,7 @@ export class HomeComponent {
   arrayBuffer: any;
   filelist: any = [];
   arrayToBeSend: any = [];
-  subscriptions: Subscription[] = [];
+  customerPhonenumbers: string[] = [];
 
   constructor(
     private routerService: RouterService,
@@ -61,26 +61,63 @@ export class HomeComponent {
     this.isSalesForm = !this.isSalesForm;
   }
 
-  submitForm() {
-    console.log('inside submit form');
+  triggerWhatsappMessages(phoneNumber: string[]) {
+    const httpBody = {
+      messages: [
+        {
+          from: '447491163530',
+          // TODO: need check if we can send array here
+          to: phoneNumber[1],
+          messageId: 'a28dd97c-1ffb-4fcf-99f1-0b557ed381da',
+          content: {
+            templateName: 'infobip_kz_test_hsm_2',
+            templateData: {
+              body: {
+                placeholders: ['BFL Credit Card'],
+              },
+            },
+            language: 'en_GB',
+          },
+          callbackData: 'Callback data',
+        },
+      ],
+    };
+
+    this.homeService.sendWhatsApp(httpBody).subscribe(
+      (res) => {
+        console.log('success', res);
+        this.isLoading = false;
+      },
+      (err) => {
+        console.log('failed',err);
+        this.isLoading = false;
+      }
+    )
+  }
+
+  readExcelFile(){
+    this.isLoading = true;
     let fileReader = new FileReader();
     fileReader.readAsArrayBuffer(this.file);
+
     fileReader.onload = (e) => {
       this.arrayBuffer = fileReader.result;
-      var data = new Uint8Array(this.arrayBuffer);
-      var arr = new Array();
-      for (var i = 0; i != data.length; ++i)
+      let data = new Uint8Array(this.arrayBuffer);
+      let arr = new Array();
+      let phoneNumber: string[] = [];
+
+      for (let i = 0; i != data.length; ++i){
         arr[i] = String.fromCharCode(data[i]);
-      var bstr = arr.join('');
-      var workbook = XLSX.read(bstr, { type: 'binary' });
-      var first_sheet_name = workbook.SheetNames[0];
-      var worksheet = workbook.Sheets[first_sheet_name];
-      // console.log(XLSX.utils.sheet_to_json(worksheet, { raw: true }));
-      // var arraylist = XLSX.utils.sheet_to_json(worksheet, { raw: true });
+      }
+
+      let bstr = arr.join('');
+      let workbook = XLSX.read(bstr, { type: 'binary' });
+      let first_sheet_name = workbook.SheetNames[0];
+      let worksheet = workbook.Sheets[first_sheet_name];
       this.filelist = XLSX.utils.sheet_to_json(worksheet, { raw: true });
-      console.log(this.filelist);
+      
+      // pull data according to upload file type
       if (this.isSalesForm) {
-        console.log(this.isSalesForm);
         for (let i = 0; i < this.filelist.length; i++) {
           var details = {
             'CUSTOMER NAME': this.filelist[i]['CUSTOMER NAME'],
@@ -89,9 +126,9 @@ export class HomeComponent {
             'DATE OF ENQUIRY': this.filelist[i]['DATE OF ENQUIRY'],
           };
           this.arrayToBeSend.push(details);
+          phoneNumber.push(this.filelist[i]['PHONE NUMBER']);
         }
       } else {
-        console.log(this.isSalesForm);
         for (let i = 0; i < this.filelist.length; i++) {
           var details = {
             'CUSTOMER NAME': this.filelist[i]['Customer'],
@@ -100,49 +137,17 @@ export class HomeComponent {
             'DATE OF ENQUIRY': this.filelist[i]['Ready For Invoice Date Time'],
           };
           this.arrayToBeSend.push(details);
+          phoneNumber.push(this.filelist[i]['PHONE NUMBER']);
         }
       }
-      console.log(this.arrayToBeSend);
-      const phoneNumber: any = [];
-      for (let i = 0; i < this.arrayToBeSend.length; i++) {
-        console.log(this.arrayToBeSend[i]['PHONE NUMBER']);
-        phoneNumber.push(this.arrayToBeSend[i]['PHONE NUMBER']);
-      }
-      console.log(phoneNumber);
-      const body = {
-        messages: [
-          {
-            from: '447491163530',
-            to: phoneNumber,
-            messageId: 'a28dd97c-1ffb-4fcf-99f1-0b557ed381da',
-            content: {
-              templateName: 'infobip_kz_test_hsm_2',
-              templateData: {
-                body: {
-                  placeholders: ['BFL Credit Card'],
-                },
-              },
-              language: 'en_GB',
-            },
-            callbackData: 'Callback data',
-          },
-        ],
-      };
-      this.subscriptions.push(
-        this.homeService.sendWhatsApp(body).subscribe(
-          (res) => {
-            console.log(res);
-          },
-          (err) => {
-            console.log(err);
-          }
-        )
-      );
+      // after reading file and storing all phonenumbers in an array
+      // call whatsapp sending api function here
+      this.triggerWhatsappMessages(phoneNumber);
     };
   }
 
   addfile(event: any) {
     this.file = event.target.files[0];
-    console.log('insiide addfile function');
   }
+
 }

src/app/pages/home/home.service.ts

@@ -7,15 +7,11 @@ import { IHomeRequest, IHomeResponse } from '../../../app/model/home';
 
 const httpOptions = {
   headers: new HttpHeaders({
-    'Content-Type': 'application/json',
-    authorization:
+    'authorization':
       'App 2b8cba9008e1da2f2733ff8300cf1973-dc928670-56f9-4a29-8725-69239d669e74',
   }),
 };
 
-// Authorization: 'Basic SW50ZXJuYXRpb25hbFdBX1BPQzpFeHBvcnRzITIwMjE=',
-
-const url = 'http://localhost:3000/';
 const whatsAppUrl =
   'https://mpwyr4.api.infobip.com/whatsapp/1/message/template';
 
@@ -23,18 +19,9 @@ const whatsAppUrl =
   providedIn: 'root',
 })
 export class HomeService {
-  private baseUrl = 'http://localhost:8000/home';
-
+  
   constructor(private http: HttpClient) {}
 
-  post(data: any): Observable<any> {
-    return this.http.post<any>(this.baseUrl, data);
-  }
-
-  sendEmail(body: any): Observable<any> {
-    return this.http.post(url + 'sendEmail', body, httpOptions);
-  }
-
   sendWhatsApp(body: any): Observable<any> {
     return this.http.post(whatsAppUrl, body, httpOptions);
   }