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">
                    <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: <t t-out="order.name">SO001</t></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>
                                    <table class="table table-sm table-bordered mb-0">
                                        <thead class="table-light">
                                            <tr><th>Description</th><th class="text-center" style="width:60px;">Qty</th><th class="text-end" style="width:120px;">Price</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_subtotal"/></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_subtotal"/></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_subtotal"/></td>
                                                </tr>
                                            </t>
                                        </tbody>
                                        <tfoot>
                                            <tr class="table-light">
                                                <td colspan="2" 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/>
                                    <h5>Credit Card Authorization</h5>
                                    <p class="text-muted small">Your card will be securely tokenized. We do not store your full card number.</p>
                                    <div class="row g-3">
                                        <div class="col-12"><label class="form-label">Cardholder Name</label><input type="text" id="cardholder_name" class="form-control" placeholder="Name on card" required="1"/></div>
                                        <div class="col-12"><label class="form-label">Card Number</label><input type="text" id="card_number" class="form-control" placeholder="1234 5678 9012 3456" maxlength="19" required="1"/></div>
                                        <div class="col-4"><label class="form-label">Month</label><input type="text" id="exp_month" class="form-control" placeholder="MM" maxlength="2" required="1"/></div>
                                        <div class="col-4"><label class="form-label">Year</label><input type="text" id="exp_year" class="form-control" placeholder="YYYY" maxlength="4" required="1"/></div>
                                        <div class="col-4"><label class="form-label">CVV</label><input type="password" id="cvv" class="form-control" placeholder="***" maxlength="4" required="1"/></div>
                                    </div>

<hr/>
                                    <h5>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-3">
                                        <label class="form-label">Signature</label>
                                        <div style="border:1px solid #ccc; border-radius:4px; 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-1" id="clear_signature">Clear</button>
                                    </div>

<button type="button" id="btn_sign_agreement" class="btn btn-primary btn-lg w-100 mt-3"
                                            t-att-data-order-id="order.id" t-att-data-token="token">
                                        Sign Agreement & Authorize Card
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        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); });

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');

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;
                            }

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

var orderId = btn.dataset.orderId;
                            var token = btn.dataset.token;
                            var sigData = canvas.toDataURL('image/png');

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,
                                        card_number: document.getElementById('card_number').value,
                                        exp_month: document.getElementById('exp_month').value,
                                        exp_year: document.getElementById('exp_year').value,
                                        cvv: document.getElementById('cvv').value,
                                        cardholder_name: document.getElementById('cardholder_name').value,
                                    }
                                })
                            }).then(function(r) { return r.json(); }).then(function(data) {
                                var res = data.result || data;
                                if (res.success) {
                                    successDiv.textContent = res.message || 'Signed successfully!';
                                    successDiv.classList.remove('d-none');
                                    btn.textContent = 'Signed!';
                                } else {
                                    errDiv.textContent = res.error || 'An error occurred.';
                                    errDiv.classList.remove('d-none');
                                    btn.disabled = false;
                                    btn.textContent = 'Sign Agreement & Authorize Card';
                                }
                            }).catch(function(e) {
                                errDiv.textContent = 'Network error. Please try again.';
                                errDiv.classList.remove('d-none');
                                btn.disabled = false;
                                btn.textContent = 'Sign Agreement & Authorize Card';
                            });
                        });
                    });
                </script>
            </t>
        </field>
    </record>

<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
Refund Amount
Card	** **

Rental Renewal Notice

Rental Renewed

Payment Receipt

Cancellation Request Received

Rental Agreement

Love Your Rental? Make It Yours!

Security Deposit Refunded

Thank You!

Cancel Rental & Request Pickup