Add legal strand on create new merchant page. Create layout and style of legal page. Add some of the first data

views/merchantSetupPage/agreement.js

@@ -0,0 +1,6 @@
+let agreementObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.agreementStrand.style.display = "flex";
+    }
+}

views/merchantSetupPage/controller.js

@@ -1,6 +1,7 @@
 let controller = {
     data: {},  //For storing all data from user to pass to backend
 
+    agreementStrand: document.querySelector("#agreementStrand"),
     basicInfoStrand: document.querySelector("#basicInfoStrand"),
     addIngredientsStrand: document.querySelector("#addIngredientsStrand"),
     createIngredientsStrand: document.querySelector("#createIngredientsStrand"),
@@ -12,7 +13,7 @@ let controller = {
             banner.createError(error);
         }
         
-        basicInfoObj.display();
+        agreementObj.display();
     },
 
     //General purpose data validator
@@ -25,6 +26,7 @@ let controller = {
     },
 
     clearScreen: function(){
+        this.agreementStrand.style.display = "none";
         this.basicInfoStrand.style.display = "none";
         this.addIngredientsStrand.style.display = "none";
         this.createIngredientsStrand.style.display = "none";

views/merchantSetupPage/merchantSetup.css

@@ -13,9 +13,19 @@
     align-items: center;
 }
 
-/* basicInfoStrand */
-#basicInfoStrand{
+/* Agreement Strand */
+#agreementStrand{
     display: flex;
+    justify-content: center;
+}
+
+    #agreementStrand > *{
+        margin: 10px;
+    }
+
+/* Basic Info Strand */
+#basicInfoStrand{
+    display: none;
 }
 
     #basicInfoStrand > *{
@@ -26,7 +36,7 @@
         display: none;
     }
 
-/* addIngredientsStrand */
+/* Add Ingredients Strand */
 #addIngredientsStrand{
     display: none;
 }
@@ -39,7 +49,7 @@
         margin-top: 0;
     }
 
-/* createIngredientsStrand */
+/* Create Ingredients Strand */
 #createIngredientsStrand{
     display: none;
 }

views/merchantSetupPage/merchantSetup.ejs

@@ -12,6 +12,10 @@
 
         <% include ../shared/banner %>
 
+        <div id="agreementStrand">
+            <% include ../shared/legal %>
+        </div>
+
         <div id="basicInfoStrand" class="container">
             <h1>Basic Information</h1>
 
@@ -131,6 +135,7 @@
         </script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="/shared/validation.js"></script>
+        <script src="/merchantSetupPage/agreement.js"></script>
         <script src="/merchantSetupPage/basicInfo.js"></script>
         <script src="/merchantSetupPage/addIngredients.js"></script>
         <script src="/merchantSetupPage/createIngredients.js"></script>

views/shared/legal.ejs

@@ -0,0 +1,43 @@
+<div id="legal">
+    <h1>The Subline, LLC Privacy Policy</h1>
+
+    <p>Last modified: December 23, 2019</p>
+
+    <h3>Introduction</h3>
+
+    <p>The Subline, LLC. ("Company" or "We") respects your privacy, and we are committed to protecting it through our compliance with this policy.</p>
+
+    <p>This policy describes the types of information we may collect from you or that you may provide when you visit the website, www.thesubline.com (the "Website") or utilize any of the services on our platform, including our practices for collecting, using, maintaining, protecting, and disclosing that information.</p>
+
+    <p class="left">This policy applies to information we collect:</p>
+
+    <ol class="left">
+        <li>On our Website and our Platform;</li>
+
+        <li>In emails, texts, and other electronic messages between you and the Website and our Platform in connection with inventory management (procurement, sales, management, etc.);</li>
+
+        <li>When you interact with our advertising and applications on third-party websites and services, if those applications or advertising include links to this policy.</li>
+    </ol>
+
+    <p>Please read this policy carefully to understand our policies and practices regarding your information and how we will treat it. If you do not agree with our policies and practices, your choice is not to use our Website or Platform. By accessing or using our Website and Platform, you agree to this privacy policy. This policy may change from time to time (see Changes to Our Privacy Policy). Your continued use of our Website and the Platform after we make changes is deemed to be acceptance of those changes, so please check the policy periodically for updates.</p>
+
+    <h3>Information We Collect About You and How We Collect It</h3>
+
+    <p>Generally, no personally identifiable information, such as your name or mailing address, is collected anytime you visit the Website/Platform, nor is it required for you to visit the Website and our Platform. We collect several types of information from and about users of our Website and our Platform, including information:</p>
+
+    <ol>
+        <li>by which you may be personally identified, such as name, postal address, e-mail address, credit card information, or telephone number ("personal information");</li>
+
+        <li>about your internet connection, the equipment you use to access our Website and our Platform and usage details.</li>
+    </ol>
+
+    <h3>We collect this information:</h3>
+
+    <ol>
+        <li>Directly from you when you provide it to us;</li>
+
+        <li>Automatically as you navigate through the site. Information collected automatically may include usage details, IP addresses, and information collected through cookies;</li>
+
+        <li>From third parties, for example, our business partners.</li>
+    </ol>
+</div>

views/shared/shared.css

@@ -173,4 +173,24 @@ form{
         overflow: hidden;
         text-overflow: ellipsis;
     }
-}
+}
+
+/* Legal partial */
+#legal{
+    border: 2px solid black;
+    box-shadow: -5px -5px 5px rgb(0, 27, 45) inset;
+    padding: 30px;
+    max-width: 800px;
+}
+
+    #legal > *{
+        margin: 15px;
+    }
+
+    ol{
+        list-style: decimal inside none;
+    }
+
+        ol > *{
+            margin: 10px;
+        }