From 58bca40632a4b151ebbfac9ed9255768d8b92243 Mon Sep 17 00:00:00 2001
From: ajugo <andrej.jugovic7@gmail.com>
Date: Tue, 25 Oct 2022 11:44:50 +0200
Subject: [PATCH] Change zebra label instructions [SCI-7390] (#4572)

---
 .../stylesheets/settings/label_printers.scss  | 17 +++++
 .../label_printers/_zebra_settings.html.erb   | 65 +++++++++++++++----
 config/initializers/constants.rb              |  4 +-
 config/locales/en.yml                         | 25 +++++--
 4 files changed, 92 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/settings/label_printers.scss b/app/assets/stylesheets/settings/label_printers.scss
index 3cdfaf0fb..733c55ae6 100644
--- a/app/assets/stylesheets/settings/label_printers.scss
+++ b/app/assets/stylesheets/settings/label_printers.scss
@@ -34,6 +34,18 @@
     }
   }
 
+  ol {
+    padding-left: 0;
+
+    li {
+      padding: .5em 0;
+    }
+
+    .indented_row {
+      padding-left: 4px;
+    }
+  }
+
   .zebra-settings-collapse {
     border-left: 3px solid $color-concrete;
     margin-top: 14px;
@@ -42,6 +54,10 @@
 
     .collapse {
       padding-left: 2.5em;
+
+      ol {
+        padding-left: 1.5em;
+      }
     }
 
     .collapse-row {
@@ -99,6 +115,7 @@
   .row-title {
     @include font-h2;
     margin-left: .5em;
+    margin-top: .25em;
   }
 
   .api-key-container {
diff --git a/app/views/label_printers/_zebra_settings.html.erb b/app/views/label_printers/_zebra_settings.html.erb
index cd549dc7f..b2fe1520a 100644
--- a/app/views/label_printers/_zebra_settings.html.erb
+++ b/app/views/label_printers/_zebra_settings.html.erb
@@ -1,24 +1,63 @@
 <ul>
   <li class="zebra-settings-collapse">
     <div class="collapse-row">
-      <i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
+      <i class="fas fa-caret-down collapsed" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
       <div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
     </div>
-    <ul class="collapse in" id="InstructionsSection">
+    <ul class="collapse" id="InstructionsSection">
       <li>
-        <%= t("users.settings.account.label_printer.zebra_instruction.p1") %>
-      </li>
-      <li class='indented_row'>
-        <%= t("users.settings.account.label_printer.zebra_instruction.p2_html", link: Constants::SCINOTE_ZEBRA_URL) %>
-      </li>
-      <li class='indented_row'>
-        <%= t("users.settings.account.label_printer.zebra_instruction.p3") %>
-      </li>
-      <li class='indented_row'>
-        <%= t("users.settings.account.label_printer.zebra_instruction.p4") %>
+        <%= t("users.settings.account.label_printer.zebra_instruction.general_html", link: Constants::SCINOTE_ZEBRA_DOWNLOAD_URL) %>
       </li>
+      <h3><%= t("users.settings.account.label_printer.zebra_instruction.usb.header") %></h3>
+      <ol>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.usb.p1") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.usb.p2_html", link: Constants::SCINOTE_ZEBRA_DOWNLOAD_URL) %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.usb.p3") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.usb.p4") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.usb.p5") %>
+        </li>
+      </ol>
+      <h3><%= t("users.settings.account.label_printer.zebra_instruction.network.header") %></h3>
       <li>
-        <%= t("users.settings.account.label_printer.zebra_instruction.p5") %>
+        <%= t("users.settings.account.label_printer.zebra_instruction.network.disclaimer") %>
+      </li>
+      <ol>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p1") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p2") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p3_html", link: Constants::SCINOTE_ZEBRA_DOWNLOAD_URL) %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p4") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p5") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p6") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p7") %>
+        </li>
+        <li>
+          <%= t("users.settings.account.label_printer.zebra_instruction.network.p8") %>
+        </li>
+      </ol>
+      <li>
+        <%= t("users.settings.account.label_printer.zebra_instruction.contact_html", {link_blog: Constants::SCINOTE_ZEBRA_BLOG_URL, link_zebra_support: Constants::SCINOTE_ZEBRA_SUPPORT_URL}) %>
       </li>
     </ul>
   </li>
diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb
index 3bbaf30a5..32c4831e6 100644
--- a/config/initializers/constants.rb
+++ b/config/initializers/constants.rb
@@ -236,7 +236,9 @@ class Constants
   }
 
   SCINOTE_FLUICS_URL = 'https://www.scinote.net/fluics/'.freeze
-  SCINOTE_ZEBRA_URL = 'https://www.zebra.com/us/en/products/software/barcode-printers/link-os/browser-print.html'.freeze
+  SCINOTE_ZEBRA_DOWNLOAD_URL = 'https://www.zebra.com/us/en/products/software/barcode-printers/link-os/browser-print.html'.freeze
+  SCINOTE_ZEBRA_BLOG_URL = 'https://www.scinote.net/blog/connect-zebra-printers/'.freeze
+  SCINOTE_ZEBRA_SUPPORT_URL = 'https://www.zebra.com/us/en/about-zebra/contact-zebra/contact-tech-support.html'.freeze
   TWO_FACTOR_RECOVERY_CODE_COUNT = 6
   TWO_FACTOR_RECOVERY_CODE_LENGTH = 12
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4beee6146..809658737 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2273,11 +2273,26 @@ en:
             p4: "3. Enter the API key into the field below."
             p5: "4. SciNote will find your printer and connect to it automatically. You can start printing labels."
           zebra_instruction:
-            p1: 'To make it work, please follow these steps:'
-            p2_html: "1. Install the Zebra BROWSER PRINT application: <a href='%{link}' target='_blank'>official downloads page.</a>"
-            p3: '2. Install the printer drivers required by your operating system.'
-            p4: '3. Allow SciNote to connect to your Zebra printers.'
-            p5: 'Make sure that Zebra Connect shows the printer status as Connected.'
+            general_html: "Make sure your Zebra printer model is supported by Zebra Browser print technology on the official Zebra page: <a href='%{link}' target='_blank'>official Browser print page.</a>"
+            contact_html: "For more detailed instructions please check the <a href='%{link_blog}' target='_blank'>SciNote blog post</a> and <a href='%{link_zebra_support}' target='_blank'>Zebra printer support.</a>"
+            usb:
+              header: 'Connect a Zebra printer via USB cable'
+              p1: 'Make sure your Zebra printer is connected to power, turned on, and connected to the computer by USB cable.'
+              p2_html: "In order to print labels from SciNote, you need to download and install the Zebra Browser Print application according to your operating system: <a href='%{link}' target='_blank'>official downloads page.</a>. During installation, you might be prompted to install a specific Zebra printer driver."
+              p3: 'Update printers with the “Update printers” option on the right side of this SciNote screen.'
+              p4: 'Your Zebra printer should now be listed in SciNote.'
+              p5: 'Go to inventories, select a label template and start printing.'
+            network:
+              header: 'Connect a Zebra printer via network (LAN or WiFi)'
+              disclaimer: 'Some Zebra printers support connection via LAN or WiFi network. Check your printer documentation or official Zebra product page for this information.'
+              p1: 'Make sure your Zebra printer is connected to power and turned on.'
+              p2: 'Make sure your computer and Zebra printer are connected to the local network (by LAN or Wi-fi).'
+              p3_html: "In order to print labels from SciNote, you need to download the Zebra Browser Print application according to your operating system: <a href='%{link}' target='_blank'>official downloads page.</a>"
+              p4: 'Install the Zebra Browser Print application.'
+              p5: 'Open the Zebra Browser Print application and set the IP address and Port number of the printer. The printer IP address should be set as “Static” (you might need to contact your IT administrator for help).'
+              p6: 'Update printers with the “Update printers” option on the right side of this SciNote screen.'
+              p7: 'Your Zebra printer should now be listed in SciNote.'
+              p8: 'Go to inventories, set the label content, and start printing.'
           settings: "Settings"
           api_key_label: "API key"
           api_key_warning: "API key change will lead to printer list refresh"