[IMP] ecommerce: checkout

taskid-4392415

closes #11635

Signed-off-by: Audrey Vandromme (auva) <[email protected]>

Author: Donapi

content/applications/finance/fiscal_localizations/peru.rst

@@ -921,7 +921,7 @@ Configuration
 After configuring the Peruvian :ref:`electronic invoicing <peru-accounting-settings>` flow, complete
 the following configurations for the **eCommerce** flow:
 
-- :ref:`Client account registration <checkout-sign>`;
+- :ref:`Client account registration <ecommerce/checkout/policy>`;
 - :ref:`Automatic invoice <handling/legal>`;
 - :doc:`../../websites/ecommerce/products`: Set the :guilabel:`Invoicing Policy` to
   :guilabel:`Ordered quantities` and define the desired :guilabel:`Customer taxes`.

content/applications/finance/payment_providers.rst

@@ -367,6 +367,8 @@ enable :guilabel:`Allow Express Checkout`.
 .. note::
    All prices shown on the express checkout payment form always include taxes.
 
+.. _payment_providers/availability:
+
 Availability
 ============
 

content/applications/general/users/portal.rst

@@ -25,6 +25,8 @@ of the following in Odoo:
    Portal users only have read/view access, and will not be able to edit any documents in the
    database.
 
+.. _portal/access:
+
 Provide portal access to customers
 ==================================
 

content/applications/websites/ecommerce/checkout_payment_shipping/cart.rst

@@ -13,6 +13,8 @@ The :guilabel:`Add to Cart` button can be customized in multiple ways. You can:
 .. seealso::
    :doc:`checkout`
 
+.. _ecommerce/cart/action_customization:
+
 'Add to Cart' action customization
 ==================================
 
@@ -41,7 +43,7 @@ of your choice.
 
 .. note::
    Hiding the :guilabel:`Add to Cart` button is often used by B2B eCommerces that need to restrict
-   purchases only to :ref:`customers with an account <checkout-sign>`, but still want to
+   purchases only to :ref:`customers with an account <ecommerce/checkout/policy>`, but still want to
    display an online product catalog for those without.
 
 To do so, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Products` and tick
@@ -78,19 +80,22 @@ and place the building block. Once placed, you have the following options:
    :align: center
    :alt: Customizable 'Add to Cart' button
 
-.. _cart/buy-now:
+.. _ecommerce/cart/buy-now:
 
 'Buy Now' button
 ================
 
-You can enable the 'Buy Now' button to instantly take the customer to **checkout** instead
-of adding the product to the cart. The :guilabel:`Buy Now` button is an *additional* button and
-does not replace the :guilabel:`Add to Cart` button. To enable it, go to
-:menuselection:`Website --> Configuration --> Settings --> Shop - Checkout Process` and tick
-:guilabel:`Buy Now`.
+You can enable the :guilabel:`Buy Now` button to take customers directly to the :ref:`review order
+<ecommerce/checkout/review_order>` step instead of adding the product to the
+cart. This button is an *additional* option and does not replace the :guilabel:`Add to Cart` button.
+To do so, go to :menuselection:`Website --> Configuration --> Settings`, scroll to the
+:guilabel:`Shop—Checkout Process` section, enable :guilabel:`Buy Now`, and :guilabel:`Save`.
+
+.. tip::
+   Alternatively, you can enable the :guilabel:`Buy Now` button directly from a product page by
+   clicking :guilabel:`Edit` and navigating to the :guilabel:`Customize` tab.
 
 .. image:: cart/cart-buy-now.png
-   :align: center
    :alt: Buy Now button
 
 Re-order from portal

content/applications/websites/ecommerce/checkout_payment_shipping/cart/cart-buy-now.png

@@ -2,133 +2,174 @@
 Checkout
 ========
 
-You can customize the **checkout steps**, add more content using the **website builder**, and enable
-additional features such as **express checkout** and **sign in/up at checkout**.
-
-You can use **building blocks** to add content at any step of the checkout process. To do so, from
-any **checkout page**, go to :menuselection:`Edit --> Blocks`, and drag and drop **building blocks**
-to the page.
+Once customers have added their desired products to the cart, they can access it by clicking the
+:icon:`fa-shopping-cart` button in the header to start the checkout process. In Odoo eCommerce, this
+process consists of sequential :ref:`steps <ecommerce/checkout/steps>`, some of which support
+additional features. The related checkout pages can be :ref:`customized
+<ecommerce/checkout/customize_steps>` using the website editor.
+
+.. _ecommerce/checkout/policy:
+
+Checkout policy
+===============
+
+To allow customers to checkout as guests or force them to sign in/create an account, go to
+:menuselection:`Website --> Configuration --> Settings`, scroll down to the
+:guilabel:`Shop - Checkout Process` section, and configure the :guilabel:`Sign in/up at checkout`
+setting. The following options are available:
+
+- :guilabel:`Optional`: Customers can check out as guests and register later via the order
+  confirmation email to track their order.
+- :guilabel:`Disabled (buy as guest)`: Customers can checkout as guests without creating an account.
+- :guilabel:`Mandatory (no guest checkout)`: Customers must sign in or create an account at
+  the :ref:`Review Order <ecommerce/checkout/review_order>` step to complete their purchase.
+
+B2B access management
+---------------------
+
+To restrict checkout to selected B2B customers, follow these steps:
+
+#. Go to :menuselection:`Website --> Configuration --> Settings`, and in the
+   :guilabel:`Shop - Checkout Process` section, enable the
+   :ref:`Mandatory (no guest checkout) <ecommerce/checkout/policy>` option.
+#. Scroll down to the :guilabel:`Privacy` section, go to :guilabel:`Customer Account`, and select
+   :guilabel:`On invitation`.
+#. Go to :menuselection:`Website --> eCommerce --> Customers`, switch to the :guilabel:`List` view,
+   and select the customers you wish to grant access to your
+   :doc:`portal <../../../general/users/portal>`.
+#. Click the :icon:`fa-cog` :guilabel:`Actions` button, then :guilabel:`Grant portal access`.
+#. Review the selected customers in the :guilabel:`Portal Access Management` pop-up and click
+   :guilabel:`Grant Access`.
+
+Once done, the relevant customers receive an email confirming their account creation, including
+instructions on setting a password and activating their account.
 
 .. note::
-   Note that content added through building blocks is **specific** to each step.
+   - You can revoke access or re-invite a customer using the related buttons in the
+     :guilabel:`Portal Access Management` pop-up.
+   - Users can only have one :doc:`portal access <../../../general/users/portal>` per email.
+   - Settings are website-specific, so you could set up a B2C website that allows guest checkout and
+     B2B website with mandatory sign-in.
 
-Checkout steps
-==============
+.. seealso::
+   - :doc:`Customer accounts <../ecommerce_management/customer_accounts>`
+   - :doc:`Portal access <../../../general/users/portal>`
 
-Review order: promo code (and subtotal)
----------------------------------------
+.. _ecommerce/checkout/steps:
 
-If you have enabled :guilabel:`Discounts, Loyalty, & Gift Card` in the settings
-(:menuselection:`Website --> Configuration --> Settings --> Shop - Products`), you can enable the
-:guilabel:`Promo Code` field (:menuselection:`Edit --> Customize`) from any checkout page. Customers
-can then redeem gift cards and promotional codes at the :guilabel:`Review Order` step.
+Checkout steps
+==============
 
-Furthermore, you can display the subtotal with discounts applied by enabling :guilabel:`Show
-Discount in Subtotal`.
+During the checkout process, customers are taken through the following steps:
 
-.. image:: checkout/checkout-subtotal.png
-   :align: center
-   :alt: Subtotal discount
+- :ref:`Review order <ecommerce/checkout/review_order>`
+- :ref:`Delivery <ecommerce/checkout/delivery>`
+- :ref:`Extra info (if enabled) <ecommerce/checkout/extra_step>`
+- :ref:`Payment <ecommerce/checkout/payment>`
+- :ref:`Order confirmation <ecommerce/checkout/order_confirmation>`
 
-Address: B2B fields
--------------------
+.. _ecommerce/checkout/customize_steps:
 
-Optional :guilabel:`TIN/VAT` and :guilabel:`Company Name` fields can be added to the
-:guilabel:`Billing Address` form for B2B customers, at the :guilabel:`Address` step. To add the
-fields, go to :menuselection:`Edit --> Customize` from any checkout page, and enable
-:guilabel:`Show B2B fields`.
+Each step can be customized using the website editor: Click :guilabel:`Edit` to add
+:doc:`building blocks <../../website/web_design/building_blocks>` from the :guilabel:`Blocks` tab or
+open to the :guilabel:`Customize` tab to enable various checkout options.
 
-Request extra info (additional step)
-------------------------------------
+.. note::
+   Content added through building blocks is **specific** to each step.
 
-You can request :guilabel:`Extra Info` from the customer by adding an :guilabel:`Extra Info` step
-between the :guilabel:`Address` and :guilabel:`Confirm Order` steps. To do so, go to
-:menuselection:`Edit --> Customize` from any checkout page, and enable :guilabel:`Extra Step
-Option`.
+.. _ecommerce/checkout/review_order:
 
-.. image:: checkout/checkout-steps.png
-   :align: center
-   :alt: Checkout steps
+Review order
+------------
 
-The :guilabel:`Extra Info` step is an online form linked to the quotation or sales order of the
-customer. The information added during that step can be found on the quotation or sales order of the
-customer from the back end, in the **Sales** app.
+The :guilabel:`Review Order` step allows customers to see the items they added to their cart, adjust
+quantities, or :guilabel:`Remove` products. Information related to the product prices and taxes
+applied are also displayed. Customers can then click the :guilabel:`Checkout` button to continue to
+the :ref:`Delivery <ecommerce/checkout/delivery>` step.
 
-When enabled, you can remove, add, and modify fields of the form by clicking on :guilabel:`Edit` in
-the top-right corner, and then clicking on any of the form's fields. All customization options, as
-well as the :guilabel:`+ Field` button to add new fields, are available at the bottom of the
-:guilabel:`Customize` menu under the :guilabel:`Field` section.
+Open the website editor to :ref:`enable <ecommerce/checkout/customize_steps>` checkout options such
+as:
 
-.. image:: checkout/checkout-form.png
-   :align: center
-   :alt: Online form customization
+- :guilabel:`Suggested Accessories`: to showcase :ref:`accessory products
+  <ecommerce/cross_upselling/accessory>`;
+- :guilabel:`Promo Code`: to allow customers to redeem :ref:`gift cards <ewallet_gift/gift-cards>`
+  or apply :doc:`discount codes <../../../sales/sales/products_prices/loyalty_discount>`;
+- :guilabel:`Add to Wishlist`: To allow signed-in users to remove a product from their cart and add
+  it to their wishlist, go to :menuselection:`Website --> Configuration --> Settings`, scroll to
+  the :guilabel:`Shop - Products` section, and enable :guilabel:`Wishlists`. The :guilabel:`Add to
+  Wishlist` option is then enabled by default in the website editor.
 
-Confirm order: terms and conditions
------------------------------------
+.. note::
+   - If a :doc:`fiscal position </applications/finance/fiscal_localizations>` is detected automatically,
+     the product tax is determined based on the customer's IP address.
+   - If the installed :doc:`payment provider </applications/finance/payment_providers>` supports
+     :ref:`express checkout <payment_providers/express_checkout>`, a dedicated button is displayed,
+     allowing customers to go straight from the cart to the confirmation page without filling out
+     the contact form.
 
-You can ask customers to agree to the :guilabel:`Terms & Conditions` in order to confirm their order
-by enabling :guilabel:`Accept Terms & Conditions` under :menuselection:`Edit --> Customize` on any
-checkout page.
+.. _ecommerce/checkout/delivery:
 
-.. image:: checkout/checkout-terms.png
-   :align: center
-   :alt: Terms and conditions
+Delivery
+--------
 
-Express checkout
-================
+Once they have reviewed their order:
 
-You can enable a :guilabel:`Buy Now` button on products' pages which instantly takes the customer to
-the :guilabel:`Confirm Order` checkout page, instead of adding the product to the cart. To do so, go
-to :menuselection:`Website --> Configuration --> Settings --> Shop - Checkout Process section` and
-tick :guilabel:`Buy Now`. Alternatively, the :guilabel:`Buy Now` button can also be enabled from any
-product's page by going :menuselection:`Edit --> Customize`, in the :guilabel:`Cart` section.
+- Unsigned-in customers are prompted to :guilabel:`Sign in` or enter their
+  :guilabel:`Email address`, along with their delivery address and phone details;
+- Signed-in customers can select the appropriate :guilabel:`Delivery address`.
 
-The button can be found next to the :guilabel:`Add to Cart` button on the product's page.
+They can then :doc:`choose a delivery method <shipping>`, select or enter their :guilabel:`Billing
+Address` (or toggle the :guilabel:`Same as delivery address` switch if the billing and delivery
+addresses are identical), and click :guilabel:`Confirm` to proceed to the next step.
 
-.. image:: checkout/checkout-express.png
-   :align: center
-   :alt: Buy now (express checkout) button
+.. tip::
+   For B2B customers, you can also :ref:`enable <ecommerce/checkout/customize_steps>` optional
+   :guilabel:`VAT` and :guilabel:`Company name` fields by toggling the :guilabel:`Show B2B Fields`
+   option in the website editor.
 
-.. _checkout-sign:
+.. _ecommerce/checkout/extra_step:
 
-Guest and signed-in checkout
-============================
+Extra info
+----------
 
-It is possible to introduce a **checkout policy** under which customers can either checkout as
-**guests** or **signed-in users only**. Customers can also checkout as guest, and **optionally sign
-up later** in order to track their order, if enabled.
+You can add an :guilabel:`Extra Info` step in the checkout process to collect additional
+customer information through an online form, which is then included in the :ref:`sales order
+<handling/sales>`. To do so :ref:`enable <ecommerce/checkout/customize_steps>` the :guilabel:`Extra
+Step` option in the website editor. The form can be :ref:`customized <website/dynamic_content/form>`
+as needed.
 
-To select a policy, go to :menuselection:`Website --> Configuration --> Settings --> Shop - Checkout
-Process`. You can choose between:
+.. tip::
+   Alternatively, go to :menuselection:`Website --> Configuration --> Settings`, scroll to the
+   :guilabel:`Shop - Checkout Process` section, enable :guilabel:`Extra Step During Checkout`, and
+   click :guilabel:`Save`. Click :icon:`fa-arrow-right` :guilabel:`Configure Form` to customize the
+   form.
 
-- :guilabel:`Optional`: allows guests to checkout and later register from the **order confirmation**
-  email to track their order;
-- :guilabel:`Disabled (buy as guest)`: customers can only checkout as guests;
-- :guilabel:`Mandatory (no guest checkout)`: customers can only checkout if they have signed-in.
+.. _ecommerce/checkout/payment:
 
-.. seealso::
-   - :doc:`../ecommerce_management/customer_accounts`
-   - :doc:`/applications/general/users/portal`
+Payment
+-------
 
-B2B access restriction
-----------------------
+At the :guilabel:`Payment` step, customers :guilabel:`Choose a payment method`, enter their
+payment details, and click :guilabel:`Pay now`.
 
-If you wish to restrict checkout only to **selected B2B customers**, enable :guilabel:`Mandatory (no
-guest checkout)` and go to :menuselection:`Website --> eCommerce --> Customers`. Select the customer
-you wish to **grant access to**, click :menuselection:`Action --> Grant portal access`, and click
-:guilabel:`Grant Access`.
+You can require customers to agree to your :doc:`terms and conditions
+</applications/finance/accounting/customer_invoices/terms_conditions>` before payment. To
+:ref:`enable <ecommerce/checkout/customize_steps>` this option, go to the website editor and toggle
+the :guilabel:`Accept Terms & Conditions` feature.
 
 .. tip::
-   Settings are **website-specific**, which means you can set up a B2C website allowing **guest**
-   checkout, and another for B2B customers with **mandatory sign-in**.
+   Enable the :ref:`developer mode <developer-mode>` and click the :icon:`fa-bug` :guilabel:`bug`
+   icon to display an :ref:`availability <payment_providers/availability>` report for payment
+   providers and payment methods, which helps diagnose potential availability issues on the payment
+   form.
 
-.. note::
-   Users can only have one portal access per **email**. They *cannot* be granted access to two
-   different portals with the same **email address**.
+.. _ecommerce/checkout/order_confirmation:
+
+Order confirmation
+------------------
 
-Shared customer accounts
-------------------------
+The final step of the checkout process is the :guilabel:`Order confirmation`, which provides a
+summary of the customer's purchase details.
 
-If you enable :guilabel:`Shared Customer Accounts` under :menuselection:`Website --> Configuration
---> Settings --> Privacy section`, you can allow or disallow access to *all* websites for one same
-account.
+.. seealso::
+   :doc:`Order handling <../../ecommerce/ecommerce_management/order_handling>`

content/applications/websites/ecommerce/checkout_payment_shipping/checkout.rst

@@ -13,8 +13,8 @@ From there, customers can access their :guilabel:`quotations`, :guilabel:`orders
    :alt: Customer account log-in
 
 .. note::
-   Customers can only have an account if the :ref:`sign in/up at checkout <checkout-sign>` option
-   allows for accounts creation.
+   Customers can only have an account if the
+   :ref:`sign in/up at checkout <ecommerce/checkout/policy>` option allows for account creation.
 
 .. tip::
    Similarly to the rest of the website, the customer account page can be customized with **content

content/applications/websites/ecommerce/checkout_payment_shipping/checkout/checkout-express.png

@@ -121,6 +121,8 @@ To customize the layout of the main :guilabel:`Shop` page or modify its content,
     :icon:`fa-shopping-cart` (:guilabel:`Add to cart`) icon on each product's image, which takes the
     customer to the checkout page.
 
+.. _ecommerce/products/wishlist:
+
   - Select the :icon:`fa-heart-o` (:guilabel:`Wishlist`) option to display an
     :icon:`fa-shopping-cart` (:guilabel:`Add to wishlist`) icon on each product's image allowing
     logged-in customers to save products to a wishlist.

content/applications/websites/ecommerce/checkout_payment_shipping/checkout/checkout-form.png

@@ -6,6 +6,12 @@ The eCommerce catalog is the equivalent of your physical store shelves: it allow
 what you have to offer. Clear categories, available options, sorting, and navigation threads help
 you structure it efficiently.
 
+.. tip::
+   Go to :menuselection:`Website --> Configuration --> Settings`, scroll down to the
+   :guilabel:`Privacy` section to restrict :guilabel:`Ecommerce Access` to logged-in users and/or
+   enable :guilabel:`Shared Customer Accounts` to allow access to all websites with a single
+   account.
+
 Categorize the product catalog
 ==============================