Use htmx to fill up billing info

eboutic/static/bundled/eboutic/makecommand-index.ts

@@ -1,91 +1,17 @@
-import { exportToHtml } from "#core:utils/globals";
-import {
-  type BillingInfoSchema,
-  etransactioninfoFetchEtransactionData,
-  etransactioninfoPutUserBillingInfo,
-} from "#openapi";
-
-enum BillingInfoReqState {
-  Success = "0",
-  Failure = "1",
-  Sending = "2",
-}
-
-exportToHtml("BillingInfoReqState", BillingInfoReqState);
+import { etransactioninfoFetchEtransactionData } from "#openapi";
 
 document.addEventListener("alpine:init", () => {
-  Alpine.data("etransactionData", (initialData) => ({
+  Alpine.data("etransaction", (initialData) => ({
     data: initialData,
+    isCbAvailable: Object.keys(initialData).length > 0,
 
     async fill() {
-      const button = document.getElementById("bank-submit-button") as HTMLButtonElement;
-      button.disabled = true;
+      this.isCbAvailable = false;
       const res = await etransactioninfoFetchEtransactionData();
       if (res.response.ok) {
         this.data = res.data;
-        button.disabled = false;
+        this.isCbAvailable = true;
       }
     },
   }));
-
-  Alpine.data("billing_infos", (userId: number) => ({
-    /** @type {BillingInfoReqState | null} */
-    reqState: null,
-
-    async sendForm() {
-      this.reqState = BillingInfoReqState.Sending;
-      const form = document.getElementById("billing_info_form");
-      const submitButton = document.getElementById(
-        "bank-submit-button",
-      ) as HTMLButtonElement;
-      submitButton.disabled = true;
-      const payload = Object.fromEntries(
-        Array.from(form.querySelectorAll("input, select"))
-          .filter((elem: HTMLInputElement) => elem.type !== "submit" && elem.value)
-          .map((elem: HTMLInputElement) => [elem.name, elem.value]),
-      );
-      const res = await etransactioninfoPutUserBillingInfo({
-        // biome-ignore lint/style/useNamingConvention: API is snake_case
-        path: { user_id: userId },
-        body: payload as unknown as BillingInfoSchema,
-      });
-      this.reqState = res.response.ok
-        ? BillingInfoReqState.Success
-        : BillingInfoReqState.Failure;
-      if (res.response.status === 422) {
-        const errors = await res.response
-          .json()
-          .detail.flatMap((err: Record<"loc", string>) => err.loc);
-        for (const elem of Array.from(form.querySelectorAll("input")).filter((elem) =>
-          errors.includes(elem.name),
-        )) {
-          elem.setCustomValidity(gettext("Incorrect value"));
-          elem.reportValidity();
-          elem.oninput = () => elem.setCustomValidity("");
-        }
-      } else if (res.response.ok) {
-        this.$dispatch("billing-infos-filled");
-      }
-    },
-
-    getAlertColor() {
-      if (this.reqState === BillingInfoReqState.Success) {
-        return "green";
-      }
-      if (this.reqState === BillingInfoReqState.Failure) {
-        return "red";
-      }
-      return "";
-    },
-
-    getAlertMessage() {
-      if (this.reqState === BillingInfoReqState.Success) {
-        return gettext("Billing info registration success");
-      }
-      if (this.reqState === BillingInfoReqState.Failure) {
-        return gettext("Billing info registration failure");
-      }
-      return "";
-    },
-  }));
 });