From 9711fb7e8006072ffac7acb95b8c3a1c26322ffc Mon Sep 17 00:00:00 2001
From: usamabinnadeem-10 <usamabinnadeem10@gmail.com>
Date: Mon, 3 Jun 2024 14:32:05 +0500
Subject: [PATCH] fix(bulk purchase): WD-11785 fix broken buy button

---
 templates/credentials/shop/keys.html | 190 +++++++++++++--------------
 1 file changed, 93 insertions(+), 97 deletions(-)

diff --git a/templates/credentials/shop/keys.html b/templates/credentials/shop/keys.html
index fee8c25d039..1ec379a7128 100644
--- a/templates/credentials/shop/keys.html
+++ b/templates/credentials/shop/keys.html
@@ -3,129 +3,125 @@
 {% block title %}Canonical Credentials -- Your exams{% endblock %}
 
 {% block meta_description %}
-    The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
-    Ubuntu Desktop, and Ubuntu Server topics.
+  The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
+  Ubuntu Desktop, and Ubuntu Server topics.
 {% endblock meta_description %}
 
 {% block meta_copydoc %}
-    https://docs.google.com/document/d/1QuhO-9FEOGLrYp8bErS_9snqdljl7d6tFAUoNQxoVDQ/edit
+  https://docs.google.com/document/d/1QuhO-9FEOGLrYp8bErS_9snqdljl7d6tFAUoNQxoVDQ/edit
 {% endblock
 meta_copydoc %}
 
 {% block content %}
-    <div class="p-strip">
+  <div class="p-strip">
 
-        <div class="row">
+    <div class="row">
 
-            <h3>How many exam attempts do you need?</h3>
+      <h3>How many exam attempts do you need?</h3>
 
-        </div>
+    </div>
+
+    <div class="row">
+
+      <div class="col-6">
+
+        <form onsubmit="handleSubmit()" method="post">
+
+          <input type="number"
+                 id="key_quantity"
+                 name="key_quantity"
+                 min="1"
+                 value="1"
+                 oninput="updateOrderSummary()" />
+
+        </form>
+
+      </div>
 
-        <div class="row">
+    </div>
+
+    <div class="row">
 
-            <div class="col-6">
+      <p>
+        Each exam attempt allows you to register for one or more of the
+        following certifications:
 
-                <form onsubmit="handleSubmit()" method="post">
+        <ul>
 
-                    <input type="number"
-                           id="key_quantity"
-                           name="key_quantity"
-                           min="1"
-                           value="1"
-                           oninput="updateOrderSummary()" />
+          <li>CUE.01 Linux</li>
 
-                </form>
+          <li>CUE.02 Desktop</li>
 
-            </div>
+          <li>CUE.03 Server</li>
 
-        </div>
+        </ul>
 
-        <div class="row">
+      </p>
+
+    </div>
+  </div>
+  <section class="p-strip--light is-shallow p-shop-cart">
 
-            <p>
-                Each exam attempt allows you to register for one or more of the
-                following certifications:
+    <div class="row u-sv3">
+
+      <div class="col-6 p-heading--2">Your Order</div>
+
+    </div>
 
-                <ul>
+    <div class="row u-sv3">
 
-                    <li>CUE.01 Linux</li>
+      <div class="col-6" id="order_quantity">0 x Exam attempt key</div>
 
-                    <li>CUE.02 Desktop</li>
+      <div class="col-3" id="order_price">$0.00</div>
 
-                    <li>CUE.03 Server</li>
+      <div class="col-3">
 
-                </ul>
+        <button type="submit"
+                class="p-button--positive"
+                id="form-submit"
+                onclick="handleSubmit()">Buy Now</button>
 
-            </p>
+      </div>
 
-        </div>
     </div>
-    <section class="p-strip--light is-shallow p-shop-cart">
-
-        <div class="row u-sv3">
-
-            <div class="col-6 p-heading--2">Your Order</div>
-
-        </div>
-
-        <div class="row u-sv3">
-
-            <div class="col-6" id="order_quantity">0 x Exam attempt key</div>
-
-            <div class="col-3" id="order_price">$0.00</div>
-
-            <div class="col-3">
-
-                <button type="submit"
-                        class="p-button--positive"
-                        id="form-submit"
-                        onclick="handleSubmit()">Buy Now</button>
-
-            </div>
-
-        </div>
-    </section>
-
-    <script>
-      const cueKeyProduct = {
-        {
-          cue_key_product | tojson
-        }
-      };
-
-      function handleSubmit() {
-        const inputQuantity = document.getElementById("key_quantity").value;
-        localStorage.setItem(
-          "shop-checkout-data",
-          JSON.stringify({
-            product: cueKeyProduct,
-            quantity: inputQuantity,
-            action: "purchase",
-          })
-        )
-        location.href = "/account/checkout";
-      };
-
-      function updateOrderSummary() {
-        const inputQuantity = document.getElementById("key_quantity").value;
-        var productPrice = cueKeyProduct["price"]["value"] / 100 * inputQuantity;
-        const formatter = new Intl.NumberFormat('en-US', {
-          style: 'currency',
-          currency: cueKeyProduct["price"]["currency"],
-        });
-        productPrice = formatter.format(productPrice);
-        document.getElementById("order_price").innerHTML = productPrice;
-        document.getElementById("order_quantity").innerHTML = inputQuantity + " x Exam attempt key";
-
-        if (inputQuantity < 1) {
-          document.getElementById("form-submit").disabled = true;
-        } else {
-          document.getElementById("form-submit").disabled = false;
-        }
-      };
-
-      document.addEventListener("DOMContentLoaded", () => {
-        updateOrderSummary();
+  </section>
+
+  <script>
+    const cueKeyProduct = JSON.parse('{{cue_key_product | tojson }}');
+
+    function handleSubmit() {
+      const inputQuantity = document.getElementById("key_quantity").value;
+      localStorage.setItem(
+        "shop-checkout-data",
+        JSON.stringify({
+          product: cueKeyProduct,
+          quantity: inputQuantity,
+          action: "purchase",
+        })
+      )
+      location.href = "/account/checkout";
+    };
+
+    function updateOrderSummary() {
+      const inputQuantity = document.getElementById("key_quantity").value;
+      var productPrice = cueKeyProduct["price"]["value"] / 100 * inputQuantity;
+      const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: cueKeyProduct["price"]["currency"],
       });
-    </script>
+      productPrice = formatter.format(productPrice);
+      document.getElementById("order_price").innerHTML = productPrice;
+      document.getElementById("order_quantity").innerHTML = inputQuantity + " x Exam attempt key";
+
+      if (inputQuantity < 1) {
+        document.getElementById("form-submit").disabled = true;
+      } else {
+        document.getElementById("form-submit").disabled = false;
+      }
+    };
+
+    document.addEventListener("DOMContentLoaded", () => {
+      updateOrderSummary();
+    });
+  </script>
 {% endblock content %}