Reimplement ability to choose/create a non-pos merchant

views/landingPage/controller.js

@@ -1,6 +1,7 @@
 let controller = {
     publicStrand: document.querySelector("#publicStrand"),
     loginStrand: document.querySelector("#loginStrand"),
+    posChoiceStrand: document.querySelector("#posChoiceStrand"),
 
     onStart: function(){
         if(error){
@@ -13,6 +14,7 @@ let controller = {
     clearScreen: function(){
         this.publicStrand.style.display = "none";
         this.loginStrand.style.display = "none";
+        this.posChoiceStrand.style.display = "none";
     }
 }
 

views/landingPage/landing.css

@@ -122,7 +122,7 @@
     }
 }
 
-/* #posChoiceStrand{
+#posChoiceStrand{
     display: none;
     flex-direction: column;
     align-items: center;
@@ -164,4 +164,4 @@
 
         .cards img{
             margin: auto 10px;
-        } */
+        }

views/landingPage/landing.ejs

@@ -17,7 +17,7 @@
                 <div class="public-buttons">
                     <button class="button" onclick="loginObj.display()">Log In</button>
 
-                    <a class="button" href="/merchant/new/clover">Join</a>
+                    <button class="button" onclick="posChoiceObj.display()">Join</button>
                 </div>
 
                 <div class="logo-text">
@@ -69,11 +69,27 @@
             </form>
         </div>
 
+        <div id="posChoiceStrand">
+            <h1>Choose your POS System</h1>
+
+            <div class="cards">
+                <a href="/merchant/new/clover">
+                    <img src="../shared/images/clover-logo.jpeg" alt="Clover">
+                </a>
+
+                <a href="/merchant/new/none">
+                    <img src="../shared/images/logo.png" alt="None">
+                    <p>None</p>
+                </a>
+            </div>
+        </div>
+
         <script>let error = <%- JSON.stringify(error) %>;</script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
         <script src="/landingPage/public.js"></script>
         <script src="/landingPage/login.js"></script>
+        <script src="/landingPage/posChoice.js"></script>
         <script src="/landingPage/controller.js"></script>
     </body>
 </html>

views/landingPage/posChoice.js

@@ -3,20 +3,4 @@ let posChoiceObj = {
         controller.clearScreen();
         controller.posChoiceStrand.style.display = "flex";
     }
-}
-
-/////
-//EJS for posChoiceStrand
-/////
-/* <div id="posChoiceStrand">
-    <h1>Choose your POS System</h1>
-    <div class="cards">
-        <a href="/merchant/new/clover">
-            <img src="../shared/images/clover-logo.jpeg">
-        </a>
-        <a href="/merchant/new/none">
-            <img src="../shared/images/logo.png">
-            <p>None</p>
-        </a>
-    </div>
-</div> */
+}