Release - v0.4.8 (#15)

* Handled Responsiveness for all screens
* Add event listeners to dynamically adjust the backlink (#14)
* PRESS4-88 Install JIT for 3rd party integrations (#12)
* Store analytics Component (#11)

includes/Partials/woocommerce.css

@@ -2,15 +2,15 @@
   outline: none;
   position: fixed;
   width: 200px;
-  top: 32px;
   padding-left: 32px;
   z-index: 1010;
   height: 60px;
   display: grid;
   text-decoration: none;
   align-items: center;
   background: white;
-  font: 400 16px/1.5 sans-serif;
+  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   color: #2c76dc;
 }
 .nfd-woocommerce-link:hover {
@@ -31,6 +31,22 @@
   border-bottom: 1px solid #ecece0;
 }
 
+.post-php .wp-responsive-open .nfd-woocommerce-link {
+  z-index: 0;
+}
+
+.mobile.post-php .nfd-woocommerce-link,
+.mobile.post-new-php .nfd-woocommerce-link {
+  left: 12%;
+  width: fit-content;
+}
+
+.mobile .nfd-woocommerce-link {
+  width: 115px;
+  padding-left: 20px;
+  font-size: 13px;
+}
+
 .is-wp-toolbar-disabled .nfd-woocommerce-link {
   top: 0;
 }

includes/Partials/woocommerce.js

@@ -1,12 +1,52 @@
+function updateBacklink() {
+  let offsets = {};
+  const selectors = [
+    '#wpadminbar',
+    '.woocommerce-mobile-app-banner',
+    '.woocommerce-layout__header-tasks-reminder-bar',
+  ];
+  selectors.forEach((selector) => {
+    const node = document.querySelector(selector);
+    if (node !== null) {
+      offsets[selector] = node.getBoundingClientRect().height;
+    }
+  });
+  let offset = Object.values(offsets).reduce((a, b) => a + b, 0);
+  let backlink = document.querySelector('.nfd-woocommerce-link');
+  if (backlink !== null) {
+    backlink.style.top = `${offset}px`;
+  }
+}
+
+function observeAndAdjustBacklink(event) {
+  updateBacklink();
+  const callback = (mutationList, observer) => {
+    for (const mutation of mutationList) {
+      if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
+        updateBacklink();
+      }
+    }
+  };
+  const layoutContainer = document.querySelector('.woocommerce-layout__header');
+  if (layoutContainer !== null) {
+    new MutationObserver(callback).observe(layoutContainer, {
+      childList: true,
+      subtree: true,
+    });
+  }
+}
+
 (function () {
   let section = new URLSearchParams(window.location.search);
-  if (section.has("return_to_nfd")) {
-    let goBack = document.createElement("a");
-    goBack.ariaRoleDescription = "Go Back to Bluehost WordPress Plugin";
-    goBack.className = "nfd-woocommerce-link";
-    goBack.innerText = "← Back";
-    goBack.href = `admin.php?page=bluehost#${section.get("return_to_nfd")}`;
-    let wcRoot = document.getElementById("wpbody-content");
-    wcRoot.insertAdjacentElement("beforebegin", goBack);
+  if (section.has('return_to_nfd')) {
+    let goBack = document.createElement('a');
+    goBack.ariaRoleDescription = 'Go Back to Bluehost WordPress Plugin';
+    goBack.className = 'nfd-woocommerce-link';
+    goBack.innerText = '← Back';
+    goBack.href = `admin.php?page=bluehost#${section.get('return_to_nfd')}`;
+    let wcRoot = document.getElementById('wpbody-content');
+    wcRoot.insertAdjacentElement('beforebegin', goBack);
+    updateBacklink();
+    window.addEventListener('DOMContentLoaded', observeAndAdjustBacklink);
   }
 })();

modals.scss

@@ -77,11 +77,24 @@ div.nfd-ecommerce-store-address-form {
     border: 1px solid #d6d6d6;
     border-radius: 2px;
   }
+
+  @media (max-width: 960px) {
+    input,
+    select {
+      width: 300px;
+    }
+  }
+
+  @media (max-width: 780px) {
+    grid-template-columns:  auto;
+  }
+
 }
 
 .nfd-ecommerce-modal-header {
   color: var(--nfd-ecommerce-text-primary);
   font: 274 40px/1.2 var(--nfd-ecommerce-font-primary);
+  text-align: center;
   margin: 0;
 }
 .nfd-ecommerce-modal-header-description {