Our custom Odoo module "Custom Checkout Buttons" is experiencing significant implementation issues:

Button Display:

1. The custom buttons for newsletter subscription and invoice request are not displaying correctly on the checkout page. This suggests a problem with the OWL component rendering or XML template integration.
2. Data Saving: The selections made by the user (newsletter subscription and invoice request) are not being saved in the sale_order object. This indicates an issue in the communication between the frontend and backend or in the data saving logic.

/** @odoo-module **/

import { Component, useState } from "@odoo/owl";import { registry } from "@web/core/registry";

class CustomCheckoutButton extends Component { setup() { console.log("CustomCheckoutButton setup iniziato"); this.state = useState({ subscribeNewsletter: false, requestInvoice: false }); console.log("CustomCheckoutButton setup completato, stato iniziale:", this.state); }

get subscribeNewsletter() { console.log("Accesso a subscribeNewsletter:", this.state.subscribeNewsletter); return this.state.subscribeNewsletter; }

get requestInvoice() { console.log("Accesso a requestInvoice:", this.state.requestInvoice); return this.state.requestInvoice; }

toggleNewsletter() { console.log("toggleNewsletter chiamato, valore precedente:", this.state.subscribeNewsletter); this.state.subscribeNewsletter = !this.state.subscribeNewsletter; console.log("Nuovo valore di subscribeNewsletter:", this.state.subscribeNewsletter); this.updateOrder(); }

toggleInvoice() { console.log("toggleInvoice chiamato, valore precedente:", this.state.requestInvoice); this.state.requestInvoice = !this.state.requestInvoice; console.log("Nuovo valore di requestInvoice:", this.state.requestInvoice); this.updateOrder(); }

updateOrder() { console.log("updateOrder chiamato"); const updateData = { subscribe_newsletter: this.state.subscribeNewsletter, request_invoice: this.state.requestInvoice }; console.log("Dati da inviare al server:", updateData);

this.env.services.rpc('/shop/update_order', updateData) .then(result => { console.log('Ordine aggiornato con successo:', result); }) .catch(error => { console.error('Errore durante l\'aggiornamento dell\'ordine:', error); }); }}

CustomCheckoutButton.template = 'custom_checkout_button.CustomCheckoutButton';console.log("Template del componente impostato:", CustomCheckoutButton.template);

const customCheckoutButtonWebsite = { Component: CustomCheckoutButton, selector: '.js_custom_checkout_button', dependencies: ['website'],};console.log("Configurazione del componente per il sito web:", customCheckoutButtonWebsite);

registry.category("website_sale_checkout").add("CustomCheckoutButton", customCheckoutButtonWebsite);console.log("Componente CustomCheckoutButton registrato nella categoria website_sale_checkout");

export default CustomCheckoutButton;console.log("Modulo CustomCheckoutButton esportato");