BTHLABS-66: Prepping for public release: Take five

AKA "Using Apple reviewers as QA for your project". Thanks, y'all! :)

services/extension/assets/_locales/en/messages.json

@@ -30,5 +30,9 @@
   "content_popup_content_error_message": {
     "message": "HotPocket couldn't complete this operation.",
     "description": "Title of the error content popup."
+  },
+  "content_popup_content_view_button_message": {
+    "message": "View in HotPocket",
+    "description": "Title of the view link button"
   }
 }

services/extension/src/background/main.js

@@ -117,10 +117,10 @@ const doSave = async (accessToken, tab) => {
   );
 
   if (error !== null) {
-    return false;
+    return null;
   }
 
-  return true;
+  return result;
 };
 
 const doCreateAndStoreAccessToken = async (authKey) => {

services/extension/src/content/main.js

@@ -26,7 +26,7 @@ class Popup {
 
     element.insertAdjacentHTML('beforeend', content);
   };
-  setContent = (content) => {
+  setContent = (content, saveUrl) => {
     const shadow = this.container.shadowRoot;
 
     const body = shadow.querySelector('.hotpocket-extension-popup-body');
@@ -38,6 +38,13 @@ class Popup {
         i18nElement.dataset.message,
       );
     }
+
+    if (saveUrl) {
+      const viewLink = shadow.querySelector('.hotpocket-extension-popup-view');
+      if (viewLink) {
+        viewLink.href = saveUrl;
+      }
+    }
   };
   close = () => {
     this.clearCloseTimeout();
@@ -47,7 +54,7 @@ class Popup {
       this.container = null;
     }
   };
-  show = (content) => {
+  show = (content, saveUrl) => {
     this.close();
 
     this.container = document.createElement('div');
@@ -57,7 +64,7 @@ class Popup {
     const shadow = this.container.attachShadow({mode: 'open'});
     shadow.setHTMLUnsafe(POPUP);
 
-    this.setContent(content);
+    this.setContent(content, saveUrl);
 
     const closeElements = shadow.querySelectorAll('.hotpocket-extension-popup-close');
     for (const closeElement of closeElements) {
@@ -66,8 +73,8 @@ class Popup {
 
     document.body.appendChild(this.container);
   };
-  update = (content) => {
-    this.setContent(content);
+  update = (content, saveUrl) => {
+    this.setContent(content, saveUrl);
   };
   onCloseClick = (event) => {
     this.close();
@@ -86,16 +93,16 @@ const doHandleBrowserActionClickedMessage = (message) => {
 };
 
 const doHandleSaveMessage = (message) => {
-  let content = POPUP_CONTENT_ERROR;
-  if (message.result === true) {
-    content = POPUP_CONTENT_SUCCESS;
+  let content = POPUP_CONTENT_SUCCESS;
+  if (message.result === null) {
+    content = POPUP_CONTENT_ERROR;
   }
 
   if (currentPopup === null) {
     currentPopup = new Popup();
     currentPopup.show(content);
   } else {
-    currentPopup.update(content);
+    currentPopup.update(content, (message.result || {}).url);
   }
 };
 

services/extension/src/content/templates/popup.html

@@ -94,6 +94,26 @@
    opacity: 0.83;
    transform: rotate(60deg);
 }
+.hotpocket-extension-popup-view {
+  background-color: #1CBAED;
+  border: 1px solid #1CBAED;
+  border-radius: 0.25rem;
+  color: white;
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  margin-top: 0.25rem !important;
+  padding: 0.25rem 0.5rem;
+  text-decoration: none;
+}
+.hotpocket-extension-popup-view:hover {
+  background-color: #189ec9;
+  border-color: #1695be;
+}
+.hotpocket-extension-popup-view:active {
+  background-color: #1695be;
+  border-color: #158cb2;
+}
 @keyframes hotpocket-extension-popup-loader-animation {
   100% {transform: rotate(1turn)}
 }
@@ -104,6 +124,6 @@
     <strong>HotPocket by BTHLabs</strong>
     <a class="hotpocket-extension-popup-close">&times;</a>
   </div>
-  <div class="hotpocket-extension-popup-body">
+  <div class="hotpocket-extension-popup-body hotpocket-extension-popup-message-success">
   </div>
 </div>

services/extension/src/content/templates/popup_content_success.html

@@ -2,4 +2,13 @@
   <strong data-message="content_popup_content_success_title"></strong>
   <br>
   <span data-message="content_popup_content_success_message"></span>
+  <br>
+  <a
+    class="hotpocket-extension-popup-view"
+    data-message="content_popup_content_view_button_message"
+    href="#"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+  </a>
 </p>