From 15d57f7ec3e333558fa62f4a312d740afa9e666f Mon Sep 17 00:00:00 2001
From: YaroslavOvdii <yaroslav.o@upplabs.com>
Date: Wed, 11 Sep 2019 15:17:05 +0300
Subject: [PATCH] Added new feature to google submission component

---
 css/interface.css |  4 ++
 interface.html    | 96 ++++++++++++++++++++++++++++++++---------------
 js/interface.js   | 84 ++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 153 insertions(+), 31 deletions(-)

diff --git a/css/interface.css b/css/interface.css
index 92ec712..a0dc859 100644
--- a/css/interface.css
+++ b/css/interface.css
@@ -497,3 +497,7 @@ h3 small {
 .screenshot-previews img {
   border: 1px solid #F0F0F0;
 }
+
+.analytic-enabled {
+  color: #6aa84f;
+}
\ No newline at end of file
diff --git a/interface.html b/interface.html
index 0e013ae..4904fef 100644
--- a/interface.html
+++ b/interface.html
@@ -138,32 +138,45 @@ <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-pare
           </div>
           <div class="panel panel-default">
             <div class="panel-heading" role="tab" id="appStorePushHeading">
-              <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionAppStore" href="#appStorePush" aria-expanded="true" aria-controls="appStorePush"><strong>2 -</strong> Push notification <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
+              <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionAppStore" href="#appStorePush" aria-expanded="true" aria-controls="appStorePush"><strong>2 -</strong> App Analytics & Push <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
             </div>
             <div id="appStorePush" class="panel-collapse collapse" role="tabpanel" aria-labelledby="appStorePushHeading">
               <div class="panel-body">
-                <p>If you want to enable push notifications on your app, we recommend you upload the notification icon, doing it at a later stage will require a new submission.</p>
+                <h3>Fliplet Analytics</h3>
                 <div class="form-group clearfix">
-                  <div class="col-sm-4 control-label">
-                    <label>Notification icon</label>
-                    <p class="help-block label-helper"><small>This will be the icon users will see when they receive a notification from your app. <a href="https://developer.android.com/guide/practices/ui_guidelines/icon_design_status_bar.html" target="_blank">Learn More</a><br><strong>The image should be 512x512</strong></small></p>
-                  </div>
-                  <div class="col-sm-8">
-                    <label for="fl-store-notificationIcon" class="fileUpload btn btn-primary">
-                      <i class="fa fa-plus"></i>
-                      <span>Choose image</span>
-                      <input type="file" id="fl-store-notificationIcon" name="fl-store-notificationIcon" class="input-file selectfile" accept="image/png">
-                    </label>
-                    <p class="help-block image-name"><small></small></p>
+                  <div class="col-sm-12">
+                    <h4>Status: <span data-fl-analytics-status>Disabled</span> </h4>
+                    <br>
+                    <p>Fliplet’s analytics records usage data, including the user’s login if the app has a login, and displays the data within Fliplet Studio. <a href="#">Learn more about Fliplet Analytics</a></p>
+                    <small>To enable in Fliplet Studio visit App Settings > Add-ons tab > Fliplet Analytics</small>
                   </div>
                 </div>
+
+
+                <h3>Google Firebase & Push Notifications</h3>
                 <div class="form-group clearfix">
-                  <div class="col-sm-4 control-label">
-                    <label for="fl-store-senderId">Sender ID</label>
-                    <p class="help-block label-helper"><small>The sender ID can be found in the Firebase Console in <strong>Settings > Cloud Messaging</strong>.</small></p>
-                  </div>
-                  <div class="col-sm-8">
-                    <input type="text" name="fl-store-senderId" class="form-control" id="fl-store-senderId" />
+                  <div class="col-sm-12">
+                    <h4>Status: <span id="fl-store-firebase-status">Disabled</span></h4>
+                    <br>
+                    <p>Google Firebase offers analytics via Google Analytics, push notifications and other features. <a href="">Learn more about Firebase</a></p>
+                    <small>
+                      To enable:
+                      <ol>
+                        <li>Login to a Firebase account (any existing Google Account can be used</li>
+                        <li>Create a new app</li>
+                        <li>Select Android</li>
+                        <li>Download your Firebase json file</li>
+                        <li>Upload it by clicking the button below</li>
+                      </ol>
+                    </small>
+                  </div>
+                  <div class="col-sm-4">
+                    <label class="input-group-btn">
+                      <span class="btn btn-default">Upload Firebase .json file<input id="fl-store-firebase" name="fl-store-firebase" class="hidden" type="file" accept=".json" data-error="Please upload a .plist file."></span>
+                    </label>
+                    <div class="help-block with-errors">
+                      <p id="fl-store-firebase-uploaded" class="hidden"><strong>✔ You selected a config file.</strong></p>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -259,25 +272,48 @@ <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-pare
           </div>
           <div class="panel panel-default">
             <div class="panel-heading" role="tab" id="enterprisePushHeading">
-              <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionEnterprise" href="#enterprisePush" aria-expanded="true" aria-controls="enterprisePush"><strong>3 -</strong> Push notification assets <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
+              <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordionEnterprise" href="#enterprisePush" aria-expanded="true" aria-controls="enterprisePush"><strong>3 -</strong> App Analytics & Push <small>(Optional)</small> <i class="fa fa-angle-down" aria-hidden="true"></i></h4>
             </div>
             <div id="enterprisePush" class="panel-collapse collapse" role="tabpanel" aria-labelledby="enterprisePushHeading">
               <div class="panel-body">
-                <p>If you want to enable push notifications on your app, we recommend you upload the notification icon, doing it at a later stage will require a new submission.</p>
+
+                <h3>Fliplet Analytics</h3>
                 <div class="form-group clearfix">
-                  <div class="col-sm-4 control-label">
-                    <label>Notification icon</label>
-                    <p class="help-block label-helper"><small>This will be the icon users will see when they receive a notification from your app<br><strong>The image should be 512x512</strong></small></p>
+                  <div class="col-sm-12">
+                    <h4>Status: <span data-fl-analytics-status>Disabled</span> </h4>
+                    <br>
+                    <p>Fliplet’s analytics records usage data, including the user’s login if the app has a login,anddisplays the data within Fliplet Studio. <a href="#">Learn more about Fliplet Analytics</a></p>
+                    <small>To enable in Fliplet Studio visit App Settings > Add-ons tab > Fliplet Analytics</small>
                   </div>
-                  <div class="col-sm-8">
-                    <label for="fl-ent-notificationIcon" class="fileUpload btn btn-primary">
-                      <i class="fa fa-plus"></i>
-                      <span>Choose image</span>
-                      <input type="file" id="fl-ent-notificationIcon" name="fl-ent-notificationIcon" class="input-file selectfile" accept="image/png">
+                </div>
+
+                <h3>Google Firebase & Push Notifications</h3>
+                <div class="form-group clearfix">
+                  <div class="col-sm-12">
+                    <h4>Status: <span id="fl-ent-firebase-status">Disabled</span></h4>
+                    <br>
+                    <p>Google Firebase offers analytics via Google Analytics, push notifications and otherfeatures. <a href="#">Learn more about Firebase</a></p>
+                    <small>
+                      To enable:
+                      <ol>
+                        <li>Login to a Firebase account (any existing Google Account can be used</li>
+                        <li>Create a new app</li>
+                        <li>Select Android</li>
+                        <li>Download your Firebase json file</li>
+                        <li>Upload it by clicking the button below</li>
+                      </ol>
+                    </small>
+                  </div>
+                  <div class="col-sm-4">
+                    <label class="input-group-btn">
+                      <span class="btn btn-default">Upload Firebase .json file<input id="fl-ent-firebase" name="fl-ent-firebase" class="hidden" type="file" accept=".json"data-error="Please upload a.plist file."></span>
                     </label>
-                    <p class="help-block image-name"><small></small></p>
+                    <div class="help-block with-errors">
+                      <p id="fl-ent-firebase-uploaded" class="hidden"><strong>✔ You selected a config file.<strong><p>
+                    </div>
                   </div>
                 </div>
+
               </div>
             </div>
           </div>
diff --git a/js/interface.js b/js/interface.js
index 1dc6b9c..e104e53 100644
--- a/js/interface.js
+++ b/js/interface.js
@@ -6,6 +6,8 @@ var appIcon = '';
 var appSettings = {};
 var allAppData = [];
 var appStoreSubmission = {};
+var appStoreFirebaseFileField = undefined;
+var enterpriseFirebaseFileField = undefined;
 var previousAppStoreSubmission = {};
 var enterpriseSubmission = {};
 var previousEnterpriseSubmission = {};
@@ -56,6 +58,36 @@ function incrementVersionNumber(versionNumber) {
   return splitNumber.join('.');
 }
 
+function saveFirebaseSettings(origin) {
+  if (origin === 'appStore' && appStoreFirebaseFileField && appStoreFirebaseFileField.files[0]) {
+    var formData = new FormData();
+
+    formData.append('firebase', appStoreFirebaseFileField.files[0]);
+
+    return setFirebaseConfigFile(appStoreSubmission.id, formData);
+  }
+
+  if (origin === 'enterprise' && enterpriseFirebaseFileField && enterpriseFirebaseFileField.files[0]) {
+    var formData = new FormData();
+
+    formData.append('firebase', enterpriseFirebaseFileField.files[0]);
+
+    return setFirebaseConfigFile(enterpriseSubmission.id, formData);
+  }
+
+  return Promise.resolve();
+}
+
+function setFirebaseConfigFile(id, file) {
+  return Fliplet.API.request({
+    method: 'PUT',
+    url: 'v1/organizations/' + Fliplet.Env.get('organizationId') + '/credentials/submission-' + id + '?fileName=firebase',
+    data: file,
+    contentType: false,
+    processData: false
+  });
+}
+
 function incrementVersionCode(versionNumber) {
   var newVersionNumber = incrementVersionNumber(versionNumber);
   var splitNumber = newVersionNumber.split('.');
@@ -95,6 +127,11 @@ function loadAppStoreData() {
       return;
     }
 
+    // Firebase
+    if (name === 'fl-store-firebase') {
+      return;
+    }
+
     /* NOTIFICATION ICON */
     if (name === "fl-store-notificationIcon") {
       if (appStoreSubmission.data[name]) {
@@ -206,6 +243,12 @@ function loadEnterpriseData() {
       $('[name="' + name + '"]').val(enterpriseSubmission.data[name]);
       return;
     }
+
+    // Firebase
+    if (name === 'fl-ent-firebase') {
+      return;
+    }
+
     /* NOTIFICATION ICON */
     if (name === "fl-ent-notificationIcon") {
       if (enterpriseSubmission.data[name]) {
@@ -269,7 +312,9 @@ function loadPushNotesData() {
 }
 
 function submissionBuild(appSubmission, origin) {
-  Fliplet.App.Submissions.build(appSubmission.id).then(function(builtSubmission) {
+  saveFirebaseSettings(origin).then(function () {
+    return Fliplet.App.Submissions.build(appSubmission.id);
+  }).then(function (builtSubmission) {
 
     if (origin === "appStore") {
       appStoreSubmission = builtSubmission.submission;
@@ -505,6 +550,10 @@ function saveEnterpriseData(request) {
       value = value.trim();
     }
 
+    if (name === 'fl-ent-firebase') {
+      return; // saved in credentials
+    }
+
     if ($(el).attr('type') === "file") {
       var fileList = el.files;
       var file = new FormData();
@@ -652,6 +701,26 @@ $('[name="submissionType"]').on('change', function() {
   Fliplet.Widget.autosize();
 });
 
+$('#fl-store-firebase').on('change', function() {
+  appStoreFirebaseFileField = this;
+  var fileName = this.value.replace(/\\/g, '/').replace(/.*\//, '');
+
+  if (this.files && this.files[0]) {
+    $('#fl-store-firebase-uploaded').html('File uploaded: <strong>' + fileName + '</strong>').removeClass('hidden');
+    $('#fl-store-firebase-status').html('Enabled').addClass('analytic-enabled');
+  }
+});
+
+$("#fl-ent-firebase").on('change', function() {
+  enterpriseFirebaseFileField = this;
+  var fileName = this.value.replace(/\\/g, '/').replace(/.*\//, '');
+
+  if (this.files && this.files[0]) {
+    $('#fl-ent-firebase-uploaded').html('File uploaded: <strong>' + fileName + '</strong>').removeClass('hidden');
+    $('#fl-ent-firebase-status').html('Enabled').addClass('analytic-enabled');
+  }
+});
+
 $('.fl-sb-appStore [change-bundleid], .fl-sb-fliplet-signed [change-bundleid]').on('click', function() {
   Fliplet.Modal.confirm({
     message: 'Are you sure you want to change the unique Bundle ID?'
@@ -1199,6 +1268,19 @@ function initialLoad(initial, timeout) {
           })
           .then(function(org) {
             organizationName = org.name;
+          }),
+          Fliplet.API.request({
+            cache: true,
+            url: 'v1/widgets?include_instances=true&tags=type:appComponent&appId='+Fliplet.Env.get('appId')+'&package=com.fliplet.analytics'
+          })
+          .then(function(res) {
+            var isEnabled = !_.isEmpty(res.widgets[0].instances);
+            
+            if (isEnabled) {
+              $('[data-fl-analytics-status]').each(function(index, item) {
+                $(item).html('Enabled').addClass('analytic-enabled');
+              }) 
+            } 
           })
         ]);
       })