eboutic big refactor

eboutic/static/eboutic/js/eboutic.js

@@ -33,13 +33,16 @@ function get_starting_items() {
     let output = [];
 
     try {
-        // Django cookie backend does an utter mess on non-trivial data types
-        // so we must perform a conversion of our own
-        const biscuit = JSON.parse(cookie.replace(/\\054/g, ','));
-        output = Array.isArray(biscuit) ? biscuit : [];
-
-    } catch (e) {}
-
+        // Django cookie backend converts `,` to `\054`
+        let parsed = JSON.parse(cookie.replace(/\\054/g, ','));
+        if (typeof parsed === "string") {
+            // In some conditions, a second parsing is needed
+            parsed = JSON.parse(parsed);
+        }
+        output = Array.isArray(parsed) ? parsed : [];
+    } catch (e) {
+        console.error(e);
+    }
     output.forEach(item => {
         let el = document.getElementById(item.id);
         el.classList.add("selected");
@@ -63,7 +66,7 @@ document.addEventListener('alpine:init', () => {
 
         /**
          * Add 1 to the quantity of an item in the basket
-         * @param {BasketItem} item 
+         * @param {BasketItem} item
          */
         add(item) {
             item.quantity++;
@@ -72,11 +75,11 @@ document.addEventListener('alpine:init', () => {
 
         /**
          * Remove 1 to the quantity of an item in the basket
-         * @param {BasketItem} item_id 
+         * @param {BasketItem} item_id
          */
         remove(item_id) {
             const index = this.items.findIndex(e => e.id === item_id);
-            
+
             if (index < 0) return;
             this.items[index].quantity -= 1;
 

eboutic/static/eboutic/js/makecommand.js

@@ -1,71 +1,77 @@
-document.addEventListener('alpine:init', () => {
-    Alpine.store('bank_payment_enabled', false)
+/**
+ * @readonly
+ * @enum {number}
+ */
+const BillingInfoReqState = {
+    SUCCESS: 1,
+    FAILURE: 2
+};
 
-    Alpine.store('billing_inputs', {
-        data: JSON.parse(et_data)["data"],
+
+document.addEventListener("alpine:init", () => {
+    Alpine.store("bank_payment_enabled", false)
+
+    Alpine.store("billing_inputs", {
+        data: et_data,
 
         async fill() {
             document.getElementById("bank-submit-button").disabled = true;
-            const request = new Request(et_data_url, {
-                method: "GET",
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json',
-                },
-            });
-            const res = await fetch(request);
+            const res = await fetch(et_data_url);
             if (res.ok) {
-                const json = await res.json();
-                if (json["data"]) {
-                    this.data = json["data"];
-                }
+                this.data = await res.json();
                 document.getElementById("bank-submit-button").disabled = false;
             }
         }
     })
 
-    Alpine.data('billing_infos', () => ({
-        errors: [],
-        successful: false,
-        url: billing_info_exist ? edit_billing_info_url : create_billing_info_url,
+    Alpine.data("billing_infos", () => ({
+        /** @type {BillingInfoReqState | null} */
+        req_state: null,
 
         async send_form() {
             const form = document.getElementById("billing_info_form");
             const submit_button = form.querySelector("input[type=submit]")
             submit_button.disabled = true;
             document.getElementById("bank-submit-button").disabled = true;
-            this.successful = false
+            this.req_state = null;
 
-            let payload = {};
-            for (const elem of form.querySelectorAll("input")) {
-                if (elem.type === "text" && elem.value) {
-                    payload[elem.name] = elem.value;
-                }
-            }
+            let payload = form.querySelectorAll("input")
+                .values()
+                .filter((elem) => elem.type === "text" && elem.value)
+                .reduce((acc, curr) => acc[curr.name] = curr.value, {});
             const country = form.querySelector("select");
             if (country && country.value) {
                 payload[country.name] = country.value;
             }
-            const request = new Request(this.url, {
-                method: "POST",
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': getCSRFToken(),
-                },
+            const res = await fetch(billing_info_url, {
+                method: "PUT",
                 body: JSON.stringify(payload),
             });
-            const res = await fetch(request);
-            const json = await res.json();
-            if (json["errors"]) {
-                this.errors = json["errors"];
-            } else {
-                this.errors = [];
-                this.successful = true;
-                this.url = edit_billing_info_url;
+            this.req_state = res.ok ? BillingInfoReqState.SUCCESS : BillingInfoReqState.FAILURE;
+            if (res.ok) {
                 Alpine.store("billing_inputs").fill();
             }
             submit_button.disabled = false;
+        },
+
+        get_alert_color() {
+            if (this.req_state === BillingInfoReqState.SUCCESS) {
+                return "green";
+            }
+            if (this.req_state === BillingInfoReqState.FAILURE) {
+                return "red";
+            }
+            return "";
+        },
+
+        get_alert_message() {
+            if (this.req_state === BillingInfoReqState.SUCCESS) {
+                return billing_info_success_message;
+            }
+            if (this.req_state === BillingInfoReqState.FAILURE) {
+                return billing_info_failure_message;
+            }
+            return "";
         }
     }))
 })