From ee15341b2afd3be39e3303b7b63f3fba806be10d Mon Sep 17 00:00:00 2001
From: Dawid Witulski <dwitulski@fliplet.com>
Date: Tue, 7 May 2024 13:28:52 +0200
Subject: [PATCH 1/2] feat(ID-4326): added apns config validation button

---
 css/interface.css   |   5 ++
 interface.html      |  10 ++++
 js/apnValidation.js | 123 ++++++++++++++++++++++++++++++++++++++++++++
 widget.json         |   3 +-
 4 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 js/apnValidation.js

diff --git a/css/interface.css b/css/interface.css
index 2c507d6..2d2ab12 100644
--- a/css/interface.css
+++ b/css/interface.css
@@ -549,3 +549,8 @@ h3 small {
   align-items: center;
   display: flex;
 }
+
+#fl-push-testResultMessage {
+  padding: 10px 0;
+  display: none;
+}
\ No newline at end of file
diff --git a/interface.html b/interface.html
index 91607c0..bd841c8 100644
--- a/interface.html
+++ b/interface.html
@@ -1808,6 +1808,16 @@ <h4 class="panel-title collapsed" role="button" data-toggle="collapse" data-pare
                     <input type="text" name="fl-push-keyId" class="form-control" id="fl-push-keyId" />
                   </div>
                 </div>
+                <div class="form-group clearfix">
+                  <div class="col-sm-4 control-label">
+                    <label for="fl-push-projectId">Use this to test your credentials are set up correctly</label>
+                    <p class="help-block label-helper"><small>Ensure you are logged in to your Developer account to test configuration. Login <a href="#" onclick="goToTechDetails()">here</a></small></p>
+                  </div>
+                  <div class="col-sm-8">
+                    <input type="button" id="fl-push-testConfigButton" class="btn btn-primary" value="Test" />
+                    <p id="fl-push-testResultMessage"></p>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/js/apnValidation.js b/js/apnValidation.js
new file mode 100644
index 0000000..a71def2
--- /dev/null
+++ b/js/apnValidation.js
@@ -0,0 +1,123 @@
+
+const authKeyInput = document.getElementById('fl-push-authKey');
+const keyIdInput = document.getElementById('fl-push-keyId');
+const teamIdInput = document.getElementById('fl-store-teams'); 
+const bundleIdInput = document.getElementById('fl-store-bundleId'); 
+
+const testConfigButton = document.getElementById('fl-push-testConfigButton');
+const testResultMessage = document.getElementById('fl-push-testResultMessage');
+
+const MESSAGE = {
+  SUCCESS: 'Success! Push notifications have been configured successfully.',
+  ERROR_INPUT: 'Error - notifications have not beeen configured, please check the details you have entered and try again',
+  ERROR_SERVER: 'Error - notifications have not been configured correctly. Please review <a href="https://help.fliplet.com" target="_blank">https://help.fliplet.com</a> or contact support.',
+  ERROR_NO_KEY: '<strong>Authentication key</strong> is missing, please check provided information and try again',
+  ERROR_NO_KEYID: '<strong>Key ID</strong> is missing, please check provided information and try again',
+  ERROR_NO_TEAMID: '<strong>Developer team</strong> is missing, please check selected team in section: <strong>App Store > 5 - App technical details</strong>, and try again',
+  ERROR_NO_BUNDLEID: '<strong>Bundle ID</strong> is missing, please check Bundle ID: <strong>App Store > 5 - App technical details</strong>, and try again',
+  ERROR_SERVICE: 'Error - There is currently an issue relating to APNs services. Please try again later.'
+};
+
+const mappedMessages = {
+  BadDeviceToken: MESSAGE.SUCCESS,
+  ExpiredProviderToken: MESSAGE.ERROR_INPUT,
+  InvalidProviderToken: MESSAGE.ERROR_INPUT,
+  TooManyRequests: MESSAGE.ERROR_SERVICE,
+  InternalServerError: MESSAGE.ERROR_SERVICE,
+  ServiceUnavailable: MESSAGE.ERROR_SERVICE,
+  Shutdown: MESSAGE.ERROR_SERVICE,
+}
+
+const renderResultMessage = (resultMessage) => {
+  if (!resultMessage) {
+    testResultMessage.style.display = 'none';
+    testResultMessage.innerHTML = '';
+
+    return;
+  }
+
+  testResultMessage.style.display = 'block';
+  testResultMessage.innerHTML = resultMessage;
+
+  const success = resultMessage === MESSAGE.SUCCESS;
+
+  testResultMessage.classList.toggle('text-success', success);
+  testResultMessage.classList.toggle('text-danger', !success);
+};
+
+const validateApnKey = async({ apnAuthKey, apnKeyId, apnTeamId, apnTopic }) => {
+  const currentAppId = Fliplet.Env.get('appId');
+
+  try {
+    const response = await fetch(`/v1/apps/${currentAppId}/notifications/validate-apns-config`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ apnAuthKey, apnKeyId, apnTeamId, apnTopic }),
+    });
+
+    if (response.status === 200) {
+      const { 0: { message: { 0: { errorMsg } } } } = response.json();
+  
+      const message = mappedMessages[errorMsg];
+
+      if (message) {
+        return message;
+      }
+    }
+
+    return MESSAGE.ERROR_SERVER;
+  } catch (error) { 
+    // eslint-disable-next-line no-console
+    console.error('Failed to send message:', error);
+
+    return MESSAGE.ERROR;
+  }
+};
+
+testConfigButton.addEventListener('click', async() => {
+  renderResultMessage(null);
+
+  let resultMessage = null;
+
+  const apnAuthKey = authKeyInput.value;
+  const apnKeyId = keyIdInput.value;
+  const apnTeamId = teamIdInput.value;
+  const apnTopic = bundleIdInput.value;
+
+
+  if (!apnAuthKey) {
+    resultMessage = MESSAGE.ERROR_NO_KEY;
+  } else if (!apnKeyId) {
+    resultMessage = MESSAGE.ERROR_NO_KEYID;
+  } else if (!apnTeamId) {
+    resultMessage = MESSAGE.ERROR_NO_TEAMID;
+  } else if (!apnTopic) {
+    resultMessage = MESSAGE.ERROR_NO_BUNDLEID;
+  } else {
+    resultMessage = await validateApnKey({ apnAuthKey, apnKeyId, apnTeamId, apnTopic });
+  }
+
+  renderResultMessage(resultMessage);
+});
+
+const clearMessage = () => {
+  renderResultMessage(null);
+};
+
+authKeyInput.addEventListener('input', clearMessage);
+keyIdInput.addEventListener('input', clearMessage);
+teamIdInput.addEventListener('input', clearMessage);
+
+function goToTechDetails() {
+  const appStoreTab = document.querySelector('[href="#appstore-tab"]');
+  const techDetailsDropdownAnchor = document.querySelector('[href="#appStoreTech"]');
+  const techDetailsDropdown = document.getElementById('appStoreTech');
+
+  appStoreTab.click();
+  
+  if (techDetailsDropdown.getAttribute('aria-expanded') !== 'true') {
+    techDetailsDropdownAnchor.click();
+  }
+}
\ No newline at end of file
diff --git a/widget.json b/widget.json
index 79b96ad..37a42b2 100644
--- a/widget.json
+++ b/widget.json
@@ -29,7 +29,8 @@
       "vendor/bootstrap-select.min.js",
       "vendor/validator.js",
       "css/interface.css",
-      "js/interface.js"
+      "js/interface.js",
+      "js/apnValidation.js"
     ]
   },
   "build": {

From a50a1a0eb8ba0d931b0aa920a5c512652067e67e Mon Sep 17 00:00:00 2001
From: Dawid Witulski <dwitulski@fliplet.com>
Date: Tue, 7 May 2024 14:56:49 +0200
Subject: [PATCH 2/2] chore(ID-4326): lint fix

---
 js/apnValidation.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/js/apnValidation.js b/js/apnValidation.js
index a71def2..f8cf3d6 100644
--- a/js/apnValidation.js
+++ b/js/apnValidation.js
@@ -1,8 +1,8 @@
 
 const authKeyInput = document.getElementById('fl-push-authKey');
 const keyIdInput = document.getElementById('fl-push-keyId');
-const teamIdInput = document.getElementById('fl-store-teams'); 
-const bundleIdInput = document.getElementById('fl-store-bundleId'); 
+const teamIdInput = document.getElementById('fl-store-teams');
+const bundleIdInput = document.getElementById('fl-store-bundleId');
 
 const testConfigButton = document.getElementById('fl-push-testConfigButton');
 const testResultMessage = document.getElementById('fl-push-testResultMessage');
@@ -25,8 +25,8 @@ const mappedMessages = {
   TooManyRequests: MESSAGE.ERROR_SERVICE,
   InternalServerError: MESSAGE.ERROR_SERVICE,
   ServiceUnavailable: MESSAGE.ERROR_SERVICE,
-  Shutdown: MESSAGE.ERROR_SERVICE,
-}
+  Shutdown: MESSAGE.ERROR_SERVICE
+};
 
 const renderResultMessage = (resultMessage) => {
   if (!resultMessage) {
@@ -52,13 +52,13 @@ const validateApnKey = async({ apnAuthKey, apnKeyId, apnTeamId, apnTopic }) => {
     const response = await fetch(`/v1/apps/${currentAppId}/notifications/validate-apns-config`, {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json',
+        'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ apnAuthKey, apnKeyId, apnTeamId, apnTopic }),
+      body: JSON.stringify({ apnAuthKey, apnKeyId, apnTeamId, apnTopic })
     });
 
     if (response.status === 200) {
-      const { 0: { message: { 0: { errorMsg } } } } = response.json();
+      const { 0: { message: { 0: { errorMsg } } } } = await (response.json());
   
       const message = mappedMessages[errorMsg];
 
@@ -68,7 +68,7 @@ const validateApnKey = async({ apnAuthKey, apnKeyId, apnTeamId, apnTopic }) => {
     }
 
     return MESSAGE.ERROR_SERVER;
-  } catch (error) { 
+  } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Failed to send message:', error);
 
@@ -120,4 +120,4 @@ function goToTechDetails() {
   if (techDetailsDropdown.getAttribute('aria-expanded') !== 'true') {
     techDetailsDropdownAnchor.click();
   }
-}
\ No newline at end of file
+}