tweaks after rebase on clic-limit

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

@@ -6,67 +6,71 @@ interface Basket {
   timeout: Date;
 }
 document.addEventListener("alpine:init", () => {
-  Alpine.data("etransaction", (initialData, basket: Basket) => ({
-    data: initialData,
-    isCbAvailable: Object.keys(initialData).length > 0,
-    isSithAvailable: true,
+  Alpine.data(
+    "etransaction",
+    (initialData: Record<string, string>, basket: Basket) => ({
+      data: initialData,
+      isCbAvailable: Object.keys(initialData).length > 0,
+      isSithAvailable: true,
 
-    init() {
-      const now = new Date();
-      const timeout = basket.timeout.getTime() - now.getTime();
-      if (timeout <= 0) {
-        // basket was already outdated at initial page load
-        this.timeoutBasket();
-      } else {
-        setTimeout(() => this.timeoutBasket(), timeout);
-      }
-    },
+      init() {
+        const now = new Date();
+        const timeout = basket.timeout.getTime() - now.getTime();
+        if (timeout > 0) {
+          // if not going inside this condition, it means that
+          // basket was already outdated at initial page load,
+          // in which case disabling buttons and displaying
+          // error message has been done at rendering time
+          setTimeout(() => this.timeoutBasket(), timeout);
+        }
+      },
 
-    /**
-     * Make this basket into a timeout state.
-     * All submission inputs are disabled, and an error message is displayed.
-     */
-    timeoutBasket() {
-      this.isCbAvailable = false;
-      this.isSithAvailable = false;
-      const message = gettext("Basket expired");
+      /**
+       * Make this basket into a timeout state.
+       * All submission inputs are disabled, and an error message is displayed.
+       */
+      timeoutBasket() {
+        this.isCbAvailable = false;
+        this.isSithAvailable = false;
+        const message = gettext("Basket expired");
 
-      const existingNotif: Notification | undefined = this.$notifications
-        .getAll()
-        .find(
-          (n: Notification) =>
-            n.tag === NotificationLevel.Error && n.message === message,
-        );
-      if (existingNotif === undefined) {
-        this.$notifications.error(message);
-      }
-    },
+        const existingNotif: Notification | undefined = this.$notifications
+          .getAll()
+          .find(
+            (n: Notification) =>
+              n.tag === NotificationLevel.Error && n.text === message,
+          );
+        if (existingNotif === undefined) {
+          this.$notifications.error(message);
+        }
+      },
 
-    /**
-     * Refresh the data used for etransaction.
-     *
-     * Note: if this is called while the basket is expired, it will be a no-op
-     */
-    async fill() {
-      if (new Date() > basket.timeout) {
-        // refresh etransaction data only if the basket is still valid.
-        this.timeoutBasket();
-        return;
-      }
-      this.isCbAvailable = false;
-      const res = await etransactioninfoFetchEtransactionData({
-        // biome-ignore lint/style/useNamingConvention: api is in snake_case
-        path: { basket_id: basket.id },
-      });
-      if (res.response.ok) {
-        this.data = res.data;
-        this.isCbAvailable = true;
-      } else if (res.response.status === 410) {
-        // The basket is expired, so no payment method should be available at all.
-        // This shouldn't happen, because we don't send the request
-        // when the timeout is passed, but we are better safe than sorry
-        this.timeoutBasket();
-      }
-    },
-  }));
+      /**
+       * Refresh the data used for etransaction.
+       *
+       * Note: if this is called while the basket is expired, it will be a no-op
+       */
+      async fill() {
+        if (new Date() > basket.timeout) {
+          // refresh etransaction data only if the basket is still valid.
+          this.timeoutBasket();
+          return;
+        }
+        this.isCbAvailable = false;
+        const res = await etransactioninfoFetchEtransactionData({
+          // biome-ignore lint/style/useNamingConvention: api is in snake_case
+          path: { basket_id: basket.id },
+        });
+        if (res.response.ok) {
+          this.data = res.data as Record<string, string>;
+          this.isCbAvailable = true;
+        } else if (res.response.status === 410) {
+          // The basket is expired, so no payment method should be available at all.
+          // This shouldn't happen, because we don't send the request
+          // when the timeout is passed, but we are better safe than sorry
+          this.timeoutBasket();
+        }
+      },
+    }),
+  );
 });

eboutic/templates/eboutic/eboutic_checkout.jinja

@@ -72,8 +72,18 @@
          we have a third dummy form, containing only the cgv button,
          which validation is triggered when one of the two other forms is submitted.
          If the validation of this form fails, the submit event will be cancelled. #}
-        <div class="form-group margin-bottom">
-          <input type="checkbox" id="cgv-checkbox" name="cgv" required>
+        <div class="form-group">
+          <input
+            type="checkbox"
+            id="cgv-checkbox"
+            name="cgv"
+            required
+            {% if basket.is_expired %}
+              disabled="disabled"
+            {% else %}
+              :disabled="!isCbAvailable && !isSithAvailable"
+            {% endif %}
+          >
           <label for="cgv-checkbox">
             {% trans  trimmed %}I have read and I accept{% endtrans %}
             <a href="{{ url('core:page', 'cgv') }}">{% trans %}the general terms and conditions{% endtrans%}</a>