May 09: [ADD] Initital Commit 'website_appointment_payment'

website_appointment_payment/README.rst

@@ -0,0 +1,48 @@
+.. image:: https://img.shields.io/badge/licence-OPL--1-red.svg
+    :target: https://www.odoo.com/documentation/16.0/legal/licenses.html#odoo-apps
+    :alt: License: OPL-1
+
+Website Appointment Payment
+==========================
+* You can configure the payments from the Website.
+Configuration
+============
+    - www.odoo.com/documentation/16.0/setup/install.html
+    - Install our custom addon
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+Odoo Proprietary License v1.0 (OPL-1)
+(https://www.odoo.com/documentation/16.0/legal/licenses.html#odoo-apps)
+
+Credits
+-------
+* Developer: (V16) NIHALA KP, Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+--------
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit https://www.cybrosys.com
+
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com"
+
+Further Information
+-----------
+HTML Description: `<static/description/index.html>`__
+
+

website_appointment_payment/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+from . import controllers
+from . import models

website_appointment_payment/__manifest__.py

@@ -0,0 +1,46 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+{
+    'name': 'Website Appointment Payment',
+    'version': '16.0.1.0.0',
+    'category': 'Website',
+    'summary': 'Payment before confirming the Appointment in Website',
+    'description': """We can do the Payment in online appointment in website""",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': 'https://www.cybrosys.com',
+    'depends': ['sale', 'base', 'website_appointment'],
+    'data': [
+        'data/appoinment_product_demo.xml',
+        'views/appointment_product_view.xml',
+        'views/appointment_template_registration.xml',
+        'views/website_appointment_template.xml',
+        'views/website_appointment_payment_template.xml',
+        'views/appointment_info_template.xml',
+    ],
+    'images': ['static/description/banner.png'],
+    'license': 'OPL-1',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

website_appointment_payment/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+from . import appointment

website_appointment_payment/controllers/appointment.py

@@ -0,0 +1,173 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+import uuid
+import pytz
+from dateutil.relativedelta import relativedelta
+from odoo import fields, http, Command, _
+from odoo.http import request, route
+from odoo.addons.appointment.controllers.appointment import \
+    AppointmentController
+from odoo.addons.appointment.controllers.calendar import \
+    AppointmentCalendarController
+import logging
+from odoo.addons.base.models.ir_qweb import keep_query
+
+_logger = logging.getLogger(__name__)
+
+
+class AppointmentAccountPayment(AppointmentController):
+
+    @http.route()
+    def appointment_form_submit(
+            self, appointment_type_id, datetime_str, duration_str,
+            staff_user_id, name, phone, email, **kwargs):
+        """Override: when a payment step is necessary, we create the appointment
+            booking model to store all relevant information
+            instead of creating a calendar.event.  It will
+            be transformed to a 'calendar.event' on payment (or confirmation).
+             See make_event on appointment.booking.
+            Redirects to payment if needed. See redirect_to_payment"""
+        appointment = request.env['appointment.type'].sudo().browse(
+            appointment_type_id)
+        partner = request.env['res.partner'].search([('email', '=like', email)])
+        if not partner:
+            partner = request.env['res.partner'].sudo().create({
+                'name': name,
+                'email': email
+            })
+        if appointment.has_payment_step and appointment.product_id.lst_price:
+            invoice_id = request.env['account.move'].sudo().create({
+                'move_type': 'out_invoice',
+                'partner_id': partner.id,
+                'invoice_line_ids': [Command.create({
+                    'product_id': appointment.product_id.id
+                })]
+            })
+            invoice_id.action_post()
+            currency = request.env.user.company_id.currency_id
+            tokens = request.env['payment.token']
+            show_tokenize_input_mapping = {}
+            for provider_sudo in request.env['payment.provider'].sudo().search(
+                    [('is_published', '=', True)]):
+                show_tokenize_input = provider_sudo.allow_tokenization \
+                                      and not provider_sudo._is_tokenization_required(
+                    sale_order_id=False) and request.env.user._is_public()
+                show_tokenize_input_mapping[
+                    provider_sudo.id] = show_tokenize_input
+            values = {
+                'providers': request.env['payment.provider'].sudo().search(
+                    [('is_published', '=', True)]),
+                'tokens': tokens,
+                'amount': invoice_id.amount_total,
+                'show_tokenize_input': show_tokenize_input_mapping,
+                'user': request.env.user.partner_id,
+                'access_token': invoice_id._portal_ensure_token(),
+                'currency': currency,
+                'transaction_route': f'/invoice/transaction/{invoice_id.id}',
+                'landing_route': f'/payment/success/{appointment.id}'
+                                 f'?mail={email}&date={datetime_str}'
+                                 f'&duration={duration_str}&name={name}'
+                                 f'&phone={phone}&invoice={invoice_id.id}',
+                'errors': []
+            }
+            return request.render(
+                "website_appointment_payment.appointment_payment", values)
+        return super().appointment_form_submit(
+            appointment_type_id, datetime_str, duration_str, staff_user_id,
+            name, phone, email, **kwargs
+        )
+
+    @http.route('/payment/success/<int:appointment_id>', type='http',
+                auth='public')
+    def appointment_payment(self, appointment_id, **kwargs):
+        """An Event is created after the payment step and redirected to the
+        booking confirmation/summary page"""
+        appointment = request.env['appointment.type'].browse(
+            appointment_id)
+        timezone = request.session.get('timezone') or appointment.appointment_tz
+        tz_session = pytz.timezone(timezone)
+        date_start = tz_session.localize(
+            fields.Datetime.from_string(kwargs.get('date'))).astimezone(
+            pytz.utc).replace(
+            tzinfo=None)
+        duration_hours = int(float(kwargs.get('duration')))
+        date_end = date_start + relativedelta(hours=duration_hours)
+        description_bits = []
+        description = ''
+        description_bits.append(_('Mobile: %s', kwargs.get('phone')))
+        description_bits.append(_('Email: %s', kwargs.get('mail')))
+        description = '<ul>' + ''.join(
+            ['<li>%s</li>' % bit for bit in description_bits]) + '</ul>'
+        event = request.env['calendar.event'].sudo().create({
+            'name': appointment.name,
+            'start': date_start,
+            'stop': date_end,
+            'duration': kwargs.get('duration'),
+            'location': appointment.location_id.id,
+            'appointment_type_id': appointment.id,
+            'user_id': appointment.staff_user_ids.id,
+            'invoice_ids': [(4, int(kwargs.get('invoice')))],
+            'description': description,
+            'access_token': uuid.uuid4().hex,
+            'videocall_location': '/calendar/join_videocall/{access_token}'
+        })
+        partner = self._get_customer_partner() or request.env[
+            'res.partner'].sudo().search(
+            [('email', '=like', kwargs.get('mail'))],
+            limit=1)
+        return request.redirect(
+            '/calendar/view/%s?partner_id=%s&%s' % (
+                event.access_token, partner.id, keep_query('*', state='new')))
+
+
+class AppointmentCancel(AppointmentCalendarController):
+
+    @route(['/calendar/cancel/<string:access_token>',
+            '/calendar/<string:access_token>/cancel',
+            ], type='http', auth="public", website=True)
+    def appointment_cancel(self, access_token, partner_id, **kwargs):
+        """If the appointment is cancelled, credit note is created"""
+        event = request.env['calendar.event'].sudo().search(
+            [('access_token', '=', access_token)], limit=1)
+        if event.invoice_ids:
+            reverse_invoice = request.env[
+                'account.move.reversal'].sudo().create({
+                    'reason': "Appointment Cancelled",
+                    'move_ids': event.invoice_ids[0],
+                    'journal_id': event.invoice_ids.journal_id.id
+            })
+            reverse_invoice.reverse_moves()
+            reversed_invoice = request.env['account.move'].sudo().search(
+                [('reversed_entry_id', '=', event.invoice_ids[0].id)])
+            reversed_invoice.action_post()
+            journal = request.env['account.journal'].sudo().search(
+                [('type', '=', 'bank'),
+                 ],
+                limit=1)
+            register_payments = request.env[
+                'account.payment.register'].with_context(
+                active_model='account.move',
+                active_ids=reversed_invoice.ids).sudo().create({
+                    'journal_id': journal.id,
+            })
+            register_payments._create_payments()
+        return super().appointment_cancel(access_token, partner_id, **kwargs)

website_appointment_payment/data/appoinment_product_demo.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data>
+        <!-- Default product is configured for booking fees       -->
+        <record id="product_category_appointment" model="product.category">
+            <field name="parent_id" ref="product.product_category_1"/>
+            <field name="name">Booking Fees</field>
+        </record>
+        <record id="default_booking_product" model="product.product">
+            <field name="name">Booking Fees</field>
+            <field name="standard_price">0.00</field>
+            <field name="uom_id" ref="uom.product_uom_unit"/>
+            <field name="list_price">50.00</field>
+            <field name="detailed_type">booking_fees</field>
+            <field name="purchase_ok" eval="False"/>
+            <field name="categ_id" ref="product_category_appointment"/>
+        </record>
+    </data>
+</odoo>

website_appointment_payment/doc/RELEASE_NOTES.md

@@ -0,0 +1,7 @@
+## Module <website_appointment_payment>
+
+#### 19.04.2024
+#### Version 16.0.1.0.0
+#### ADD
+- Initial Commit  Website Appointment Payment
+

website_appointment_payment/models/__init__.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+from . import account_move
+from . import appointment_price
+from . import calendar_event
+from . import product_template

website_appointment_payment/models/account_move.py

@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+from odoo import models, fields
+
+
+class AccountMove(models.Model):
+    _inherit = 'account.move'
+
+    event_id = fields.Many2one('calendar.event', help="To link the invoice "
+                                                      "with the calendar.event")

website_appointment_payment/models/appointment_price.py

@@ -0,0 +1,37 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+from odoo import models, fields
+
+
+class AppointmentPrice(models.Model):
+    """this is used to inherit the appointment.type model to add some custom
+    fields"""
+    _inherit = 'appointment.type'
+
+    has_payment_step = fields.Boolean("Up-front Payment",
+                                      help="Require visitors to pay to "
+                                           "confirm their booking")
+    product_id = fields.Many2one(
+        'product.product', string="Product",
+        help="Product configured for appointment booking",
+        domain=[('detailed_type', '=', 'booking_fees')],
+        readonly=False, store=True)

website_appointment_payment/models/calendar_event.py

@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+from odoo import models, fields
+
+
+class CalendarEvent(models.Model):
+    _inherit = 'calendar.event'
+
+    invoice_ids = fields.One2many('account.move', 'event_id',
+                                  help="To link the invoice and calendar.event")

website_appointment_payment/models/product_template.py

@@ -0,0 +1,38 @@
+# -*- coding: utf-8 -*-
+################################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    This program is under the terms of Odoo Proprietary License v1.0 (OPL-1)
+#    It is forbidden to publish, distribute, sublicense, or sell copies of the
+#    Software or modified copies of the Software.
+#
+#    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#    FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+#    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER
+#    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,ARISING
+#    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+#    DEALINGS IN THE SOFTWARE.
+#
+################################################################################
+from odoo import fields, models
+
+
+class ProductTemplate(models.Model):
+    """new product type is added for appointment booking"""
+    _inherit = "product.template"
+
+    detailed_type = fields.Selection(selection_add=[
+        ('booking_fees', 'Booking Fees'),
+    ], help="Added new detailed type for appointment booking",
+        ondelete={'booking_fees': 'set service'})
+
+    def _detailed_type_mapping(self):
+        """Added a new product type for appointment booking"""
+        type_mapping = super()._detailed_type_mapping()
+        type_mapping['booking_fees'] = 'service'
+        return type_mapping

website_appointment_payment/static/description/index.html

@@ -0,0 +1,568 @@
+<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;">
+  <!-- TITLE BAR -->
+  <div class="d-flex align-items-center justify-content-between"
+    style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+    <img src="assets/misc/cybrosys-logo.png" width="42" height="42" style="width: 42px; height: 42px;" />
+    <div>
+      <div
+        style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+        class="mr-2">
+        <i class="fa fa-check mr-1"></i>Enterprise
+      </div>
+      <div
+        style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+        class="mr-2">
+        <i class="fa fa-check mr-1"></i>Odoo.sh
+      </div>
+    </div>
+  </div>
+  <!-- END OF TITLE BAR -->
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12 col-md-12 col-lg-12">
+        <!-- APP HERO -->
+        <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">
+         Website Appointment Payment</h1>
+        <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;"></p>
+        <!-- END OF APP HERO -->
+        <img src="assets/screenshots/hero1.gif" class="img-responsive"
+          style="width: 100%; margin-left: auto; margin-right: auto;" />
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/compass.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span
+                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
+                        more about this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36" />
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span
+                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                        features of this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36" />
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span
+                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                        screenshots of this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36" />
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Overview
+    </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">
+        By using this module you can pay the appointment booking fees from the website
+   </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Features
+    </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center" style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" class="mr-2" />
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">You can configure a product for appointment booking fees</span>
+        </div>
+        <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2" />
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">You can see the appointment fees in the appointment card</span>
+        </div>
+        <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2" />
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">You can complete the payment from website</span>
+        </div>
+
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pictures.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Screenshots
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+         <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Enable the payment option</h3>
+             <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                From Website > Configuration > Online Appointments > options , you can enable  the  checkbox to configure website payments. </p>
+            <img src="assets/screenshots/screenshot1.png" class="img-thumbnail">
+        </div>
+                 <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Product configuration</h3>
+              <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                When you enable the checkbox, you'll be able to view the products configured for booking. Additionally, if you wish to configure the payment provider, you can do so from there as well.</p>
+            <img src="assets/screenshots/screenshot2.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Schedule the appointment</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">
+                While scheduling appointments on the website, you can also view the booking fees within the appointment information.</p>
+            <img src="assets/screenshots/screenshot3.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">select the date</h3>
+
+            <img src="assets/screenshots/screenshot4.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Proceed to Payment</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">We've enabled the upfront payment option, which adds an extra step to proceed to payment before confirming the appointment.</p>
+            <img src="assets/screenshots/screenshot5.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Select the Payment provider</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Choose the Payment provider and complete the payment</p>
+            <img src="assets/screenshots/screenshot6.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Payment in Progress</h3>
+            <img src="assets/screenshots/screenshot7.png" class="img-thumbnail">
+        </div>
+          <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Payment Completed</h3>
+              <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Payment has been completed, and we can now view the booking information.</p>
+            <img src="assets/screenshots/screenshot8.png" class="img-thumbnail">
+        </div>
+
+
+    </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/categories.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Related
+        Products
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/odoo_website_helpdesk/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/odoo_website_helpdesk_dashboard/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/website_product_publish/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/web_portal_attendance/#" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/4.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/website_pdf_preview_snippet/#" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/16.0/website_signup_approval/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/6.jpg">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev" style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i class="fa fa-chevron-left" style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1" data-slide="next" style="width:35px; color:#000">
+                <span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
+                        style="font-size:24px"></i></span>
+            </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/star.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our Services
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Customization</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Support</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire
+                Odoo
+                Developer</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Integration</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Migration</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Consultancy</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Licensing Consultancy</h6>
+        </div>
+    </div>
+
+</div>
+
+<!-- END OF END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/corporate.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our
+        Industries
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure
+                    and
+                    sell your products</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy
+                    configuration
+                    and convivial experience</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for
+                    educational management</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
+                    width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and
+                    schedule your operations</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile
+                    friendly,
+                    awe-inspiring product pages</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of
+                    services and invoice</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or
+                    restaurant methodically</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- END OF END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/customer-support.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Support
+    </h2>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4"
+                    style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/support.png" height="48" width="48" style="width: 42px; height: 42px;" />
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help? Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4"
+                    style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52" style="width: 52px; height: 52px;" />
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">+91 86068
+                            27707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="assets/misc/logo.png" width="144" height="31"
+                style="width:144px; height: 31px; margin-top: 40px;" />
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

website_appointment_payment/views/appointment_info_template.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!--  If the appointment has payment configuration, the appointment fees is shown in the appointment card  -->
+    <template id="appointment_info"
+              inherit_id="website_appointment.appointments_cards">
+        <xpath expr="//div[hasclass('o_wappointment_card_staff_users')]"
+               position="after">
+            <div t-if="appointment.product_id"
+                 class="d-flex py-1 px-0 bg-transparent o-cc1-text border-0">
+                <i class="fa fa-credit-card text-center text-muted fs-5 me-2"/>
+                <span t-esc="appointment.product_id.lst_price"
+                      t-options="{'widget': 'monetary', 'display_currency': appointment.product_id.currency_id}"/>
+            </div>
+        </xpath>
+    </template>
+</odoo>

website_appointment_payment/views/appointment_product_view.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data>
+        <!--   created new field in appointment form to create upfront payment     -->
+        <record id="appointment_type_view_product_form" model="ir.ui.view">
+            <field name="name">appointment.type.view.product.form</field>
+            <field name="model">appointment.type</field>
+            <field name="inherit_id"
+                   ref="appointment.appointment_type_view_form"/>
+            <field name="arch" type="xml">
+                <xpath expr="//group[@name='options_left_details']"
+                       position="inside">
+                    <label for="has_payment_step"/>
+                    <div>
+                        <div class="o_row">
+                            <field name="has_payment_step"/>
+                            <field name="product_id"
+                                   attrs="{'invisible':[('has_payment_step','=',False)]}"
+                                   placeholder="Choose a Product"
+                                   class="oe_inline"/>
+                        </div>
+                        <div attrs="{'invisible':[('has_payment_step','=',False)]}"
+                             groups="base.group_system">
+                        </div>
+                    </div>
+                </xpath>
+            </field>
+        </record>
+    </data>
+</odoo>

website_appointment_payment/views/appointment_template_registration.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- If upfront payment is enabled  proceed to payment button is shown  -->
+    <template id="appointment_form" inherit_id="appointment.appointment_form">
+        <xpath expr="//button[hasclass('btn-primary')]" position="replace">
+            <button t-if="appointment_type.has_payment_step and appointment_type.product_id.lst_price"
+                    type="submit"
+                    class="btn btn-primary o_appointment_form_confirm_btn">
+                Proceed to Payment
+            </button>
+            <button t-else="" type="submit"
+                    class="btn btn-primary o_appointment_form_confirm_btn">
+                Confirm Appointment
+            </button>
+        </xpath>
+    </template>
+</odoo>

website_appointment_payment/views/website_appointment_payment_template.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- If no payment provider is configured we can configure it from website   -->
+    <template id="appointment_payment" name="Appointment Payment Providers">
+        <t t-set="no_breadcrumbs" t-value="True"/>
+        <t t-call="portal.portal_layout">
+            <div id="wrap"
+                 class="bg-o-color-4 h-100 mt-4 pb-4 px-4 rounded-3 border">
+                <div t-if="not providers" class="mt-2">
+                                <a role="button" class="btn-link"
+                                    groups="base.group_system"
+                                    t-attf-href="/web#action=#{payment_action_id}">
+                                        <i class="fa fa-arrow-right"></i> Add payment providers
+                                </a>
+                            </div>
+                <div t-else="" class="oe_structure container o_appointment o_appointment_payment">
+                    <div t-call="payment.checkout"/>
+                </div>
+            </div>
+        </t>
+    </template>
+</odoo>

website_appointment_payment/views/website_appointment_template.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Show the price in appointment details form   -->
+    <template id="appointment_info_payment"
+              inherit_id="appointment.appointment_form">
+        <xpath expr="//div[hasclass('o_appointment_attendee_form_details')]"
+               position="inside">
+            <div t-if="appointment_type.product_id"
+                 class="d-flex py-1 px-0 bg-transparent o-cc1-text border-0">
+                <i class="fa fa-credit-card o_appointment_fa_width text-center fs-5 me-2"/>
+                <span t-esc="appointment_type.product_id.lst_price"
+                      t-options="{'widget': 'monetary', 'display_currency': appointment_type.product_id.currency_id}"/>
+            </div>
+        </xpath>
+    </template>
+</odoo>