@chat21/chat21-ionic 3.0.98-rc.1 → 3.0.98-rc.2

package/src/app/modals/maps/maps.page.ts

@@ -0,0 +1,189 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { AppConfigProvider } from 'src/app/services/app-config';
+
+@Component({
+  selector: 'app-maps',
+  templateUrl: './maps.page.html',
+  styleUrls: ['./maps.page.scss'],
+})
+export class MapsPage implements OnInit {
+
+  selected_place: any;
+
+  constructor(
+    public viewCtrl: ModalController,
+    private appConfigProvider: AppConfigProvider
+  ) { }
+
+  ngOnInit() {
+    
+  }
+
+  loadScript(){
+    const that = this;
+    const apiKey = this.appConfigProvider.getConfig().googleMapsApiKey
+    const url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&v=weekly'`
+    let node = document.createElement('script');
+    node.src = url;
+    node.type = 'text/javascript';
+    node.defer = true
+    document.getElementsByTagName('head')[0].appendChild(node);
+
+    node.onload= function(){
+      that.initMap();
+    }
+  }
+
+  ionViewWillEnter() {
+    this.loadScript();
+  }
+
+
+  initMap(): void {
+    const map = new google.maps.Map(
+      document.getElementById("map") as HTMLElement,
+      {
+        center: { lat: 40.1740762, lng: 18.164999 },
+        zoom: 18,
+        mapTypeControl: false,
+        fullscreenControl: false,
+        streetViewControl: false
+      }
+    );
+    console.log("*** MAPS *** ", map);
+    const card = document.getElementById("pac-card") as HTMLElement;
+    const input = document.getElementById("pac-input") as HTMLInputElement;
+    
+    // const biasInputElement = document.getElementById(
+    //   "use-location-bias"
+    // ) as HTMLInputElement;
+    // const strictBoundsInputElement = document.getElementById(
+    //   "use-strict-bounds"
+    // ) as HTMLInputElement;
+
+    const options = {
+      fields: ["formatted_address", "geometry", "name"],
+      strictBounds: false,
+      types: ["establishment"],
+      cache: true
+    };
+  
+    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
+  
+    const autocomplete = new google.maps.places.Autocomplete(input, options);
+  
+    // Bind the map's bounds (viewport) property to the autocomplete object,
+    // so that the autocomplete requests use the current map bounds for the
+    // bounds option in the request.
+    autocomplete.bindTo("bounds", map);
+  
+    const infowindow = new google.maps.InfoWindow();
+    const infowindowContent = document.getElementById(
+      "infowindow-content"
+    ) as HTMLElement;
+  
+    infowindow.setContent(infowindowContent);
+  
+    const marker = new google.maps.Marker({
+      map,
+      anchorPoint: new google.maps.Point(0, -29),
+    });
+
+  
+    autocomplete.addListener("place_changed", () => {
+      infowindow.close();
+      marker.setVisible(false);
+  
+      const place = autocomplete.getPlace();
+
+      console.log("*** MAP *** place: ", place)
+
+      this.selected_place = {
+        name: place.name,
+        address: place.formatted_address,
+        latitude: place.geometry.location.lat(),
+        longitude: place.geometry.location.lng()
+      }
+  
+      if (!place.geometry || !place.geometry.location) {
+        // User entered the name of a Place that was not suggested and
+        // pressed the Enter key, or the Place Details request failed.
+        window.alert("No details available for input: '" + place.name + "'");
+        return;
+      }
+  
+      // If the place has a geometry, then present it on a map.
+      if (place.geometry.viewport) {
+        map.fitBounds(place.geometry.viewport);
+      } else {
+        map.setCenter(place.geometry.location);
+        map.setZoom(17);
+      }
+  
+      marker.setPosition(place.geometry.location);
+      marker.setVisible(true);
+  
+      // infowindowContent.children["place-name"].textContent = place.name;
+      // infowindowContent.children["place-address"].textContent = place.formatted_address;
+      // infowindow.open(map, marker);
+    });
+  
+    // Sets a listener on a radio button to change the filter type on Places
+    // Autocomplete.
+    function setupClickListener(id, types) {
+      const radioButton = document.getElementById(id) as HTMLInputElement;
+  
+      radioButton.addEventListener("click", () => {
+        autocomplete.setTypes(types);
+        input.value = "";
+      });
+    }
+  
+    setupClickListener("changetype-all", []);
+    setupClickListener("changetype-address", ["address"]);
+    setupClickListener("changetype-establishment", ["establishment"]);
+    setupClickListener("changetype-geocode", ["geocode"]);
+    setupClickListener("changetype-cities", ["(cities)"]);
+    setupClickListener("changetype-regions", ["(regions)"]);
+  
+    // biasInputElement.addEventListener("change", () => {
+    //   if (biasInputElement.checked) {
+    //     autocomplete.bindTo("bounds", map);
+    //   } else {
+    //     // User wants to turn off location bias, so three things need to happen:
+    //     // 1. Unbind from map
+    //     // 2. Reset the bounds to whole world
+    //     // 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
+    //     autocomplete.unbind("bounds");
+    //     autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
+    //     strictBoundsInputElement.checked = biasInputElement.checked;
+    //   }
+  
+    //   input.value = "";
+    // });
+  
+    // strictBoundsInputElement.addEventListener("change", () => {
+    //   autocomplete.setOptions({
+    //     strictBounds: strictBoundsInputElement.checked,
+    //   });
+  
+    //   if (strictBoundsInputElement.checked) {
+    //     biasInputElement.checked = strictBoundsInputElement.checked;
+    //     autocomplete.bindTo("bounds", map);
+    //   }
+  
+    //   input.value = "";
+    // });
+  }
+
+  shareLocation() {
+    console.log("share location called")
+    this.viewCtrl.dismiss(this.selected_place);
+  }
+
+  async onClose() {
+    this.viewCtrl.dismiss()
+  }
+
+}

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.module.ts

@@ -1,3 +1,4 @@
+
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -8,12 +9,15 @@ import { SendWhatsappTemplateModal } from './send-whatsapp-template.page';
 import { TranslateModule } from '@ngx-translate/core';
 import { createTranslateLoader } from 'src/chat21-core/utils/utils';
 import { HttpClient } from '@angular/common/http';
+import { MarkedPipe } from 'src/app/directives/marked.pipe';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    //MarkedPipe,
     SendWhatsappTemplatePageRoutingModule,
     TranslateModule.forChild({
       loader: {
@@ -23,6 +27,7 @@ import { HttpClient } from '@angular/common/http';
       }
     })
   ],
-  declarations: [SendWhatsappTemplateModal]
+  declarations: [SendWhatsappTemplateModal],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SendWhatsappTemplateModalModule {}

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.html

@@ -10,7 +10,8 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content *ngIf="selectionView" class="content-container">
+<ion-content *ngIf="selectionView && !displayError" class="content-container">
+
 
   <ion-list lines="full">
     <ion-item *ngFor="let template of templates" button detail="true" (click)="selectTemplate(template.id)">
@@ -45,60 +46,197 @@
 </ion-content>
 
 <ion-content *ngIf="editTemplateView" class="content-container">
+
+
   <div class="preview-container">
+
     <div class="title-back">
       <ion-button ion-button fill="clear" (click)="backToSelection()">
         <ion-icon slot="icon-only" name="return-up-back"></ion-icon>
       </ion-button>
       <p class="template-name">{{ selected_template.name }}</p>
     </div>
+
+    <!-- // Message preview - START -->
     <div class="message-preview">
 
       <div class="message-cloud">
 
+        <!-- // Header -->
         <div class="header-preview">
           <span *ngIf="header_component?.format === 'TEXT'">{{ header_component?.text }}</span>
           <span *ngIf="header_component?.format === 'IMAGE'">
-            <img [src]="header_component.example.header_handle[0]" />
+            <img [src]="header_params[0].image.link" (error)="onHeaderImageError($event)" />
+          </span>
+          <span *ngIf="header_component?.format === 'DOCUMENT'">
+            <div class="pdf-preview">
+              <p>PDF</p>
+            </div>
+            <!-- // doesn't works properly -> check ASAP -->
+            <!-- <iframe [src]="sanitizedUrl" frameBorder="0" scrolling="no" height="100%" width="100%" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe> -->
+          </span>
+          <span *ngIf="header_component?.format === 'LOCATION'">
+            <div class="location-preview">
+              <p>Location</p>
+            </div>
+            <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3047.4846825263085!2d18.16983501538924!3d40.198280279391!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x134423b7392e6d13%3A0x60b481aa8d84673!2sEurofood%20SRL!5e0!3m2!1sit!2sit!4v1685097718757!5m2!1sit!2sit" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> -->
+
           </span>
 
         </div>
 
+        <!-- // Body -->
         <div class="body-preview">
+          <!-- // doesn't work -->
+          <!-- <span [innerHtml]="body_component?.text | marked"></span> -->
           <span>{{ body_component?.text }}</span>
         </div>
 
+        <!-- // Footer -->
         <div class="footer-preview">
           <span>{{ footer_component?.text }}</span>
         </div>
 
+        <!-- // Call to action buttons -->
+        <div
+          *ngIf="buttons_component && (buttons_component.buttons[0].type === 'URL' || buttons_component.buttons[0].type === 'PHONE_NUMBER')"
+          class="call-to-action-preview">
+
+          <hr style="background-color: #eeeeee; margin-bottom: 0px;">
+          <ion-button *ngFor="let btn of buttons_component.buttons" ion-button fill="clear"
+            class="whatsapp-call-to-action">
+            <span *ngIf="btn.type === 'URL'" class="material-icons-outlined call-to-action-icon">open_in_new</span>
+            <span *ngIf="btn.type === 'PHONE_NUMBER'" class="material-icons-round call-to-action-icon">phone</span>
+            {{ btn.text }}
+          </ion-button>
+        </div>
+
       </div>
 
-      <div *ngIf="buttons_component" class="message-cloud-buttons">
+      <!-- // Quick reply -->
+      <!-- <div *ngIf="buttons_component && buttons_component.buttons[0].type === 'QUICK_REPLY'"
+        class="message-cloud-buttons">
         <ion-button *ngFor="let btn of buttons_component.buttons" ion-button fill="clear" class="whatsapp-button">{{
           btn.text }}</ion-button>
+      </div> -->
+
+
+      <div class="message-cloud-buttons-container"
+        *ngIf="buttons_component && buttons_component.buttons[0].type === 'QUICK_REPLY'">
+        <div class="message-cloud-buttons">
+          <button *ngFor="let btn of buttons_component.buttons" fill="clear" class="message-cloud-button"><span
+              class="_2VWlB">{{btn.text}}</span></button>
+          <!-- <button class="vGQwA"><span class="_2VWlB">no sad. asdj asdjh asd asdgahsgda </span></button>
+          <button class="vGQwA"><span class="_2VWlB">Non voglio ricevere più messaggi</span></button> -->
+        </div>
       </div>
 
+      <!-- // Quick reply -->
+      <!-- <div *ngIf="buttons_component && buttons_component.buttons[0].type === 'QUICK_REPLY'" style="width: 260px; margin-top: 2px;">
+
+        <ion-grid style="margin: 0px; padding: 0px;">
+          <ion-row style="margin: 0px; padding: 0px;">
+            <ion-col id="first-button" *ngIf="buttons_component.buttons[0]" class="first-button">
+              <ion-button ion-button fill="clear" class="whatsapp-button">{{buttons_component.buttons[0].text}}</ion-button>
+            </ion-col>
+            <ion-col id="second-button" *ngIf="buttons_component.buttons[1]" class="second-button">
+              <ion-button ion-button fill="clear" class="whatsapp-button">Vai ai preferiti lungo</ion-button>
+            </ion-col>
+          </ion-row>
+          <ion-row style="margin: 0px; padding: 0px; margin-top: 1px;" size="12">
+            <ion-col *ngIf="buttons_component.buttons[2]" style="margin: 0px; padding: 0px;">
+              <ion-button ion-button fill="clear" class="whatsapp-button">{{buttons_component.buttons[2].text}}</ion-button>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </div> -->
+
     </div>
+    <!-- // Message preview - END -->
   </div>
 
   <div class="parameters-container">
 
-
+    <!-- // Header parameters - START -->
     <div *ngIf="header_component && header_component.example">
       <p class="parameters-title">Header parameters</p>
+      <p *ngIf="header_component.example.header_handle" class="parameters-subtitle">The header contains a Media to
+        customize</p>
+
+      <!-- // header text -->
       <div *ngFor="let hp of header_component.example.header_text; index as i" class="parameter">
         <div class="param-number">
           <span>{{</span> {{ i + 1 }} <span>}}</span>
         </div>
         <div class="field-wrapper">
-          <input type="text" placeholder="{{hp}}" 
+          <input type="text" placeholder="{{hp}}" (input)="onParamHeaderChange($event.target.value, i+1)">
+        </div>
+      </div>
+
+      <!-- // header handle - media -->
+      <div *ngFor="let hp of header_component.example.header_handle; index as i" class="parameter">
+        <div class="param-number">
+          <span>{{</span> {{ i + 1 }} <span>}}</span>
+        </div>
+        <div class="field-wrapper large">
+          <!-- <input type="text" placeholder="{{hp}}" (input)="onParamHeaderChange($event.target.value, i+1)"> -->
+          <input *ngIf="!displayFileUploaded" type="text" placeholder="Insert a valid URL or update a file"
             (input)="onParamHeaderChange($event.target.value, i+1)">
+          <input *ngIf="displayFileUploaded" type="text" placeholder="{{ fileUploadedName }}"
+            value="{{fileUploadedName}}" disabled>
+
         </div>
 
+        <ion-button *ngIf="!displayFileUploaded" ion-button fill="clear" type="submit" class="icon-only"
+          (click)="fileInput.click()">
+          <ion-icon name="cloud-upload-outline"></ion-icon>
+          <!-- <input #fileInput type="file" accept="image/*" (change)="onFileSelected($event)" capture="camera"
+            id="file-input" style="display: none;"> -->
+          <input #fileInput type="file" [accept]="fileUploadAccept" (change)="onFileSelected($event)" capture="camera"
+            id="file-input" style="display: none;">
+
+        </ion-button>
+
+        <ion-button *ngIf="displayFileUploaded" ion-button fill="clear" type="submit" class="icon-only"
+          (click)="removeHeaderFile()">
+          <ion-icon name="trash-outline" style="color: #e22828;"></ion-icon>
+        </ion-button>
+
+      </div>
+
+    </div>
+
+    <div *ngIf="header_component?.format == 'LOCATION'">
+      <p class="parameters-title">Header parameters</p>
+      <div class="selected-place">
+        <!-- <ion-button *ngIf="!header_params[0]?.location?.name" ion-button fill="clear" (click)="displayMap()">
+          <ion-icon name="add-circle-outline"></ion-icon>Add location
+        </ion-button> -->
+
+        <!-- <div *ngIf="header_params[0]?.location && header_params[0]?.location?.name"> -->
+        <div>
+          <div class="share-location-header">
+            <div class="share-location-title">
+              <ion-icon name="locate"></ion-icon>
+              <p>Location</p>
+            </div>
+            <div>
+              <ion-button *ngIf="!header_params[0]?.location?.name" fill="clear" class="small" (click)="displayMap()"><ion-icon name="add-outline"></ion-icon>Add</ion-button>
+              <ion-button *ngIf="header_params[0]?.location?.name" fill="clear" class="small" (click)="displayMap()"><ion-icon name="add-outline"></ion-icon>Change</ion-button>
+            </div>
+          </div>
+          <div class="place-info">
+            <p class="place-name">{{ header_params[0].location.name }}</p>
+            <p class="place-address">{{ header_params[0].location.address }}</p>
+            <p class="place-coords">{{ header_params[0].location.latitude }} - {{ header_params[0].location.longitude }}
+            </p>
+          </div>
+        </div>
       </div>
     </div>
+    <!-- // Header parameters - END -->
 
+    <!-- // Body parameters - START -->
     <div *ngIf="body_component.example">
       <p class="parameters-title">Body parameters</p>
       <div *ngFor="let bp of body_component.example.body_text[0]; index as i" class="parameter">
@@ -106,18 +244,60 @@
           <span>{{</span> {{ i + 1 }} <span>}}</span>
         </div>
         <div class="field-wrapper">
-          <input type="text" placeholder="{{bp}}" 
-            (input)="onParamBodyChange($event.target.value, i+1)">
+          <input type="text" placeholder="{{bp}}" (input)="onParamBodyChange($event.target.value, i+1)">
         </div>
       </div>
     </div>
+    <!-- // Body parameters - END -->
 
 
-    <div *ngIf="!body_component.example">
+    <div *ngIf="body_params.length == 0 && header_params.length == 0 && url_button_params.length == 0">
       <p style="font-style: italic; color: #a3a3a3;">No parameters</p>
     </div>
 
+    <!-- // Buttons parameters - START -->
+    <div *ngIf="url_button_component && url_button_component.example">
+      <p class="parameters-title">Buttons parameters</p>
+      <div *ngFor="let param of url_button_component.example; index as i" class="parameter">
+        <div class="param-number">
+          <span>{{</span> {{ i + 1 }} <span>}}</span>
+        </div>
+        <div class="field-wrapper large">
+          <input type="text" placeholder="Insert a valid URL" (input)="onParamButtonChange($event.target.value, i+1)">
+        </div>
 
+      </div>
+      <div class="url-button-previsioning">
+        <div *ngIf="url_button_component && url_button_component.type === 'URL'" class="call-to-action-preview">
+
+          <ion-button ion-button fill="clear" class="whatsapp-call-to-action">
+            <span class="material-icons-outlined call-to-action-icon">open_in_new</span>
+            {{ url_button_component.text }}
+          </ion-button>
+        </div>
+        <p class="previsioning-url">{{ previsioning_url }}</p>
+      </div>
+    </div>
+    <!-- // Buttons parameters - END -->
+
+
+
+    <!-- <div *ngIf="buttons_component">
+      <div *ngFor="let btn of buttons_component.buttons; index as i">
+        <div *ngIf="btn.type === 'URL'">
+          <p class="parameters-title">Buttons parameters</p>
+          <div class="parameter">
+            <div class="param-number">
+              <span>{{</span> {{ i + 1 }} <span>}}</span>
+            </div>
+            <div class="field-wrapper">
+              <input type="text" placeholder="{{bp}}" (input)="onParamButtonChange($event.target.value, i+1)">
+            </div>
+          </div>
+          {{ btn.url }}
+        </div>
+      </div>
+    </div> -->
 
 
 
@@ -125,15 +305,17 @@
 </ion-content>
 
 <ion-content *ngIf="displayError" class="content-container">
-    <div class="error-container">
-      <p class="error-message">{{labelError}}</p>
-    </div>
+  <div class="error-container">
+    <p class="error-message">{{labelError}}</p>
+  </div>
 </ion-content>
 
 
 
 <ion-footer *ngIf="editTemplateView">
   <ion-button [disabled]="sendButtonDisabled" ion-button fill="clear" type="submit" (click)="sendTemplate()"><ion-icon
-    name="send-sharp"></ion-icon>{{translationMap?.get('LABEL_SEND')}}
+      name="send-sharp"></ion-icon>{{translationMap?.get('LABEL_SEND')}}
   </ion-button>
-</ion-footer>
+</ion-footer>
+
+<app-maps *ngIf="displayMapModal"></app-maps>