[IMP] *: onboarding, milk adaptations

*: onboarding, account, account_payment, sale.

Currently used in the appointment module (See c1cf8bfb).

Related Task-3297572

task-2818586

Part-of: odoo/odoo#116641

addons/account/views/account_onboarding_templates.xml

@@ -5,6 +5,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Invoice Layout</t>
             <t t-set="description">Customize the look of your invoices.</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_quotation-layout.png'"/>
+            <t t-set="alt" t-value="'Invoice Layout'"/>
             <t t-set="done_icon" t-value="'fa-star'" />
             <t t-set="btn_text">Customize</t>
             <t t-set="done_text">Looks great!</t>
@@ -19,6 +21,8 @@
             <t t-set="description">
                 Create your first invoice.
             </t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_order-confirmation.png'"/>
+            <t t-set="alt" t-value="'Onboarding Create Invoice'"/>
             <t t-set="btn_text">Create</t>
             <t t-set="done_text">First invoice sent!</t>
             <t t-set="method" t-value="'action_open_account_onboarding_create_invoice'" />
@@ -32,6 +36,8 @@
             <t t-set="description">
                 Connect your financial accounts in seconds.
             </t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_puzzle.png'"/>
+            <t t-set="alt" t-value="'Onboarding Bank Account'"/>
             <t t-set="btn_text">Add a bank account</t>
             <t t-set="done_text">Step Completed!</t>
             <t t-set="method" t-value="'setting_init_bank_account_action'" />
@@ -43,6 +49,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Accounting Periods</t>
             <t t-set="description">Define your fiscal years &amp; tax returns periodicity.</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_accounting-periods.png'"/>
+            <t t-set="alt" t-value="'Onboarding Accounting Periods'"/>
             <t t-set="btn_text">Configure</t>
             <t t-set="done_text">Step Completed!</t>
             <t t-set="method" t-value="'setting_init_fiscal_year_action'" />
@@ -54,6 +62,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Chart of Accounts</t>
             <t t-set="description">Setup your chart of accounts and record initial balances.</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_chart-of-accounts.png'"/>
+            <t t-set="alt" t-value="'Onboarding Chart of Accounts'"/>
             <t t-set="btn_text">Review</t>
             <t t-set="done_text">Chart of accounts set.</t>
             <t t-set="method" t-value="'setting_chart_of_accounts_action'" />
@@ -65,6 +75,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Taxes</t>
             <t t-set="description">Set default Taxes for sales and purchase transactions.</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_taxes.png'"/>
+            <t t-set="alt" t-value="'Onboarding Taxes'"/>
             <t t-set="btn_text">Review</t>
             <t t-set="done_text">Taxes set.</t>
             <t t-set="method" t-value="'action_open_taxes_onboarding'" />
@@ -75,8 +87,6 @@
     <!-- ONBOARDING PANELS -->
     <template id="account_invoice_onboarding_panel" name="account.invoice.onboarding.panel">
         <t t-call="base.onboarding_container">
-            <t t-set="classes" t-value="'o_onboarding_blue'"/>
-            <t t-set="bg_image" t-value="'/account/static/src/img/account_invoice_onboarding_bg.jpg'"/>
             <t t-set="close_method" t-value="'action_close_account_invoice_onboarding'"/>
             <t t-set="close_model" t-value="'res.company'"/>
             <t t-set="text_completed">Congratulations! You are all set.</t>
@@ -89,8 +99,6 @@
     </template>
     <template id="account_dashboard_onboarding_panel" name="account.dashboard.onboarding.panel">
         <t t-call="base.onboarding_container">
-            <t t-set="classes" t-value="'o_onboarding_orange'"/>
-            <t t-set="bg_image" t-value="'/account/static/src/img/account_dashboard_onboarding_bg.jpg'"/>
             <t t-set="close_method" t-value="'action_close_account_dashboard_onboarding'"/>
             <t t-set="close_model" t-value="'res.company'"/>
 
@@ -114,6 +122,8 @@
             <t t-set="title">Taxes</t>
             <t t-set="description">Choose a default sales tax for your products.</t>
             <t t-set="btn_text">Set taxes</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_taxes.png'"/>
+            <t t-set="alt" t-value="'Onboarding Taxes'"/>
             <t t-set="done_text">Step Completed!</t>
             <t t-set="method" t-value="'action_open_account_onboarding_sale_tax'" />
             <t t-set="model" t-value="'res.company'" />

addons/account_payment/views/onboarding_templates.xml

@@ -11,6 +11,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Online Payments</t>
             <t t-set="description">Enable credit &amp; debit card payments supported by Stripe</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_bank-account.png'"/>
+            <t t-set="alt" t-value="'Online Payments'"/>
             <t t-set="btn_text">Activate Stripe</t>
             <t t-set="done_text">Online payments enabled</t>
             <t t-set="model" t-value="'res.company'"/>

addons/onboarding/__manifest__.py

@@ -3,7 +3,7 @@
 
 {
     'name': 'Onboarding Toolbox',
-    'version': '1.0',
+    'version': '1.1',
     'category': 'Hidden',
     'sequence': 9001,
     'description': """

addons/onboarding/data/onboarding_data.xml

@@ -9,6 +9,8 @@
                     <t t-set="done_icon" t-value="step.done_icon"/>
                     <t t-set="btn_text" t-value="step.button_text"/>
                     <t t-set="done_text" t-value="step.done_text"/>
+                    <t t-set="image" t-value="'/web/image/onboarding.onboarding.step/'+str(step.id)+'/step_image'"/>
+                    <t t-set="alt" t-value="step.step_image_alt"/>
                     <!-- Model/method used by JS implementation of banners for each step-->
                     <t t-set="method" t-value="step.panel_step_open_action_name"/>
                     <t t-set="model">onboarding.onboarding.step</t>

addons/onboarding/models/onboarding_onboarding.py

@@ -17,11 +17,6 @@ class Onboarding(models.Model):
 
     is_per_company = fields.Boolean('Should be done per company?', default=True)
 
-    panel_background_color = fields.Selection(
-        [('orange', 'Orange'), ('blue', 'Blue'), ('violet', 'Violet'), ('none', 'None')],
-        string="Panel's Background color", default='orange',
-        help="Color gradient added to the panel's background.")
-    panel_background_image = fields.Binary("Panel's background image")
     panel_close_action_name = fields.Char(
         'Closing action', help='Name of the onboarding model action to execute when closing the panel.')
 
@@ -95,9 +90,6 @@ class Onboarding(models.Model):
     def _prepare_rendering_values(self):
         self.ensure_one()
         values = {
-            'bg_image': f'/web/image/onboarding.onboarding/{self.id}/panel_background_image',
-            'classes': f'o_onboarding_{self.panel_background_color}'
-                       if self.panel_background_color not in {False, 'none'} else '',
             'close_method': self.panel_close_action_name,
             'close_model': 'onboarding.onboarding',
             'steps': self.step_ids,

addons/onboarding/models/onboarding_step.py

@@ -22,6 +22,9 @@ class OnboardingStep(models.Model):
     done_icon = fields.Char('Font Awesome Icon when completed', default='fa-star')
     done_text = fields.Char(
         'Text to show when step is completed', default=_('Step Completed! - Click to review'), translate=True)
+    step_image = fields.Binary("Step Image")
+    step_image_alt = fields.Char(
+        'Alt Text for the Step Image', translate=True, help='Show when impossible to load the image')
     panel_step_open_action_name = fields.Char(
         string='Opening action', required=True,
         help='Name of the onboarding step model action to execute when opening the step, '

addons/onboarding/views/onboarding_views.xml

@@ -38,11 +38,6 @@
                         <page name="Onboarding steps">
                             <field name="step_ids"/>
                         </page>
-                        <page name="Panel Rendering">
-                            <group>
-                                <field name="panel_background_color" string="Background color"/>
-                            </group>
-                        </page>
                     </notebook>
                 </sheet>
             </form>

addons/sale/views/sale_onboarding_views.xml

@@ -5,6 +5,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Quotation Layout</t>
             <t t-set="description">Customize the look of your quotations.</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_quotation-layout.png'"/>
+            <t t-set="alt" t-value="'Onboarding Quotation Layout'"/>
             <t t-set="done_icon" t-value="'fa-star'" />
             <t t-set="done_text">Looks great!</t>
             <t t-set="btn_text">Customize</t>
@@ -17,6 +19,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Order Confirmation</t>
             <t t-set="description">Choose between electronic signatures or online payments.</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_order-confirmation.png'"/>
+            <t t-set="alt" t-value="'Onboarding Quotation Layout'"/>
             <t t-set="btn_text">Set payments</t>
             <t t-set="method" t-value="'action_open_sale_onboarding_payment_provider'" />
             <t t-set="model" t-value="'res.company'" />
@@ -27,6 +31,8 @@
         <t t-call="base.onboarding_step">
             <t t-set="title">Sample Quotation</t>
             <t t-set="description">Send a quotation to test the customer portal.</t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_sample-quotation.png'"/>
+            <t t-set="alt" t-value="'Onboarding Quotation Layout'"/>
             <t t-set="btn_text">Send sample</t>
             <t t-set="method" t-value="'action_open_sale_onboarding_sample_quotation'" />
             <t t-set="model" t-value="'res.company'" />
@@ -37,8 +43,6 @@
     <!-- ONBOARDING PANEL-->
     <template id="sale_quotation_onboarding_panel" name="sale.quotation.onboarding.panel">
         <t t-call="base.onboarding_container">
-            <t t-set="classes" t-value="'o_onboarding_violet'" />
-            <t t-set="bg_image" t-value="'/sale/static/src/img/sale_quotation_onboarding_bg.jpg'"/>
             <t t-set="close_method" t-value="'action_close_sale_quotation_onboarding'" />
             <t t-set="close_model" t-value="'res.company'" />
             <t t-call="base.onboarding_company_step" name="company_step" />

odoo/addons/base/static/src/scss/onboarding.scss

@@ -2,32 +2,12 @@
 // ============================================================================
 $o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4 !default;
 
+
 .o_onboarding_main {
-    background: white center top;
-    background-size: cover;
-
-    .o_onboarding_btn_close {
-        color: #fff;
-    }
-
-    // = Color Variations
-    // ------------------------------------------------------------------------
-    @each $key, $values in $o-onboarding-colors {
-        &.o_onboarding_#{$key} {
-            $-bg: map-get($values, 'bg');
-            $-ui: map-get($values, 'ui');
-
-            @include print-variable('o-onboarding-done-color', nth($-ui, 1));
-            @include print-variable('o-onboarding-todo-color', nth($-ui, 2));
-            @include print-variable('o-onboarding-bg_1-color', fade-out(nth($-bg, 1), 0.5));
-            @include print-variable('o-onboarding-bg_2-color', nth($-bg, 2));
-        }
-    }
+    background-color: $o-onboarding-main-bg;
 
     .o_onboarding_wrap {
         overflow-x: auto;
-        background-color: var(--o-onboarding-bg_1-color);
-        background-image: linear-gradient(to bottom, var(--o-onboarding-bg_1-color), var(--o-onboarding-bg_2-color));
     }
 
     .o_onboarding_completed_message {
@@ -46,43 +26,52 @@ $o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4 !default;
             }
         }
 
+        &:first-child, &:last-child {
+            .o_onboarding_line {
+                width: $o-onboarding-line-width / 2 ;
+            }
+        }
+
+        &:first-child {
+            .o_onboarding_line {
+                margin-left: $o-onboarding-line-width / 2;
+            }
+        }
+
+        &:last-child {
+            .o_onboarding_line {
+                margin-right: $o-onboarding-line-width / 2;
+            }
+        }
+
+        .o_onboarding_line {
+            background: linear-gradient(to right, $o-onboarding-color-orange 0%, $o-onboarding-color-blue 100%);
+            height: $o-onboarding-line-height;
+            width: $o-onboarding-line-width;
+            top: $o-onboarding-image-size / 2;
+            background-attachment: fixed;
+        }
+
         .o_onboarding_step_content {
             width: $o-onboarding-step-width;
         }
 
+        .o_onboarding_step_side img {            
+            width: $o-onboarding-image-size;
+            height: $o-onboarding-image-size;
+        }
+
         .o_onboarding_step_action {
             min-width: $o-onboarding-step-width * .5;
-            border: $border-width solid #fff;
+            border: $border-width solid #{$o-onboarding-color-blue};
+            color: $o-onboarding-color-blue;
         }
 
-        .o_onboarding_progress {
-            height: $o-onboarding-progress-size;
-            width: calc(100% - #{$o-onboarding-dot-size});
-            background: var(--o-onboarding-todo-color, #{$o-brand-odoo});
-            transform:
-                translateX(-100%)
-                translateY($o-onboarding-dot-size * .5 - $o-onboarding-progress-size * .5);
-        }
-
-        .o_onboarding_dot {
-            width: $o-onboarding-dot-size;
-            height: $o-onboarding-dot-size;
-            padding-top: .5em;
-            background-color: var(--o-onboarding-todo-color, $o-brand-odoo);
-            color: transparent;
-            transition: all $o-onboarding-base-time ease;
-            transform: scale3d(.5, .5, .5);
-        }
-
-        &:first-of-type .o_onboarding_progress {
-            display: none;
-        }
-
-        .o_onboarding_step_title,
-        .o_onboarding_step_action,
-        .o_onboarding_step_action__done,
-        .o_onboarding_dot_isChecked {
-            color: #fff;
+        .o_onboarding_step_action__done {
+            i {
+                background-color: $o-onboarding-color-orange;
+                color: #FFF;
+            }
         }
 
         // = "To do" Step Design
@@ -99,18 +88,6 @@ $o-onboarding-step-width: map-get($container-max-widths, 'lg') / 4 !default;
             }
         }
 
-        // = "Done" Step Design
-        // --------------------------------------------------------------------
-        &:not([data-step-state="not_done"])  {
-            .o_onboarding_dot, + .o_onboarding_step:not([data-step-state="not_done"]) .o_onboarding_progress {
-                background: var(--o-onboarding-done-color, #{$o-brand-primary});
-            }
-
-            .o_onboarding_dot {
-                transform: scale3d(1, 1, 1);
-            }
-        }
-
         // = "Just Done" Step Design
         // --------------------------------------------------------------------
         &[data-step-state="just_done"] {

odoo/addons/base/static/src/scss/onboarding.variables.dark.scss

@@ -2,17 +2,6 @@
 // ============================================================================
 // No CSS hacks, variables overrides only
 
-$o-onboarding-colors: (
-    'blue': (
-        'bg': (#215e72, #1c3d4e),
-        'ui': (#db851e, #c0ad73),
-    ),
-    'orange': (
-        'bg': (#5c4436, #784536),
-        'ui': ($o-brand-primary, #68B3C9),
-    ),
-    'violet': (
-        'bg': (#424a7d, #333e6a),
-        'ui': (#db851e, #c0ad73),
-    ),
-) !default;
+$o-onboarding-main-bg: $o-gray-100 !default;
+$o-onboarding-color-blue: #516db3 !default;
+$o-onboarding-color-orange: #c67c7a !default;

odoo/addons/base/static/src/scss/onboarding.variables.scss

@@ -1,18 +1,7 @@
 $o-onboarding-base-time: 0.5s !default;
-$o-onboarding-dot-size: 20px !default;
-$o-onboarding-progress-size: 2px !default;
-
-$o-onboarding-colors: (
-    'blue': (
-        'bg': (#60ABC3, #4187AE),
-        'ui': (#fcb157, #FBEEC8),
-    ),
-    'orange': (
-        'bg': (#DA9D77, #B9684F),
-        'ui': (#0774f4, #68B3C9),
-    ),
-    'violet': (
-        'bg': (#6070C3, #475DA4),
-        'ui': (#F39D9B, #FBEEC8),
-    ),
-) !default;
+$o-onboarding-image-size: 64px !default;
+$o-onboarding-line-height: 2px !default;
+$o-onboarding-line-width: 100% !default;
+$o-onboarding-main-bg: $o-gray-200 !default;
+$o-onboarding-color-blue: #374874 !default;
+$o-onboarding-color-orange: #F39D9B !default;

odoo/addons/base/views/onboarding_views.xml

@@ -24,14 +24,12 @@
         </div>
 
         <div class="o_onboarding_container collapse show">
-            <div t-att-class="'o_onboarding_main position-relative overflow-hidden ' + classes"
-                 t-att-style="'background-image:url(' + bg_image + ')'">
-
-                <div class="o_onboarding_wrap py-5">
-                    <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2" title="Close the onboarding panel"><i class="oi oi-close"/></a>
-
+            <div class="o_onboarding_main position-relative border-bottom overflow-hidden">
+                <div class="o_onboarding_wrap py-3">
+                    <a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2 z-index-1" title="Close the onboarding panel"><i class="oi oi-close"/></a>
                     <div class="o_onboarding_steps d-flex" t-out="0"/>
 
+
                     <div t-if="state.get('onboarding_state') in ('done', 'just_done')"
                          t-att-state="state.get('onboarding_state')"
                          class="o_onboarding_completed_message position-absolute end-0 bottom-0 start-0 border-bottom py-4 bg-white d-flex align-items-center justify-content-center">
@@ -53,17 +51,17 @@
         <div class="o_onboarding_step position-relative d-flex flex-column align-items-center justify-content-start text-center" t-att-data-step-state="state">
             <img t-if="state == 'just_done'" class="o_onboarding_confetti position-absolute w-100" src="/base/static/img/onboarding_confetti.svg" alt="o_onboarding_confetti"/>
 
-            <div class="o_onboarding_step_side d-flex pt-0 flex-grow-1">
-                <div class="o_onboarding_progress position-absolute"/>
-                <span t-attf-class="o_onboarding_dot fa fa-check d-inline-block rounded-circle small {{state != 'not_done' and 'o_onboarding_dot_isChecked' or ''}}"/>
+            <div class="o_onboarding_line position-absolute"/>
+            <div class="o_onboarding_step_side d-flex">
+                <img class="z-index-1" t-attf-src="#{image}" t-attf-alt="#{alt}"/>
             </div>
 
-            <div class="o_onboarding_step_content py-3 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
-                <div class="o_onboarding_step_content_info mb-3">
+            <div class="o_onboarding_step_content position-relative pt-2 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
+                <div class="o_onboarding_step_content_info flex-grow-1 mb-2">
                     <a type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
-                        <h4 class="o_onboarding_step_title" t-out="title"/>
+                        <h5 class="o_onboarding_step_title mb-1" t-out="title"/>
                     </a>
-                    <p class="text-white-75 m-0" t-out="description"/>
+                    <p class="m-0 small" t-out="description"/>
                 </div>
                 <a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
                     <span>
@@ -73,7 +71,7 @@
                 </a>
                 <a t-else="" class="o_onboarding_step_action__done btn" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
                     <span>
-                        <i t-attf-class="me-2 fa #{done_icon if done_icon else 'fa-check'}" />
+                        <i t-attf-class="p-1 me-1 fa #{done_icon if done_icon else 'fa-check'} rounded-circle" />
                         <t t-if="done_text" t-out="done_text" />
                         <t t-else="">All done!</t>
                     </span>
@@ -89,6 +87,8 @@
             <t t-set="description">
                 Set your company's data for documents header/footer.
             </t>
+            <t t-set="image" t-value="'/base/static/img/onboarding_company-data.png'"/>
+            <t t-set="alt" t-value="'Onboarding Company Data'"/>
             <t t-set="btn_text">Let's start!</t>
             <t t-set="method" t-value="'action_open_base_onboarding_company'" />
             <t t-set="model" t-value="'res.company'" />