Add a service mode selector (pickup/delivery) to the website cart page with corresponding styling and module definition.

addons/dine360_online_orders/__manifest__.py

@@ -27,6 +27,7 @@
             'dine360_online_orders/static/src/xml/online_orders_screen.xml',
         ],
         'web.assets_frontend': [
+            'dine360_online_orders/static/src/css/service_mode.css',
             'dine360_online_orders/static/src/js/service_mode.js',
         ],
     },

addons/dine360_online_orders/static/src/css/service_mode.css

@@ -0,0 +1,64 @@
+/* Update Service Mode Selector Styles */
+#service_mode_selector {
+    background-color: #ffffff;
+    border-radius: 16px !important;
+    transition: all 0.3s ease;
+}
+
+.service-option input[type="radio"]:checked+.service-card {
+    border-color: #FECD4F !important;
+    background-color: #FFFDF6 !important;
+    box-shadow: 0 4px 15px rgba(254, 205, 79, 0.25) !important;
+    transform: translateY(-2px);
+}
+
+.service-card {
+    border: 2px solid #e9ecef !important;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.service-card:hover {
+    border-color: #FECD4F;
+    background-color: #FFFDF6;
+}
+
+.service-card i {
+    font-size: 2rem;
+    display: block;
+    margin-bottom: 8px;
+}
+
+.service-card h6 {
+    margin-bottom: 4px;
+    font-weight: 700;
+}
+
+/* Animation for the selector if skipped */
+.shake-animation {
+    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
+}
+
+@keyframes shake {
+
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+}

addons/dine360_online_orders/views/website_sale_templates.xml

@@ -2,27 +2,39 @@
 <odoo>
     <template id="cart_service_mode" inherit_id="website_sale.cart" name="Service Mode Selector">
         <xpath expr="//t[@t-call='website_sale.cart_lines']" position="before">
-            <div id="service_mode_selector" class="mb-4 bg-white p-4 rounded-4 shadow-sm border" style="border-left: 5px solid #FECD4F !important;">
+            <div id="service_mode_selector" class="mb-4 bg-white p-3 p-md-4 rounded-4 shadow-sm border" style="border-left: 5px solid #FECD4F !important;">
-                <h4 class="mb-3 fw-bold">How would you like your order?</h4>
+                <div class="d-flex align-items-center mb-3">
-                <div class="d-flex gap-3">
+                    <div class="bg-warning-light p-2 rounded-circle me-3">
-                    <label class="service-option position-relative flex-fill cursor-pointer">
+                        <i class="fa fa-shopping-basket text-warning fs-5"></i>
+                    </div>
+                    <h4 class="mb-0 fw-bold">How would you like your order?</h4>
+                </div>
+                
+                <div class="d-flex flex-wrap gap-2 gap-md-3">
+                    <!-- Pickup Option -->
+                    <label class="service-option position-relative flex-fill cursor-pointer m-0">
                         <input type="radio" name="fulfilment_type" value="pickup" class="d-none" t-att-checked="'checked' if website_sale_order.fulfilment_type == 'pickup' else None"/>
-                        <div class="service-card p-3 rounded-3 border text-center transition-all">
+                        <div class="service-card p-3 rounded-3 border text-center transition-all h-100 d-flex flex-column justify-content-center">
-                            <i class="fa fa-shopping-basket fs-3 mb-2 text-primary"></i>
+                            <i class="fa fa-shopping-bag mb-2 text-warning"></i>
-                            <h6 class="mb-1 fw-bold">Pickup</h6>
+                            <div class="fw-bold h6 mb-1">Pickup</div>
-                            <small class="text-muted">Pick up at store</small>
+                            <div class="x-small text-muted">Ready in 15-20 mins</div>
                         </div>
                     </label>
-                    <label class="service-option position-relative flex-fill cursor-pointer">
+                    
+                    <!-- Delivery Option -->
+                    <label class="service-option position-relative flex-fill cursor-pointer m-0">
                         <input type="radio" name="fulfilment_type" value="delivery" class="d-none" t-att-checked="'checked' if website_sale_order.fulfilment_type == 'delivery' else None"/>
-                        <div class="service-card p-3 rounded-3 border text-center transition-all">
+                        <div class="service-card p-3 rounded-3 border text-center transition-all h-100 d-flex flex-column justify-content-center">
-                            <i class="fa fa-truck fs-3 mb-2 text-info"></i>
+                            <i class="fa fa-truck mb-2 text-primary"></i>
-                            <h6 class="mb-1 fw-bold">Delivery</h6>
+                            <div class="fw-bold h6 mb-1">Delivery</div>
-                            <small class="text-muted">Delivered to you</small>
+                            <div class="x-small text-muted">Estimated 30-45 mins</div>
                         </div>
                     </label>
                 </div>
-                <div class="mt-3 small text-danger d-none" id="service_mode_error">Please select Pickup or Delivery to continue.</div>
+                
+                <div class="mt-3 small text-danger d-none" id="service_mode_error">
+                    <i class="fa fa-exclamation-circle me-1"></i> Please select Pickup or Delivery to continue.
+                </div>
             </div>
         </xpath>
     </template>