Cancel Rental & Request Pickup

Cancellation for SO001.

Customer: Name
Period Ends: Date

Reason (optional)

</div>
                                        <button type="submit" class="btn btn-danger w-100">Confirm Cancellation & Request Pickup</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </t>
        </field>
    </record>

<record id="cancellation_success_page" model="ir.ui.view">
        <field name="name">Rental Cancellation Success</field>
        <field name="type">qweb</field>
        <field name="key">fusion_rental.cancellation_success_page</field>
        <field name="arch" type="xml">
            <t t-call="web.frontend_layout">
                <div class="container py-5"><div class="row justify-content-center"><div class="col-md-8 col-lg-6"><div class="card shadow-sm">
                    <div class="card-header bg-success text-white"><h3 class="mb-0">Cancellation Request Received</h3></div>
                    <div class="card-body text-center">
                        <i class="fa fa-check-circle text-success" style="font-size:48px;"/>
                        <p class="lead mt-3">Your cancellation for <strong t-out="order.name">SO001</strong> has been received.</p>
                        <p>Our team will contact you to schedule a pickup.</p>
                    </div>
                </div></div></div></div>
            </t>
        </field>
    </record>

<record id="cancellation_invalid_page" model="ir.ui.view">
        <field name="name">Rental Invalid Link</field>
        <field name="type">qweb</field>
        <field name="key">fusion_rental.cancellation_invalid_page</field>
        <field name="arch" type="xml">
            <t t-call="web.frontend_layout">
                <div class="container py-5"><div class="row justify-content-center"><div class="col-md-8 col-lg-6"><div class="card shadow-sm">
                    <div class="card-header bg-danger text-white"><h3 class="mb-0">Invalid Request</h3></div>
                    <div class="card-body text-center">
                        <i class="fa fa-times-circle text-danger" style="font-size:48px;"/>
                        <p class="lead mt-3" t-out="error">This link is invalid or has already been used.</p>
                        <p>Please contact our office for assistance.</p>
                    </div>
                </div></div></div></div>
            </t>
        </field>
    </record>

<record id="agreement_signing_page" model="ir.ui.view">
        <field name="name">Rental Agreement Signing</field>
        <field name="type">qweb</field>
        <field name="key">fusion_rental.agreement_signing_page</field>
        <field name="arch" type="xml">
            <t t-call="web.frontend_layout">
                <div class="container py-4"
                     t-att-data-poynt-business-id="poynt_business_id or ''"
                     t-att-data-poynt-application-id="poynt_application_id or ''">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header bg-primary text-white"><h3 class="mb-0">Rental Agreement</h3></div>
                                <div class="card-body">
                                    <h5>Order: <a t-att-href="'/my/orders/%d' % order.id" target="_blank" style="color: #0066a1; text-decoration: underline;"><t t-out="order.name">SO001</t></a></h5>
                                    <p><strong>Customer:</strong> <t t-out="partner.name">Name</t></p>
                                    <p><strong>Rental Period:</strong>
                                        <t t-out="order.rental_start_date and order.rental_start_date.strftime('%B %d, %Y') or ''">Start</t>
                                        to <t t-out="order.rental_return_date and order.rental_return_date.strftime('%B %d, %Y') or ''">End</t>
                                    </p>

<h5 class="mt-4">Order Summary</h5>
                                    <style>
                                        .order-summary-table { table-layout: fixed; width: 100%; }
                                        .order-summary-table .col-desc { width: 40%; }
                                        .order-summary-table .col-qty  { width: 8%; }
                                        .order-summary-table .col-price { width: 17%; }
                                        .order-summary-table .col-tax  { width: 17%; }
                                        .order-summary-table .col-total { width: 18%; }
                                        .order-summary-table td, .order-summary-table th { word-wrap: break-word; overflow-wrap: break-word; }
                                        @media (max-width: 576px) {
                                            .order-summary-table .col-desc  { width: 42%; }
                                            .order-summary-table .col-qty   { width: 7%; }
                                            .order-summary-table .col-price { width: 16%; }
                                            .order-summary-table .col-tax   { width: 16%; }
                                            .order-summary-table .col-total { width: 19%; }
                                            .order-summary-table td, .order-summary-table th { font-size: 0.82rem; padding: 0.3rem 0.25rem !important; }
                                        }
                                    </style>
                                    <table class="table table-sm table-bordered mb-0 order-summary-table">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="col-desc">Description</th>
                                                <th class="text-center col-qty">Qty</th>
                                                <th class="text-end col-price">Price</th>
                                                <th class="text-center col-tax">Tax</th>
                                                <th class="text-end col-total">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            
                                            <t t-foreach="order.order_line.filtered(lambda l: l.is_rental and not l.is_security_deposit)" t-as="line">
                                                <tr>
                                                    <td t-out="line.product_id.name">Product</td>
                                                    <td class="text-center" t-out="int(line.product_uom_qty)">1</td>
                                                    <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % line.price_unit"/></td>
                                                    <td class="text-center small"><t t-if="line.tax_ids"><t t-out="', '.join(line.tax_ids.mapped('name'))"/></t></td>
                                                    <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % line.price_total"/></td>
                                                </tr>
                                            </t>
                                            
                                            <t t-foreach="order.order_line.filtered(lambda l: not l.is_rental and not l.is_security_deposit and not l.display_type)" t-as="line">
                                                <tr>
                                                    <td t-out="line.product_id.name">Service</td>
                                                    <td class="text-center" t-out="int(line.product_uom_qty)">1</td>
                                                    <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % line.price_unit"/></td>
                                                    <td class="text-center small"><t t-if="line.tax_ids"><t t-out="', '.join(line.tax_ids.mapped('name'))"/></t></td>
                                                    <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % line.price_total"/></td>
                                                </tr>
                                            </t>
                                            
                                            <t t-foreach="order.order_line.filtered(lambda l: l.is_security_deposit)" t-as="line">
                                                <tr class="table-warning">
                                                    <td><strong>SECURITY DEPOSIT - REFUNDABLE</strong>
                                                        <br/><small class="text-muted">REFUNDABLE UPON RETURN IN GOOD & CLEAN CONDITION</small></td>
                                                    <td class="text-center" t-out="int(line.product_uom_qty)">1</td>
                                                    <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % line.price_unit"/></td>
                                                    <td class="text-center small"><t t-if="line.tax_ids"><t t-out="', '.join(line.tax_ids.mapped('name'))"/></t></td>
                                                    <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % line.price_total"/></td>
                                                </tr>
                                            </t>
                                        </tbody>
                                        <tfoot>
                                            <tr class="table-light">
                                                <td colspan="4" class="text-end">Subtotal</td>
                                                <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % order.amount_untaxed"/></td>
                                            </tr>
                                            <t t-if="order.amount_tax">
                                                <tr class="table-light">
                                                    <td colspan="4" class="text-end">Taxes</td>
                                                    <td class="text-end"><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % order.amount_tax"/></td>
                                                </tr>
                                            </t>
                                            <tr class="table-light">
                                                <td colspan="4" class="text-end"><strong>Total</strong></td>
                                                <td class="text-end"><strong><t t-out="order.currency_id.symbol or '$'"/><t t-out="'%.2f' % order.amount_total"/></strong></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <div class="alert alert-info mt-2 small mb-4">
                                        <strong>Payment will be processed in two portions:</strong>
                                        <ol class="mb-0 mt-1">
                                            <li>Rental charges, delivery and services</li>
                                            <li>Refundable security deposit (separate invoice)</li>
                                        </ol>
                                    </div>

<h5 class="mt-4">Rental Agreement</h5>
                                    <p class="text-muted small">Please review the full rental agreement below before signing.</p>
                                    <div style="border:1px solid #dee2e6; border-radius:4px; overflow:hidden; margin-bottom:20px; background:#f8f9fa;">
                                        <iframe t-att-src="pdf_preview_url"
                                                style="width:100%; height:600px; border:none;"
                                                title="Rental Agreement Preview"/>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input type="checkbox" class="form-check-input" id="agree_terms" required="1"/>
                                        <label class="form-check-label" for="agree_terms">
                                            I have read and agree to the terms and conditions of the Rental Agreement.
                                        </label>
                                    </div>

<hr class="my-4"/>
                                    <h5 class="mb-3">Credit Card Authorization</h5>
                                    <p class="text-muted mb-3">Your card details are securely handled by our PCI-compliant payment partner. We never see your full card number.</p>
                                    <div id="card-element" style="min-height:120px; border:1px solid #dee2e6; border-radius:6px; padding:16px 14px; background:#fff; margin-bottom:16px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);">
                                        <p class="text-muted mb-0" id="card-loading-text">Loading secure card form...</p>
                                    </div>
                                    <div id="card-element-error" class="text-danger small d-none mb-3"></div>

<hr class="my-4"/>
                                    <h5 class="mb-3">Billing Address</h5>
                                    <p class="text-muted mb-3">Enter the billing address associated with this card. Used for payment verification.</p>
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label">Street Address</label>
                                            <input type="text" id="billing_address" class="form-control" placeholder="Start typing address..." required="1"
                                                   t-att-value="partner.street or ''"/>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">City</label>
                                            <input type="text" id="billing_city" class="form-control" placeholder="City"
                                                   t-att-value="partner.city or ''"/>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Province / State</label>
                                            <input type="text" id="billing_state" class="form-control" placeholder="Province"
                                                   t-att-value="partner.state_id.name or ''"/>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Postal / Zip Code</label>
                                            <input type="text" id="billing_postal_code" class="form-control" placeholder="Postal Code" required="1"
                                                   t-att-value="partner.zip or ''" style="border: 2px solid #0066a1;"/>
                                            <small class="text-muted">Verify this matches the postal code on your card statement.</small>
                                        </div>
                                    </div>

<hr class="my-4"/>
                                    <h5 class="mb-3">Signature</h5>
                                    <div class="mb-3"><label class="form-label">Full Name (Print)</label><input type="text" id="signer_name" class="form-control" t-att-value="partner.name" required="1"/></div>
                                    <div class="mb-4">
                                        <label class="form-label">Signature</label>
                                        <div style="border:1px solid #ccc; border-radius:6px; background:#fff;">
                                            <canvas id="signature_pad" width="600" height="200" style="width:100%; height:200px; cursor:crosshair;"/>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="clear_signature">Clear</button>
                                    </div>

<button type="button" id="btn_sign_agreement" class="btn btn-primary btn-lg w-100 mt-4"
                                            t-att-data-order-id="order.id" t-att-data-token="token">
                                        Sign Agreement & Authorize Card
                                    </button>

<hr class="mt-4"/>
                                    <div class="text-center">
                                        <p class="text-muted small mb-2">If you do not wish to proceed, you may cancel this rental order.</p>
                                        <button type="button" id="btn_cancel_agreement" class="btn btn-outline-danger"
                                                t-att-data-order-id="order.id" t-att-data-token="token">
                                            Cancel Rental Order
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script t-att-src="'https://maps.googleapis.com/maps/api/js?key=%s&libraries=places' % (google_api_key or '')">/* Google Places */</script>
                <script src="https://collect.commerce.godaddy.com/sdk.js" async="async" defer="defer">/* Poynt Collect */</script>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        /* ---- Google Places address autocomplete ---- */
                        var addrInput = document.getElementById('billing_address');
                        if (addrInput && typeof google !== 'undefined' && google.maps && google.maps.places) {
                            var autocomplete = new google.maps.places.Autocomplete(addrInput, {
                                types: ['address'],
                                componentRestrictions: {country: ['ca', 'us']}
                            });
                            autocomplete.setFields(['address_components', 'formatted_address']);
                            autocomplete.addListener('place_changed', function() {
                                var place = autocomplete.getPlace();
                                if (!place.address_components) return;
                                var city = '', state = '', postal = '', streetNum = '', route = '';
                                for (var i = 0; i < place.address_components.length; i++) {
                                    var comp = place.address_components[i];
                                    var types = comp.types;
                                    if (types.indexOf('street_number') !== -1) streetNum = comp.long_name;
                                    if (types.indexOf('route') !== -1) route = comp.long_name;
                                    if (types.indexOf('locality') !== -1) city = comp.long_name;
                                    if (types.indexOf('administrative_area_level_1') !== -1) state = comp.short_name;
                                    if (types.indexOf('postal_code') !== -1) postal = comp.long_name;
                                }
                                addrInput.value = (streetNum ? streetNum + ' ' : '') + route;
                                var cityEl = document.getElementById('billing_city');
                                var stateEl = document.getElementById('billing_state');
                                var postalEl = document.getElementById('billing_postal_code');
                                if (cityEl) cityEl.value = city;
                                if (stateEl) stateEl.value = state;
                                if (postalEl && postal) postalEl.value = postal;
                            });
                        }

/* ---- Poynt Collect iFrame initialization ---- */
                        var poyntCollect = null;
                        var poyntNonce = null;
                        var cardLoadingText = document.getElementById('card-loading-text');
                        var cardErrorDiv = document.getElementById('card-element-error');

poyntCollect.on('nonce', function(event) {
                                poyntNonce = event.data.nonce;
                                submitSignedAgreement(poyntNonce);
                            });
                            poyntCollect.on('error', function(event) {
                                var rawErr = (event && event.data && event.data.error) ? event.data.error : null;
                                var msg;
                                if (typeof rawErr === 'string') {
                                    msg = rawErr;
                                } else if (rawErr && typeof rawErr === 'object') {
                                    msg = rawErr.message || rawErr.developerMessage || JSON.stringify(rawErr);
                                } else {
                                    msg = 'Card validation failed. Please check your card details.';
                                }
                                cardErrorDiv.textContent = msg;
                                cardErrorDiv.classList.remove('d-none');
                                var btn = document.getElementById('btn_sign_agreement');
                                if (btn) { btn.disabled = false; btn.textContent = 'Sign Agreement \x26 Authorize Card'; }
                            });
                            poyntCollect.on('ready', function() {
                                if (cardLoadingText) cardLoadingText.style.display = 'none';
                            });
                        }
                        initPoyntCollect();

/* ---- Signature pad ---- */
                        var canvas = document.getElementById('signature_pad');
                        var ctx = canvas.getContext('2d');
                        var drawing = false;

function getPos(e) {
                            var rect = canvas.getBoundingClientRect();
                            var x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
                            var y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
                            return {x: x * (canvas.width / rect.width), y: y * (canvas.height / rect.height)};
                        }

canvas.addEventListener('mousedown', function(e) { drawing = true; ctx.beginPath(); var p = getPos(e); ctx.moveTo(p.x, p.y); });
                        canvas.addEventListener('mousemove', function(e) { if (!drawing) return; var p = getPos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); });
                        canvas.addEventListener('mouseup', function() { drawing = false; });
                        canvas.addEventListener('touchstart', function(e) { e.preventDefault(); drawing = true; ctx.beginPath(); var p = getPos(e); ctx.moveTo(p.x, p.y); });
                        canvas.addEventListener('touchmove', function(e) { e.preventDefault(); if (!drawing) return; var p = getPos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); });
                        canvas.addEventListener('touchend', function() { drawing = false; });
                        ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.lineCap = 'round';

document.getElementById('clear_signature').addEventListener('click', function() { ctx.clearRect(0, 0, canvas.width, canvas.height); });

/* ---- Submit signed agreement to server ---- */
                        function submitSignedAgreement(nonce) {
                            var btn = document.getElementById('btn_sign_agreement');
                            var errDiv = document.getElementById('agreement_error');
                            var successDiv = document.getElementById('agreement_success');

fetch('/rental/agreement/' + orderId + '/' + token + '/sign', {
                                method: 'POST',
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify({
                                    jsonrpc: '2.0', method: 'call', id: 1,
                                    params: {
                                        order_id: parseInt(orderId), token: token,
                                        signer_name: document.getElementById('signer_name').value,
                                        signature_data: sigData,
                                        nonce: nonce,
                                        billing_address: billingAddr,
                                        billing_city: billingCity,
                                        billing_state: billingState,
                                        billing_postal_code: postalCode,
                                    }
                                })
                            }).then(function(r) { return r.json(); }).then(function(data) {
                                var res = data.result || data;
                                if (res.success) {
                                    successDiv.textContent = (res.message || 'Signed successfully!') + ' Redirecting...';
                                    successDiv.classList.remove('d-none');
                                    btn.textContent = 'Signed!';
                                    setTimeout(function() {
                                        window.location.href = '/rental/agreement/' + orderId + '/' + token + '/thank-you';
                                    }, 1500);
                                } else {
                                    errDiv.textContent = res.error || 'An error occurred.';
                                    errDiv.classList.remove('d-none');
                                    btn.disabled = false;
                                    btn.textContent = 'Sign Agreement \x26 Authorize Card';
                                }
                            }).catch(function(e) {
                                errDiv.textContent = 'Network error. Please try again.';
                                errDiv.classList.remove('d-none');
                                btn.disabled = false;
                                btn.textContent = 'Sign Agreement \x26 Authorize Card';
                            });
                        }

/* ---- Form submission: validate, then request nonce ---- */
                        document.getElementById('btn_sign_agreement').addEventListener('click', function() {
                            var btn = this;
                            var errDiv = document.getElementById('agreement_error');
                            var successDiv = document.getElementById('agreement_success');
                            errDiv.classList.add('d-none');
                            successDiv.classList.add('d-none');
                            cardErrorDiv.classList.add('d-none');

var agreeCheck = document.getElementById('agree_terms');
                            if (agreeCheck && !agreeCheck.checked) {
                                errDiv.textContent = 'You must agree to the rental agreement terms before signing.';
                                errDiv.classList.remove('d-none');
                                return;
                            }

var signerName = (document.getElementById('signer_name') || {}).value || '';
                            if (!signerName.trim()) {
                                errDiv.textContent = 'Full name is required.';
                                errDiv.classList.remove('d-none');
                                return;
                            }

var postalCode = (document.getElementById('billing_postal_code') || {}).value || '';
                            if (!postalCode.trim()) {
                                errDiv.textContent = 'Billing postal/zip code is required for payment verification.';
                                errDiv.classList.remove('d-none');
                                return;
                            }

if (!poyntCollect) {
                                errDiv.textContent = 'Payment form is not ready. Please wait a moment and try again.';
                                errDiv.classList.remove('d-none');
                                return;
                            }

btn.disabled = true;
                            btn.textContent = 'Processing...';

var nameParts = signerName.trim().split(' ');
                            var firstName = nameParts[0] || '';
                            var lastName = nameParts.slice(1).join(' ') || '';

var cEl = document.querySelector('.container[data-poynt-business-id]');
                            poyntCollect.getNonce({
                                businessId: cEl ? cEl.getAttribute('data-poynt-business-id') : '',
                                firstName: firstName,
                                lastName: lastName,
                                zipCode: postalCode,
                            });
                        });

/* ---- Cancel button ---- */
                        var cancelBtn = document.getElementById('btn_cancel_agreement');
                        if (cancelBtn) {
                            cancelBtn.addEventListener('click', function() {
                                if (!confirm('Are you sure you want to cancel this rental order? This action cannot be undone.')) return;
                                var btn = this;
                                var errDiv = document.getElementById('agreement_error');
                                btn.disabled = true;
                                btn.textContent = 'Cancelling...';

var orderId = btn.dataset.orderId;
                                var token = btn.dataset.token;

fetch('/rental/agreement/' + orderId + '/' + token + '/decline', {
                                    method: 'POST',
                                    headers: {'Content-Type': 'application/json'},
                                    body: JSON.stringify({
                                        jsonrpc: '2.0', method: 'call', id: 1,
                                        params: { order_id: parseInt(orderId), token: token }
                                    })
                                }).then(function(r) { return r.json(); }).then(function(data) {
                                    var res = data.result || data;
                                    if (res.success) {
                                        var successDiv = document.getElementById('agreement_success');
                                        successDiv.textContent = res.message || 'Rental order has been cancelled.';
                                        successDiv.classList.remove('d-none');
                                        btn.textContent = 'Cancelled';
                                        var signBtn = document.getElementById('btn_sign_agreement');
                                        if (signBtn) signBtn.style.display = 'none';
                                    } else {
                                        errDiv.textContent = res.error || 'An error occurred.';
                                        errDiv.classList.remove('d-none');
                                        btn.disabled = false;
                                        btn.textContent = 'Cancel Rental Order';
                                    }
                                }).catch(function(e) {
                                    errDiv.textContent = 'Network error. Please try again.';
                                    errDiv.classList.remove('d-none');
                                    btn.disabled = false;
                                    btn.textContent = 'Cancel Rental Order';
                                });
                            });
                        }
                    });
                </script>
            </t>
        </field>
    </record>

<record id="agreement_thank_you_page" model="ir.ui.view">
        <field name="name">Rental Agreement Thank You</field>
        <field name="type">qweb</field>
        <field name="key">fusion_rental.agreement_thank_you_page</field>
        <field name="arch" type="xml">
            <t t-call="web.frontend_layout">
                <div class="container py-5">
                    <div class="row justify-content-center">
                        <div class="col-md-8 col-lg-6">
                            <div class="card shadow-sm">
                                <div class="card-header bg-success text-white text-center py-4">
                                    <i class="fa fa-check-circle" style="font-size:48px;" title="Success"/>
                                    <h3 class="mb-0 mt-2">Agreement Signed Successfully</h3>
                                </div>
                                <div class="card-body text-center py-4">
                                    <p class="lead mb-3">Thank you, <strong t-out="partner.name">Customer</strong>!</p>
                                    <p class="mb-2">Your rental agreement for order <strong t-out="order.name">SO001</strong> has been signed and your payment has been processed.</p>

<div class="alert alert-light border mt-4 text-start">
                                        <h6 class="fw-bold mb-3">What happens next?</h6>
                                        <ol class="mb-0" style="padding-left:20px;">
                                            <li class="mb-2">Our team will review your order and prepare the equipment for delivery.</li>
                                            <li class="mb-2">We will contact you to schedule a delivery date and time that works for you.</li>
                                            <li class="mb-2">On delivery day, our technician will set up the equipment and walk you through its use.</li>
                                            <li>You will receive email confirmations at each step.</li>
                                        </ol>
                                    </div>

<p class="text-muted mt-4 mb-3">Have questions? Reach out to us anytime:</p>

<div class="d-flex justify-content-center gap-3 flex-wrap">
                                        <a t-att-href="'tel:%s' % (company_phone or '')" class="btn btn-primary btn-lg"
                                           t-if="company_phone">
                                            <i class="fa fa-phone me-2" title="Call"/> Call Us
                                        </a>
                                        <a t-att-href="'mailto:%s?subject=Re: Order %s' % (company_email or '', order.name)" class="btn btn-outline-primary btn-lg"
                                           t-if="company_email">
                                            <i class="fa fa-envelope me-2" title="Email"/> Email Us
                                        </a>
                                    </div>

<hr class="my-4"/>
                                    <a href="/my/orders" class="btn btn-outline-secondary">
                                        <i class="fa fa-list me-1" title="Orders"/> View My Orders
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </t>
        </field>
    </record>

<record id="card_reauthorization_page" model="ir.ui.view">
        <field name="name">Card Reauthorization</field>
        <field name="type">qweb</field>
        <field name="key">fusion_rental.card_reauthorization_page</field>
        <field name="arch" type="xml">
            <t t-call="web.frontend_layout">
                <div class="container py-4"
                     t-att-data-poynt-business-id="poynt_business_id or ''"
                     t-att-data-poynt-application-id="poynt_application_id or ''">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header bg-primary text-white">
                                    <h3 class="mb-0">Update Payment Card</h3>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted mb-3">
                                        Order: <strong t-out="order.name"/> |
                                        Customer: <strong t-out="partner.name"/>
                                    </p>

<h5 class="mb-3">Cardholder Information</h5>
                                    <div class="row mb-4">
                                        <div class="col-md-12 mb-3">
                                            <label class="form-label fw-bold">Full Name on Card <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="cardholderName"
                                                   placeholder="Enter the name as it appears on the card" required="required"/>
                                        </div>
                                    </div>

<h5 class="mb-3">Billing Address</h5>
                                    <div class="row mb-4">
                                        <div class="col-md-12 mb-3">
                                            <label class="form-label fw-bold">Address <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="billingAddress"
                                                   placeholder="Street address"/>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label fw-bold">City</label>
                                            <input type="text" class="form-control" id="billingCity"/>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label fw-bold">Province/State</label>
                                            <input type="text" class="form-control" id="billingState"/>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label fw-bold">Postal Code <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="billingPostalCode"
                                                   placeholder="Postal / ZIP code"/>
                                        </div>
                                    </div>

<hr class="my-4"/>
                                    <h5 class="mb-3">Card Details</h5>
                                    <p class="text-muted small mb-2" id="cardLoadingText">Loading secure payment form...</p>
                                    <div id="card-element" style="min-height:120px;border:1px solid #dee2e6;border-radius:8px;padding:16px 14px;background:#fafafa;box-shadow:inset 0 1px 3px rgba(0,0,0,0.06);"/>

<hr class="my-4"/>
                                    <div class="text-center">
                                        <button id="btnSubmitCard" class="btn btn-primary btn-lg px-5">
                                            <i class="fa fa-lock me-2"/> Authorize Card
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<script src="https://cdn.poynt.net/collect.js"/>
                <script>
                    (function() {
                        var cEl = document.querySelector('.container[data-poynt-business-id]');
                        var bizId = cEl ? cEl.getAttribute('data-poynt-business-id') : '';
                        var appId = cEl ? cEl.getAttribute('data-poynt-application-id') : '';
                        var cardLoadingText = document.getElementById('cardLoadingText');
                        var poyntCollect = null;
                        var poyntNonce = null;

function showAlert(msg, type) {
                            var a = document.getElementById('alertBox');
                            a.className = 'alert alert-' + type;
                            a.textContent = msg;
                            a.classList.remove('d-none');
                        }

document.getElementById('btnSubmitCard').addEventListener('click', function() {
                            var errDiv = document.getElementById('alertBox');
                            errDiv.classList.add('d-none');

var name = document.getElementById('cardholderName').value.trim();
                            var postal = document.getElementById('billingPostalCode').value.trim();

if (!name) { showAlert('Cardholder name is required.', 'danger'); return; }
                            if (!postal) { showAlert('Billing postal/zip code is required.', 'danger'); return; }
                            if (!poyntCollect) { showAlert('Payment form is not ready.', 'danger'); return; }

poyntNonce = null;
                            poyntCollect.getNonce({ businessId: bizId });

var btn = this;
                            btn.disabled = true;
                            btn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i> Processing...';

<record id="purchase_interest_success_page" model="ir.ui.view">
        <field name="name">Rental Purchase Interest</field>
        <field name="type">qweb</field>
        <field name="key">fusion_rental.purchase_interest_success_page</field>
        <field name="arch" type="xml">
            <t t-call="web.frontend_layout">
                <div class="container py-5"><div class="row justify-content-center"><div class="col-md-8 col-lg-6"><div class="card shadow-sm">
                    <div class="card-header bg-success text-white"><h3 class="mb-0">Thank You for Your Interest!</h3></div>
                    <div class="card-body text-center">
                        <i class="fa fa-shopping-cart text-success" style="font-size:48px;"/>
                        <p class="lead mt-3">We've received your interest in purchasing your rental product from order <strong t-out="order.name">SO001</strong>.</p>
                        <p>A member of our team will contact you shortly to discuss the details and schedule delivery.</p>
                    </div>
                </div></div></div></div>
            </t>
        </field>
    </record>

</odoo>

Renewal Details
Order
Renewal Date
Renewal Amount

New Rental Period
New Start
New Return
Renewal #

Payment Details
Reference
Rental Period	to
Amount Paid

Refund Details
Deposit Amount
Refund To	** **

Refund Receipt
Order
Refund Amount
Refunded To	** **

Rental Renewal Notice

Rental Renewed

Payment Receipt

Cancellation Request Received

Rental Agreement

Your Signed Rental Agreement

Love Your Rental? Make It Yours!

Security Deposit Refund in Progress

Security Deposit Refunded

Invoice & Payment Confirmation

Rental Inspection Update

Thank You!

Update Payment Card

Payment Card Updated

Cancel Rental & Request Pickup

Agreement Summary
Order
Signed By
Signed On
Rental Period	to
Total

Payment Receipt
Order
Invoice
Description	Rental Charges, Delivery & Services Security Deposit (Refundable) Rental Renewal Damage Assessment Charges Rental Payment
Amount Paid
Amount