[IMP] web: Update js code to ES6

This commit updates javascript code to be up to date with the codebase
standards:
- use the `static` keyword when possible
- proper owl imports
- removed unecessary `@odoo-module` directives

content/administration/upgrade.rst

@@ -3,7 +3,7 @@ Upgrade
 =======
 
 An upgrade involves moving a database from an older version to a newer supported version (e.g., from
-Odoo 15.0 to Odoo 17.0). Regular upgrades are crucial as each version offers new features, bug
+Odoo 16.0 to Odoo 18.0). Regular upgrades are crucial as each version offers new features, bug
 fixes, and security patches. Using a :doc:`supported version <supported_versions>` is strongly
 recommended. Each major version is supported for three years.
 
@@ -13,11 +13,11 @@ Depending on the hosting type and Odoo version used, a database upgrade can be *
 
    .. group-tab:: Odoo Online
 
-      - If a database is on a **major version** (e.g., 15.0, 16.0, 17.0), an upgrade is mandatory
+      - If a database is on a **major version** (e.g., 16.0, 17.0, 18.0), an upgrade is mandatory
         every two years.
       - If a database is on a **minor version** (e.g., 17.1, 17.2, 17.4), an upgrade is mandatory
         a few weeks after the next version is released. Minor versions are usually released every
-        three months.
+        two months.
 
    .. group-tab:: Odoo.sh
 

content/applications/finance/fiscal_localizations/colombia.rst

@@ -3,23 +3,38 @@ Colombia
 ========
 
 .. |DIAN| replace:: :abbr:`DIAN (Dirección de Impuestos y Aduanas Nacionales)`
+.. |NIT| replace:: :abbr:`NIT (El Número de Identificación Tributaria)`
 
 Odoo's Colombian localization package provides accounting, fiscal, and legal features for databases
-in Colombia – such as chart of accounts, taxes, and electronic invoicing.
+in Colombia - such as chart of accounts, taxes, and electronic invoicing. The localization has the
+following `prerequisites
+<https://micrositios.dian.gov.co/sistema-de-facturacion-electronica/que-requieres-para-factura-electronicamente/>`_
+when using the `DIAN Own Software
+<https://micrositios.dian.gov.co/sistema-de-facturacion-electronica/como-puedes-facturar-electronicamente/>`_
+solution with Odoo:
 
-In addition, a series of videos on the subject is also available. These videos cover how to start
-from scratch, set up configurations, complete common workflows, and provide in-depth looks at some
-specific use cases as well.
+- Be registered in the `RUT
+  <https://www.dian.gov.co/tramitesservicios/tramites-y-servicios/tributarios/Paginas/RUT.aspx>`_
+  (Registro Único Tributario) with a valid |NIT|.
+- Have a valid digital signature certificate `approved by the ONAC
+  <https://onac.org.co/directorio-de-acreditados/>`_.
+- `Register and get enabled
+  <https://micrositios.dian.gov.co/sistema-de-facturacion-electronica/proceso-de-registro-y-habilitacion-como-facturador-electronico/>`_
+  by completing the certification process required by the |DIAN|.
 
 .. seealso::
-   `Smart Tutorial - Colombian Localization
-   <https://www.odoo.com/slides/smart-tutorial-localizacion-de-colombia-132>`_.
+   - For more information on how to complete the certification process for the |DIAN| module, review
+     the following `webinar <https://www.youtube.com/watch?v=l0G6iDc7NQA>`_.
+   - `Smart Tutorial - Colombian Localization
+     <https://www.odoo.com/slides/smart-tutorial-localizacion-de-colombia-132>`_.
 
-.. _colombia/configuration:
+.. _localization/colombia/configuration:
 
 Configuration
 =============
 
+.. _localization/colombia/modules:
+
 Modules installation
 --------------------
 
@@ -38,155 +53,148 @@ localization:
      - Default :ref:`fiscal localization package <fiscal_localizations/packages>`. This module adds
        the base accounting features for the Colombian localization: chart of accounts, taxes,
        withholdings, and identification document type.
+   * - :guilabel:`Electronic invoicing for Colombia with DIAN`
+     - `l10n_co_dian`
+     - This module includes the features required for integration with the |DIAN| as its own
+       software, and adds the ability to generate electronic invoices and support documents based on
+       |DIAN| regulations.
    * - :guilabel:`Colombian - Accounting Reports`
      - `l10n_co_reports`
-     - Includes accounting reports for sending certifications to suppliers for withholdings applied.
+     - This module includes accounting reports for sending certifications to suppliers for
+       withholdings applied.
    * - :guilabel:`Electronic invoicing for Colombia with Carvajal`
      - `l10n_co_edi`
-     - This module includes the features required for integration with Carvajal, and
-       generates the electronic invoices and support documents related to the vendor bills, based on
-       |DIAN| regulations.
+     - This module includes the features required for integration with Carvajal. Adds the ability to
+       generate the electronic invoices and support documents, based on |DIAN| regulations.
    * - :guilabel:`Colombian - Point of Sale`
      - `l10n_co_pos`
-     - Includes Point of Sale receipts for Colombian localization.
+     - This module includes **Point of Sale** receipts for Colombian localization.
 
-.. note::
-   When `Colombia` is selected for a company's :guilabel:`Fiscal Localization`, Odoo automatically
-   installs certain modules.
+.. _localization/colombia/configuration/company:
 
-Company configuration
----------------------
+Company information
+-------------------
 
-To configure your company information, go to the :menuselection:`Contacts` app, and search for your
-company.
+To configure your company information:
 
-Alternatively, activate :ref:`developer mode <developer-mode>` and navigate to
-:menuselection:`General Setting --> Company --> Update Info --> Contact`. Then, edit the contact
-form and configure the following information:
+#. Access your company's contact form:
 
-- :guilabel:`Company Name`.
-- :guilabel:`Address`: Including :guilabel:`City`, :guilabel:`Department` and :guilabel:`ZIP` code.
-- :guilabel:`Identification Number`: Select the :guilabel:`Identification Type` (`NIT`, `Cédula de
-  Ciudadanía`, `Registro Civil`, etc.). When the :guilabel:`Identification Type` is `NIT`, the
-  :guilabel:`Identification Number` **must** have the *verification digit* at the end of the ID
-  prefixed by a hyphen (`-`).
+   - Go to the :guilabel:`Contacts` app and search for your company or;
+   - Go to the :guilabel:`Settings` app, activate the :ref:`developer mode <developer-mode>`, and in
+     the :guilabel:`Companies` section, click :guilabel:`Update Info`. Then, in the
+     :guilabel:`Contact` field, click on the company name.
 
-Next, configure the :guilabel:`Fiscal Information` in the :guilabel:`Sales & Purchase` tab:
+#. Configure the following information:
 
-- :guilabel:`Obligaciones y Responsabilidades`: Select the fiscal responsibility for the company
-  (`O-13` Gran Contribuyente, `O-15` Autorretenedor, `O-23` Agente de retención IVA, `O-47` Regimen
-  de tributación simple, `R-99-PN` No Aplica).
-- :guilabel:`Gran Contribuyente`: If the company is *Gran Contribuyente* this option should be
-  selected.
-- :guilabel:`Fiscal Regimen`: Select the Tribute Name for the company (`IVA`, `INC`, `IVA e INC`,
-  or `No Aplica`)
-- :guilabel:`Commercial Name`: If the company uses a specific commercial name, and it needs to be
-  displayed in the invoice.
+   - :guilabel:`Company Name`.
+   - :guilabel:`Address`: Including :guilabel:`City`, :guilabel:`Department`, and :guilabel:`ZIP`
+     code.
+   - :guilabel:`Identification Number`: Select the :guilabel:`Identification Type` (:guilabel:`NIT`,
+     :guilabel:`Cédula de Ciudadanía`, :guilabel:`Registro Civil`, etc.). When the
+     :guilabel:`Identification Type` is :guilabel:`NIT`, the
+     :guilabel:`Identification Number` **must** have the *verification digit* at the end of the ID
+     prefixed by a hyphen (`-`).
 
-Carjaval credentials configuration
-----------------------------------
+#. Go to the :guilabel:`Sales & Purchase` tab and configure the :guilabel:`Fiscal Information`:
 
-Once the modules are installed, the user credentials **must** be configured, in order to connect
-with Carvajal Web Service. To do so, navigate to :menuselection:`Accounting --> Configuration -->
-Settings` and scroll to the :guilabel:`Colombian Electronic Invoicing` section. Then, fill in the
-required configuration information provided by Carvajal:
-
-- :guilabel:`Username` and :guilabel:`Password`: Username and password (provided by Carvajal) to the
-  company.
-- :guilabel:`Company Registry`: Company's NIT number *without* the verification code.
-- :guilabel:`Account ID`: Company's NIT number followed by `_01`.
-- :guilabel:`Colombia Template Code`: Select one of the two available templates (`CGEN03` or
-  `CGNE04`) to be used in the PDF format of the electronic invoice.
-
-Enable the :guilabel:`Test mode` checkbox to connect with the Carvajal testing environment.
-
-Once Odoo and Carvajal are fully configured and ready for production, deactivate the :guilabel:`Test
-mode` checkbox to use the production database.
-
-.. image:: colombia/carvajal-configuration.png
-   :align: center
-   :alt: Configure credentials for Carvajal web service in Odoo.
-
-.. important::
-   :guilabel:`Test mode` must **only** be used on duplicated databases, **not** the production
-   environment.
-
-Report data configuration
--------------------------
-
-Report data can be defined for the fiscal section and bank information of the PDF as part of the
-configurable information sent in the XML.
-
-Navigate to :menuselection:`Accounting --> Configuration --> Settings`, and scroll to the
-:guilabel:`Colombian Electronic Invoicing` section, in order to find the :guilabel:`Report
-Configuration` fields. Here the header information for each report type can be configured.
-
-- :guilabel:`Gran Contribuyente`
-- :guilabel:`Tipo de Régimen`
-- :guilabel:`Retenedores de IVA`
-- :guilabel:`Autorretenedores`
-- :guilabel:`Resolución Aplicable`
-- :guilabel:`Actividad Económica`
-- :guilabel:`Bank Information`
-
-.. _colombia/master-data:
-
-Master data configuration
--------------------------
-
-Partner
-~~~~~~~
-
-Partner contacts can be created in the *Contacts* app. To do so, navigate to
-:menuselection:`Contacts`, and click the :guilabel:`Create` button.
-
-Then, name the contact, and using the radio buttons, select the contact type, either
-:guilabel:`Individual` or :guilabel:`Company`.
-
-Complete the full :guilabel:`Address`, including the :guilabel:`City`, :guilabel:`State`, and
-:guilabel:`ZIP` code. Then, complete the identification and fiscal information.
-
-Identification information
-**************************
-
-Identification types, defined by the |DIAN|, are available on the partner form, as part of the
-Colombian localization. Colombian partners **must** have their :guilabel:`Identification Number`
-(VAT) and :guilabel:`Document Type` set.
+   - :guilabel:`Obligaciones y Responsabilidades`: Select the fiscal responsibility for the company.
+     (:guilabel:`O-13` Gran Contribuyente, :guilabel:`O-15` Autorretenedor,
+     :guilabel:`O-23` Agente de retención IVA, :guilabel:`O-47` Regimen de tributación simple,
+     :guilabel:`R-99-PN` No Aplica).
+   - :guilabel:`Gran Contribuyente`: If the company is *Gran Contribuyente*, enable this option.
+   - :guilabel:`Fiscal Regimen`: Select the Tribute Name for the company (:guilabel:`IVA`,
+     :guilabel:`INC`, :guilabel:`IVA e INC`, or :guilabel:`No Aplica`)
+   - :guilabel:`Commercial Name`: If the company uses a specific commercial name and it needs to be
+     displayed in the invoice.
 
 .. tip::
-   When the :guilabel:`Document Type` is `NIT`, the :guilabel:`Identification Number` needs to be
-   configured in Odoo, including the *verification digit at the end of the ID, prefixed by a hyphen
-   (`-`)*.
+   The data configured in the :guilabel:`Fiscal Information` section is printed in the valid fiscal
+   PDF reports.
 
-Fiscal information
-******************
+.. _localization/colombia/einvoice-configuration:
 
-The partner's responsibility codes (section 53 in the :abbr:`RUT (Registro único tributario)`
-document) are included as part of the electronic invoicing module, as it is required by the |DIAN|.
+Electronic invoicing credentials and |DIAN| environment
+-------------------------------------------------------
 
-The required fields can be found under :menuselection:`Partner --> Sales & Purchase Tab --> Fiscal
-Information section`:
+To configure the user credentials to be used to connect with the |DIAN|'s web service and the
+|DIAN| environment, navigate to :menuselection:`Accounting --> Configuration --> Settings` and
+scroll to the :guilabel:`Colombian Electronic Invoicing` section. Then, follow these steps:
 
-- :guilabel:`Obligaciones y Responsabilidades`: Select the fiscal responsibility for the company
-  (`O-13` Gran Contribuyente, `O-15` Autorretenedor, `O-23` Agente de retención IVA, `O-47` Regimen
-  de tributación simple, or `R-99-PN` No Aplica).
-- :guilabel:`Gran Contribuyente`: If the company is *Gran Contribuyente* this option should be
-  selected.
-- :guilabel:`Fiscal Regimen`: Select the tribute name for the company (`IVA`, `INC`, `IVA e INC`, or
-  `No Aplica`)
-- :guilabel:`Commercial Name`: If the company uses a specific commercial name, and it needs to be
-  displayed in the invoice.
+#. Select :guilabel:`DIAN: Free Service` as the :guilabel:`Electronic Invoicing Provider`.
+#. Configure the :guilabel:`Operation Modes` for the respective types of documents
+   (*electronic invoices* or *support documents*) to be generated from Odoo. Click
+   :guilabel:`Add a line`, then fill in the fields:
+
+   - :guilabel:`Software Mode`: the type of document to be generated with the operation mode.
+   - :guilabel:`Software ID`: the ID generated by |DIAN| for the specific operation mode.
+   - :guilabel:`Software PIN`: the PIN selected in the operation mode configuration in the |DIAN|
+     portal.
+   - :guilabel:`Testing ID`: the testing ID generated by |DIAN| and obtained after testing the
+     operation mode.
+
+#. Configure the available :guilabel:`Certificates` to sign the electronic documents. Click
+   :guilabel:`Add a line`, then fill in the fields:
+
+   - :guilabel:`Name`: the name of the certificate.
+   - :guilabel:`Certificate`: upload the certificate file in PEM format. In the :guilabel:`Private
+     Key` field that appears on the screen, select an existing private key or create a new one. To
+     do so, enter a key name and select :guilabel:`Create and edit`. Then, in the :guilabel:`Create
+     Private Key` wizard, upload a valid :guilabel:`Key file` and click :guilabel:`Save & Close`.
+
+     .. image:: colombia/dian-credentials-configuration.png
+        :alt: Colombian electronic invoicing credentials configured.
+
+#. Configure the |DIAN| environment; the |DIAN| electronic invoicing module offers three different
+   |DIAN| environments to connect with:
+
+   - **Certification environment**: This environment is useful to pass the |DIAN| certification
+     process and obtain the *Enabled* status to invoice from Odoo. To activate it, enable both the
+     :guilabel:`Test environment` and the :guilabel:`Activate the certification process` checkboxes.
+
+   - **Testing environment**: This environment allows reproducing electronic invoicing flows
+     and validations in the |DIAN| testing portal. To activate it, enable only the :guilabel:`Test
+     Environment` checkbox.
+
+   - **Production environment**: Activate production databases to generate valid electronic documents.
+     To activate it, disable both the :guilabel:`Test environment` and the :guilabel:`Activate the
+     certification process` checkboxes.
+
+.. note::
+   In a multi-company database, each company can have its own certificate.
+
+.. seealso::
+   For electronic invoicing configurations using the Carvajal solution, review the following video:
+   `Configuración de Facturación Electrónica - Localización de Colombia
+   <https://www.youtube.com/watch?v=bzweMwTEbfY&list=PL1-aSABtP6ABxZshems3snMjx7bj_7ZsZ&index=3>`_.
+
+.. _localization/colombia/master-data:
+
+Master data
+-----------
+
+.. _localization/colombia/contacts:
+
+Contacts
+~~~~~~~~
+
+Configure the following fields on the :doc:`contact form <../../essentials/contacts>`:
+
+- :guilabel:`Identification Number` (VAT): Select the identification number type and enter the
+  identification number. If the identification number type is :guilabel:`NIT`, the identification
+  number must include the verification digit at the end, prefixed by a hyphen (`-`).
+- :ref:`Fiscal Information fields <localization/colombia/configuration/company>` in the
+  :guilabel:`Sales & Purchase` tab.
+
+.. _localization/colombia/products:
 
 Products
 ~~~~~~~~
 
-To manage products, navigate to :menuselection:`Accounting --> Customers --> Products`, then click
-on a product.
+Access the product's form via :menuselection:`Accounting --> Customers --> Products` and ensure
+that either the :guilabel:`UNSPSC Category` field (found in the :guilabel:`Accounting tab`) or the
+:guilabel:`Internal Reference` field (in the :guilabel:`General Information` tab) is configured.
 
-When adding general information on the product form, it is required that either the
-:guilabel:`UNSPSC Category` (:guilabel:`Accounting` tab), or :guilabel:`Internal Reference`
-(:guilabel:`General Information` tab) field is configured. Be sure to :guilabel:`Save` the product
-once configured.
+.. _localization/colombia/taxes:
 
 Taxes
 ~~~~~
@@ -194,91 +202,103 @@ Taxes
 To create or modify taxes, go to :menuselection:`Accounting --> Configuration --> Taxes`, and select
 the related tax.
 
-If sales transactions include products with taxes, the :guilabel:`Value Type` field in the
-:guilabel:`Advanced Options` tab needs to be configured per tax. Retention tax types
-(:guilabel:`ICA`, :guilabel:`IVA`, :guilabel:`Fuente`) are also included. This configuration is used
-to display taxes correctly in the invoice PDF.
+If sales transactions include products with taxes, configure the :guilabel:`Value Type` field in the
+:guilabel:`Advanced Options` tab. Retention tax types (:guilabel:`ICA`, :guilabel:`IVA`,
+:guilabel:`Fuente`) are also included. This configuration is used to display taxes correctly on the
+invoice.
 
-.. image:: colombia/retention-tax-types.png
-   :align: center
-   :alt: The ICA, IVA and Fuente fields in the Advanced Options tab in Odoo.
+.. image:: colombia/dian-taxes-configuration.png
+   :alt: Specific tax configurations per DIAN regulations.
 
-.. _co-journals:
+.. _localization/colombia/co-journals:
 
 Sales journals
 ~~~~~~~~~~~~~~
 
 Once the |DIAN| has assigned the official sequence and prefix for the electronic invoice resolution,
-the sales journals related to the invoice documents **must** be updated in Odoo. To do so, navigate
-to :menuselection:`Accounting --> Configuration --> Journals`, and select an existing sales journal,
+the sales journals related to the invoices **must** be updated in Odoo. To do so, navigate
+to :menuselection:`Accounting --> Configuration --> Journals` and select an existing sales journal
 or create a new one with the :guilabel:`Create` button.
 
-On the sales journal form, input the :guilabel:`Journal Name`, :guilabel:`Type`, and set a unique
-:guilabel:`Short Code` in the :guilabel:`Journals Entries` tab. Then, configure the following data
-in the :guilabel:`Advanced Settings` tab:
+On the sales journal form, enter the :guilabel:`Journal Name` and :guilabel:`Type`, then set a
+unique :guilabel:`Short Code` in the :guilabel:`Journals Entries` tab. Then, configure the following
+data in the :guilabel:`Advanced Settings` tab:
 
-- :guilabel:`Electronic invoicing`: Enable :guilabel:`UBL 2.1 (Colombia)`.
-- :guilabel:`Invoicing Resolution`: Resolution number issued by |DIAN| to the company.
-- :guilabel:`Resolution Date`: Initial effective date of the resolution.
-- :guilabel:`Resolution end date`: End date of the resolution's validity.
-- :guilabel:`Range of Numbering (minimum)`: First authorized invoice number.
-- :guilabel:`Range of Numbering (maximum)`: Last authorized invoice number.
+- :guilabel:`Electronic invoicing`: enable UBL 2.1 (Colombia).
+- :guilabel:`Invoicing Resolution`: resolution number issued by |DIAN| to the company via their test
+  set.
+- :guilabel:`Resolution Date`: initial effective date of the resolution.
+- :guilabel:`Resolution End Date`: end date of the resolution's validity.
+- :guilabel:`Range of Numbering (minimum)`: first authorized invoice number.
+- :guilabel:`Range of Numbering (maximum)`: last authorized invoice number.
+- :guilabel:`Technical Key`: control key received from the |DIAN| portal test set or from their web
+  service in case of the production environment.
 
-.. note::
-   The sequence and resolution of the journal **must** match the one configured in Carvajal and the
-   |DIAN|.
+When the database is configured for the :ref:`production environment
+<localization/colombia/einvoice-configuration>`, instead of configuring these fields manually,
+click the :guilabel:`Reload DIAN configuration` button to obtain the |DIAN| resolution information
+from the |DIAN| web service.
 
-Invoice sequence
-****************
+.. image:: colombia/reload-dian-configuration-button.png
+   :alt: Reload DIAN configuration button in sale journals.
 
-The invoice sequence and prefix **must** be correctly configured when the first document is created.
+.. important::
+   - The short code and resolution of the journal **must** match the ones received in the |DIAN|
+     portal test set or from the MUISCA portal.
+   - The :ref:`invoice sequence and prefix <localization/colombia/invoice-creation>` **must** be
+     correctly configured when the first invoice is created. Odoo automatically assigns a prefix
+     and sequence to the following invoices.
 
-.. note::
-   Odoo automatically assigns a prefix and sequence to the following invoices.
+.. _localization/colombia/purchase-journals:
 
 Purchase journals
-*****************
+~~~~~~~~~~~~~~~~~
 
 Once the |DIAN| has assigned the official sequence and prefix for the *support document* related to
 vendor bills, the purchase journals related to their supporting documents need to be updated in
-Odoo. The process is similar to the configuration of the :ref:`sales journals <co-journals>`.
+Odoo. The process is similar to the configuration of the :ref:`sales journals
+<localization/colombia/co-journals>`.
+
+.. seealso::
+   For more information on support document journals using the Carvajal solution, review the
+   `Documento Soporte - Localización de Colombia video
+   <https://www.youtube.com/watch?v=UmYsFcD7xzE&list=PL1-aSABtP6ABxZshems3snMjx7bj_7ZsZ&index=8>`_.
+
+.. _localization/colombia/chart-of-accounts:
 
 Chart of accounts
-*****************
+~~~~~~~~~~~~~~~~~
 
 The :doc:`chart of accounts </applications/finance/accounting/get_started/chart_of_accounts>` is
-installed by default as part of the localization module, the accounts are mapped automatically in
+installed by default as part of the localization module. The accounts are mapped automatically in
 taxes, default account payable, and default account receivable. The chart of accounts for Colombia
 is based on the PUC (Plan Unico de Cuentas).
 
-.. _colombia/workflows:
+.. _localization/colombia/workflows:
 
 Main workflows
 ==============
 
+.. _localization/colombia/electronic-invoices:
+
 Electronic invoices
 -------------------
 
 The following is a breakdown of the main workflow for electronic invoices with the Colombian
 localization:
 
-#. Sender creates an invoice.
-#. Electronic invoice provider generates the legal XML file.
-#. Electronic invoice provider creates the CUFE (Invoice Electronic Code) with the electronic
-   signature.
-#. Electronic invoice provider sends a notification to |DIAN|.
+#. The user creates an invoice.
+#. Odoo generates the legal XML file.
+#. Odoo generates the CUFE (Invoice Electronic Code) with the electronic signature.
+#. Odoo sends a notification to DIAN.
 #. |DIAN| validates the invoice.
 #. |DIAN| accepts or rejects the invoice.
-#. Electronic invoice provider generates the PDF invoice with a QR code.
-#. Electronic invoice provider sends invoice to the acquirer.
-#. Acquirer sends a receipt of acknowledgement, and accepts or rejects the invoice.
-#. Sender downloads a :file:`.zip` file with the PDF and XML.
+#. Odoo generates the PDF invoice with a QR code.
+#. Odoo compresses the attached document (containing the sent XML file and the DIAN validation
+   response) and the fiscal valid PDF into a :file:`.zip` file.
+#. The user sends the invoice (:file:`.zip` file) via Odoo to the acquirer.
 
-.. image:: colombia/workflow-electronic-invoice.png
-   :align: center
-   :alt: Electronic invoice workflow for Colombian localization.
-
-.. _colombia/invoice-creation:
+.. _localization/colombia/invoice-creation:
 
 Invoice creation
 ~~~~~~~~~~~~~~~~
@@ -287,58 +307,62 @@ Invoice creation
    The functional workflow taking place before an invoice validation does **not** alter the main
    changes introduced with the electronic invoice.
 
-Electronic invoices are generated and sent to both the |DIAN| and customer through Carvajal's web
-service integration. These documents can be created from your sales order or manually generated. To
-create a new invoice, go to :menuselection:`Accounting --> Customers --> Invoices`, and select
-:guilabel:`Create`. On the invoice form configure the following fields:
+Electronic invoices are generated and sent to both the |DIAN| and the customer. These documents can
+be created from the sales order or manually generated. To create a new invoice, go to
+:menuselection:`Accounting --> Costumers --> Invoices`, and select :guilabel:`Create`. On the
+invoice form, configure the following fields:
 
-- :guilabel:`Customer`: Customer's information.
-- :guilabel:`Journal`: Journal used for electronic invoices.
+- :guilabel:`Customer`: customer's information.
+- :guilabel:`Journal`: journal used for electronic invoices.
 - :guilabel:`Electronic Invoice Type`: Select the type of document. By default, :guilabel:`Factura
   de Venta` is selected.
 - :guilabel:`Invoice Lines`: Specify the products with the correct taxes.
 
+.. important::
+   When creating the first invoice related to an electronic invoicing journal, it is required to
+   manually change the *sequence* of the invoice to the |DIAN| format: `Prefix + Sequence`.
+
+   For example, format the sequence from `SETP/2024/00001` to `SETP1`.
+
 When done, click :guilabel:`Confirm`.
 
-.. _colombia/invoice-validation:
+.. _localization/colombia/send-electronic-invoice:
 
-Invoice validation
-~~~~~~~~~~~~~~~~~~
+Electronic invoice sending
+~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-After the invoice confirmation, an XML file is created and sent automatically to Carvajal. The
-invoice is then processed asynchronously by the E-invoicing service UBL 2.1 (Colombia). The file is
-also displayed in the chatter.
+After the :ref:`invoice confirmation <localization/colombia/invoice-creation>`, click
+:guilabel:`Print & Send`. In the wizard that appears, make sure to enable the :guilabel:`DIAN` and
+:guilabel:`Email` checkboxes to send an XML to the |DIAN| web service and the validated invoice to
+the client fiscal email and click :guilabel:`Print & Send`. Then:
 
-.. image:: colombia/invoice-sent.png
-   :align: center
-   :alt: Carvajal XML invoice file in Odoo chatter.
+- The XML document is created.
+- The CUFE is generated.
+- The XML is processed synchronously by the |DIAN|.
+- If accepted, the file is displayed in the chatter and the email to the client with the
+  corresponding :file:`.zip` file.
 
-The :guilabel:`Electronic Invoice Name` field is now displayed in the :guilabel:`EDI Documents` tab,
-with the name of the XML file. Additionally, the :guilabel:`Electronic Invoice Status` field is
-displayed with the initial value :guilabel:`To Send`. To process the invoice manually, click on the
-:guilabel:`Process Now` button.
+.. image:: colombia/zip-xml-chatter-colombia.png
+   :alt: EDI documents available in the chatter.
 
-.. _colombia/invoice-xml:
+The :guilabel:`DIAN` tab then displays the following:
 
-Reception of legal XML and PDF
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+- :guilabel:`Signed Date`: timestamp recorded of the XML creation.
+- :guilabel:`Status`: Status result obtained in the |DIAN| response. If the invoice was
+  rejected, the error messages can be seen here.
+- :guilabel:`Testing Environment`: To know if the document sent was delivered to the |DIAN| testing
+  environment.
+- :guilabel:`Certification Process`: To know if the document was sent as part of the certification
+  process with the |DIAN|.
+- :guilabel:`Download`: To download the sent XML file, even if the |DIAN| result was
+  rejected.
+- :guilabel:`Fetch Attached Document`: To download the generated attached document file included in
+  the delivered :file:`.zip` file to the client.
 
-The electronic invoice vendor (Carvajal) receives the XML file, and proceeds to validate its
-structure and information.
+.. image:: colombia/dian-tab-electronic-document.png
+   :alt: EDI document record available in DIAN tab.
 
-After validating the electronic invoice, proceed to generate a legal XML which includes a digital
-signature and a unique code (CUFE), a PDF invoice that includes a QR code and the CUFE is also
-generated. If everything is correct the :guilabel:`Electronic Invoicing` field value changes to
-:guilabel:`Sent`.
-
-A :file:`.zip` containing the legal electronic invoice (in XML format) and the invoice in (PDF
-format) is downloaded and displayed in the invoice chatter:
-
-.. image:: colombia/invoice-zip.png
-   :align: center
-   :alt: ZIP file displayed in the invoice chatter in Odoo.
-
-The electronic invoice status changes to :guilabel:`Accepted`.
+.. _localization/colombia/credit-notes:
 
 Credit notes
 ------------
@@ -364,6 +388,8 @@ an invoice, go to :menuselection:`Accounting --> Customers --> Invoices`. On the
 
 Once reviewed, click the :guilabel:`Reverse` button.
 
+.. _localization/colombia/debit-notes:
+
 Debit notes
 -----------
 
@@ -380,6 +406,8 @@ invoice, go to :menuselection:`Accounting --> Customers --> Invoices`. On the in
 
 When done, click :guilabel:`Create Debit Note`.
 
+.. _localization/colombia/support-document:
+
 Support document for vendor bills
 ---------------------------------
 
@@ -397,26 +425,34 @@ Support documents for vendor bills can be created from your purchase order or ma
 Once reviewed, click the :guilabel:`Confirm` button. Upon confirmation, an XML file is created and
 automatically sent to Carvajal.
 
-.. _colombia/common-errors:
+.. _localization/colombia/common-errors:
 
 Common errors
 -------------
 
-During the XML validation, the most common errors are related to missing master data (*Contact Tax
-ID*, *Address*, *Products*, *Taxes*). In such cases, error messages are shown in the chatter after
-updating the electronic invoice status.
+During the XML validation, the most common errors are related to missing :ref:`master data
+<localization/colombia/master-data>`. In such cases, a validation error message is displayed and
+sending is blocked.
 
-After the master data is corrected, it's possible to reprocess the XML with the new data and send
-the updated version, using the :guilabel:`Retry` button.
+If the invoice was sent and set as *Rejected* by the |DIAN|, the error messages are visible by
+clicking the :icon:`fa-info-circle` :guilabel:`(info circle)` icon next to the :guilabel:`Status`
+field in the :guilabel:`DIAN` tab. Using the reported error codes, it is possible to review
+solutions to apply before re-sending.
 
-.. image:: colombia/xml-validation-error.png
-   :alt: XML validation errors shown in the invoice chatter in Odoo.
+.. image:: colombia/rejected-invoice-error-message.png
+   :alt: Example of error messages on rejected invoices.
 
-.. _colombia/reports:
+After the master data or other issues are corrected, it is possible to reprocess the XML again. Do
+so by following the :ref:`electronic invoice sending <localization/colombia/send-electronic-invoice>`
+flow.
+
+.. _localization/colombia/reports:
 
 Financial reports
 =================
 
+.. _localization/colombia/certificado-ica:
+
 Certificado de Retención en ICA
 -------------------------------
 
@@ -424,10 +460,14 @@ This report is a certification to vendors for withholdings made for the Colombia
 Commerce (ICA) tax. The report can be found under :menuselection:`Accounting --> Reporting -->
 Colombian Statements --> Certificado de Retención en ICA`.
 
-.. image:: colombia/ica-report.png
-   :align: center
+Click the :icon:`fa-cog` :guilabel:`(gear)` icon to display options to :guilabel:`Download Excel`
+and :guilabel:`Copy to Documents`.
+
+.. image:: colombia/retencion-ica-dian.png
    :alt: Certificado de Retención en ICA report in Odoo Accounting.
 
+.. _localization/colombia/certificado-iva:
+
 Certificado de Retención en IVA
 -------------------------------
 
@@ -435,10 +475,14 @@ This report issues a certificate on the amount withheld from vendors for VAT wit
 can be found under :menuselection:`Accounting --> Reporting --> Colombian Statements --> Certificado
 de Retención en IVA`.
 
-.. image:: colombia/iva-report.png
-   :align: center
+Click the :icon:`fa-cog` :guilabel:`(gear)` icon to display options to :guilabel:`Download Excel`
+and :guilabel:`Copy to Documents`.
+
+.. image:: colombia/retencion-iva-dian.png
    :alt: Certificado de Retención en IVA report in Odoo Accounting.
 
+.. _localization/colombia/certificado-fuente:
+
 Certificado de Retención en la Fuente
 -------------------------------------
 
@@ -446,6 +490,8 @@ This certificate is issued to partners for the withholding tax that they have ma
 be found under :menuselection:`Accounting --> Reporting --> Colombian Statements --> Certificado de
 Retención en Fuente`.
 
-.. image:: colombia/fuente-report.png
-   :align: center
+Click the :icon:`fa-cog` :guilabel:`(gear)` icon to display options to :guilabel:`Download Excel`
+and :guilabel:`Copy to Documents`.
+
+.. image:: colombia/retencion-fuente-dian.png
    :alt: Certificado de Retención en Fuente report in Odoo Accounting.

content/applications/finance/fiscal_localizations/india.rst

@@ -296,9 +296,8 @@ Workflow
 Send an E-Way bill
 ~~~~~~~~~~~~~~~~~~
 
-You can manually send an E-Way bill by clicking :guilabel:`Send E-Way bill`. To send the E-Way bill
-automatically when an invoice or a bill is confirmed, enable :guilabel:`E-Way bill (IN)` in your
-:ref:`Sales or Purchase journal <india/e-invoicing-journals>`.
+To send an E-Way bill, confirm the customer invoice/vendor bill and click :guilabel:`Send E-Way
+bill`.
 
 .. image:: india/e-waybill-send-button.png
    :alt: Send E-waybill button on invoices
@@ -308,8 +307,8 @@ automatically when an invoice or a bill is confirmed, enable :guilabel:`E-Way bi
 Invoice validation
 ~~~~~~~~~~~~~~~~~~
 
-Once an invoice has been issued and sent via :guilabel:`Send E-Way bill`, a confirmation message is
-displayed.
+Once an invoice/bill has been issued and sent via :guilabel:`Send E-Way bill`, a confirmation
+message is displayed.
 
 .. image:: india/e-waybill-process.png
    :alt: Indian e-Way bill confirmation message
@@ -317,7 +316,7 @@ displayed.
 .. note::
    - You can find the JSON-signed file in the attached files in the chatter.
    - Odoo automatically uploads the JSON-signed file to the government portal after some time. Click
-     :guilabel:`Process now` if you want to process the invoice immediately.
+     :guilabel:`Process now` if you want to process the invoice/bill immediately.
 
 Invoice PDF report
 ~~~~~~~~~~~~~~~~~~
@@ -333,9 +332,9 @@ You can print the invoice PDF report once you have submitted the E-Way bill. The
 E-Way bill cancellation
 ~~~~~~~~~~~~~~~~~~~~~~~
 
-If you want to cancel an E-Way bill, go to the :guilabel:`E-Way bill` tab of the related invoice and
-fill out the :guilabel:`Cancel reason` and :guilabel:`Cancel remarks` fields. Then, click
-:guilabel:`Request EDI Cancellation`.
+If you want to cancel an E-Way bill, go to the :guilabel:`E-Way bill` tab of the related
+invoice/bill and fill out the :guilabel:`Cancel reason` and :guilabel:`Cancel remarks` fields. Then,
+click :guilabel:`Request EDI Cancellation`.
 
 .. important::
    Doing so cancels both the :ref:`e-Invoice <india/e-invoicing>` (if applicable) and the

content/applications/inventory_and_mrp/inventory/shipping_receiving/setup_configuration/ups_credentials.rst

@@ -17,6 +17,13 @@ To set up the UPS shipping connector in Odoo, complete these steps:
    <inventory/shipping_receiving/ups-client-id>`
 #. Set up shipping method in Odoo
 
+.. warning::
+   When configuring a shipping method to use UPS, make sure the :guilabel:`Provider` is set to
+   :guilabel:`UPS`, **NOT** :guilabel:`UPS Legacy`.
+
+   If shipping methods currently exist with the :guilabel:`Provider` set to :guilabel:`UPS Legacy`,
+   archive them, and create new shipping methods using :guilabel:`UPS`, instead.
+
 UPS account setup
 =================
 

content/applications/websites/ecommerce/products/cross_upselling.rst

@@ -2,88 +2,69 @@
 Cross-selling and upselling
 ===========================
 
-Any sales process is an opportunity to maximize revenues. **Cross-selling and upselling** are sales
-techniques consisting in selling customers additional or more expensive products and services than
-what they were originally shopping for. It is a great way to maximize the value of each one of your
-customers.
+:ref:`Cross-selling <ecommerce/cross_selling>` and
+:ref:`upselling <ecommerce/cross_upselling/alternative>` are sales techniques designed to encourage
+customers to purchase additional or higher-priced products and services from your :doc:`catalog`.
 
-**Cross-selling** can be done via **two** features:
-
-- :ref:`Optional products <cross_upselling/optional>` upon **adding to cart**;
-- :ref:`Accessory products <cross_upselling/accessory>` on the **checkout page**.
-
-**Upselling** is only done via :ref:`alternative products <cross_upselling/alternative>` on the
-**product page**.
-
-.. seealso::
-   :doc:`catalog`
+.. _ecommerce/cross_selling:
 
 Cross-selling
 =============
 
-.. _cross_upselling/optional:
+Cross-selling can be achieved by suggesting
+:ref:`optional products <ecommerce/cross_upselling/optional>` when items are added to the cart or by
+recommending :ref:`accessory products <ecommerce/cross_upselling/accessory>` on the checkout page.
+
+.. _ecommerce/cross_upselling/optional:
 
 Optional products
 -----------------
 
-**Optional products** are suggested when customers click :guilabel:`Add to cart`, either from the
-**product page** or **catalog page**. Upon clicking, a pop-up window opens with the
-**optional products** displayed in the :guilabel:`Available Options` section.
+**Optional products** are suggested when the customer selects a product and clicks
+:guilabel:`Add to cart`.
 
-.. image:: cross_upselling/cross_upselling-cart.png
-   :align: center
+To enable **optional products**, go to :menuselection:`Website --> eCommerce --> Products`, select a
+product, go to the :guilabel:`Sales` tab, and enter the products you wish to feature in the
+:guilabel:`Optional Products` field.
+
+.. image:: cross_upselling/add-to-cart.png
    :alt: Optional products cross-selling
 
-To enable **optional products** go to :menuselection:`Website --> eCommerce --> Products`,
-select a product, go to the :guilabel:`Sales` tab, and enter the products you wish to feature in the
-:guilabel:`Optional Products` field. Optional products are **linked** to the product(s) they are set
-up with on the **product template**. They only appear when that product is added to the cart.
-
-.. tip::
-   You can also access the :guilabel:`Sales` tab of the **product template** by selecting a product
-   on your **main shop page** and clicking :guilabel:`Product` in the top-right corner.
-
-.. _cross_upselling/accessory:
+.. _ecommerce/cross_upselling/accessory:
 
 Accessory products
 ------------------
 
-**Accessory products** are displayed in the :guilabel:`Suggested Accessories` section before
-processing to checkout at the :guilabel:`Review Order` step.
-
-.. image:: cross_upselling/cross_upselling-checkout.png
-   :align: center
-   :alt: Suggested accessories at checkout during cart review
+**Accessory products** are showcased in the :guilabel:`Suggested Accessories` section during the
+:guilabel:`Review Order` step, just before proceeding to checkout.
 
 To enable **accessory products**, go to :menuselection:`Website --> eCommerce --> Products`, select
 a product, go to the :guilabel:`Sales` tab, and enter the products you wish to feature in the
-:guilabel:`Accessory Products` field. Suggested accessory products are **linked** to the product(s)
-they are set up with on the **product template**. They only appear when that product is at the
-checkout process review.
+:guilabel:`Accessory Products` field.
+
+.. image:: cross_upselling/accessory-products.png
+   :alt: Suggested accessories at checkout during cart review
+
+.. _ecommerce/cross_upselling/alternative:
 
 Upselling
 =========
 
-.. _cross_upselling/alternative:
-
-Alternative products
---------------------
-
-**Alternative products** are suggested on the **product page** and usually incentivize customers to
-buy a more expensive variant or product than the one they were initially shopping for.
+You can display **alternative products** at the bottom of the product page as an upselling
+technique, encouraging customers to consider a more expensive variant or product than their
+initial choice by presenting appealing alternatives.
 
 .. image:: cross_upselling/cross_upselling-alternative.png
-   :align: center
    :alt: Alternative products on the product page
 
-To enable **alternative products**, go to :menuselection:`Website --> eCommerce --> Products`,
-select a product, go to the :guilabel:`Sales` tab, and enter the products you wish to feature in the
-:guilabel:`Alternative Products` field. Then, go to the related **product page** by clicking
-:guilabel:`Go To Website`, and click :menuselection:`Edit`. Stay on the :guilabel:`Blocks` tab, and
-scroll down to the :guilabel:`Dynamic Content` section. Then, drag and drop the :guilabel:`Products`
-building block anywhere on the **product page**.
+To enable alternative products, navigate to :menuselection:`Website --> eCommerce --> Products`,
+select the desired product, and go to the :guilabel:`Sales` tab. In the
+:guilabel:`Alternative Products` field, add the products you want to feature.
 
-When placed, in :guilabel:`Edit` mode, click the **block** to access various settings for that
-:guilabel:`Products` building block. In the :guilabel:`Filter` field, select :guilabel:`Alternative
-Products`. You can configure several additional settings, such as how many elements are displayed
-(:guilabel:`Fetched Elements`), the :guilabel:`Template` used, etc.
+Click :guilabel:`Go to Website` to view the alternative products displayed at the bottom of the
+product page.
+
+To adjust the settings, click :guilabel:`Edit` and select the related
+:doc:`building block <../../website/web_design/building_blocks>`. In the :guilabel:`Customize`
+tab, scroll to the :guilabel:`Alternative Products` section and modify the settings as needed to
+tailor the display to your preferences.

content/developer/howtos/javascript_client_action.rst

@@ -29,8 +29,9 @@ framework and use services, core components, hooks,...
 
       import { Component } from  "@odoo/owl";
 
-      class MyClientAction extends Component {}
-      MyClientAction.template = "my_module.clientaction";
+      class MyClientAction extends Component {
+          static template = "my_module.clientaction";
+      }
 
       // remember the tag name we put in the first step
       registry.category("actions").add("my_module.MyClientAction", MyClientAction);

content/developer/howtos/javascript_field.rst

@@ -18,8 +18,9 @@ displaying "Late!" in red whenever the checkbox is checked.
       import { BooleanField } from "@web/views/fields/boolean/boolean_field";
       import { Component, xml } from "@odoo/owl";
 
-      class LateOrderBooleanField extends BooleanField {}
-      LateOrderBooleanField.template = "my_module.LateOrderBooleanField";
+      class LateOrderBooleanField extends BooleanField {
+         static template = "my_module.LateOrderBooleanField";
+      }
 
 #. Create the field template.
 
@@ -66,23 +67,20 @@ Assume that we want to create a field that displays a simple text in red.
       import { registry } from "@web/core/registry";
 
       export class MyTextField extends Component {
+         static template = xml`
+            <input t-att-id="props.id" class="text-danger" t-att-value="props.value" onChange.bind="onChange" />
+         `;
+         static props = { ...standardFieldProps };
+         static supportedTypes = ["char"];
 
-          /**
-          * @param {boolean} newValue
-          */
-          onChange(newValue) {
-              this.props.update(newValue);
-          }
+         /**
+         * @param {boolean} newValue
+         */
+         onChange(newValue) {
+            this.props.update(newValue);
+         }
       }
 
-      MyTextField.template = xml`
-          <input t-att-id="props.id" class="text-danger" t-att-value="props.value" onChange.bind="onChange" />
-      `;
-      MyTextField.props = {
-          ...standardFieldProps,
-      };
-      MyTextField.supportedTypes = ["char"];
-
    The imported `standardFieldProps` contains the standard props passed by the `View` such as
    the `update` function to update the value, the `type` of the field in the model, the
    `readonly` boolean, and others.

content/developer/howtos/javascript_view.rst

@@ -20,12 +20,12 @@ can be done in a few steps:
 
       // the controller usually contains the Layout and the renderer.
       class CustomKanbanController extends KanbanController {
+          static template = "my_module.CustomKanbanView";
+
           // Your logic here, override or insert new methods...
           // if you override setup(), don't forget to call super.setup()
       }
 
-      CustomKanbanController.template = "my_module.CustomKanbanView";
-
       export const customKanbanView = {
           ...kanbanView, // contains the default Renderer/Controller/Model
           Controller: CustomKanbanController,
@@ -85,6 +85,9 @@ Creating a new view is an advanced topic. This guide highlight only the essentia
       import { Component, onWillStart, useState} from "@odoo/owl";
 
       export class BeautifulController extends Component {
+          static template = "my_module.View";
+          static components = { Layout };
+
           setup() {
               this.orm = useService("orm");
 
@@ -106,9 +109,6 @@ Creating a new view is an advanced topic. This guide highlight only the essentia
           }
       }
 
-      BeautifulController.template = "my_module.View";
-      BeautifulController.components = { Layout };
-
    The template of the Controller displays the control panel with Layout and also the
    renderer.
 
@@ -133,9 +133,9 @@ Creating a new view is an advanced topic. This guide highlight only the essentia
       :caption: :file:`beautiful_renderer.js`
 
       import { Component } from "@odoo/owl";
-      export class BeautifulRenderer extends Component {}
-
-      BeautifulRenderer.template = "my_module.Renderer";
+      export class BeautifulRenderer extends Component {
+          static template = "my_module.Renderer";
+      }
 
    .. code-block:: xml
       :caption: :file:`beautiful_renderer.xml`

content/developer/reference/frontend/framework_overview.rst

@@ -152,9 +152,10 @@ client can use it. For example, the field registry contains all field components
 
 .. code-block:: javascript
 
+    import { Component } from "@odoo/owl";
     import { registry } from "./core/registry";
 
-    class MyFieldChar extends owl.Component {
+    class MyFieldChar extends Component {
         // some code
     }
 

content/developer/reference/frontend/hooks.rst

@@ -193,18 +193,20 @@ the window is resized/scrolled.
 .. code-block:: javascript
 
     import { usePosition } from "@web/core/position_hook";
+    import { Component, xml } from "@odoo/owl";
+
+    class MyPopover extends Component {
+      static template = xml`
+        <div t-ref="popper">
+          I am positioned through a wonderful hook!
+        </div>
+      `;
 
-    class MyPopover extends owl.Component {
       setup() {
         // Here, the reference is the target props, which is an HTMLElement
         usePosition(this.props.target);
       }
     }
-    MyPopover.template = owl.tags.xml`
-      <div t-ref="popper">
-        I am positioned through a wonderful hook!
-      </div>
-    `;
 
 .. important::
    You should indicate your `popper` element using a `t-ref directive <https://github.com/odoo/owl/blob/master/doc/reference/hooks.md#useref>`_.
@@ -260,11 +262,21 @@ API
 
    .. code-block:: javascript
 
+      import { Component, xml, useRef } from "@odoo/owl";
       import { usePosition } from "@web/core/position_hook";
 
-      class DropMenu extends owl.Component {
+      class DropMenu extends Component {
+        static template = xml`
+          <button t-ref="toggler">Toggle Menu</button>
+          <div t-ref="menu">
+            <t t-slot="default">
+              This is the menu default content.
+            </t>
+          </div>
+        `;
+
         setup() {
-          const toggler = owl.useRef("toggler");
+          const toggler = useRef("toggler");
           usePosition(
             () => toggler.el,
             {
@@ -278,14 +290,6 @@ API
           );
         }
       }
-      DropMenu.template = owl.tags.xml`
-        <button t-ref="toggler">Toggle Menu</button>
-        <div t-ref="menu">
-          <t t-slot="default">
-            This is the menu default content.
-          </t>
-        </div>
-      `;
 
 .. _frontend/hooks/useSpellCheck:
 

content/developer/reference/frontend/javascript_reference.rst

@@ -154,7 +154,6 @@ This is done by using the `patch` utility function:
 
 .. code-block:: javascript
 
-    /** @odoo-module */
     import { Hamster } from "@web/core/hamster"
     import { patch } from "@web/core/utils/patch";
 

content/developer/reference/frontend/owl_components.rst

@@ -29,10 +29,15 @@ can make a simple component in Odoo.
 
 .. code-block:: javascript
 
-    const { useState } = owl.hooks;
-    const { xml } = owl.tags;
+    import { Component, xml, useState } from "@odoo/owl";
 
     class MyComponent extends Component {
+        static template = xml`
+            <div t-on-click="increment">
+                <t t-esc="state.value">
+            </div>
+        `;
+
         setup() {
             this.state = useState({ value: 1 });
         }
@@ -41,10 +46,6 @@ can make a simple component in Odoo.
             this.state.value++;
         }
     }
-    MyComponent.template = xml
-        `<div t-on-click="increment">
-            <t t-esc="state.value">
-        </div>`;
 
 This example shows that Owl is available as a library in the global namespace as
 `owl`: it can simply be used like most libraries in Odoo. Note that we
@@ -67,12 +68,13 @@ Here is how the component above should be defined:
 
 .. code-block:: javascript
 
-    const { useState } = owl.hooks;
+    import { Component, useState } from "@odoo/owl";
 
     class MyComponent extends Component {
+        static template = 'myaddon.MyComponent';
+
         ...
     }
-    MyComponent.template = 'myaddon.MyComponent';
 
 And the template is now located in the corresponding xml file:
 
@@ -768,16 +770,21 @@ Props
 
    .. code-block:: javascript
 
+      import { Component, xml } from "@odoo/owl";
       import { Notebook } from "@web/core/notebook/notebook";
 
-      class MyTemplateComponent extends owl.Component {
-        static template = owl.tags.xml`
+      class MyTemplateComponent extends Component {
+        static template = xml`
           <h1 t-esc="props.title" />
           <p t-esc="props.text" />
         `;
       }
 
-      class MyComponent extends owl.Component {
+      class MyComponent extends Component {
+        static template = xml`
+          <Notebook defaultPage="'page_2'" pages="pages" />
+        `;
+
         get pages() {
           return [
             {
@@ -800,9 +807,6 @@ Props
           ]
         }
       }
-      MyComponent.template = owl.tags.xml`
-        <Notebook defaultPage="'page_2'" pages="pages" />
-      `;
 
   Both examples are shown here:
 
@@ -941,9 +945,18 @@ The shape of a `group` is the following:
 
    .. code-block:: javascript
 
+      import { Component, xml } from "@odoo/owl";
       import { SelectMenu } from "@web/core/select_menu/select_menu";
 
-      class MyComponent extends owl.Component {
+      class MyComponent extends Component {
+        static template = xml`
+          <SelectMenu
+            choices="choices"
+            groups="groups"
+            value="'value_2'"
+          />
+        `;
+
         get choices() {
           return [
               {
@@ -979,30 +992,21 @@ The shape of a `group` is the following:
           ]
         }
       }
-      MyComponent.template = owl.tags.xml`
-        <SelectMenu
-          choices="choices"
-          groups="groups"
-          value="'value_2'"
-        />
-      `;
 
    You can also customize the appearance of the toggler and set a custom template for the choices, using the appropriate component `slot`'s.
 
-   .. code-block:: javascript
+   .. code-block:: xml
 
-      MyComponent.template = owl.tags.xml`
-        <SelectMenu
-          choices="choices"
-          groups="groups"
-          value="'value_2'"
-        >
-          Make a choice!
-          <t t-set-slot="choice" t-slot-scope="choice">
-            <span class="coolClass" t-esc="'👉 ' + choice.data.label + ' 👈'" />
-          </t>
-        </SelectMenu>
-      `;
+      <SelectMenu
+        choices="choices"
+        groups="groups"
+        value="'value_2'"
+      >
+        Make a choice!
+        <t t-set-slot="choice" t-slot-scope="choice">
+          <span class="coolClass" t-esc="'👉 ' + choice.data.label + ' 👈'" />
+        </t>
+      </SelectMenu>
 
    .. image:: owl_components/select_menu.png
       :width: 400 px
@@ -1019,22 +1023,20 @@ The shape of a `group` is the following:
    For more advanced use cases, you can customize the bottom area of the dropdown, using the `bottomArea` slot. Here, we choose to display
    a button with the corresponding value set in the search input.
 
-   .. code-block:: javascript
+   .. code-block:: xml
 
-      MyComponent.template = owl.tags.xml`
-        <SelectMenu
-            choices="choices"
-        >
-            <span class="select_menu_test">Select something</span>
-            <t t-set-slot="bottomArea" t-slot-scope="select">
-                <div t-if="select.data.searchValue">
-                    <button class="btn text-primary" t-on-click="() => this.onCreate(select.data.searchValue)">
-                        Create this article "<i t-esc="select.data.searchValue" />"
-                    </button>
-                </div>
-            </t>
-        </SelectMenu>
-      `;
+      <SelectMenu
+          choices="choices"
+      >
+          <span class="select_menu_test">Select something</span>
+          <t t-set-slot="bottomArea" t-slot-scope="select">
+              <div t-if="select.data.searchValue">
+                  <button class="btn text-primary" t-on-click="() => this.onCreate(select.data.searchValue)">
+                      Create this article "<i t-esc="select.data.searchValue" />"
+                  </button>
+              </div>
+          </t>
+      </SelectMenu>
 
    .. image:: owl_components/select_menu_bottomArea.png
       :width: 400 px
@@ -1098,9 +1100,13 @@ The shape of a `tag` is the following:
 
    .. code-block:: javascript
 
+      import { Component, xml } from "@odoo/owl";
       import { TagsList } from "@web/core/tags_list/tags_list";
 
       class Parent extends Component {
+        static template = xml`<TagsList tags="tags" />`;
+        static components = { TagsList };
+
         setup() {
           this.tags = [{
               id: "tag1",
@@ -1119,8 +1125,6 @@ The shape of a `tag` is the following:
           }];
         }
       }
-      Parent.components = { TagsList };
-      Parent.template = xml`<TagsList tags="tags" />`;
 
    Depending the attributes given to each tag, their appearance and behavior will differ.
 

content/developer/reference/frontend/services.rst

@@ -313,10 +313,10 @@ Let's say we want to add an effect that add a sepia look at the page.
 .. code-block:: javascript
 
   import { registry } from "@web/core/registry";
-  const { Component, tags } = owl;
+  import { Component, xml } from "@odoo/owl";
 
-  class SepiaEffect extends Component {}
-  SepiaEffect.template = tags.xml`
+  class SepiaEffect extends Component {
+    static template = xml`
       <div style="
           position: absolute;
           left: 0;
@@ -326,7 +326,8 @@ Let's say we want to add an effect that add a sepia look at the page.
           pointer-events: none;
           background: rgba(124,87,0, 0.4);
       "></div>
-  `;
+    `;
+  }
 
   export function sepiaEffectProvider(env, params = {}) {
       return {

extensions/odoo_theme/translator.py

@@ -51,8 +51,8 @@ class BootstrapTranslator(HTML5Translator):
 
         # Meta
         self.meta = ['', '']  # HTMLWriter strips out the first two items from Translator.meta
-        self.add_meta('<meta http-equiv="X-UA-Compatible" content="IE=edge">')
-        self.add_meta('<meta name="viewport" content="width=device-width, initial-scale=1">')
+        # self.add_meta('<meta http-equiv="X-UA-Compatible" content="IE=edge">')
+        # self.add_meta('<meta name="viewport" content="width=device-width, initial-scale=1">')
 
         # Body
         self.body = []