[IMP] website_sale_insurance_caser: move caser insurance modal to cart checkout button

Author: juancarlosonate-tecnativa

website_sale_insurance_caser/README.rst

@@ -33,11 +33,11 @@ purchase insurance for their products directly from the online store.
 
 This module extends **sale_insurance_caser** by adding:
 
--  Checkbox on product page to add insurance
--  Interactive modal at checkout offering insurance for uncovered
-   products
--  Visual badges identifying insurance lines in the cart
--  Automatic synchronization between cart and insurance lines
+- Checkbox on product page to add insurance
+- Interactive modal at checkout offering insurance for uncovered
+  products
+- Visual badges identifying insurance lines in the cart
+- Automatic synchronization between cart and insurance lines
 
 **Table of contents**
 
@@ -49,16 +49,16 @@ Configuration
 
 1. **Configure the base module** ``sale_insurance_caser``:
 
-   -  Define price ranges (``caser.price.range``)
-   -  Configure insurance products
-   -  Set up Caser API credentials
+   - Define price ranges (``caser.price.range``)
+   - Configure insurance products
+   - Set up Caser API credentials
 
 2. **Enable insurance on eCommerce products**:
 
-   -  Go to *Inventory > Products > Products*
-   -  Open a product you want to offer with insurance
-   -  In the **Sales** tab, check the **Caser Insurance in eCommerce**
-      checkbox
+   - Go to *Inventory > Products > Products*
+   - Open a product you want to offer with insurance
+   - In the **Sales** tab, check the **Caser Insurance in eCommerce**
+     checkbox
 
 Usage
 =====
@@ -83,9 +83,9 @@ Usage
    uninsured products
 7. The modal displays:
 
-   -  Product image and name
-   -  Insurance price per unit and total
-   -  Toggle switches to select which products to insure
+   - Product image and name
+   - Insurance price per unit and total
+   - Toggle switches to select which products to insure
 
 8. Upon confirmation, page reloads with new insurance lines added
 
@@ -110,9 +110,9 @@ Authors
 Contributors
 ------------
 
--  `Tecnativa <https://www.tecnativa.com>`__:
+- `Tecnativa <https://www.tecnativa.com>`__:
 
-   -  Juan Carlos Oñate
+  - Juan Carlos Oñate
 
 Maintainers
 -----------

website_sale_insurance_caser/static/src/js/checkout_insurance.esm.js

@@ -4,33 +4,45 @@ import {rpc} from "@web/core/network/rpc";
 publicWidget.registry.caserInsuranceCheckout = publicWidget.Widget.extend({
     selector: ".oe_website_sale",
     events: {
+        "click a[name='website_sale_main_button']": "_onCheckoutClick",
         "click #addInsuranceBtn": "_onAddInsurance",
+        "click #skipInsuranceBtn": "_onSkipInsurance",
+        "click #closeInsuranceModal": "_onSkipInsurance",
+        "click #toggleAllInsurance": "_onToggleAll",
     },
 
-    async start() {
-        await this._super(...arguments);
-        if (window.location.pathname.includes("/shop/payment")) {
-            await this._checkUninsuredProducts();
-        }
+    start() {
+        this._checkoutHref = this.el
+            .querySelector("a[name='website_sale_main_button']")
+            ?.getAttribute("href");
+        return this._super(...arguments);
     },
 
-    async _checkUninsuredProducts() {
+    async _onCheckoutClick(ev) {
+        if (!window.location.pathname.includes("/shop/cart")) {
+            return;
+        }
+        ev.preventDefault();
         const data = await rpc("/shop/caser_insurance/get_uninsured_products");
         if (data.products?.length) {
             this._showInsuranceModal(data.products);
+        } else {
+            window.location.href = this._checkoutHref;
         }
     },
 
     _showInsuranceModal(products) {
         const $list = this.$("#uninsured_products_list");
         $list.empty();
+        const hasMultiUnit = products.some((p) => p.quantity > 1);
 
         products.forEach((product) => {
+            const checked = product.quantity === 1 ? "checked" : "";
             for (let i = 0; i < product.quantity; i++) {
                 $list.append(`
                     <div class="d-flex align-items-center gap-3 py-2 border-bottom">
                         <input class="form-check-input flex-shrink-0 insurance-checkbox"
-                               type="checkbox"
+                               type="checkbox" ${checked}
                                data-line-id="${product.line_id}"
                                id="ins_${product.line_id}_${i}"/>
                         <img src="${product.image_url}" alt="${product.product_name}"
@@ -44,9 +56,27 @@ publicWidget.registry.caserInsuranceCheckout = publicWidget.Widget.extend({
             }
         });
 
+        const $toggle = this.$("#toggleAllInsurance");
+        if (hasMultiUnit) {
+            $toggle.removeClass("d-none");
+        } else {
+            $toggle.addClass("d-none");
+        }
+
         this.$("#caserInsuranceModal").modal("show");
     },
 
+    _onToggleAll() {
+        const $checkboxes = this.$(".insurance-checkbox");
+        const allChecked = $checkboxes.length === $checkboxes.filter(":checked").length;
+        $checkboxes.prop("checked", !allChecked);
+    },
+
+    _onSkipInsurance() {
+        this.$("#caserInsuranceModal").modal("hide");
+        window.location.href = this._checkoutHref;
+    },
+
     async _onAddInsurance(ev) {
         ev.preventDefault();
         const lineInsurances = {};

website_sale_insurance_caser/views/templates.xml

@@ -91,8 +91,8 @@
             </t>
         </xpath>
     </template>
-    <template id="caser_insurance_checkout_modal" inherit_id="website_sale.payment">
-        <xpath expr="//div[@id='payment_method']" position="before">
+    <template id="caser_insurance_checkout_modal" inherit_id="website_sale.cart">
+        <xpath expr="//t[@t-call='website_sale.cart_lines']" position="after">
             <div class="modal fade" id="caserInsuranceModal" tabindex="-1">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
@@ -102,8 +102,8 @@
                             </h5>
                             <button
                                 type="button"
-                                class="btn-close btn-close-white"
-                                data-bs-dismiss="modal"
+                                class="btn-close"
+                                id="closeInsuranceModal"
                             />
                         </div>
                         <div class="modal-body">
@@ -113,10 +113,15 @@
                             <div id="uninsured_products_list" />
                         </div>
                         <div class="modal-footer">
+                            <button
+                                type="button"
+                                class="btn btn-link me-auto d-none"
+                                id="toggleAllInsurance"
+                            >Marcar / Desmarcar todos</button>
                             <button
                                 type="button"
                                 class="btn btn-secondary"
-                                data-bs-dismiss="modal"
+                                id="skipInsuranceBtn"
                             >No, thanks</button>
                             <button
                                 type="button"