odoo-dev · bso-odoo · Apr 28, 2025
diff --git a/addons/html_builder/static/src/utils/sync_cache.js b/addons/html_builder/static/src/utils/sync_cache.js
@@ -7,11 +7,11 @@ export class SyncCache {
     }
     async preload(params) {
         const result = await this.asyncCache.read(params);
-        this.syncCache.set(params, result);
+        this.syncCache.set(JSON.stringify(params), result);
         return result;
     }
     get(params) {
-        return this.syncCache.get(params);
+        return this.syncCache.get(JSON.stringify(params));
     }
     invalidate() {
         this.asyncCache.invalidate();

diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_action_fields_option.js b/addons/html_builder/static/src/website_builder/plugins/form/form_action_fields_option.js
@@ -20,7 +20,7 @@ export class FormActionFieldsOption extends BaseOptionComponent {
     }
     async getFormInfo(props = this.props) {
         const el = this.env.getEditingElement();
-        const formInfo = await this.props.prepareFormModel(el, props.activeForm);
+        const formInfo = await props.prepareFormModel(el, props.activeForm);
         Object.assign(this.state.formInfo, formInfo);
     }
 }
diff --git a/...s/html_builder/static/src/website_builder/plugins/form/form_model_required_field_alert.js b/...s/html_builder/static/src/website_builder/plugins/form/form_model_required_field_alert.js
@@ -18,7 +18,8 @@ export class FormModelRequiredFieldAlert extends Component {
     }
     async handleProps(props) {
         // Get list of website_form compatible models, needed for alert message.
-        const models = await props.fetchModels();
+        const el = this.env.getEditingElement();
+        const models = await props.fetchModels(el);
         const model = models.find((model) => model.model === props.modelName);
         const actionName = model?.website_form_label || props.modelName;
         this.state.message = _t("The field “%(field)s” is mandatory for the action “%(action)s”.", {

diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option.js
@@ -1,12 +1,13 @@
-import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
-import { onWillStart } from "@odoo/owl";
+import { BaseOptionComponent } from "@html_builder/core/utils";
+import { onWillStart, onWillUpdateProps, useState } from "@odoo/owl";
 import { getParsedDataFor } from "./utils";
 import { FormActionFieldsOption } from "./form_action_fields_option";
 import { session } from "@web/session";
 
 export class FormOption extends BaseOptionComponent {
     static template = "html_builder.website.s_website_form_form_option";
     static props = {
+        modelName: String,
         fetchModels: Function,
         prepareFormModel: Function,
         fetchFieldRecords: Function,
@@ -22,41 +23,8 @@ export class FormOption extends BaseOptionComponent {
         const el = this.env.getEditingElement();
         this.messageEl = el.parentElement.querySelector(".s_website_form_end_message");
         this.showEndMessage = false;
-        onWillStart(async () => {
-            // Hide change form parameters option for forms
-            // e.g. User should not be enable to change existing job application form
-            // to opportunity form in 'Apply job' page.
-            this.modelCantChange = !!el.getAttribute("hide-change-model");
-
-            // Get list of website_form compatible models.
-            this.models = await this.props.fetchModels();
-
-            const targetModelName = el.dataset.model_name || "mail.mail";
-            this.domState.activeForm = this.models.find((m) => m.model === targetModelName);
-
-            // If the form has no model it means a new snippet has been dropped.
-            // Apply the default model selected in willStart on it.
-            if (!el.dataset.model_name) {
-                const formInfo = await this.props.prepareFormModel(el, this.domState.activeForm);
-                this.props.applyFormModel(
-                    el,
-                    this.domState.activeForm,
-                    this.domState.activeForm.id,
-                    formInfo
-                );
-            }
-        });
-        this.domState = useDomState((el) => {
-            if (!this.models) {
-                return {
-                    activeForm: {},
-                };
-            }
-            const targetModelName = el.dataset.model_name || "mail.mail";
-            const activeForm = this.models.find((m) => m.model === targetModelName);
-            return {
-                activeForm,
-            };
+        this.state = useState({
+            activeForm: {},
         });
         // Get the email_to value from the data-for attribute if it exists. We
         // use it if there is no value on the email_to input.
@@ -65,5 +33,25 @@ export class FormOption extends BaseOptionComponent {
         if (dataForValues) {
             this.dataForEmailTo = dataForValues["email_to"];
         }
+        onWillStart(async () => this.handleProps(this.props));
+        onWillUpdateProps(async (props) => this.handleProps(props));
+    }
+    async handleProps(props) {
+        const el = this.env.getEditingElement();
+        // Hide change form parameters option for forms
+        // e.g. User should not be enable to change existing job application form
+        // to opportunity form in 'Apply job' page.
+        this.modelCantChange = !!el.getAttribute("hide-change-model");
+
+        // Get list of website_form compatible models.
+        this.models = await props.fetchModels(el);
+        this.state.activeForm = this.models.find((m) => m.model === props.modelName);
+
+        // If the form has no model it means a new snippet has been dropped.
+        // Apply the default model selected in willStart on it.
+        if (!el.dataset.model_name) {
+            const formInfo = await props.prepareFormModel(el, this.state.activeForm);
+            props.applyFormModel(el, this.state.activeForm, this.state.activeForm.id, formInfo);
+        }
     }
 }
diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml b/addons/html_builder/static/src/website_builder/plugins/form/form_option.xml
@@ -1,6 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
+<t t-name="html_builder.website.s_website_form_form_option_redraw">
+    <FormOption modelName="domState.modelName" t-props="props"/>
+</t>
+
 <t t-name="html_builder.website.s_website_form_form_option">
     <BuilderRow t-if="!modelCantChange and models"
             label.translate="Action" preview="false">
@@ -10,7 +14,7 @@
             </t>
         </BuilderSelect>
     </BuilderRow>
-    <FormActionFieldsOption activeForm="domState.activeForm" prepareFormModel="props.prepareFormModel"/>
+    <FormActionFieldsOption activeForm="state.activeForm" prepareFormModel="props.prepareFormModel"/>
     <BuilderRow label.translate="Marked Fields">
         <BuilderSelect id="'field_mark_select'" action="'updateLabelsMark'">
             <BuilderSelectItem classAction="''">None</BuilderSelectItem>

diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_plugin.js
@@ -3,7 +3,7 @@ import { Cache } from "@web/core/utils/cache";
 import { Plugin } from "@html_editor/plugin";
 import { reactive } from "@odoo/owl";
 import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
-import { FormOption } from "./form_option";
+import { FormOptionRedraw } from "./form_option_redraw";
 import { FormFieldOptionRedraw } from "./form_field_option_redraw";
 import { FormOptionAddFieldButton } from "./form_option_add_field_button";
 import {
@@ -19,6 +19,7 @@ import {
     getFieldType,
     getLabelPosition,
     getMark,
+    getModelName,
     getMultipleInputs,
     getNewRecordId,
     getQuotesEncodedName,
@@ -84,7 +85,7 @@ export class FormOptionPlugin extends Plugin {
         },
         builder_options: [
             {
-                OptionComponent: FormOption,
+                OptionComponent: FormOptionRedraw,
                 props: {
                     fetchModels: this.fetchModels.bind(this),
                     prepareFormModel: this.prepareFormModel.bind(this),
@@ -152,9 +153,9 @@ export class FormOptionPlugin extends Plugin {
                     if (modelCantChange) {
                         return;
                     }
-                    const activeForm = this.modelsCache
-                        .get()
-                        .find((model) => model.id === parseInt(modelId));
+                    const activeForm = this.getModelsCache(el).find(
+                        (model) => model.id === parseInt(modelId)
+                    );
                     return { activeForm, formInfo: await this.prepareFormModel(el, activeForm) };
                 },
                 apply: ({ editingElement: el, value: modelId, loadResult }) => {
@@ -169,8 +170,8 @@ export class FormOptionPlugin extends Plugin {
                     );
                 },
                 isApplied: ({ editingElement: el, value: modelId }) => {
-                    const models = this.modelsCache.get();
-                    const targetModelName = el.dataset.model_name || "mail.mail";
+                    const models = this.getModelsCache(el);
+                    const targetModelName = getModelName(el);
                     const activeForm = models.find((m) => m.model === targetModelName);
                     return parseInt(modelId) === activeForm.id;
                 },
@@ -541,7 +542,11 @@ export class FormOptionPlugin extends Plugin {
         this.fieldRecordsCache.invalidate();
         this.authorizedFieldsCache.invalidate();
     }
-    async fetchModels() {
+    getModelsCache(formEl) {
+        // Through a method so that it can be overridden.
+        return this.modelsCache.get();
+    }
+    async fetchModels(formEl) {
         return this.modelsCache.preload();
     }
     async _fetchModels() {
@@ -666,7 +671,7 @@ export class FormOptionPlugin extends Plugin {
             for (const fieldEl of el.querySelectorAll(".s_website_form_field")) {
                 fieldEl.remove();
             }
-            activeForm = this.modelsCache.get().find((model) => model.id === modelId);
+            activeForm = this.getModelsCache(el).find((model) => model.id === modelId);
         }
         // Success page
         if (!el.dataset.successMode) {

diff --git a/addons/html_builder/static/src/website_builder/plugins/form/form_option_redraw.js b/addons/html_builder/static/src/website_builder/plugins/form/form_option_redraw.js
@@ -0,0 +1,19 @@
+import { BaseOptionComponent, useDomState } from "@html_builder/core/utils";
+import { FormOption } from "./form_option";
+import { getModelName } from "./utils";
+
+export class FormOptionRedraw extends BaseOptionComponent {
+    static template = "html_builder.website.s_website_form_form_option_redraw";
+    static props = FormOption.props;
+    static components = { FormOption };
+
+    setup() {
+        super.setup();
+        this.domState = useDomState((formEl) => {
+            const modelName = getModelName(formEl);
+            return {
+                modelName,
+            };
+        });
+    }
+}
diff --git a/addons/html_builder/static/src/website_builder/plugins/form/utils.js b/addons/html_builder/static/src/website_builder/plugins/form/utils.js
@@ -483,6 +483,10 @@ export function getDomain(formEl, name, type, relation) {
     return field && field.domain;
 }
 
+export function getModelName(formEl) {
+    return formEl.dataset.model_name || "mail.mail";
+}
+
 export function getListItems(fieldEl) {
     const selectEl = getSelect(fieldEl);
     const multipleInputsEl = getMultipleInputs(fieldEl);

diff --git a/addons/website_sale/__manifest__.py b/addons/website_sale/__manifest__.py
@@ -156,6 +156,7 @@
         ],
         'html_builder.assets': [
             'website_sale/static/src/plugins/**/*',
+            'website_sale/static/src/js/website_sale_form_editor.js',
         ],
         'website.assets_wysiwyg': [
             'website_sale/static/src/scss/website_sale.editor.scss',