From fde60bf9676ebb6933f0858d99f9aa6f108d49c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cmoda=E2=80=9D?= <moda@odoo.com>
Date: Mon, 9 Oct 2023 12:59:30 +0200
Subject: [PATCH] [IMP] pos_self_order,pos_online_payment_self_order: improve
 success page

Before, when ordering on the kiosk/mobile, no confirmation page was
displayed, only a notification.

Now, a confirmation page displays the tracking number, the amount paid
and, if present, the customer's table...

Part-of: odoo/odoo#138013
---
 .../components/order_widget/order_widget.js   |  2 +-
 .../static/src/pages/cart_page/cart_page.js   | 34 +++++---
 .../static/src/self_order_service.js          | 16 +++-
 .../views/res_config_settings_views.xml       |  2 +-
 .../data/pos_restaurant_data.xml              |  2 +
 .../demo/pos_restaurant_demo.xml              |  2 +
 addons/pos_self_order/models/pos_config.py    |  6 +-
 .../pos_self_order/models/pos_restaurant.py   |  6 +-
 .../components/cancel_popup/cancel_popup.js   |  5 ++
 .../components/cancel_popup/cancel_popup.xml  |  3 +-
 .../components/order_widget/order_widget.js   | 32 +++++++
 .../components/order_widget/order_widget.xml  |  6 +-
 .../components/popup_table/popup_table.xml    |  4 +-
 .../src/app/pages/cart_page/cart_page.js      | 12 +--
 .../src/app/pages/cart_page/cart_page.xml     |  6 +-
 .../confirmation_page/confirmation_page.js    | 87 +++++++++++++++++++
 .../confirmation_page.scss}                   |  0
 .../confirmation_page/confirmation_page.xml   | 33 +++++++
 .../app/pages/landing_page/landing_page.js    | 23 +++++
 .../app/pages/landing_page/landing_page.xml   | 11 ++-
 .../order_history_page/order_history_page.js  |  6 +-
 .../order_history_page/order_history_page.xml |  8 +-
 .../app/pages/payment_page/payment_page.js    | 12 ++-
 .../app/pages/payment_page/payment_page.xml   | 20 ++---
 .../payment_success_page.js                   | 44 ----------
 .../payment_success_page.xml                  | 31 -------
 .../product_list_page/product_list_page.xml   |  4 +-
 .../static/src/app/self_order_bus_service.js  |  5 +-
 .../static/src/app/self_order_index.js        |  4 +-
 .../static/src/app/self_order_index.xml       |  4 +-
 .../static/src/app/self_order_service.js      |  6 +-
 31 files changed, 283 insertions(+), 153 deletions(-)
 create mode 100644 addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.js
 rename addons/pos_self_order/static/src/app/pages/{payment_success_page/payment_success_page.scss => confirmation_page/confirmation_page.scss} (100%)
 create mode 100644 addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.xml
 delete mode 100644 addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.js
 delete mode 100644 addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.xml

diff --git a/addons/pos_online_payment_self_order/static/src/components/order_widget/order_widget.js b/addons/pos_online_payment_self_order/static/src/components/order_widget/order_widget.js
index 1f4c6634071..f71899542e5 100644
--- a/addons/pos_online_payment_self_order/static/src/components/order_widget/order_widget.js
+++ b/addons/pos_online_payment_self_order/static/src/components/order_widget/order_widget.js
@@ -31,7 +31,7 @@ patch(OrderWidget.prototype, {
                 } else {
                     return {
                         label: _t("Pay at cashier"),
-                        disabled: this.router.activeSlot !== "product_list",
+                        disabled: false,
                     };
                 }
             }
diff --git a/addons/pos_online_payment_self_order/static/src/pages/cart_page/cart_page.js b/addons/pos_online_payment_self_order/static/src/pages/cart_page/cart_page.js
index d91a315a7dd..dccd01542b4 100644
--- a/addons/pos_online_payment_self_order/static/src/pages/cart_page/cart_page.js
+++ b/addons/pos_online_payment_self_order/static/src/pages/cart_page/cart_page.js
@@ -19,26 +19,35 @@ patch(CartPage.prototype, {
         const service = this.selfOrder.config.self_ordering_service_mode;
         const takeAway = this.selfOrder.currentOrder.take_away;
 
+        if (this.sendInProgress) {
+            return;
+        }
+
         if (!this.selfOrder.table && service === "table" && !takeAway) {
             this.state.selectTable = true;
             return;
         }
 
-        if (mode === "meal" && isOnlinePayment) {
+        if (mode === "meal" && isOnlinePayment && order.isSavedOnServer) {
             if (!order) {
                 this.selfOrder.notification.add(_t("The current order is invalid."), {
                     type: "danger",
                 });
                 return;
             }
-            if (!order.isSavedOnServer) {
-                this.sendInProgress = true;
-                await this.selfOrder.sendDraftOrderToServer();
-                this.sendInProgress = false;
-            } else {
-                this.checkAndOpenPaymentPage(order);
-            }
+
+            this.checkAndOpenPaymentPage(order);
+        } else if (mode === "meal" && !isOnlinePayment && order.isSavedOnServer) {
+            this.router.navigate("confirmation", {
+                orderAccessToken: order.access_token,
+                screenMode: "pay",
+            });
+            return;
         } else if (mode === "each") {
+            this.sendInProgress = true;
+            const order = await this.selfOrder.sendDraftOrderToServer();
+            this.sendInProgress = false;
+
             this.checkAndOpenPaymentPage(order);
         } else {
             return super.pay(...arguments);
@@ -50,10 +59,11 @@ patch(CartPage.prototype, {
         if (order) {
             if (order.state === "draft") {
                 if (!isOnlinePayment) {
-                    this.selfOrder.notification.add(
-                        _t("The current order cannot be paid (no online payment method)."),
-                        { type: "danger" }
-                    );
+                    // if no payment method is available -> pay at cashier
+                    this.router.navigate("confirmation", {
+                        orderAccessToken: order.access_token,
+                        screenMode: "pay",
+                    });
                     return;
                 }
 
diff --git a/addons/pos_online_payment_self_order/static/src/self_order_service.js b/addons/pos_online_payment_self_order/static/src/self_order_service.js
index de181bd44b7..dba94ef2128 100644
--- a/addons/pos_online_payment_self_order/static/src/self_order_service.js
+++ b/addons/pos_online_payment_self_order/static/src/self_order_service.js
@@ -10,12 +10,20 @@ patch(SelfOrder.prototype, {
         pos_config_id: order_pos_config_id,
     }) {
         const baseUrl = session.base_url;
-        let exitRouteUrl =
-            baseUrl + "/pos-self/" + order_pos_config_id + "?access_token=" + this.access_token;
+        const order = this.currentOrder;
         const tableIdentifier = this.table?.identifier;
-        if (tableIdentifier) {
-            exitRouteUrl += "&table_identifier=" + tableIdentifier;
+        let exitRouteUrl = `${baseUrl}/pos-self/${order_pos_config_id}`;
+
+        if (this.config.self_ordering_pay_after === "each") {
+            exitRouteUrl += `/confirmation/${order.access_token}/order`;
         }
+
+        exitRouteUrl += `?access_token=${this.access_token}`;
+
+        if (tableIdentifier) {
+            exitRouteUrl += `&table_identifier=${tableIdentifier}`;
+        }
+
         const exitRoute = encodeURIComponent(exitRouteUrl);
         window.open(
             baseUrl +
diff --git a/addons/pos_online_payment_self_order/views/res_config_settings_views.xml b/addons/pos_online_payment_self_order/views/res_config_settings_views.xml
index e3ddabc5b1d..99d4e6d3846 100644
--- a/addons/pos_online_payment_self_order/views/res_config_settings_views.xml
+++ b/addons/pos_online_payment_self_order/views/res_config_settings_views.xml
@@ -8,7 +8,7 @@
             <xpath expr="//div[@id='self-payment-after']" position="after">
                 <div class="content-group row" invisible="not pos_self_ordering_mode == 'mobile'">
                     <label string="Online Payment" for="pos_self_order_online_payment_method_id" class="col-lg-4" />
-                    <field name="pos_self_order_online_payment_method_id" placeholder="Select a payment method" />
+                    <field name="pos_self_order_online_payment_method_id" placeholder="Pay at cashier if empty" />
                 </div>
                 <div class="d-flex flex-column align-items-start w-50" invisible="not pos_self_ordering_mode == 'mobile' and not pos_self_ordering_pay_after == 'each'">
                     <button name="%(point_of_sale.action_payment_methods_tree)d" icon="oi-arrow-right" type="action" string="Payment Methods" class="btn-link" />
diff --git a/addons/pos_self_order/data/pos_restaurant_data.xml b/addons/pos_self_order/data/pos_restaurant_data.xml
index cbd1512d944..44476bbc4c5 100644
--- a/addons/pos_self_order/data/pos_restaurant_data.xml
+++ b/addons/pos_self_order/data/pos_restaurant_data.xml
@@ -3,6 +3,8 @@
     <data noupdate="1">
         <record id="pos_restaurant.pos_config_main_restaurant" model="pos.config">
             <field name="self_ordering_mode">mobile</field>
+            <field name="self_ordering_service_mode">table</field>
+            <field name="self_ordering_pay_after">meal</field>
         </record>
     </data>
 </odoo>
diff --git a/addons/pos_self_order/demo/pos_restaurant_demo.xml b/addons/pos_self_order/demo/pos_restaurant_demo.xml
index cbd1512d944..44476bbc4c5 100644
--- a/addons/pos_self_order/demo/pos_restaurant_demo.xml
+++ b/addons/pos_self_order/demo/pos_restaurant_demo.xml
@@ -3,6 +3,8 @@
     <data noupdate="1">
         <record id="pos_restaurant.pos_config_main_restaurant" model="pos.config">
             <field name="self_ordering_mode">mobile</field>
+            <field name="self_ordering_service_mode">table</field>
+            <field name="self_ordering_pay_after">meal</field>
         </record>
     </data>
 </odoo>
diff --git a/addons/pos_self_order/models/pos_config.py b/addons/pos_self_order/models/pos_config.py
index 18601965a67..43a5189ab0a 100644
--- a/addons/pos_self_order/models/pos_config.py
+++ b/addons/pos_self_order/models/pos_config.py
@@ -153,6 +153,9 @@ class PosConfig(models.Model):
             if (not vals.get('module_pos_restaurant') and not record.module_pos_restaurant) and vals.get('self_ordering_mode') == 'mobile':
                 vals['self_ordering_pay_after'] = 'each'
 
+            if (vals.get('self_ordering_service_mode') == 'counter' or record.self_ordering_service_mode == 'counter') and vals.get('self_ordering_mode') == 'mobile':
+                vals['self_ordering_pay_after'] = 'each'
+
             if 'self_ordering_image_home_ids' in vals and self.env.context.get('from_settings_view'):
                 linked_ids = set(record.self_ordering_image_home_ids.ids)
 
@@ -172,9 +175,6 @@ class PosConfig(models.Model):
 
             if vals.get('self_ordering_mode') == 'mobile' and vals.get('self_ordering_pay_after') == 'meal':
                 vals['self_ordering_service_mode'] = 'table'
-
-            if (vals.get('self_ordering_service_mode') == 'counter' or record.self_ordering_service_mode == 'counter') and vals.get('self_ordering_mode') == 'mobile':
-                vals['self_ordering_pay_after'] = 'each'
         return super().write(vals)
 
     @api.depends("module_pos_restaurant")
diff --git a/addons/pos_self_order/models/pos_restaurant.py b/addons/pos_self_order/models/pos_restaurant.py
index ed195c428e9..2c1b0bb0126 100644
--- a/addons/pos_self_order/models/pos_restaurant.py
+++ b/addons/pos_self_order/models/pos_restaurant.py
@@ -20,7 +20,11 @@ class RestaurantTable(models.Model):
 
     def _get_self_order_data(self) -> Dict:
         self.ensure_one()
-        return self.read(["name", "identifier"])[0]
+        return {
+            'name': self.name,
+            'identifier': self.identifier,
+            'floor_name': self.floor_id.name
+        }
 
     @staticmethod
     def _get_identifier():
diff --git a/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.js b/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.js
index b951667b6b7..16dc31b94da 100644
--- a/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.js
+++ b/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.js
@@ -1,10 +1,15 @@
 /** @odoo-module */
 
 import { Component } from "@odoo/owl";
+import { useSelfOrder } from "@pos_self_order/app/self_order_service";
 
 export class CancelPopup extends Component {
     static template = "pos_self_order.CancelPopup";
 
+    setup() {
+        this.selfOrder = useSelfOrder();
+    }
+
     confirm() {
         this.props.close();
         this.props.confirm();
diff --git a/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml b/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml
index 2fd880758f1..d7b896dd94b 100644
--- a/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml
+++ b/addons/pos_self_order/static/src/app/components/cancel_popup/cancel_popup.xml
@@ -8,7 +8,8 @@
                         <div class="modal-body p-5">
                             <div class="pb-5 fs-3 text-center">
                                 Are you sure you want to cancel this order? <br/>
-                                <span class="text-muted fs-4">All the items will be removed from the cart.</span>
+                                <span t-if="selfOrder.config.self_ordering_mode === 'kiosk'" class="text-muted fs-4">All the items will be removed from the cart.</span>
+                                <span t-else="" class="text-muted fs-4">Any items already sent will not be canceled</span>
                             </div>
                             <div class="d-flex align-items-center justify-content-center w-100 gap-3">
                                 <button type="button" class="btn btn-primary btn-lg popup_button" t-on-click="() => this.confirm()">Cancel Order</button>
diff --git a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js
index 8e7a6b16bbc..80c599b9f58 100644
--- a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js
+++ b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.js
@@ -90,4 +90,36 @@ export class OrderWidget extends Component {
             }
         );
     }
+
+    get leftButtonName() {
+        const order = this.selfOrder.currentOrder;
+        const back =
+            order.isSavedOnServer || this.router.activeSlot === "cart" || order.lines.length === 0;
+
+        return {
+            name: back ? _t("Back") : _t("Cancel"),
+            icon: back ? "fa fa-arrow-left" : "btn-close",
+        };
+    }
+
+    leftButton() {
+        const order = this.selfOrder.currentOrder;
+
+        if (
+            order.lines.length === 0 ||
+            order.isSavedOnServer ||
+            this.router.activeSlot === "cart"
+        ) {
+            this.router.back();
+            return;
+        } else {
+            this.dialog.add(CancelPopup, {
+                title: _t("Cancel order"),
+                confirm: () => {
+                    this.selfOrder.cancelOrder();
+                    this.router.navigate("default");
+                },
+            });
+        }
+    }
 }
diff --git a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml
index 6344885ceaa..1f1d29f7f4f 100644
--- a/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml
+++ b/addons/pos_self_order/static/src/app/components/order_widget/order_widget.xml
@@ -6,12 +6,10 @@
             t-att-class="{
                 'shadow-lg border-top' : !props.removeTopClasses
             }">
-            <button t-attf-class="btn btn-secondary btn-lg btn-close h-auto w-auto opacity-75 px-4 d-sm-none {{ cancelAvailable ? '' : 'd-none' }}" t-on-click="cancel">
+            <button t-attf-class="btn btn-secondary btn-lg h-auto w-auto opacity-75 px-4 d-sm-none" t-att-class="leftButtonName.icon" t-on-click="leftButton">
                 <span class="px-1"/><!-- Spacer -->
             </button>
-            <button t-attf-class="btn btn-secondary btn-lg d-none d-sm-inline text-nowrap {{ cancelAvailable ? '' : 'd-none' }}" t-on-click="cancel">
-                Cancel Order
-            </button>
+            <button t-attf-class="btn btn-secondary btn-lg d-none d-sm-inline text-nowrap" t-on-click="leftButton" t-esc="leftButtonName.name" />
             <div class="d-flex align-items-center flex-grow-1 w-100 w-md-auto">
                 <div class="to-order">
                     <span t-if="!this.selfOrder.currentOrder.isSavedOnServer">To Order</span>
diff --git a/addons/pos_self_order/static/src/app/components/popup_table/popup_table.xml b/addons/pos_self_order/static/src/app/components/popup_table/popup_table.xml
index bcca5c67f7b..a6149a3b339 100644
--- a/addons/pos_self_order/static/src/app/components/popup_table/popup_table.xml
+++ b/addons/pos_self_order/static/src/app/components/popup_table/popup_table.xml
@@ -5,8 +5,8 @@
         <div class="self_order_popup_table shadow-lg position-absolute fixed-bottom bg-white w-100 p-4 flex-column d-flex justify-content-between">
             <div class="mb-5 d-flex justify-content-between align-items-start">
                 <div>
-                    <h3>Confirm your table</h3>
-                    <span>to place the order</span>
+                    <h3>Table detective time!</h3>
+                    <span>Could you please confirm your table number?<br/>Thanks a lot!</span>
                 </div>
                 <button class="btn btn-close" t-on-click="close"/>
             </div>
diff --git a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js
index 18ad53fa73f..1cc1841fc70 100644
--- a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js
+++ b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.js
@@ -71,11 +71,14 @@ export class CartPage extends Component {
         if (mode === "meal" && !order.isSavedOnServer) {
             this.sendInProgress = true;
             await this.selfOrder.sendDraftOrderToServer();
-            this.sendInProgress = false;
-
             if (type !== "kiosk") {
+                this.router.navigate("confirmation", {
+                    orderAccessToken: order.access_token,
+                    screenMode: "order",
+                });
                 return;
             }
+            this.sendInProgress = false;
         }
         if (orderingMode === "table" && !takeAway) {
             if (type === "kiosk") {
@@ -95,10 +98,7 @@ export class CartPage extends Component {
         }
 
         this.state.selectTable = false;
-
-        if (this.selfOrder.config.self_ordering_pay_after === "each") {
-            this.pay();
-        }
+        this.pay();
     }
 
     getChildLines(line) {
diff --git a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml
index 2b0ddd43321..534a055721b 100644
--- a/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml
@@ -2,12 +2,8 @@
 <templates id="template" xml:space="preserve">
     <t t-name="pos_self_order.CartPage">
         <div class="order-cart-content d-flex flex-column flex-grow-1 justify-content-between overflow-y-auto">
-            <div class="d-flex align-items-center flex-shrink-0 justify-content-between gap-3 px-3 py-2 w-100 bg-view border-bottom overflow-x-auto z-index-1">
-                <button class="btn btn-secondary btn-lg px-3 text-nowrap" t-on-click="() => this.router.back()">
-                    <i class="oi oi-chevron-left" aria-hidden="true"/><span class="ms-2 d-none d-md-inline">Back</span>
-                </button>
+            <div class="d-flex align-items-center flex-shrink-0 justify-content-between gap-3 p-3 w-100 bg-view border-bottom overflow-x-auto z-index-1">
                 <h1 class="mb-0 fw-bolder text-nowrap">Your Order</h1>
-                <span class="d-none d-md-inline px-5"/> <!-- Spacer -->
             </div>
             <div class="order-content flex-grow-1 overflow-auto pb-4">
                 <t t-foreach="linesToDisplay" t-as="line" t-key="line.uuid">
diff --git a/addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.js b/addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.js
new file mode 100644
index 00000000000..fb709688ad1
--- /dev/null
+++ b/addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.js
@@ -0,0 +1,87 @@
+/** @odoo-module */
+
+import { Component, onMounted, useState } from "@odoo/owl";
+import { useSelfOrder } from "@pos_self_order/app/self_order_service";
+import { cookie } from "@web/core/browser/cookie";
+import { useService } from "@web/core/utils/hooks";
+
+export class ConfirmationPage extends Component {
+    static template = "pos_self_order.ConfirmationPage";
+    static props = ["orderAccessToken", "screenMode"];
+
+    setup() {
+        this.selfOrder = useSelfOrder();
+        this.router = useService("router");
+        this.confirmedOrder = {};
+        this.changeToDisplay = [];
+        this.state = useState({
+            onReload: false,
+            payment: this.props.screenMode === "pay",
+        });
+
+        onMounted(() => {
+            if (this.selfOrder.config.self_ordering_mode === "kiosk") {
+                setTimeout(() => {
+                    this.setDefautLanguage();
+                }, 5000);
+            }
+        });
+
+        this.initOrder();
+    }
+
+    async initOrder() {
+        const order = this.selfOrder.orders.find(
+            (o) => o.access_token === this.props.orderAccessToken
+        );
+
+        const paymentMethods = this.selfOrder.pos_payment_methods.filter(
+            (p) => p.is_online_payment
+        );
+
+        if (
+            !order ||
+            (paymentMethods.length > 0 &&
+                this.selfOrder.config.self_ordering_mode === "mobile" &&
+                this.selfOrder.config.self_ordering_pay_after === "each" &&
+                order.state !== "paid")
+        ) {
+            this.router.navigate("default");
+            return;
+        }
+
+        this.confirmedOrder = order;
+    }
+
+    backToHome() {
+        if (!this.setDefautLanguage()) {
+            this.router.navigate("default");
+        }
+    }
+
+    setDefautLanguage() {
+        const defaultLanguage = this.selfOrder.config.self_ordering_default_language_id;
+
+        if (
+            this.selfOrder.currentLanguage.code !== defaultLanguage.code &&
+            !this.state.onReload &&
+            this.selfOrder.config.self_ordering_mode === "kiosk"
+        ) {
+            cookie.set("frontend_lang", defaultLanguage.code);
+            window.location.reload();
+            this.state.onReload = true;
+            return true;
+        }
+
+        return this.state.onReload;
+    }
+
+    get showPayMessage() {
+        const config = this.selfOrder.config;
+        const paymentMethods = this.selfOrder.pos_payment_methods.filter((p) =>
+            config.self_ordering_mode === "mobile" ? p.is_online_payment : !p.is_online_payment
+        );
+
+        return paymentMethods.length === 0 && config.self_ordering_pay_after === "each";
+    }
+}
diff --git a/addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.scss b/addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.scss
similarity index 100%
rename from addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.scss
rename to addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.scss
diff --git a/addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.xml b/addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.xml
new file mode 100644
index 00000000000..085e7ce1d06
--- /dev/null
+++ b/addons/pos_self_order/static/src/app/pages/confirmation_page/confirmation_page.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="pos_self_order.ConfirmationPage">
+        <div t-if="this.state.onReload" class="self_order_success_loader position-absolute vh-100 w-100 d-flex justify-content-center align-items-center opacity-50 bg-dark">
+            <div class="page-loader d-flex justify-content-center align-items-center">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        </div>
+        <div class="d-flex justify-content-center align-items-center flex-column h-100 px-3 text-center">
+            <h1 t-if="state.payment and selfOrder.config.self_ordering_pay_after !== 'each'" class="mb-4">Hope you enjoyed your meal!</h1>
+            <h1 t-else="" class="mb-4">We're preparing your order!</h1>
+            <h3 t-if="state.payment" class="mt-3 text-muted">Pay at the cashier <t t-esc="selfOrder.formatMonetary(confirmedOrder.amount_total)" /></h3>
+            <div class="d-inline-flex flex-column border rounded py-4 px-5 bg-view mb-3">
+                <span class="fs-2 text-muted">Your tracking number</span>
+                <span class="number lh-1" t-esc="confirmedOrder.trackingNumber" />
+            </div>
+            <h3 t-if="selfOrder.table.name || confirmedOrder.table_stand_number" class="text-muted mb-3">
+                Service at table
+                <t t-if="selfOrder.config.self_ordering_mode === 'mobile'" t-esc="selfOrder.table.name + ' (' + selfOrder.table.floor_name + ')'" />
+                <t t-else="" t-esc="selfOrder.tablePadNumber" />
+            </h3>
+            <h3 t-else="">Order to pick-up at the counter</h3>
+        </div>
+        <div class="px-3 py-4 text-center">
+            <button class="btn btn-primary btn-lg" t-on-click="backToHome">
+                <t t-if="this.selfOrder.config.self_ordering_mode === 'kiosk'">Close</t>
+                <t t-else="">Ok</t>
+            </button>
+        </div>
+    </t>
+</templates>
diff --git a/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js b/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js
index e16cb338198..eba2c8c48c5 100644
--- a/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js
+++ b/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.js
@@ -57,6 +57,29 @@ export class LandingPage extends Component {
         return "";
     }
 
+    get draftOrder() {
+        return this.selfOrder.orders.filter((o) => o.access_token && o.state === "draft");
+    }
+
+    hideBtn(link) {
+        const arrayLink = link.url.split("/");
+        const routeName = arrayLink[arrayLink.length - 1];
+
+        if (routeName !== "products") {
+            return;
+        }
+
+        return (
+            routeName === "products" &&
+            this.draftOrder.length > 0 &&
+            this.selfOrder.config.self_ordering_pay_after === "each"
+        );
+    }
+
+    clickMyOrder() {
+        this.router.navigate(this.draftOrder.length > 0 ? "cart" : "orderHistory");
+    }
+
     clickCustomLink(link) {
         const arrayLink = link.url.split("/");
         const routeName = arrayLink[arrayLink.length - 1];
diff --git a/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.xml b/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.xml
index dc514e8f6fb..cb1d10f4f61 100644
--- a/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/landing_page/landing_page.xml
@@ -22,9 +22,14 @@
                 <t t-if="showMyOrderBtn()">
                     <a
                         type="button"
-                        t-on-click="() => this.router.navigate('orderHistory')"
+                        t-on-click="clickMyOrder"
                         class="btn btn-lg btn-primary">
-                        My Orders
+                        <t t-if="draftOrder.length > 0">
+                            My Order
+                        </t>
+                        <t t-else="">
+                            My Orders
+                        </t>
                     </a>
                 </t>
             </div>
@@ -32,7 +37,7 @@
                 <t t-foreach="selfOrder.custom_links" t-as="link" t-key="link.id">
                     <a type="button"
                         t-on-click="(event) => this.clickCustomLink(link)"
-                        t-attf-class="btn btn-lg btn-{{link.style}}">
+                        t-attf-class="btn btn-lg btn-{{link.style}} {{ hideBtn(link) ? 'd-none' : ''}}">
                         <t t-esc="link.name"/>
                     </a>
                 </t>
diff --git a/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.js b/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.js
index cf2c14f4226..aefa913c88a 100644
--- a/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.js
+++ b/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.js
@@ -49,6 +49,10 @@ export class OrdersHistoryPage extends Component {
         }
     }
 
+    getOrderState(state) {
+        return state === "draft" ? _t("Current") : state;
+    }
+
     getNameAndDescription(line) {
         const fullName = line.full_product_name;
         const regex = /\(([^()]+)\)[^(]*$/;
@@ -66,7 +70,7 @@ export class OrdersHistoryPage extends Component {
     editOrder(order) {
         if (order.state === "draft") {
             this.selfOrder.editedOrder = order;
-            this.router.navigate("productList");
+            this.router.navigate("cart");
         }
     }
 
diff --git a/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml b/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml
index 4a8d973af56..fda5956c41b 100644
--- a/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml
@@ -15,15 +15,17 @@
                         <div class="o_so_order d-flex flex-column flex-grow-1">
                             <div class="o_so_order_header p-3 bg-white" t-on-click="() => this.editOrder(order)">
                                 <div class="d-flex align-items-center justify-content-between">
-                                    <h6 class="m-0"
-                                        t-esc="order.pos_reference"/>
+                                    <div class="d-flex flex-column">
+                                        <h6 class="m-0" t-esc="order.pos_reference"/>
+                                        <span class="text-muted">Tracking number: <t t-esc="order.tracking_number" /></span>
+                                    </div>
                                     <span
                                         class="badge py-2 rounded-pill text-capitalize"
                                         t-att-class="{
                                             'text-bg-success': order.state == 'paid',
                                             'text-bg-primary': order.state != 'paid'
                                         }"
-                                        t-esc="order.state"/>
+                                        t-esc="getOrderState(order.state)"/>
                                 </div>
                                 <p class="small m-0 fst-italic text-muted"
                                     t-esc="order.date"/>
diff --git a/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.js b/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.js
index edef3ad0f82..e43e4b26bd7 100644
--- a/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.js
+++ b/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.js
@@ -23,19 +23,17 @@ export class PaymentPage extends Component {
         });
 
         onWillStart(async () => {
-            if (this.selfOrder.currentOrder.lines.length === 0) {
-                this.router.navigate("default");
-                return;
-            }
-
             const type = this.selfOrder.config.self_ordering_mode;
             const paymentMethods = this.selfOrder.pos_payment_methods.filter(
                 (p) => !p.is_online_payment
             );
 
             if (paymentMethods.length === 0 && type === "kiosk") {
-                this.selfOrder.sendDraftOrderToServer();
-                this.router.navigate("payment_success");
+                await this.selfOrder.sendDraftOrderToServer();
+                this.router.navigate("confirmation", {
+                    orderAccessToken: this.selfOrder.currentOrder.access_token,
+                    screenMode: "pay",
+                });
             } else if (paymentMethods.length === 1 && type === "kiosk") {
                 this.selectMethod(this.selfOrder.pos_payment_methods[0].id);
             }
diff --git a/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml b/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml
index 0f283766ee2..5395224b7fc 100644
--- a/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/payment_page/payment_page.xml
@@ -16,21 +16,15 @@
                 </div>
             </div>
         </div>
-        <div t-else="" class="h-100">
-            <div class="d-flex flex-column gap-5 justify-content-center align-items-center h-100">
-                <t t-if="!this.selfOrder.paymentError">
-                    <h1 class="text-center">Follow instructions<br/>on the terminal</h1>
-                    <i class="fa fa-credit-card-alt fs-1" aria-hidden="true"></i>
-                </t>
-                <t t-else="">
-                    <h1 class="text-center">The payment has failed<br/>please retry</h1>
-                    <i class="fa fa-exclamation-circle fs-1" aria-hidden="true"></i>
-                </t>
+        <div class="d-flex justify-content-center align-items-center flex-column h-100 px-3 text-center">
+            <h1 class="mb-4">Follow instructions on the terminal</h1>
+            <div class="d-inline-flex flex-column border rounded p-4 bg-view mb-3">
+                <i class="fa fa-credit-card-alt fs-1" aria-hidden="true"></i>
             </div>
         </div>
-        <div class="d-flex h-100 w-100">
-            <button t-attf-class="{{ this.selfOrder.paymentError ? 'w-50' : 'w-100' }} h-100 btn btn-info p-0 m-0 rounded-0 fs-2 text-uppercase" t-on-click="() => this.router.back()">Back</button>
-            <button t-attf-class="{{ this.selfOrder.paymentError ? 'w-50' : 'w-0' }} h-100 btn btn-success p-0 m-0 rounded-0 fs-2 text-uppercase" t-on-click="startPayment">Retry</button>
+        <div t-if="showFooterBtn" class="px-3 py-4 d-flex gap-1 justify-content-center">
+            <button class="btn btn-primary btn-lg" t-on-click="() => this.router.back()">Back</button>
+            <button class="btn btn-info btn-lg" t-on-click="startPayment">Retry</button>
         </div>
     </t>
 </templates>
diff --git a/addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.js b/addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.js
deleted file mode 100644
index 6f2bad420c9..00000000000
--- a/addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/** @odoo-module */
-
-import { Component, onMounted, useState } from "@odoo/owl";
-import { useSelfOrder } from "@pos_self_order/app/self_order_service";
-import { cookie } from "@web/core/browser/cookie";
-import { useService } from "@web/core/utils/hooks";
-
-// This component is only use in Kiosk mode
-export class PaymentSuccessPage extends Component {
-    static template = "pos_self_order.PaymentSuccessPage";
-
-    setup() {
-        this.selfOrder = useSelfOrder();
-        this.selfOrder.isOrder();
-        this.router = useService("router");
-        this.state = useState({
-            onReload: false,
-        });
-
-        onMounted(() => {
-            setTimeout(() => {
-                this.setDefautLanguage();
-            }, 5000);
-        });
-    }
-
-    backToHome() {
-        if (!this.setDefautLanguage()) {
-            this.router.navigate("default");
-        }
-    }
-
-    setDefautLanguage() {
-        const defaultLanguage = this.selfOrder.config.self_ordering_default_language_id;
-        if (this.selfOrder.currentLanguage.code !== defaultLanguage.code && !this.state.onReload) {
-            cookie.set("frontend_lang", defaultLanguage.code);
-            window.location.reload();
-            this.state.onReload = true;
-            return true;
-        }
-
-        return this.state.onReload;
-    }
-}
diff --git a/addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.xml b/addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.xml
deleted file mode 100644
index 4e953f9b2bc..00000000000
--- a/addons/pos_self_order/static/src/app/pages/payment_success_page/payment_success_page.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-    <t t-name="pos_self_order.PaymentSuccessPage">
-        <div t-if="this.state.onReload" class="self_order_success_loader position-absolute vh-100 w-100 d-flex justify-content-center align-items-center opacity-50 bg-dark">
-            <div class="page-loader d-flex justify-content-center align-items-center">
-                <div class="spinner-border text-primary" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-            </div>
-        </div>
-        <div class="d-flex justify-content-center align-items-center flex-column h-100 px-3 text-center">
-            <h1 class="mb-4">We're preparing your order!</h1>
-            <div class="d-inline-flex flex-column border rounded py-4 px-5 bg-view mb-3">
-                <t t-if="selfOrder.currentOrder.take_away || selfOrder.config.self_ordering_service_mode !== 'table'">
-                    <span class="fs-2 text-muted">Your order number</span>
-                    <span class="number lh-1" t-esc="selfOrder.currentOrder.trackingNumber" />
-                </t>
-                <t t-else="">
-                    <span class="fs-2 text-muted">Your table number:</span>
-                    <span class="number lh-1 mb-4" t-esc="selfOrder.currentOrder.table_stand_number" />
-                    <span class="fs-2 text-muted">Order number:</span>
-                    <span class="number lh-1" t-esc="selfOrder.currentOrder.trackingNumber" />
-                </t>
-            </div>
-            <h2 class="m-0 text-muted">Get your ticket below</h2>
-        </div>
-        <div class="px-3 py-4 text-center">
-            <button class="btn btn-primary btn-lg" t-on-click="backToHome">Close</button>
-        </div>
-    </t>
-</templates>
diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
index 25a6e321efa..384b315dbeb 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
@@ -54,6 +54,7 @@
                 data-bs-target="#listgroup-categories"
                 data-bs-offset="10"
                 tabindex="0">
+                <t t-set="nbrItem" t-value="0" />
                 <section
                     t-foreach="Array.from(selfOrder.categoryList)"
                     t-as="category"
@@ -64,6 +65,7 @@
                     class="product-list-category d-empty-none bg-view py-4 px-3 mb-3">
                     <t t-set="products" t-value="selfOrder.productsGroupedByCategory[category.name]" />
                     <t t-set="availableProducts" t-value="!state.searchInput ? products : getFilteredProducts(products)" />
+                    <t t-set="nbrItem" t-value="availableProducts.length + nbrItem" />
                     <t t-if="availableProducts.length > 0">
                         <h2 t-esc="category.name" class="mb-4 display-6 fw-bold"/>
                         <div class="o-so-products-row">
@@ -73,7 +75,7 @@
                         </div>
                     </t>
                 </section>
-                <p t-if="getFilteredProducts(selfOrder.products).length === 0" class="mx-auto mt-3 text-center">No products found</p>
+                <p t-if="nbrItem === 0" class="mx-auto mt-3 text-center">No products found</p>
             </div>
 
             <!-- Page buttons -->
diff --git a/addons/pos_self_order/static/src/app/self_order_bus_service.js b/addons/pos_self_order/static/src/app/self_order_bus_service.js
index b036bfe9519..d4aa5956a0d 100644
--- a/addons/pos_self_order/static/src/app/self_order_bus_service.js
+++ b/addons/pos_self_order/static/src/app/self_order_bus_service.js
@@ -63,7 +63,10 @@ export class SelfOrderBus {
 
         if (payload.payment_result === "Success") {
             this.selfOrder.updateOrderFromServer(payload.order);
-            this.selfOrder.router.navigate("payment_success");
+            this.selfOrder.router.navigate("confirmation", {
+                orderAccessToken: payload.order.access_token,
+                screenMode: "order",
+            });
         } else {
             this.selfOrder.paymentError = true;
         }
diff --git a/addons/pos_self_order/static/src/app/self_order_index.js b/addons/pos_self_order/static/src/app/self_order_index.js
index 8ebd83643b5..ee043df3bd9 100644
--- a/addons/pos_self_order/static/src/app/self_order_index.js
+++ b/addons/pos_self_order/static/src/app/self_order_index.js
@@ -12,7 +12,7 @@ import { ComboPage } from "@pos_self_order/app/pages/combo_page/combo_page";
 import { ProductPage } from "@pos_self_order/app/pages/product_page/product_page";
 import { CartPage } from "@pos_self_order/app/pages/cart_page/cart_page";
 import { PaymentPage } from "@pos_self_order/app/pages/payment_page/payment_page";
-import { PaymentSuccessPage } from "@pos_self_order/app/pages/payment_success_page/payment_success_page";
+import { ConfirmationPage } from "@pos_self_order/app/pages/confirmation_page/confirmation_page";
 import { EatingLocationPage } from "@pos_self_order/app/pages/eating_location_page/eating_location_page";
 import { StandNumberPage } from "@pos_self_order/app/pages/stand_number_page/stand_number_page";
 import { OrdersHistoryPage } from "@pos_self_order/app/pages/order_history_page/order_history_page";
@@ -27,7 +27,7 @@ class selfOrderIndex extends Component {
         OrdersHistoryPage,
         ComboPage,
         PaymentPage,
-        PaymentSuccessPage,
+        ConfirmationPage,
         ProductListPage,
         EatingLocationPage,
         StandNumberPage,
diff --git a/addons/pos_self_order/static/src/app/self_order_index.xml b/addons/pos_self_order/static/src/app/self_order_index.xml
index 7ada2aee0d5..1c4323961ca 100644
--- a/addons/pos_self_order/static/src/app/self_order_index.xml
+++ b/addons/pos_self_order/static/src/app/self_order_index.xml
@@ -23,8 +23,8 @@
             <t t-set-slot="payment" route="`/pos-self/${selfOrder.pos_config_id}/payment`">
                 <PaymentPage />
             </t>
-            <t t-set-slot="payment_success" route="`/pos-self/${selfOrder.pos_config_id}/payment_success`">
-                <PaymentSuccessPage />
+            <t t-set-slot="confirmation" route="`/pos-self/${selfOrder.pos_config_id}/confirmation/{string:orderAccessToken}/{string:screenMode}`" t-slot-scope="url">
+                <ConfirmationPage orderAccessToken="url.orderAccessToken" screenMode="url.screenMode" />
             </t>
             <t t-set-slot="location" route="`/pos-self/${selfOrder.pos_config_id}/location`">
                 <EatingLocationPage />
diff --git a/addons/pos_self_order/static/src/app/self_order_service.js b/addons/pos_self_order/static/src/app/self_order_service.js
index 10f4ab8157d..5547e805113 100644
--- a/addons/pos_self_order/static/src/app/self_order_service.js
+++ b/addons/pos_self_order/static/src/app/self_order_service.js
@@ -216,7 +216,7 @@ export class SelfOrder extends Reactive {
 
     async sendDraftOrderToServer() {
         if (this.currentOrder.isSavedOnServer || this.currentOrder.lines.length === 0) {
-            return true;
+            return this.currentOrder;
         }
 
         try {
@@ -238,10 +238,6 @@ export class SelfOrder extends Reactive {
                 this.editedOrder = null;
             }
 
-            if (this.config.self_ordering_mode !== "kiosk") {
-                this.notification.add(_t("Your order has been placed!"), { type: "success" });
-            }
-
             return order;
         } catch (error) {
             this.handleErrorNotification(error, [this.editedOrder.access_token]);