046

src/a3.nim

@@ -185,7 +185,7 @@ import
     cart: seq[Cart]
     products: seq[Products]
     productCount = 0
-    countryError = ""
+    # countryError = ""
     # firstNameError = ""
     # lastNameError = ""
     # addressError = ""
@@ -249,20 +249,14 @@ import
     cart: seq[Cart]
     products: seq[Products]
     productCount = 0
-    cookies = ctx.cookies
-    countryError = ""
-    firstNameError = ""
-    lastNameError = ""
-    addressError = ""
-    stateError = ""
-    zipError = ""
-    emailError = ""
-    phoneError = ""
-    # passwordError = ""
-    # ch = ""
+    form = ctx.urlForm
+    val: Validity
+    validity = initTable[string, Validity]()
+
   echo "hi"
   echo ctx.urlForm
   echo "bye"
+  echo ctx.urlForm["c_fname"]
 
   try:
     email = ctx.cookies["email"]
@@ -279,36 +273,25 @@ import
     quantity = 0
 
   var
-    country = cookies["c_country"]
-    firstName = cookies["c_fname"]
-    lastName = cookies["c_lname"]
-    address = cookies["c_address"]
-    state = cookies["c_state_country"]
-    zip = cookies["c_postal_zip"]
-    email1 = cookies["c_email_address"]
-    phone = cookies["c_phone"]
+    country = form["c_country"]
+    firstName = form["c_fname"]
+    lastName = form["c_lname"]
+    address = form["c_address"]
+    state = form["c_state_country"]
+    zip = form["c_postal_zip"]
+    email1 = form["c_email_address"]
+    phone = form["c_phone"]
     password1: string
 
-  echo cookies
-
   try:
-    password1 = cookies["password"]
+    password1 = form["password"]
   except:
     password1 = ""
 
-  if country == "": countryError = "Country is Required"
-  if firstName == "": firstNameError = "First Name is Required"
-  if lastName == "": lastNameError = "Last Name is Required"
-  if address == "": addressError = "Address is Required"
-  if state == "": stateError = "State is Required"
-  if zip == "": zipError = "Zip is Required"
-  if email1 == "": emailError = "Email is Required"
-  if phone == "": phoneError = "Phone is Required"
-
   if email != "":
     productCount = micsCartProductCount(email, password)
 
-  if countryError == "" and firstNameError == "" and lastNameError == "" and addressError == "" and stateError == "" and zipError == "" and emailError == "" and phoneError == "":
+  if country != "" and firstName != "" and lastName != "" and address != "" and state != "" and zip != "" and email != "" and phone != "":
     var
       userId = db.getUserId(email, password)
       cart = db.getUserCart(userId)
@@ -338,9 +321,21 @@ import
       var product = db.getProductById(d.productId)
       products.add(product)
 
-    compileTemplateFile(getScriptDir() / "a3a" / "checkout.nimja")
+    ctx.send(sendThankYou())
 
   else:
+    for a, b in form:
+      if form[a] == "":
+        val.name = ""
+        val.message = "Field is Required"
+        val.mark = "is-invalid"
+        validity[a] = val
+      else:
+        val.name = b
+        val.message = ""
+        val.mark = ""
+        validity[a] = val
+
     if productName != "":
       var
         product: Products
@@ -362,7 +357,7 @@ import
         var product = db.getProductById(d.productId)
         products.add(product)
 
-    compileTemplateFile(getScriptDir() / "a3a" / "checkout.nimja")
+    ctx.send(sendCheckOut(validity, totalPriceHTML(products, cart)))
 
 "/lname" -> post:
   var lname = ctx.urlForm["c_lname"]
@@ -435,11 +430,9 @@ import
   var val: Validity
   if phone == "":
     val.message = "Phone is Required"
-    val.class = "text-danger"
     val.mark = "is-invalid"
   else:
     val.message = ""
-    val.class = "text-success"
     val.mark = ""
   ctx.send sendPhone(phone, val)
 

src/a3a/checkout.nimja

@@ -69,7 +69,7 @@
   </div>
 
   <div class="site-section">
-    <div class="container">
+    <div class="container" id="change">
       <div class="row mb-5">
         <div class="col-md-12">
           <div class="border p-4 rounded" role="alert">
@@ -77,19 +77,19 @@
           </div>
         </div>
       </div>
-      {# {% if ch == "" %}
-      <form action="/checkout" method="post" class="row">
-      {% else %}
-      <form action="/checkout?prod={{productName}}&quantity={{quantity}}" method="post" class="row">
-      {% endif %} #}
-      <div class="row">
+      <form
+        hx-trigger="submit"
+        hx-post="/checkout"
+        hx-target="#change"
+        class="row"
+      >
         <div class="col-md-6 mb-5 mb-md-0">
           <h2 class="h3 mb-3 text-black">Billing Details</h2>
           <div class="p-3 p-lg-5 border">
             <div class="form-group">
               <label for="c_country" class="text-black">Country <span class="text-danger">*</span></label>
-              <label class="text-danger">{{countryError}}</label>
-              <select id="c_country" class="form-control">
+              {# <label class="text-danger">{{countryError}}</label> #}
+              <select id="c_country" class="form-control" name="c_country">
                 <option value="1">Select a country</option>    
                 <option value="2">bangladesh</option>    
                 <option value="3">Algeria</option>    
@@ -127,13 +127,6 @@
               </div>
             </div>
 
-            {# <div class="form-group row">
-              <div class="col-md-12">
-                <label for="c_companyname" class="text-black">Company Name </label>
-                <input type="text" class="form-control" id="c_companyname" name="c_companyname">
-              </div>
-            </div> #}
-
             <div class="form-group row">
               <div
                 class="col-md-12"
@@ -384,7 +377,7 @@
                 </div>
 
                 <div class="form-group">
-                  <button id="b3" class="btn btn-primary btn-lg py-3 btn-block">Place Order</button>
+                  <button type="submit" class="btn btn-primary btn-lg py-3 btn-block">Place Order</button>
                 </div>
 
               </div>
@@ -392,30 +385,12 @@
           </div>
 
         </div>
-      {# </form> #}
-      </div>
+      </form>
+      {# </div> #}
       <!-- </form> -->
     </div>
   </div>
   <script>
-
-    document.getElementById("b3").onclick = function() {
-
-      document.cookie = "c_country="+document.getElementById("c_country").value;
-      document.cookie = "c_fname="+document.getElementById("c_fname").value;
-      document.cookie = "c_lname="+document.getElementById("c_lname").value;
-      document.cookie = "c_address="+document.getElementById("c_address").value;
-      document.cookie = "c_state_country="+document.getElementById("c_state_country").value;
-      document.cookie = "c_postal_zip="+document.getElementById("c_postal_zip").value;
-      document.cookie = "c_email_address="+document.getElementById("c_email_address").value;
-      document.cookie = "c_phone="+document.getElementById("c_phone").value;
-      if (document.getElementById("c_create_account").checked) {
-        document.cookie = "c_create_account="+document.getElementById("c_create_account").value;
-      }
-
-      // window.location.href = '/thankyou';
-    }
-
     function continueShopping() {
       window.location.href = '/shop';
     }

src/a3pkg/htmx.nim

@@ -1,8 +1,12 @@
 import
-  strformat
+  strformat,
+  tables,
+  strutils,
+  ./models
 
 type
   Validity* = object
+    name*: string
     message*: string
     mark*: string
 
@@ -94,7 +98,7 @@ proc sendZip*(zip: string, input: Validity): string =
 proc sendEmail*(email: string, input: Validity): string =
   result = fmt"""
     <div
-      class="col-md-12"
+      class="col-md-6"
       hx-target="this"
       hx-swap="outerHTML"
     >
@@ -111,7 +115,7 @@ proc sendEmail*(email: string, input: Validity): string =
 proc sendPhone*(phone: string, input: Validity): string =
   result = fmt"""
     <div
-      class="col-md-12"
+      class="col-md-6"
       hx-target="this"
       hx-swap="outerHTML"
     >
@@ -123,4 +127,356 @@ proc sendPhone*(phone: string, input: Validity): string =
         value="{phone}"
       >
     </div>
+  """
+
+proc sendCheckOut*(val: Table[string, Validity], total: string): string =
+  result = fmt"""
+    <div class="container" id="change">
+      <div class="row mb-5">
+        <div class="col-md-12">
+          <div class="border p-4 rounded" role="alert">
+            Returning customer? <a href="/login?prod={{productName}}&quantity={{quantity}}" onclick="login()">Click here</a> to login
+          </div>
+        </div>
+      </div>
+      <form
+        hx-trigger="submit"
+        hx-post="/checkout"
+        hx-target="#change"
+        class="row"
+      >
+        <div class="col-md-6 mb-5 mb-md-0">
+          <h2 class="h3 mb-3 text-black">Billing Details</h2>
+          <div class="p-3 p-lg-5 border">
+            <div class="form-group">
+              <label for="c_country" class="text-black">Country <span class="text-danger">*</span></label>
+              <select id="c_country" class="form-control" name="c_country">
+                <option value="1">Select a country</option>    
+                <option value="2">bangladesh</option>    
+                <option value="3">Algeria</option>    
+                <option value="4">Afghanistan</option>    
+                <option value="5">Ghana</option>    
+                <option value="6">Albania</option>    
+                <option value="7">Bahrain</option>    
+                <option value="8">Colombia</option>    
+                <option value="9">Dominican Republic</option>    
+                <option value="10">India</option>
+              </select>
+            </div>
+            <div class="form-group row">
+              <div
+                class="col-md-6"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
+                <label for="c_fname" class="text-black">First Name <span class="text-danger">*</span></label>
+                <input type="text" class="form-control {val["c_fname"].mark}" id="c_fname"
+                  placeholder="{val["c_fname"].message}"
+                  hx-post="/validation/fname"
+                  name="c_fname"
+                  value="{val["c_fname"].name}"
+                >
+              </div>
+              <div
+                class="col-md-6"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
+                <label for="c_lname" class="text-black">Last Name <span class="text-danger">*</span></label>
+                <input type="text" class="form-control {val["c_lname"].mark}" id="c_lname"
+                  placeholder="{val["c_lname"].message}"
+                  hx-post="/lname"
+                  name="c_lname"
+                  value="{val["c_lname"].name}"
+                >
+              </div>
+            </div>
+
+            <div class="form-group row">
+              <div
+                class="col-md-12"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
+                <label for="c_address" class="text-black">Address <span class="text-danger">*</span></label>
+                <input type="text" class="form-control {val["c_address"].mark}" id="c_address" name="c_address"
+                  placeholder="{val["c_address"].message}"
+                  placeholder="Street address"
+                  hx-post="/validation/address"
+                  value="{val["c_address"].name}"
+                >
+              </div>
+            </div>
+
+            <div class="form-group">
+              <input type="text" class="form-control" placeholder="Apartment, suite, unit etc. (optional)">
+            </div>
+
+            <div class="form-group row">
+              <div
+                class="col-md-6"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
+                <label for="c_state_country" class="text-black">State / Country <span class="text-danger">*</span></label>
+                <input type="text" class="form-control {val["c_state_country"].mark}" id="c_state_country"
+                  placeholder="{val["c_state_country"].message}"
+                  hx-post="/validation/state"
+                  name="c_state_country"
+                  value="{val["c_state_country"].name}"
+                >
+              </div>
+
+              <div
+                class="col-md-6"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
+                <label for="c_postal_zip" class="text-black">Posta / Zip <span class="text-danger">*</span></label>
+                <input type="text" class="form-control {val["c_postal_zip"].mark}" id="c_postal_zip"
+                  placeholder="{val["c_postal_zip"].message}"
+                  hx-post="/validation/zip"
+                  name="c_postal_zip"
+                  value="{val["c_postal_zip"].name}"
+                >
+              </div>
+            </div>
+
+            <div class="form-group row mb-5">
+              <div
+                class="col-md-6"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
+                <label for="c_email_address" class="text-black">Email Address <span class="text-danger">*</span></label>
+                <input type="text" class="form-control {val["c_email_address"].mark}" id="c_email_address"
+                  placeholder="{val["c_email_address"].message}"
+                  hx-post="/validation/email"
+                  name="c_email_address"
+                  value="{val["c_email_address"].name}"
+                >
+              </div>
+              <div
+                class="col-md-6"
+                hx-target="this"
+                hx-swap="outerHTML"
+              >
+                <label for="c_phone" class="text-black">Phone <span class="text-danger">*</span></label>
+                <input type="text" class="form-control {val["c_phone"].mark}" id="c_phone"
+                  placeholder="{val["c_phone"].message}"
+                  hx-post="/validation/phone"
+                  name="c_phone"
+                  value="{val["c_phone"].name}"
+                >
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label for="c_create_account" class="text-black" data-toggle="collapse" href="#create_an_account" role="button" aria-expanded="false" aria-controls="create_an_account"><input type="checkbox" value="1" id="c_create_account"> Create an account?</label>
+              <div class="collapse" id="create_an_account">
+                <div class="py-2">
+                  <p class="mb-3">Create an account by entering the information below. If you are a returning customer please login at the top of the page.</p>
+                  <div class="form-group">
+                    <label for="c_account_password" class="text-black">Account Password</label>
+                    <input type="email" class="form-control" id="c_account_password" name="c_account_password" placeholder="">
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+            <div class="form-group">
+              <label for="c_ship_different_address" class="text-black" data-toggle="collapse" href="#ship_different_address" role="button" aria-expanded="false" aria-controls="ship_different_address"><input type="checkbox" value="1" id="c_ship_different_address"> Ship To A Different Address?</label>
+              <div class="collapse" id="ship_different_address">
+                <div class="py-2">
+
+                  <div class="form-group">
+                    <label for="c_diff_country" class="text-black">Country <span class="text-danger">*</span></label>
+                    <select id="c_diff_country" class="form-control">
+                      <option value="1">Select a country</option>    
+                      <option value="2">bangladesh</option>    
+                      <option value="3">Algeria</option>    
+                      <option value="4">Afghanistan</option>    
+                      <option value="5">Ghana</option>    
+                      <option value="6">Albania</option>    
+                      <option value="7">Bahrain</option>    
+                      <option value="8">Colombia</option>    
+                      <option value="9">Dominican Republic</option>
+                      <option value="10">India</option>    
+                    </select>
+                  </div>
+
+
+                  <div class="form-group row">
+                    <div class="col-md-6">
+                      <label for="c_diff_fname" class="text-black">First Name <span class="text-danger">*</span></label>
+                      <input type="text" class="form-control" id="c_diff_fname" name="c_diff_fname">
+                    </div>
+                    <div class="col-md-6">
+                      <label for="c_diff_lname" class="text-black">Last Name <span class="text-danger">*</span></label>
+                      <input type="text" class="form-control" id="c_diff_lname" name="c_diff_lname">
+                    </div>
+                  </div>
+
+                  <div class="form-group row">
+                    <div class="col-md-12">
+                      <label for="c_diff_address" class="text-black">Address <span class="text-danger">*</span></label>
+                      <input type="text" class="form-control" id="c_diff_address" name="c_diff_address" placeholder="Street address">
+                    </div>
+                  </div>
+
+                  <div class="form-group">
+                    <input type="text" class="form-control" placeholder="Apartment, suite, unit etc. (optional)">
+                  </div>
+
+                  <div class="form-group row">
+                    <div class="col-md-6">
+                      <label for="c_diff_state_country" class="text-black">State / Country <span class="text-danger">*</span></label>
+                      <input type="text" class="form-control" id="c_diff_state_country" name="c_diff_state_country">
+                    </div>
+                    <div class="col-md-6">
+                      <label for="c_diff_postal_zip" class="text-black">Posta / Zip <span class="text-danger">*</span></label>
+                      <input type="text" class="form-control" id="c_diff_postal_zip" name="c_diff_postal_zip">
+                    </div>
+                  </div>
+
+                  <div class="form-group row mb-5">
+                    <div class="col-md-6">
+                      <label for="c_diff_email_address" class="text-black">Email Address <span class="text-danger">*</span></label>
+                      <input type="text" class="form-control" id="c_diff_email_address" name="c_diff_email_address">
+                    </div>
+                    <div class="col-md-6">
+                      <label for="c_diff_phone" class="text-black">Phone <span class="text-danger">*</span></label>
+                      <input type="text" class="form-control" id="c_diff_phone" name="c_diff_phone" placeholder="Phone Number">
+                    </div>
+                  </div>
+
+                </div>
+
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label for="c_order_notes" class="text-black">Order Notes</label>
+              <textarea name="c_order_notes" id="c_order_notes" cols="30" rows="5" class="form-control" placeholder="Write your notes here..."></textarea>
+            </div>
+
+          </div>
+        </div>
+        <div class="col-md-6">
+
+          <div class="row mb-5">
+            <div class="col-md-12">
+              <h2 class="h3 mb-3 text-black">Coupon Code</h2>
+              <div class="p-3 p-lg-5 border">
+                
+                <label for="c_code" class="text-black mb-3">Enter your coupon code if you have one</label>
+                <div class="input-group w-75">
+                  <input type="text" class="form-control" id="c_code" placeholder="Coupon Code" aria-label="Coupon Code" aria-describedby="button-addon2">
+                  <div class="input-group-append">
+                    <button class="btn btn-primary btn-sm" type="button" id="button-addon2">Apply</button>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+          
+          <div class="row mb-5">
+            <div class="col-md-12">
+              <h2 class="h3 mb-3 text-black">Your Order</h2>
+              <div class="p-3 p-lg-5 border">
+                <table class="table site-block-order-table mb-5">
+                  <thead>
+                    <th>Product</th>
+                    <th>Total</th>
+                  </thead>
+                  {total}
+                </table>
+
+                <div class="border p-3 mb-3">
+                  <h3 class="h6 mb-0"><a class="d-block" data-toggle="collapse" href="#collapsebank" role="button" aria-expanded="false" aria-controls="collapsebank">Direct Bank Transfer</a></h3>
+
+                  <div class="collapse" id="collapsebank">
+                    <div class="py-2">
+                      <p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="border p-3 mb-3">
+                  <h3 class="h6 mb-0"><a class="d-block" data-toggle="collapse" href="#collapsecheque" role="button" aria-expanded="false" aria-controls="collapsecheque">Cheque Payment</a></h3>
+
+                  <div class="collapse" id="collapsecheque">
+                    <div class="py-2">
+                      <p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="border p-3 mb-5">
+                  <h3 class="h6 mb-0"><a class="d-block" data-toggle="collapse" href="#collapsepaypal" role="button" aria-expanded="false" aria-controls="collapsepaypal">Paypal</a></h3>
+
+                  <div class="collapse" id="collapsepaypal">
+                    <div class="py-2">
+                      <p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="form-group">
+                  <button type="submit" class="btn btn-primary btn-lg py-3 btn-block">Place Order</button>
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </form>
+    </div>
+  """
+
+proc totalPriceHTML*(products: seq[Products], cart: seq[Cart]): string=
+  var
+    total: float = 0.0
+    fru = ""
+
+  for id, product in products:
+    fru.add("""
+      <tr>
+        <td>$1 <strong class="mx-2">x</strong> $2</td>
+        <td>₹$3</td>
+      </tr>
+    """ % [product.name, $toFloat(cart[id].quantity), $(toFloat(cart[id].quantity)*product.price)])
+
+    total = total + toFloat(cart[id].quantity)*product.price
+
+  result = fmt"""
+    <tbody>
+      {fru}
+
+      <tr>
+        <td class="text-black font-weight-bold"><strong>Cart Subtotal</strong></td>
+        <td class="text-black">₹{total}</td>
+      </tr>
+      <tr>
+        <td class="text-black font-weight-bold"><strong>Order Total</strong></td>
+        <td class="text-black font-weight-bold"><strong>₹{total}</strong></td>
+      </tr>
+    </tbody>
+  """
+
+proc sendThankYou*(): string=
+  result = """
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 text-center">
+          <span class="icon-check_circle display-3 text-success"></span>
+          <h2 class="display-3 text-black">Thank you!</h2>
+          <p class="lead mb-5">You order was successfuly completed.</p>
+          <p><a href="/shop" class="btn btn-sm btn-primary">Back to shop</a></p>
+        </div>
+      </div>
+    </div>
   """