twigfiddle.com - Invoice

File

{% extends "invoice.base.twig" %}
{%block header %}
{% if order %}
<table style="position: absolute; right: 0px; font-size: 8px; line-height:1.5; width:50%; margin:0;padding:0;border-spacing:0;border-collapse:separate;" cellspacing="0" cellpadding="0">
    <tr>
        <td style="width: 25%; vertical-align:top; text-align: left; padding: 0 10px 0 0;">Name:</td>
        <td style="width: 75%; vertical-align:top; text-align: right;">{{ order.customer_name__c }}</td>
    </tr>
    <tr>
        <td style="text-align: left; vertical-align:top; padding: 0 10px 0 0;">Bestellnummer:</td>
        <td style="text-align: right; vertical-align:top;">{{ order.spree_order_number__c }}</td>
    </tr>
    <tr>
        <td style="text-align: left; vertical-align:top; padding: 0 10px 0 0;">Rechnungsnummer:</td>
        <td style="text-align: right; vertical-align:top;">{{ invoice.number || payment.invoice_number__c }}</td>
    </tr>
    <tr>
        <td style="text-align: left; vertical-align:top; padding: 0 10px 0 0;">Datum:</td>
        <td style="text-align: right; vertical-align:top;">{{ __format.date(invoice.date || payment.date_invoiced__c || payment.date_due__c) }}</td>
    </tr>
</table>
{% endif %}
{% endblock %}
{% block body %}
<p style="max-width: 60%; margin-top: 0;">
    {{ order.customer_name__c }}<br/>
    {% if order.billing_company__c %}{{ order.billing_company__c }}<br/>{% endif %}
    {{ order.BillingStreet }}<br/>
    {{ order.BillingPostalCode }} {{ order.BillingCity }}</br>
    {{ order.BillingCountry || order.locale__c.toUpperCase() }}
</p>
<h3 style="font-size: 14px; margin: 25px 0 0 0;">Rechnung</h3>
<p style="margin: 0 0 30px 0;">
    Rechnungsnummer: {{ invoice.number }}<br />
    {%if invoice.start && invoice.end %}
    Rechnungsperiode: {{ __format.date(invoice.start) }} - {{ __format.date(invoice.end) }}
    {% else %}
    Rechnungsperiode: Der Abrechnungszeitraum beginnt an dem Tag, an dem du das Produkt erhältst.
    {% endif %}
</p>
<p>Liebe(r) {{ order.customer_name__c && order.customer_name__c.split(" ")[0] }},</p>
<p>anbei findest du die Rechnung zu deiner Bestellung <b>{{ order.spree_order_number__c }}</b> für den Zeitraum {{ __format.date(invoice.start) }} - {{ __format.date(invoice.end) }}:</p>
{% include "products.de.html" %}
<p>Beste Grüße</p>
<p><b>Grover</b></p>
{% endblock %}

File

<div style="margin: 20px 0; padding: 10px; background-color:rgb(238,238,238);box-shadow: 5px 5px 19px -3px rgba(164,164,164,0.9);border-radius: 1.75em;">
    <h2 style="text-align:center; margin: 5px; color:#8235FF">Hier ist eine Zusammenfassung deiner Bestellung:</h2>
    <table style="display: table; width:90%; font-size: 10px;margin:0 auto;line-height:1.25; border-spacing:0;border-collapse:separate;" cellspacing="0" cellpadding="0">
        <tr>
            <td style="color:rgb(180,180,180);text-align:left;padding:5px 10px;"><b>Produkt(e)</b></td>
            <td style="color:rgb(180,180,180); width: 15%;text-align:right;padding:5px 10px;"><b>Anzahl</b></td>
            <td style="color:rgb(180,180,180); width: 25%;text-align:right;padding:5px 10px;"><b>Preis/Stück</b></td>
        </tr>
        {% for product in products %}
        <tr>
            <td style="text-align:left;padding:5px 10px;">{{ product.allocation.asset_name__c || product.Name }}</td>
            <td style="text-align:right;padding:5px 10px;">{{ product.Quantity || 1 }}</td>
            <td style="text-align:right;padding:5px 10px;">{{ __format.currency(product.UnitPrice) }}/Monat</td>
        </tr>
        {% endfor %}
        <tr>
            <td colspan="3">
                <hr style="border-top-width:1px;border-top-style:solid;border-top-color:rgb(180,180,180);"/>
            </td>
        </tr>
        <tr>
            <td style="text-align:left;padding:5px 10px;"><b>Gesamtsumme im Zeitraum:</b></td>
            <td style="text-align:right;padding:5px 10px;"></td>
            <td style="text-align:right;padding:5px 10px;"><b>{{ __format.currency(amount_products) }}/Monat</b></td>
        </tr>
        {% if amount_adjustment %}
        <tr>
            <td style="text-align:left;padding:5px 10px;">{{ __("Subscription plan - " + plan) }}:</td>
            <td style="text-align:right;padding:5px 10px;"></td>
            <td style="text-align:right;padding:5px 10px;">{{ __format.currency(amount_adjustment) }}</</td>
        </tr>
        {% endif %}
        {% if amount_voucher && voucher_redeemed %}
        <tr>
            <td style="text-align:left;padding:5px 10px;">Grover Discount:</td>
            <td style="text-align:right;padding:5px 10px;"></td>
            <td style="text-align:right;padding:5px 10px;">{{ __format.currency(amount_voucher) }}</td>
        </tr>
        {% endif %}
        {% if amount_shipment %}
        <tr>
            <td style="text-align:left;padding:5px 10px;">Versandkosten einmalig:</td>
            <td style="text-align:right;padding:5px 10px;"></td>
            <td style="text-align:right;padding:5px 10px;">{{ __format.currency(amount_shipment) }}</td>
        </tr>
        {% endif %}
        {% if overdue_fee %}
        <tr>
            <td style="text-align:left;padding:5px 10px;">Mahnung:</td>
            <td style="text-align:right;padding:5px 10px;"></td>
            <td style="text-align:right;padding:5px 10px;">{{ __format.currency(overdue_fee) }}</td>
        </tr>
        {% endif %}
        {% if amount_refunded %}
        <tr>
            <td style="text-align:left;padding:5px 10px;">Erstattung:</td>
            <td style="text-align:right;padding:5px 10px;"></td>
            <td style="text-align:right;padding:5px 10px;">{{ __format.currency(amount_refunded) }}</td>
        </tr>
        {% endif %}
        {% if min_term_months %}
        <tr>
            <td colspan="3">
                <hr style="border-top-width:1px;border-top-style:solid;border-top-color:rgb(180,180,180);"/>
            </td>
        </tr>
        <tr>
            <td style="text-align:left;padding:1em 1.5em; border-bottom: 1px solid #eeeeee;"><b>Plan:</b></td>
            <td style="text-align:right;padding:1em 1.5em; border-bottom: 1px solid #eeeeee;"></td>
            <td style="text-align:right;padding:1em 1.5em; border-bottom: 1px solid #eeeeee;"><b>{{ min_term_months }} Monate</b></td>
        </tr>
        {% endif %}
        {% if amount_adjustment || amount_voucher || amount_shipment || amount_refunded %}
        <tr>
            <td colspan="3">
                <hr style="border-top-width:1px;border-top-style:solid;border-top-color:rgb(180,180,180);"/>
            </td>
        </tr>
        <tr>
            <td style="text-align:left;padding:5px 10px;"><b>Zu zahlen bei Bestätigung:</b></td>
            <td style="text-align:right;padding:5px 10px;"></td>
            <td style="text-align:right;padding:5px 10px;"><b>{{ __format.currency(amount_total) }}</b></td>
        </tr>
        {% endif %}
        {% if amount_vat %}
        <tr style="line-height:1">
            <td colspan="3" style="text-align:left;padding:5px 10px;">(inkl. {{ __config.vat * 100 }}%, {{ __format.currency(amount_vat) }} MwSt.)</td>
        </tr>
        {% endif %}
        <tr>
            <td colspan="3">
                <hr style="border-top-width:1px;border-top-style:solid;border-top-color:rgb(180,180,180);"/>
            </td>
        </tr>
    </table>
</div>

File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body {
            font-family: Arial, Helvetica, Tahoma, Geneva, Georgia, Verdana, sans-serif;
            font-size: 10px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{{ __views_path }}assets/fonts/Larsseit.css">
</head>
<body style="text-indent:0px;word-spacing:0px;line-height: 1.5;margin:0;padding:0; position: relative;">
    <div style="width: 500px; margin: 0 auto; padding: 0 0 10px 0; text-align: center;">        
        <img src="{{ __views_path }}assets/grover/grover-logo-1000dpi.png" style="margin: 0 auto;" width="130"/>
    </div>
    <div style="width: 500px; margin: 0 auto; text-align: center;">
        <img src="{{ __views_path }}assets/grover/down-bar.png" width="500" height="5" />
    </div>
    <div class="header" style="width: 500px; padding: 0; margin: 15px auto 0 auto; position: relative;">
    {%block header %}{% endblock %}
    </div>
    <div class="body" style="width: 500px; margin: 0 auto 20px auto;line-height: 1.5;">
    {% block body %}{% endblock %}
    </div>
    {% block footer %}
    <div class="footer" style="width: 500px; padding: 0; margin: 15px auto 0 auto;line-height:1.5; text-align:center; page-break-inside: avoid;">
        <p style="font-size: 8px;">
            <b><a target="_blank" style="text-decoration: none; color: black;" href="https://www.getgrover.com">www.getgrover.com</a></b><br />
            Holzmarktstr. 11 | 10179 Berlin, Germany
        </p>
        <p style="font-size: 8px;">
            &copy; BYEBUY Global Operations GmbH<br/>
            Amtsgericht Berlin-Charlottenburg | HRB: 166 467 | UST-ID: DE300852104 | Managing Director: Michael Cassau
        </p>
    </div>
    {% endblock footer %}
</body>
</html>

Format