Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix into 3928-worker.time-control_sendMail

.eslintrc.yml

@@ -1,4 +1,4 @@
-extends: [eslint:recommended, google, plugin:jasmine/recommended]
+extends: [eslint:recommended, google, plugin:jasmine/recommended, 'prettier',]
 parserOptions:
     ecmaVersion: 2018
     sourceType: "module"

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4,
+    semi: true,
+    endOfLine: 'auto',
+};

.vscode/settings.json

@@ -2,7 +2,16 @@
 {
     // Carácter predeterminado de final de línea.
     "files.eol": "\n",
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+    "editor.bracketPairColorization.enabled": true,
+    "editor.guides.bracketPairs": true,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": ["source.fixAll.eslint"],
+    "eslint.validate": [
+        "javascript",
+        "json"
+    ],
+    "[html]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }

back/methods/dms/deleteTrashFiles.js

@@ -47,20 +47,22 @@ module.exports = Self => {
         for (let dms of dmsToDelete) {
             const pathHash = DmsContainer.getHash(dms.id);
             const dmsContainer = await DmsContainer.container(pathHash);
-            const dstFile = path.join(dmsContainer.client.root, pathHash, dms.file);
             try {
+                const dstFile = path.join(dmsContainer.client.root, pathHash, dms.file);
                 await fs.unlink(dstFile);
             } catch (err) {
-                continue;
+                if (err.code != 'ENOENT')
+                    throw err;
             }
+
+            await dms.destroy(myOptions);
+
             const dstFolder = path.join(dmsContainer.client.root, pathHash);
             try {
                 await fs.rmdir(dstFolder);
             } catch (err) {
                 continue;
             }
-
-            await dms.destroy(myOptions);
         }
     };
 };

db/docker.js

@@ -47,12 +47,8 @@ module.exports = class Docker {
         if (ci) network = `--network="${networkName}"`;
 
         log('Starting container...');
-        const container = await this.execP(`
-            docker run \
-                ${network} \
-                --env RUN_CHOWN=${runChown} \
-                -d ${dockerArgs} salix-db
-        `);
+        const container = await this.execP(
+            `docker run ${network} --env RUN_CHOWN=${runChown} -d ${dockerArgs} salix-db`);
         this.id = container.stdout.trim();
 
         try {

db/dump/fixtures.sql

@@ -918,7 +918,7 @@ INSERT INTO `vn`.`expeditionStateType`(`id`, `description`, `code`)
         (3, 'Perdida', 'LOST');
 
 
-INSERT INTO `vn`.`expedition`(`id`, `agencyModeFk`, `ticketFk`, `isBox`, `created`, `itemFk`, `counter`, `workerFk`, `externalId`, `packagingFk`, `stateTypeFk`, `hostFk`)
+INSERT INTO `vn`.`expedition`(`id`, `agencyModeFk`, `ticketFk`, `freightItemFk`, `created`, `itemFk`, `counter`, `workerFk`, `externalId`, `packagingFk`, `stateTypeFk`)
     VALUES
         (1,  1, 1, 71, DATE_ADD(util.VN_CURDATE(), INTERVAL -1 MONTH),  15,      1,  18, 'UR9000006041',   94, 1,   'pc1'),
         (2,  1, 1, 71, DATE_ADD(util.VN_CURDATE(), INTERVAL -1 MONTH),  16,      2,  18, 'UR9000006041',   94, 1,   NULL),

db/dump/structure.sql

@@ -27518,7 +27518,7 @@ CREATE TABLE `expedition` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `agencyModeFk` int(11) NOT NULL,
   `ticketFk` int(10) NOT NULL,
-  `isBox` int(11) DEFAULT 1 COMMENT 'Este campo realmente en un campo itemFk, haciendo referencia al artículo que nos va a facturar el proveedor de transporte.\nSe debería llamar freightItemFk',
+  `freightItemFk` int(11) DEFAULT 1 COMMENT 'Este campo realmente en un campo itemFk, haciendo referencia al artículo que nos va a facturar el proveedor de transporte.\nSe debería llamar freightItemFk',
   `created` timestamp NULL DEFAULT current_timestamp(),
   `isRefund__` bit(1) DEFAULT b'0' COMMENT 'Deprecado 01/06/2022',
   `isPickUp__` bit(1) DEFAULT b'0' COMMENT 'Deprecado 01/06/2022',
@@ -27534,7 +27534,7 @@ CREATE TABLE `expedition` (
   `hasNewRoute` bit(1) NOT NULL DEFAULT b'0',
   PRIMARY KEY (`id`),
   KEY `index1` (`agencyModeFk`),
-  KEY `index2` (`isBox`),
+  KEY `index2` (`freightItemFk`),
   KEY `index3` (`created`),
   KEY `index4` (`ticketFk`),
   KEY `expedition_fk3_idx` (`packagingFk`),
@@ -27567,7 +27567,7 @@ BEGIN
 
     DECLARE vShipFk INT;
 
-	IF NEW.isBox > 0 THEN
+	IF NEW.freightItemFk > 0 THEN
 
 		UPDATE ticket SET packages = nz(packages) + 1 WHERE id = NEW.ticketFk;
 
@@ -27638,7 +27638,7 @@ DELIMITER ;;
 BEGIN
     UPDATE ticket t
         SET packages = (SELECT COUNT(counter)-1
-		FROM expedition e WHERE e.ticketFk = OLD.ticketFk and e.isBox)
+		FROM expedition e WHERE e.ticketFk = OLD.ticketFk and e.freightItemFk)
 		WHERE t.id = OLD.ticketFk;
 
 END */;;
@@ -36287,7 +36287,7 @@ CREATE TABLE `sorter` (
   `created` datetime NOT NULL,
   `routeFk` int(10) unsigned NOT NULL,
   `ticketFk` int(10) NOT NULL,
-  `isBox` int(11) DEFAULT 1,
+  `freightItemFk` int(11) DEFAULT 1,
   `itemFk` int(11) DEFAULT NULL,
   `width` decimal(10,2) DEFAULT 0.00,
   `depth` decimal(10,2) DEFAULT 0.00,
@@ -44956,7 +44956,7 @@ BEGIN
 		SELECT SUM((t.zonePrice - t.zoneBonus) * ebv.ratio) INTO deliveryPrice
 			FROM vn.ticket t
 				LEFT JOIN expedition e ON e.ticketFk = t.id
-				JOIN expeditionBoxVol ebv ON ebv.boxFk = e.isBox
+				JOIN expeditionBoxVol ebv ON ebv.boxFk = e.freightItemFk
 			WHERE t.id = vTicketFk;
 
 	END IF;
@@ -46492,7 +46492,7 @@ BEGIN
 			LEFT JOIN item i ON i.id = b.itemFk
 			LEFT JOIN itemType it ON it.id = i.typeFk
 			LEFT JOIN itemCategory ic ON ic.id = it.categoryFk
-			LEFT JOIN packaging p ON p.id = b.packageFk AND NOT p.isBox
+			LEFT JOIN packaging p ON p.id = b.packageFk AND NOT p.freightItemFk
 			JOIN volumeConfig vc ON TRUE
 		WHERE b.id = vSelf;
 
@@ -53229,7 +53229,7 @@ BEGIN
 			INNER JOIN vn.ticketState ts ON ts.ticketFk = exp.ticketFk
 			LEFT JOIN vn.address a ON t.addressFk = a.id
 			LEFT JOIN vn.warehouse w ON t.warehouseFk = w.id
-		WHERE t.routeFk = vRouteFk AND exp.isBox > 0;
+		WHERE t.routeFk = vRouteFk AND exp.freightItemFk > 0;
 END ;;
 DELIMITER ;
 /*!50003 SET sql_mode              = @saved_sql_mode */ ;
@@ -53760,7 +53760,7 @@ BEGIN
 						GROUP BY sub.ticketFk
 						) sub2 ON sub2.ticketFk = t.id
 			LEFT JOIN expeditionStateType est ON est.id  = e.stateTypeFk
-		WHERE t.routeFk = vRouteFk AND e.isBox <> FALSE
+		WHERE t.routeFk = vRouteFk AND e.freightItemFk <> FALSE
 		ORDER BY  r.created,  t.priority DESC;
 END ;;
 DELIMITER ;

front/core/components/input-file/index.html

@@ -3,7 +3,7 @@
         ng-transclude="prepend"
         class="prepend">
     </div>
-    <div class="infix">
+    <div class="infix" >
         <div class="fix prefix"></div>
         <div class="control">
             <section
@@ -13,8 +13,7 @@
             </section>
             <input
                 type="file"
-                accept="{{$ctrl.accept}}"
-                style="display: none;">
+                accept="{{$ctrl.accept}}">
             </input>
         </div>
         <div class="fix suffix"></div>

front/core/components/input-file/style.scss

@@ -4,4 +4,13 @@
     .value {
         cursor: pointer;
     }
+    .control {
+        & > input[type=file] {
+            opacity: 0;
+        }
+        & > section {
+            position: absolute;
+            bottom: 0;
+        }
+    }
 }

loopback/locale/es.json

@@ -242,5 +242,6 @@
 	"You don't have grant privilege": "No tienes privilegios para dar privilegios",
 	"You don't own the role and you can't assign it to another user": "No eres el propietario del rol y no puedes asignarlo a otro usuario",
 	"Already has this status": "Ya tiene este estado",
-	"There aren't records for this week": "No existen registros para esta semana"
-}
+	"There aren't records for this week": "No existen registros para esta semana",
+	"Empty data source": "Origen de datos vacio"
+}

modules/client/back/methods/receipt/balanceCompensationEmail.js

@@ -0,0 +1,40 @@
+const {Email} = require('vn-print');
+
+module.exports = Self => {
+    Self.remoteMethodCtx('balanceCompensationEmail', {
+        description: 'Sends the debit balances compensation email with an attached PDF',
+        accessType: 'WRITE',
+        accepts: [
+            {
+                arg: 'id',
+                type: 'Number',
+                required: true,
+                description: 'The receipt id',
+                http: { source: 'path' }
+            }
+        ],
+        returns: {
+            type: ['object'],
+            root: true
+        },
+        http: {
+            path: '/:id/balance-compensation-email',
+            verb: 'POST'
+        }
+    });
+
+    Self.balanceCompensationEmail = async (ctx, id) => {
+
+        const models = Self.app.models;
+        const receipt = await models.Receipt.findById(id, {fields: ['clientFk']});
+        const client = await models.Client.findById(receipt.clientFk, {fields:['email']});
+
+        const email = new Email('balance-compensation', {
+            lang: ctx.req.getLocale(),
+            recipient: client.email+',administracion@verdnatura.es',
+            id
+        });
+
+        return email.send();
+    };
+};

modules/client/back/methods/receipt/balanceCompensationPdf.js

@@ -0,0 +1,50 @@
+const { Report } = require('vn-print');
+
+module.exports = Self => {
+    Self.remoteMethodCtx('balanceCompensationPdf', {
+        description: 'Returns the the debit balances compensation pdf',
+        accessType: 'READ',
+        accepts: [
+            {
+                arg: 'id',
+                type: 'number',
+                required: true,
+                description: 'The receipt id',
+                http: { source: 'path' }
+            }
+        ],
+        returns: [
+            {
+                arg: 'body',
+                type: 'file',
+                root: true
+            }, {
+                arg: 'Content-Type',
+                type: 'String',
+                http: {target: 'header'}
+            }, {
+                arg: 'Content-Disposition',
+                type: 'String',
+                http: {target: 'header'}
+            }
+        ],
+        http: {
+            path: '/:id/balance-compensation-pdf',
+            verb: 'GET'
+        }
+    });
+
+    Self.balanceCompensationPdf = async(ctx, id) => {
+        const args = Object.assign({}, ctx.args);
+        const params = {lang: ctx.req.getLocale()};
+
+        delete args.ctx;
+        for (const param in args)
+            params[param] = args[param];
+
+        const report = new Report('balance-compensation', params);
+        const stream = await report.toPdfStream();
+
+        return [stream, 'application/pdf', `filename="doc-${id}.pdf"`];
+    };
+};

modules/client/back/models/receipt.js

@@ -2,6 +2,8 @@ const LoopBackContext = require('loopback-context');
 
 module.exports = function(Self) {
     require('../methods/receipt/filter')(Self);
+    require('../methods/receipt/balanceCompensationEmail')(Self);
+    require('../methods/receipt/balanceCompensationPdf')(Self);
     require('../methods/receipt/receiptPdf')(Self);
 
     Self.validateBinded('amountPaid', isNotZero, {

modules/client/front/balance/index/index.html

@@ -121,9 +121,22 @@
                             </vn-icon-button>
                         </a>
                     </vn-td>
-                </vn-tr>
-            </vn-tbody>
-        </vn-table>
+                        <vn-td center shrink ng-if="!balance.isInvoice">
+                            <vn-icon-button
+                                vn-dialog="send_compensation"
+                                icon="outgoing_mail"
+                                title="{{'Send compensation' | translate}}">
+                            </vn-icon-button>
+                        </vn-td>
+                        <vn-confirm
+                            vn-id="send_compensation"
+                            on-accept="$ctrl.sendEmail(balance)"
+                            question="Notify compensation"
+                            message="Send compensation">
+                        </vn-confirm>
+                    </vn-tr>
+                </vn-tbody>
+            </vn-table>
         </vn-card>
     </vn-data-viewer>
 </div>

modules/client/front/balance/index/index.js

@@ -2,8 +2,9 @@ import ngModule from '../../module';
 import Section from 'salix/components/section';
 
 class Controller extends Section {
-    constructor($element, $) {
+    constructor($element, $, vnEmail) {
         super($element, $);
+        this.vnEmail = vnEmail;
         this.filter = {
             include: {
                 relation: 'company',
@@ -54,45 +55,49 @@ class Controller extends Section {
             }
         })).then(() => this.getBalances());
     }
-
+    
     getCurrentBalance() {
         const clientRisks = this.$.riskModel.data;
         const selectedCompany = this.companyId;
         const currentBalance = clientRisks.find(balance => {
             return balance.companyFk === selectedCompany;
         });
-
+        
         return currentBalance && currentBalance.amount;
     }
-
+    
     getBalances() {
         const balances = this.$.model.data;
         balances.forEach((balance, index) => {
             if (index === 0)
-                balance.balance = this.getCurrentBalance();
+            balance.balance = this.getCurrentBalance();
             if (index > 0) {
                 let previousBalance = balances[index - 1];
                 balance.balance = previousBalance.balance - (previousBalance.debit - previousBalance.credit);
             }
         });
     }
-
+    
     showInvoiceOutDescriptor(event, balance) {
         if (!balance.isInvoice) return;
         if (event.defaultPrevented) return;
-
+        
         this.$.invoiceOutDescriptor.show(event.target, balance.id);
     }
-
+    
     changeDescription(balance) {
         const params = {description: balance.description};
         const endpoint = `Receipts/${balance.id}`;
         this.$http.patch(endpoint, params)
-            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
+        .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
+    }
+
+    sendEmail(balance) {
+        return this.vnEmail.send(`Receipts/${balance.id}/balance-compensation-email`);
     }
 }
 
-Controller.$inject = ['$element', '$scope'];
+Controller.$inject = ['$element', '$scope', 'vnEmail'];
 
 ngModule.vnComponent('vnClientBalanceIndex', {
     template: require('./index.html'),

modules/client/front/balance/index/locale/es.yml

@@ -8,4 +8,6 @@ Havings: Haber
 Balance: Balance
 Total by company: Total por empresa
 Download PDF: Descargar PDF
-BILL: N/FRA {{ref}}
+Send compensation: Enviar compensación
+BILL: N/FRA {{ref}}
+Notify compensation: ¿Desea informar de la compensación al cliente por correo?

modules/entry/front/buy/index/index.html

@@ -91,7 +91,7 @@
                                 url="Packagings"
                                 show-field="id"
                                 value-field="id"
-                                where="{isBox: true}"
+                                where="{freightItemFk: true}"
                                 ng-model="buy.packageFk"
                                 on-change="$ctrl.saveBuy(buy)">
                             </vn-autocomplete>

modules/ticket/back/methods/expedition/filter.js

@@ -32,7 +32,7 @@ module.exports = Self => {
             `SELECT 
                 e.id,
                 e.ticketFk,
-                e.isBox,
+                e.freightItemFk,
                 e.workerFk,
                 i1.name packageItemName,
                 e.counter,
@@ -51,7 +51,7 @@ module.exports = Self => {
             FROM vn.expedition e
                 LEFT JOIN vn.expeditionStateType est ON est.id = e.stateTypeFk 
                 LEFT JOIN vn.item i2 ON i2.id = e.itemFk
-                INNER JOIN vn.item i1 ON i1.id = e.isBox
+                INNER JOIN vn.item i1 ON i1.id = e.freightItemFk
                 LEFT JOIN vn.packaging p ON p.id = e.packagingFk
                 LEFT JOIN vn.item i3 ON i3.id = p.itemFk
                 LEFT JOIN account.user u ON u.id = e.workerFk

modules/ticket/back/methods/ticket/collectionLabel.js

@@ -0,0 +1,50 @@
+const {Report} = require('vn-print');
+
+module.exports = Self => {
+    Self.remoteMethodCtx('collectionLabel', {
+        description: 'Returns the collection label',
+        accessType: 'READ',
+        accepts: [
+            {
+                arg: 'id',
+                type: 'number',
+                required: true,
+                description: 'The ticket id',
+                http: {source: 'path'}
+            },
+        ],
+        returns: [
+            {
+                arg: 'body',
+                type: 'file',
+                root: true
+            }, {
+                arg: 'Content-Type',
+                type: 'String',
+                http: {target: 'header'}
+            }, {
+                arg: 'Content-Disposition',
+                type: 'String',
+                http: {target: 'header'}
+            }
+        ],
+        http: {
+            path: '/:id/collection-label',
+            verb: 'GET'
+        }
+    });
+
+    Self.collectionLabel = async(ctx, id) => {
+        const args = Object.assign({}, ctx.args);
+        const params = {lang: ctx.req.getLocale()};
+
+        delete args.ctx;
+        for (const param in args)
+            params[param] = args[param];
+
+        const report = new Report('collection-label', params);
+        const stream = await report.toPdfStream();
+
+        return [stream, 'application/pdf', `filename="doc-${id}.pdf"`];
+    };
+};

modules/ticket/back/models/expedition.json

@@ -16,7 +16,7 @@
         "type": "number",
         "description": "Identifier"
       },
-      "isBox": {
+      "freightItemFk": {
         "type": "number"
       },
       "created": {
@@ -55,7 +55,7 @@
       "freightItem": {
         "type": "belongsTo",
         "model": "Item",
-        "foreignKey": "isBox"
+        "foreignKey": "freightItemFk"
       },
       "packaging": {
         "type": "belongsTo",

modules/ticket/back/models/ticket-methods.js

@@ -33,4 +33,5 @@ module.exports = function(Self) {
     require('../methods/ticket/closeByTicket')(Self);
     require('../methods/ticket/closeByAgency')(Self);
     require('../methods/ticket/closeByRoute')(Self);
+    require('../methods/ticket/collectionLabel')(Self);
 };

package.json

@@ -63,7 +63,9 @@
         "del": "^2.2.2",
         "eslint": "^7.11.0",
         "eslint-config-google": "^0.11.0",
+        "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-jasmine": "^2.10.1",
+        "eslint-plugin-prettier": "^4.2.1",
         "fancy-log": "^1.3.2",
         "file-loader": "^1.1.11",
         "gulp": "^4.0.2",
@@ -92,6 +94,7 @@
         "node-sass": "^4.14.1",
         "nodemon": "^2.0.16",
         "plugin-error": "^1.0.1",
+        "prettier": "^2.7.1",
         "raw-loader": "^1.0.0",
         "regenerator-runtime": "^0.13.7",
         "sass-loader": "^7.3.1",

print/core/components/email-body/assets/css/import.js

@@ -0,0 +1,11 @@
+const Stylesheet = require(`vn-print/core/stylesheet`);
+
+const path = require('path');
+const vnPrintPath = path.resolve('print');
+
+module.exports = new Stylesheet([
+    `${vnPrintPath}/common/css/spacing.css`,
+    `${vnPrintPath}/common/css/misc.css`,
+    `${vnPrintPath}/common/css/layout.css`,
+    `${vnPrintPath}/common/css/email.css`])
+    .mergeStyles();

print/core/components/email-body/email-body.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html v-bind:lang="$i18n.locale">
+    <head>
+        <meta name="viewport" content="width=device-width" />
+        <meta name="format-detection" content="telephone=no" />
+    </head>
+
+    <body>
+        <table class="grid">
+            <tbody>
+                <tr>
+                    <td>
+                        <div class="grid-row">
+                            <div class="grid-block empty"></div>
+                        </div>
+                        <slot name="header">
+                            <div class="grid-row">
+                                <div class="grid-block">
+                                    <email-header v-bind="$props"></email-header>
+                                </div>
+                            </div>
+                        </slot>
+                        <slot></slot>
+                        <slot name="footer">
+                            <div class="grid-row">
+                                <div class="grid-block">
+                                    <email-footer v-bind="$props"></email-footer>
+                                </div>
+                            </div>
+                        </slot>
+                        <div class="grid-row">
+                            <div class="grid-block empty"></div>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </body>
+</html>

print/core/components/email-body/email-body.js

@@ -0,0 +1,12 @@
+
+const Component = require(`vn-print/core/component`);
+const emailHeader = new Component('email-header');
+const emailFooter = new Component('email-footer');
+
+module.exports = {
+    components: {
+        'email-header': emailHeader.build(),
+        'email-footer': emailFooter.build()
+    },
+    name: 'email-body',
+};

print/core/components/email-header/email-header.html

@@ -1,7 +1,7 @@
 <header>
     <div class="logo">
         <a href="https://www.verdnatura.es" target="_blank">
-            <img v-bind:src="getEmailSrc('logo-black.png')" alt="VerdNatura"/>
+            <img v-bind:src="getEmailSrc('logo-black.png')" alt="VerdNatura" />
         </a>
     </div>
     <div class="topbar"></div>

print/core/components/report-body/assets/css/import.js

@@ -0,0 +1,10 @@
+const Stylesheet = require(`vn-print/core/stylesheet`);
+
+const path = require('path');
+const vnPrintPath = path.resolve('print');
+
+module.exports = new Stylesheet([
+    `${vnPrintPath}/common/css/layout.css`,
+    `${vnPrintPath}/common/css/report.css`,
+    `${vnPrintPath}/common/css/misc.css`])
+    .mergeStyles();

print/core/components/report-body/report-body.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html v-bind:lang="$i18n.locale">
+
+<body>
+    <table class="grid">
+        <tbody>
+            <tr>
+                <td>
+                    <slot name="header">
+                        <report-header v-bind="$props"></report-header>
+                    </slot>
+                    <slot></slot>
+                    <slot name="footer">
+                        <report-footer id="pageFooter" v-bind="$props"></report-footer>
+                    </slot>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+
+</html>

print/core/components/report-body/report-body.js

@@ -0,0 +1,12 @@
+
+const Component = require(`vn-print/core/component`);
+const reportHeader = new Component('report-header');
+const reportFooter = new Component('report-footer');
+
+module.exports = {
+    name: 'report-body',
+    components: {
+        'report-header': reportHeader.build(),
+        'report-footer': reportFooter.build()
+    },
+};

print/core/email.js

@@ -32,7 +32,7 @@ class Email extends Component {
         const rendered = await this.render();
         const attachments = [];
         const getAttachments = async(componentPath, files) => {
-            for (file of files) {
+            for (const file of files) {
                 const fileCopy = Object.assign({}, file);
                 const fileName = fileCopy.filename;
 
@@ -54,15 +54,22 @@ class Email extends Component {
             }
         };
 
-        if (instance.components) {
-            const components = instance.components;
-            for (let componentName in components) {
-                const component = components[componentName];
-                const componentPath = `./components/${componentName}`;
-                await getAttachments(componentPath, component.attachments);
+        async function getSubcomponentAttachments(instance) {
+            if (instance.components) {
+                const components = instance.components;
+                for (let componentName in components) {
+                    const component = components[componentName];
+                    const componentPath = `./components/${componentName}`;
+                    await getAttachments(componentPath, component.attachments);
+
+                    if (component.components)
+                        await getSubcomponentAttachments(component)
+                }
             }
         }
 
+        await getSubcomponentAttachments(instance)
+
         if (this.attachments)
             await getAttachments(this.path, this.attachments);
 

print/templates/email/balance-compensation/assets/css/import.js

@@ -0,0 +1,11 @@
+const Stylesheet = require(`vn-print/core/stylesheet`);
+
+const path = require('path');
+const vnPrintPath = path.resolve('print');
+
+module.exports = new Stylesheet([
+    `${vnPrintPath}/common/css/spacing.css`,
+    `${vnPrintPath}/common/css/misc.css`,
+    `${vnPrintPath}/common/css/layout.css`,
+    `${vnPrintPath}/common/css/email.css`])
+    .mergeStyles();

print/templates/email/balance-compensation/attachments.json

@@ -0,0 +1,6 @@
+[
+    {
+        "filename": "balance-compensation.pdf",
+        "component": "balance-compensation"
+    }
+]

print/templates/email/balance-compensation/balance-compensation.html

@@ -0,0 +1,17 @@
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <p>{{$t('description.instructions')}} {{client.name}}</p>
+            <p>{{$t('description.attached')}}</p>
+            <p>{{$t('description.response')}}</p>
+            <p>{{$t('description.regards')}}</p>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment v-for="attachment in attachments" v-bind:key="attachment.filename"
+                v-bind:attachment="attachment" v-bind:args="$props">
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/balance-compensation/balance-compensation.js

@@ -0,0 +1,36 @@
+const Component = require(`vn-print/core/component`);
+const emailBody = new Component('email-body');
+const attachment = new Component('attachment');
+
+module.exports = {
+    name: 'balance-compensation',
+    async serverPrefetch() {
+        this.client = await this.fetchClient(this.id);
+    },
+    methods: {
+        fetchClient(id) {
+            return this.findOneFromDef('client', [id]);
+        },
+    },
+    components: {
+        'email-body': emailBody.build(),
+        'attachment': attachment.build()
+    },
+    data() {
+        return {
+            attachments: [
+                {
+                    filename: 'balance-compensation.pdf',
+                    type: 'pdf',
+                    path: `Receipts/${this.id}/balance-compensation-pdf`
+                }
+            ]
+        };
+    },
+    props: {
+        id: {
+            type: Number,
+            required: true
+        }
+    }
+};

print/templates/email/balance-compensation/locale/es.yml

@@ -0,0 +1,6 @@
+subject: Compensación VerdNatura SL
+description:
+  instructions:  Buenos días,
+  attached: Adjuntamos escrito para su confirmación
+  response: Rogamos su respuesta a la mayor brevedad
+  regards: Un saludo

print/templates/email/balance-compensation/sql/client.sql

@@ -0,0 +1,5 @@
+SELECT 
+    c.name 
+FROM client c
+    JOIN receipt r ON r.clientFk = c.id 
+WHERE r.id = ?;

print/templates/email/buyer-week-waste/buyer-week-waste.html

@@ -1,76 +1,37 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}},</p>
-                                <p v-html="$t('description', [dated])"></p>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <table class="column-oriented">
-                                    <thead>
-                                        <tr>
-                                            <th>{{$t('buyer')}}</th>
-                                            <th class="number">{{$t('percentage')}}</th>
-                                            <th class="number">{{$t('dwindle')}}</th>
-                                            <th class="number">{{$t('total')}}</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr v-for="waste in wastes" v-bind:key="waste.buyer">
-                                            <td class="font gray">{{waste.buyer}}</td>
-                                            <td class="number">{{(waste.percentage / 100) | percentage(2, 2, $i18n.locale)}}</td>
-                                            <td class="number">{{waste.dwindle | currency('EUR', $i18n.locale)}}</td>
-                                            <td class="number">{{waste.total | currency('EUR', $i18n.locale)}}</td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <p v-html="$t('wasteDetailLink')"></p>
-                                <div class="external-link vn-pa-sm vn-m-md">
-                                    <a href="https://salix.verdnatura.es/#!/item/waste/index" target="_blank">
-                                        https://salix.verdnatura.es/#!/item/waste/index
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}},</p>
+            <p v-html="$t('description', [dated])"></p>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <table class="column-oriented">
+                <thead>
+                    <tr>
+                        <th>{{$t('buyer')}}</th>
+                        <th class="number">{{$t('percentage')}}</th>
+                        <th class="number">{{$t('dwindle')}}</th>
+                        <th class="number">{{$t('total')}}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="waste in wastes" v-bind:key="waste.buyer">
+                        <td class="font gray">{{waste.buyer}}</td>
+                        <td class="number">{{(waste.percentage / 100) | percentage(2, 2, $i18n.locale)}}</td>
+                        <td class="number">{{waste.dwindle | currency('EUR', $i18n.locale)}}</td>
+                        <td class="number">{{waste.total | currency('EUR', $i18n.locale)}}</td>
+                    </tr>
+                </tbody>
+            </table>
+            <p v-html="$t('wasteDetailLink')"></p>
+            <div class="external-link vn-pa-sm vn-m-md">
+                <a href="https://salix.verdnatura.es/#!/item/waste/index" target="_blank">
+                    https://salix.verdnatura.es/#!/item/waste/index
+                </a>
+            </div>
+        </div>
+    </div>
+</email-body>

print/templates/email/buyer-week-waste/buyer-week-waste.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'buyer-week-waste',
@@ -23,8 +22,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build()
     },
     props: {}
 };

print/templates/email/campaign-metrics/campaign-metrics.html

@@ -1,46 +1,9 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}},</p>
-                                <p v-html="$t('description', [minDate, maxDate])"></p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}},</p>
+            <p v-html="$t('description', [minDate, maxDate])"></p>
+        </div>
+    </div>
+</email-body>

print/templates/email/campaign-metrics/campaign-metrics.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'campaign-metrics',
@@ -16,8 +15,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {
         id: {

print/templates/email/claim-pickup-order/claim-pickup-order.html

@@ -1,47 +1,10 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title', [id]) }}</h1>
-                                <p>{{ $t('description.dear') }},</p>
-                                <p v-html="instructions"></p>
-                                <p>{{ $t('description.conclusion') }}</p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title', [id]) }}</h1>
+            <p>{{ $t('description.dear') }},</p>
+            <p v-html="instructions"></p>
+            <p>{{ $t('description.conclusion') }}</p>
+        </div>
+    </div>
+</email-body>

print/templates/email/claim-pickup-order/claim-pickup-order.js

@@ -1,12 +1,10 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'claim-pickup-order',
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     async serverPrefetch() {
         this.ticket = await this.fetchTicket(this.id);

print/templates/email/client-debt-statement/attachments.json

@@ -0,0 +1,6 @@
+[
+    {
+        "filename": "client-debt-statement.pdf",
+        "component": "client-debt-statement"
+    }
+]

print/templates/email/client-debt-statement/client-debt-statement.html

@@ -1,55 +1,15 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('description.instructions')}}</p>
-                            </div>
-                        </div>
-                        <!-- Preview block -->
-                        <div class="grid-row" v-if="isPreview">
-                            <div class="grid-block vn-pa-ml">
-                                <attachment v-for="attachment in attachments" 
-                                    v-bind:key="attachment.filename"
-                                    v-bind:attachment="attachment"
-                                    v-bind:args="$props">
-                                </attachment>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('description.instructions')}}</p>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment v-for="attachment in attachments" v-bind:key="attachment.filename"
+                v-bind:attachment="attachment" v-bind:args="$props">
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/client-debt-statement/client-debt-statement.js

@@ -1,13 +1,11 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 const attachment = new Component('attachment');
 
 module.exports = {
     name: 'client-debt-statement',
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build(),
+        'email-body': emailBody.build(),
         'attachment': attachment.build()
     },
     data() {

print/templates/email/client-welcome/client-welcome.html

@@ -1,92 +1,56 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dearClient')}},</p>
-                                <p v-html="$t('clientData')"></p>
-                                
-                                <p>
-                                    <div>{{$t('clientId')}}: <strong>{{client.id}}</strong></div>
-                                    <div>{{$t('user')}}: <strong>{{client.userName}}</strong></div>
-                                    <div>{{$t('password')}}: <strong>********</strong> 
-                                        (<a href="https://verdnatura.es">{{$t('passwordResetText')}}</a>)
-                                    </div>
-                                </p>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dearClient')}},</p>
+            <p v-html="$t('clientData')"></p>
 
-                                <h1>{{$t('sections.howToBuy.title')}}</h1>
-                                <p>{{$t('sections.howToBuy.description')}}</p>
-                                <ol>
-                                    <li v-for="requeriment in $t('sections.howToBuy.requeriments')">
-                                        <span v-html="requeriment"></span>
-                                    </li>
-                                </ol>
-                                <p>{{$t('sections.howToBuy.stock')}}</p>
-                                <p>{{$t('sections.howToBuy.delivery')}}</p>
-                                
-                                <h1>{{$t('sections.howToPay.title')}}</h1>
-                                <p>{{$t('sections.howToPay.description')}}</p>
-                                <ul>
-                                    <li v-for="option in $t('sections.howToPay.options')">
-                                        <span v-html="option"></span>
-                                    </li>
-                                </ul>
+            <p>
+            <div>{{$t('clientId')}}: <strong>{{client.id}}</strong></div>
+            <div>{{$t('user')}}: <strong>{{client.userName}}</strong></div>
+            <div>{{$t('password')}}: <strong>********</strong>
+                (<a href="https://verdnatura.es">{{$t('passwordResetText')}}</a>)
+            </div>
+            </p>
 
-                                <h1>{{$t('sections.toConsider.title')}}</h1>
-                                <p>{{$t('sections.toConsider.description')}}</p>
+            <h1>{{$t('sections.howToBuy.title')}}</h1>
+            <p>{{$t('sections.howToBuy.description')}}</p>
+            <ol>
+                <li v-for="requeriment in $t('sections.howToBuy.requeriments')">
+                    <span v-html="requeriment"></span>
+                </li>
+            </ol>
+            <p>{{$t('sections.howToBuy.stock')}}</p>
+            <p>{{$t('sections.howToBuy.delivery')}}</p>
 
-                                <h4>{{$t('sections.claimsPolicy.title')}}</h4>
-                                <p>{{$t('sections.claimsPolicy.description')}}</p>
+            <h1>{{$t('sections.howToPay.title')}}</h1>
+            <p>{{$t('sections.howToPay.description')}}</p>
+            <ul>
+                <li v-for="option in $t('sections.howToPay.options')">
+                    <span v-html="option"></span>
+                </li>
+            </ul>
 
-                                <p v-html="$t('help')"></p>
-                                <p>
-                                    <section v-if="client.salesPersonName">
-                                        {{$t('salesPersonName')}}: <strong>{{client.salesPersonName}}</strong>
-                                    </section>
-                                    <section v-if="client.salesPersonPhone">
-                                        {{$t('salesPersonPhone')}}: <strong>{{client.salesPersonPhone}}</strong>
-                                    </section>
-                                    <section v-if="client.salesPersonEmail">
-                                        {{$t('salesPersonEmail')}}: 
-                                        <strong><a v-bind:href="`mailto: ${client.salesPersonEmail}`" target="_blank">{{client.salesPersonEmail}}</strong>
-                                    </section>
-                                </p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+            <h1>{{$t('sections.toConsider.title')}}</h1>
+            <p>{{$t('sections.toConsider.description')}}</p>
+
+            <h4>{{$t('sections.claimsPolicy.title')}}</h4>
+            <p>{{$t('sections.claimsPolicy.description')}}</p>
+
+            <p v-html="$t('help')"></p>
+            <p>
+            <section v-if="client.salesPersonName">
+                {{$t('salesPersonName')}}: <strong>{{client.salesPersonName}}</strong>
+            </section>
+            <section v-if="client.salesPersonPhone">
+                {{$t('salesPersonPhone')}}: <strong>{{client.salesPersonPhone}}</strong>
+            </section>
+            <section v-if="client.salesPersonEmail">
+                {{$t('salesPersonEmail')}}:
+                <strong><a v-bind:href="`mailto: ${client.salesPersonEmail}`"
+                        target="_blank">{{client.salesPersonEmail}}</strong>
+            </section>
+            </p>
+        </div>
+    </div>
+</email-body>

print/templates/email/client-welcome/client-welcome.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'client-welcome',
@@ -13,8 +12,7 @@ module.exports = {
         },
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {
         id: {

print/templates/email/credit-request/credit-request.html

@@ -1,55 +1,15 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('description.instructions')}}</p>
-                            </div>
-                        </div>
-                        <!-- Preview block -->
-                        <div class="grid-row" v-if="isPreview">
-                            <div class="grid-block vn-pa-ml">
-                                <attachment v-for="attachment in attachments" 
-                                    v-bind:key="attachment.filename"
-                                    v-bind:attachment="attachment"
-                                    v-bind:args="$props">
-                                </attachment>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('description.instructions')}}</p>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment v-for="attachment in attachments" v-bind:key="attachment.filename"
+                v-bind:attachment="attachment" v-bind:args="$props">
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/credit-request/credit-request.js

@@ -1,13 +1,11 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 const attachment = new Component('attachment');
 
 module.exports = {
     name: 'credit-request',
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build(),
+        'email-body': emailBody.build(),
         'attachment': attachment.build()
     },
     data() {

print/templates/email/delivery-note-link/assets/css/style.css

@@ -2,4 +2,8 @@
     border: 2px dashed #8dba25;
     border-radius: 3px;
     text-align: center
+}
+
+a {
+    color: #8dba25
 }

print/templates/email/delivery-note-link/delivery-note-link.html

@@ -1,69 +1,24 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-        <style type="text/css">
-        a {
-            color: #8dba25
-        }
-        </style>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}}</p>
-                                <p v-html="$t('description', [id])"></p>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-px-ml">
-                                <p>{{$t('copyLink')}}</p>
-                                <div class="external-link vn-pa-sm vn-m-md">
-                                    https://www.verdnatura.es/#!form=ecomerce/ticket&ticket={{id}}
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <p v-html="$t('poll')"></p>
-                                <p v-html="$t('help')"></p>
-                                <p v-html="$t('conclusion')"></p>
-                            </div>
-                        </div>
-
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}}</p>
+            <p v-html="$t('description', [id])"></p>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block vn-px-ml">
+            <p>{{$t('copyLink')}}</p>
+            <div class="external-link vn-pa-sm vn-m-md">
+                https://www.verdnatura.es/#!form=ecomerce/ticket&ticket={{id}}
+            </div>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <p v-html="$t('poll')"></p>
+            <p v-html="$t('help')"></p>
+            <p v-html="$t('conclusion')"></p>
+        </div>
+    </div>
+</email-body>

print/templates/email/delivery-note-link/delivery-note-link.js

@@ -1,12 +1,10 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'delivery-note-link',
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {
         id: {

print/templates/email/delivery-note/delivery-note.html

@@ -1,49 +1,12 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}},</p>
-                                <p v-html="$t('description', [id])"></p>
-                                <p v-html="$t('poll')"></p>
-                                <p v-html="$t('help')"></p>
-                                <p v-html="$t('conclusion')"></p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}},</p>
+            <p v-html="$t('description', [id])"></p>
+            <p v-html="$t('poll')"></p>
+            <p v-html="$t('help')"></p>
+            <p v-html="$t('conclusion')"></p>
+        </div>
+    </div>
+</email-body>

print/templates/email/delivery-note/delivery-note.js

@@ -1,12 +1,10 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'delivery-note',
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {
         id: {

print/templates/email/driver-route/driver-route.html

@@ -1,45 +1,8 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('description.instructions')}}</p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('description.instructions')}}</p>
+        </div>
+    </div>
+</email-body>

print/templates/email/driver-route/driver-route.js

@@ -1,12 +1,10 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'driver-route',
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {
         id: {

print/templates/email/incoterms-authorization/incoterms-authorization.html

@@ -1,57 +1,17 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('description.dear')}},</p>
-                                <p>{{$t('description.instructions')}}</p>
-                                <p>{{$t('description.conclusion')}}</p>
-                            </div>
-                        </div>
-                        <!-- Attachments block -->
-                        <div class="grid-row" v-if="isPreview">
-                            <div class="grid-block vn-pa-ml">
-                                <attachment v-for="attachment in attachments" 
-                                    v-bind:key="attachment.filename"
-                                    v-bind:attachment="attachment"
-                                    v-bind:args="$props">
-                                </attachment>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('description.dear')}},</p>
+            <p>{{$t('description.instructions')}}</p>
+            <p>{{$t('description.conclusion')}}</p>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment v-for="attachment in attachments" v-bind:key="attachment.filename"
+                v-bind:attachment="attachment" v-bind:args="$props">
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/incoterms-authorization/incoterms-authorization.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 const attachment = new Component('attachment');
 
 module.exports = {
@@ -17,8 +16,7 @@ module.exports = {
         };
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build(),
+        'email-body': emailBody.build(),
         'attachment': attachment.build()
     },
     props: {

print/templates/email/invoice/invoice.html

@@ -1,49 +1,12 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}},</p>
-                                <p v-html="$t('description', [invoice.ref, invoice.ticketFk])"></p>
-                                <p v-html="$t('poll')"></p>
-                                <p v-html="$t('help')"></p>
-                                <p v-html="$t('conclusion')"></p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}},</p>
+            <p v-html="$t('description', [invoice.ref, invoice.ticketFk])"></p>
+            <p v-html="$t('poll')"></p>
+            <p v-html="$t('help')"></p>
+            <p v-html="$t('conclusion')"></p>
+        </div>
+    </div>
+</email-body>

print/templates/email/invoice/invoice.js

@@ -1,7 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
-
+const emailBody = new Component('email-body');
 module.exports = {
     name: 'invoice',
     async serverPrefetch() {
@@ -13,8 +11,7 @@ module.exports = {
         },
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {
         reference: {

print/templates/email/invoiceIn/invoiceIn.html

@@ -1,47 +1,10 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}},</p>
-                                <p v-html="$t('description')"></p>
-                                <p v-html="$t('conclusion')"></p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}},</p>
+            <p v-html="$t('description')"></p>
+            <p v-html="$t('conclusion')"></p>
+        </div>
+    </div>
+</email-body>

print/templates/email/invoiceIn/invoiceIn.js

@@ -1,11 +1,8 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
-
+const emailBody = new Component('email-body');
 module.exports = {
     name: 'invoiceIn',
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     }
 };

print/templates/email/letter-debtor-nd/letter-debtor-nd.html

@@ -1,88 +1,48 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{ $t('sections.introduction.title') }},</p>
-                                <p>{{ $t('sections.introduction.description') }}</p>
-                                <p>{{ $t('sections.introduction.terms') }}</p>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{ $t('sections.introduction.title') }},</p>
+            <p>{{ $t('sections.introduction.description') }}</p>
+            <p>{{ $t('sections.introduction.terms') }}</p>
 
-                                <p>
-                                    {{ $t('sections.payMethod.description') }}:
-                                    <ol>
-                                        <li v-for="option in $t('sections.payMethod.options')">
-                                            {{ option }}
-                                        </li>
-                                    </ol>
-                                </p>
+            <p>
+                {{ $t('sections.payMethod.description') }}:
+            <ol>
+                <li v-for="option in $t('sections.payMethod.options')">
+                    {{ option }}
+                </li>
+            </ol>
+            </p>
 
-                                <p>
-                                    {{ $t('sections.legalAction.description') }}:
-                                    <ol type="a">
-                                        <li v-for="option in $t('sections.legalAction.options')">
-                                            {{ option }}
-                                        </li>
-                                    </ol>
-                                </p>
+            <p>
+                {{ $t('sections.legalAction.description') }}:
+            <ol type="a">
+                <li v-for="option in $t('sections.legalAction.options')">
+                    {{ option }}
+                </li>
+            </ol>
+            </p>
 
-                                <p v-html="$t('contactPhone')"></p>
-                                <p v-html="$t('conclusion')"></p>
+            <p v-html="$t('contactPhone')"></p>
+            <p v-html="$t('conclusion')"></p>
 
-                                <p>
-                                    <div class="row">
-                                        <div class="text">{{debtor.bankName}}</div>
-                                        <div class="control">{{debtor.iban}}</div>
-                                        <div class="description">
-                                            <div class="line"><span>{{$t('transferAccount') }}</span></div>
-                                        </div>
-                                    </div>
-                                </p>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row" v-if="isPreview">
-                            <div class="grid-block vn-pa-ml">
-                                <attachment v-for="attachment in attachments" 
-                                    v-bind:key="attachment.filename"
-                                    v-bind:attachment="attachment"
-                                    v-bind:args="$props">
-                                </attachment>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+            <p>
+            <div class="row">
+                <div class="text">{{debtor.bankName}}</div>
+                <div class="control">{{debtor.iban}}</div>
+                <div class="description">
+                    <div class="line"><span>{{$t('transferAccount') }}</span></div>
+                </div>
+            </div>
+            </p>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment v-for="attachment in attachments" v-bind:key="attachment.filename"
+                v-bind:attachment="attachment" v-bind:args="$props">
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/letter-debtor-nd/letter-debtor-nd.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 const attachment = new Component('attachment');
 
 module.exports = {
@@ -28,8 +27,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build(),
+        'email-body': emailBody.build(),
         'attachment': attachment.build()
     },
     props: {

print/templates/email/letter-debtor-st/letter-debtor-st.html

@@ -1,71 +1,31 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{ $t('sections.introduction.title') }},</p>
-                                <p>{{ $t('sections.introduction.description') }}</p>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{ $t('sections.introduction.title') }},</p>
+            <p>{{ $t('sections.introduction.description') }}</p>
 
-                                <p>{{ $t('checkExtract') }}</p>
-                                <p>{{ $t('checkValidData') }}</p>
-                                <p>{{ $t('payMethod') }}</p>
-                                <p>{{ $t('conclusion') }}</p>
+            <p>{{ $t('checkExtract') }}</p>
+            <p>{{ $t('checkValidData') }}</p>
+            <p>{{ $t('payMethod') }}</p>
+            <p>{{ $t('conclusion') }}</p>
 
-                                <p>
-                                    <div class="row">
-                                        <div class="text">{{debtor.bankName}}</div>
-                                        <div class="control">{{debtor.iban}}</div>
-                                        <div class="description">
-                                            <div class="line"><span>{{$t('transferAccount') }}</span></div>
-                                        </div>
-                                    </div>
-                                </p>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row" v-if="isPreview">
-                            <div class="grid-block vn-pa-ml">
-                                <attachment v-for="attachment in attachments" 
-                                    v-bind:key="attachment.filename"
-                                    v-bind:attachment="attachment"
-                                    v-bind:args="$props">
-                                </attachment>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+            <p>
+            <div class="row">
+                <div class="text">{{debtor.bankName}}</div>
+                <div class="control">{{debtor.iban}}</div>
+                <div class="description">
+                    <div class="line"><span>{{$t('transferAccount') }}</span></div>
+                </div>
+            </div>
+            </p>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment v-for="attachment in attachments" v-bind:key="attachment.filename"
+                v-bind:attachment="attachment" v-bind:args="$props">
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/letter-debtor-st/letter-debtor-st.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 const attachment = new Component('attachment');
 
 module.exports = {
@@ -28,8 +27,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build(),
+        'email-body': emailBody.build(),
         'attachment': attachment.build()
     },
     props: {

print/templates/email/osticket-report/osticket-report.html

@@ -1,99 +1,59 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}},</p>
-                                <p v-html="$t('description', [started, ended])"></p>
-                                <p v-html="$t('totalResolved', [resolvedTickets])"></p>
-                                <p v-html="$t('grafanaLink')"></p>
-                                <div class="external-link vn-pa-sm vn-m-md">
-                                    <a v-bind:href="'https://grafana.verdnatura.es/d/2kaHDi9Mk/osticket?orgId=1&from=' + startedTime + '&to=' + endedTime" target="_blank">
-                                        https://grafana.verdnatura.es/d/2kaHDi9Mk/osticket?orgId=1&from={{startedTime}}&to={{endedTime}}
-                                    </a>
-                                </div>
-                                <p v-html="$t('redmineLink')"></p>
-                                <div class="external-link vn-pa-sm vn-m-md">
-                                    <a href="https://redmine.verdnatura.es/projects/desarrollo/issues?query_id=112" target="_blank">
-                                        https://redmine.verdnatura.es/projects/desarrollo/issues?query_id=112
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml" v-for="technician in technicians">
-                                <div class="table-title clearfix">
-                                    <h2>{{technician.name}} (<strong>{{technician.tickets.length}}</strong>)</h2>
-                                </div>
-                                <table class="column-oriented">
-                                    <thead>
-                                        <tr>
-                                            <th width="5%">{{$t('author')}}</th>
-                                            <th width="15%">{{$t('dated')}}</th>
-                                            <th width="25%">{{$t('ticketSubject')}}</th>
-                                            <th width="30%">{{$t('ticketDescription')}}</th>
-                                            <th width="20%">{{$t('resolution')}}</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody v-for="ticket in technician.tickets">
-                                        <tr>
-                                            <td>{{ticket.author}}</td>
-                                            <td class="font light-gray">
-                                                <div v-bind:title="$t('opened')">
-                                                    &#128275; {{ticket.created | date('%d-%m-%Y %H:%M')}}
-                                                </div>
-                                                <div v-bind:title="$t('closed')">
-                                                    &#128274; {{ticket.closed | date('%d-%m-%Y %H:%M')}}
-                                                </div>
-                                            </td>
-                                            <td>
-                                                <a v-bind:href="'https://cau.verdnatura.es/scp/tickets.php?id=' + ticket.ticket_id">
-                                                    {{ticket.number}} - {{ticket.subject}}
-                                                </a>
-                                            </td>
-                                            <td class="message" v-html="ticket.description"></td>
-                                            <td class="message" v-html="ticket.resolution"></td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}},</p>
+            <p v-html="$t('description', [started, ended])"></p>
+            <p v-html="$t('totalResolved', [resolvedTickets])"></p>
+            <p v-html="$t('grafanaLink')"></p>
+            <div class="external-link vn-pa-sm vn-m-md">
+                <a
+                    v-bind:href="'https://grafana.verdnatura.es/d/2kaHDi9Mk/osticket?orgId=1&from=' + startedTime + '&to=' + endedTime"
+                    target="_blank"
+                >
+                    https://grafana.verdnatura.es/d/2kaHDi9Mk/osticket?orgId=1&from={{startedTime}}&to={{endedTime}}
+                </a>
+            </div>
+            <p v-html="$t('redmineLink')"></p>
+            <div class="external-link vn-pa-sm vn-m-md">
+                <a href="https://redmine.verdnatura.es/projects/desarrollo/issues?query_id=112" target="_blank">
+                    https://redmine.verdnatura.es/projects/desarrollo/issues?query_id=112
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml" v-for="technician in technicians">
+            <div class="table-title clearfix">
+                <h2>{{technician.name}} (<strong>{{technician.tickets.length}}</strong>)</h2>
+            </div>
+            <table class="column-oriented">
+                <thead>
+                    <tr>
+                        <th width="5%">{{$t('author')}}</th>
+                        <th width="15%">{{$t('dated')}}</th>
+                        <th width="25%">{{$t('ticketSubject')}}</th>
+                        <th width="30%">{{$t('ticketDescription')}}</th>
+                        <th width="20%">{{$t('resolution')}}</th>
+                    </tr>
+                </thead>
+                <tbody v-for="ticket in technician.tickets">
+                    <tr>
+                        <td>{{ticket.author}}</td>
+                        <td class="font light-gray">
+                            <div v-bind:title="$t('opened')">&#128275; {{ticket.created | date('%d-%m-%Y %H:%M')}}</div>
+                            <div v-bind:title="$t('closed')">&#128274; {{ticket.closed | date('%d-%m-%Y %H:%M')}}</div>
+                        </td>
+                        <td>
+                            <a v-bind:href="'https://cau.verdnatura.es/scp/tickets.php?id=' + ticket.ticket_id">
+                                {{ticket.number}} - {{ticket.subject}}
+                            </a>
+                        </td>
+                        <td class="message" v-html="ticket.description"></td>
+                        <td class="message" v-html="ticket.resolution"></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</email-body>

print/templates/email/osticket-report/osticket-report.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'osticket-report',
@@ -61,8 +60,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {}
 };

print/templates/email/payment-update/payment-update.html

@@ -1,66 +1,28 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{ $t('sections.introduction.title') }},</p>
-                                <p v-html="`${$t('sections.introduction.description')}:`"></p>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{ $t('sections.introduction.title') }},</p>
+            <p v-html="`${$t('sections.introduction.description')}:`"></p>
 
-                                <p>
-                                    <section>
-                                        <span>{{ $t('sections.pay.method') }}:</span> 
-                                        <strong>{{payMethod.name}}</strong>
-                                    </section>
-                                    <section v-if="payMethod.code != 'card'">
-                                        <span>{{ $t('sections.pay.day') }}:</span> 
-                                        <strong>{{ $t('sections.pay.dueDay', [payMethod.dueDay]) }}</strong>
-                                    </section>
-                                </p>
+            <p>
+            <section>
+                <span>{{ $t('sections.pay.method') }}:</span>
+                <strong>{{payMethod.name}}</strong>
+            </section>
+            <section v-if="payMethod.code != 'card'">
+                <span>{{ $t('sections.pay.day') }}:</span>
+                <strong>{{ $t('sections.pay.dueDay', [payMethod.dueDay]) }}</strong>
+            </section>
+            </p>
 
-                                <p v-if="payMethod.code == 'bankDraft'" 
-                                    v-html="$t('sections.pay.accountImplicates', [accountAddress])">
-                                </p>
-                                <p v-else-if="payMethod.code == 'card'">
-                                    {{ $t('sections.pay.cardImplicates') }}
-                                </p>
+            <p v-if="payMethod.code == 'bankDraft'" v-html="$t('sections.pay.accountImplicates', [accountAddress])">
+            </p>
+            <p v-else-if="payMethod.code == 'card'">
+                {{ $t('sections.pay.cardImplicates') }}
+            </p>
 
-                                <p>{{ $t('notifyAnError') }}</p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+            <p>{{ $t('notifyAnError') }}</p>
+        </div>
+    </div>
+</email-body>

print/templates/email/payment-update/payment-update.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'payment-update',
@@ -21,8 +20,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build(),
     },
     props: {
         id: {

print/templates/email/printer-setup/printer-setup.html

@@ -1,90 +1,49 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('description.dear')}},</p>
-                                <p>{{$t('description.instructions')}}</p>
-                                <p v-html="$t('description.followGuide')"></p>
-                                <p v-html="$t('description.downloadFrom')"></p>
-                                <p v-html="$t('description.downloadDriver')"></p>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('description.dear')}},</p>
+            <p>{{$t('description.instructions')}}</p>
+            <p v-html="$t('description.followGuide')"></p>
+            <p v-html="$t('description.downloadFrom')"></p>
+            <p v-html="$t('description.downloadDriver')"></p>
 
-                                <h1>{{$t('sections.QLabel.title')}}</h1>
-                                <p>{{$t('sections.QLabel.description')}}:</p>
-                                <ol>
-                                    <li v-for="step in $t('sections.QLabel.steps')">
-                                        <span v-html="step"></span>
-                                    </li>
-                                </ol>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{$t('sections.help.title')}}</h1>
-                                <p>{{$t('sections.help.description')}}</p>
-                                <p v-html="$t('sections.help.remoteSupport')"></p>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <div v-if="client.salesPersonName">
-                                    {{$t('salesPersonName')}}: <strong>{{client.salesPersonName}}</strong>
-                                </div>
-                                <div v-if="client.salesPersonPhone">
-                                    {{$t('salesPersonPhone')}}: <strong>{{client.salesPersonPhone}}</strong>
-                                </div>
-                                <div v-if="client.salesPersonEmail">
-                                    {{$t('salesPersonEmail')}}: 
-                                    <strong><a v-bind:href="`mailto:${client.salesPersonEmail}`" target="_blank">{{client.salesPersonEmail}}</strong>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row" v-if="isPreview">
-                            <div class="grid-block vn-pa-ml">
-                                <attachment v-for="attachment in attachments" 
-                                    v-bind:key="attachment.filename"
-                                    v-bind:attachment="attachment"
-                                    v-bind:args="$props">
-                                </attachment>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+            <h1>{{$t('sections.QLabel.title')}}</h1>
+            <p>{{$t('sections.QLabel.description')}}:</p>
+            <ol>
+                <li v-for="step in $t('sections.QLabel.steps')">
+                    <span v-html="step"></span>
+                </li>
+            </ol>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{$t('sections.help.title')}}</h1>
+            <p>{{$t('sections.help.description')}}</p>
+            <p v-html="$t('sections.help.remoteSupport')"></p>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <div v-if="client.salesPersonName">
+                {{$t('salesPersonName')}}: <strong>{{client.salesPersonName}}</strong>
+            </div>
+            <div v-if="client.salesPersonPhone">
+                {{$t('salesPersonPhone')}}: <strong>{{client.salesPersonPhone}}</strong>
+            </div>
+            <div v-if="client.salesPersonEmail">
+                {{$t('salesPersonEmail')}}:
+                <strong><a v-bind:href="`mailto:${client.salesPersonEmail}`"
+                        target="_blank">{{client.salesPersonEmail}}</strong>
+            </div>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment v-for="attachment in attachments" v-bind:key="attachment.filename"
+                v-bind:attachment="attachment" v-bind:args="$props">
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/printer-setup/printer-setup.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 const attachment = new Component('attachment');
 const attachments = require('./attachments.json');
 
@@ -18,8 +17,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build(),
+        'email-body': emailBody.build(),
         'attachment': attachment.build()
     },
     props: {

print/templates/email/sepa-core/sepa-core.html

@@ -1,57 +1,21 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('description.dear')}},</p>
-                                <div v-html="$t('description.instructions')"></div>
-                                <p>{{$t('description.conclusion')}}</p>
-                            </div>
-                        </div>
-                        <!-- Attachments block -->
-                        <div class="grid-row" v-if="isPreview">
-                            <div class="grid-block vn-pa-ml">
-                                <attachment v-for="attachment in attachments" 
-                                    v-bind:key="attachment.filename"
-                                    v-bind:attachment="attachment"
-                                    v-bind:args="$props">
-                                </attachment>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('description.dear')}},</p>
+            <div v-html="$t('description.instructions')"></div>
+            <p>{{$t('description.conclusion')}}</p>
+        </div>
+    </div>
+    <div class="grid-row" v-if="isPreview">
+        <div class="grid-block vn-pa-ml">
+            <attachment
+                v-for="attachment in attachments"
+                v-bind:key="attachment.filename"
+                v-bind:attachment="attachment"
+                v-bind:args="$props"
+            >
+            </attachment>
+        </div>
+    </div>
+</email-body>

print/templates/email/sepa-core/sepa-core.js

@@ -1,7 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
-const attachment = new Component('attachment');
+const emailBody = new Component('email-body');
 const attachments = require('./attachments.json');
 
 module.exports = {
@@ -10,9 +8,7 @@ module.exports = {
         return {attachments};
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build(),
-        'attachment': attachment.build()
+        'email-body': emailBody.build()
     },
     props: {
         id: {

print/templates/email/supplier-campaign-metrics/supplier-campaign-metrics.html

@@ -1,46 +1,9 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <head>
-        <meta name="viewport" content="width=device-width">
-        <meta name="format-detection" content="telephone=no">
-        <title>{{ $t('subject') }}</title>
-    </head>
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                        <!-- Header block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-header v-bind="$props"></email-header>
-                            </div>
-                        </div>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block vn-pa-ml">
-                                <h1>{{ $t('title') }}</h1>
-                                <p>{{$t('dear')}},</p>
-                                <p v-html="$t('description', [minDate, maxDate])"></p>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <email-footer v-bind="$props"></email-footer>
-                            </div>
-                        </div>
-                        <!-- Empty block -->
-                        <div class="grid-row">
-                            <div class="grid-block empty"></div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+<email-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block vn-pa-ml">
+            <h1>{{ $t('title') }}</h1>
+            <p>{{$t('dear')}},</p>
+            <p v-html="$t('description', [minDate, maxDate])"></p>
+        </div>
+    </div>
+</email-body>

print/templates/email/supplier-campaign-metrics/supplier-campaign-metrics.js

@@ -1,6 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const emailHeader = new Component('email-header');
-const emailFooter = new Component('email-footer');
+const emailBody = new Component('email-body');
 
 module.exports = {
     name: 'supplier-campaign-metrics',
@@ -16,8 +15,7 @@ module.exports = {
         }
     },
     components: {
-        'email-header': emailHeader.build(),
-        'email-footer': emailFooter.build()
+        'email-body': emailBody.build()
     },
     props: {
         id: {

print/templates/reports/balance-compensation/balance-compensation.html

@@ -0,0 +1,31 @@
+<report-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block">
+            <div class="columns">
+                <div class="size50">
+                    <p style="text-align: right">{{$t('Place')}} {{currentDate()}}</p>
+                    <h3 style="text-align: center; margin-top: 8%">{{$t('Compensation') | uppercase}}</h3>
+                    <p style="margin-top: 8%">{{$t('In one hand')}}:</p>
+                    <p style="text-align: justify">
+                        {{company.name}} {{$t('CIF')}} {{company.nif}} {{$t('Home')}} {{company.street}},
+                        {{company.city}}.
+                    </p>
+                    <p style="margin-top: 5%">{{$t('In other hand')}}:</p>
+                    <p style="text-align: justify">
+                        {{$t('Sr')}} {{client.name}} {{$t('NIF')}} {{client.fi}} {{$t('Home')}} {{client.street}},
+                        {{client.city}}.
+                    </p>
+                    <h4 style="text-align: center; margin-top: 10%">{{$t('Agree') | uppercase}}</h4>
+                    <p style="margin-top: 8%; text-align: justify">
+                        {{$t('Date')}} {{client.payed | date('%d-%m-%Y')}} {{$t('Compensate')}} {{client.amountPaid}} €
+                        {{$t('From client')}} {{client.name}} {{$t('Toclient')}} {{company.name}}.
+                    </p>
+                    <p style="margin-top: 8%">
+                        {{$t('Reception')}} <span style="color: blue">administracion@verdnatura.es</span>
+                    </p>
+                    <div style="margin-top: 8%"><small>{{$t('Greetings')}}</small></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</report-body>

print/templates/reports/balance-compensation/balance-compensation.js

@@ -0,0 +1,34 @@
+const Component = require(`vn-print/core/component`);
+const reportBody = new Component('report-body');
+
+module.exports = {
+    name: 'balance-compensation',
+    async serverPrefetch() {
+        this.client = await this.fetchClient(this.id);
+        this.company = await this.fetchCompany(this.id);
+    },
+    methods: {
+        fetchClient(id) {
+            return this.findOneFromDef('client', [id]);
+        },
+        fetchCompany(id) {
+            return this.findOneFromDef('company', [id]);
+        },
+
+        currentDate() {
+            const current = new Date();
+            const date = `${current.getDate()}/${current.getMonth() + 1}/${current.getFullYear()}`;
+            return date;
+        }
+    },
+    components: {
+        'report-body': reportBody.build()
+    },
+    props: {
+        id: {
+            type: Number,
+            required: true,
+            description: 'The receipt id'
+        }
+    }
+};

print/templates/reports/balance-compensation/css/import.js

@@ -0,0 +1,12 @@
+const Stylesheet = require(`vn-print/core/stylesheet`);
+
+const path = require('path');
+const vnPrintPath = path.resolve('print');
+
+module.exports = new Stylesheet([
+    `${vnPrintPath}/common/css/spacing.css`,
+    `${vnPrintPath}/common/css/misc.css`,
+    `${vnPrintPath}/common/css/layout.css`,
+    `${vnPrintPath}/common/css/report.css`,
+    `${__dirname}/style.css`])
+    .mergeStyles();

print/templates/reports/balance-compensation/locale/es.yml

@@ -0,0 +1,16 @@
+reportName: compensacion-saldo
+Place: Algemesí, a
+Compensation: Compensación de saldos deudores y acreedores
+In one hand: De una parte
+CIF: con CIF
+NIF: con NIF
+Home: y domicilio sito en 
+In other hand: De la otra
+Sr: Don/Doña
+Agree: Acuerdan
+Date: En fecha de
+Compensate: se ha compensado el saldo de 
+From client: del cliente/proveedor
+To client: con el cliente/proveedor
+Reception: Por favor, rogamos confirmen la recepción de esta compensación al email
+Greetings: Saludos cordiales,

print/templates/reports/balance-compensation/sql/client.sql

@@ -0,0 +1,12 @@
+SELECT
+        c.name,
+        c.socialName,
+        c.street,
+        c.fi,
+        c.city,
+        r.amountPaid,
+        r.payed
+    FROM client c
+        JOIN receipt r ON r.clientFk = c.id
+        JOIN supplier s ON c.fi = s.nif
+    WHERE r.id = ?

print/templates/reports/balance-compensation/sql/company.sql

@@ -0,0 +1,8 @@
+SELECT 
+        s.name,
+        s.nif,
+        s.street,
+        s.city
+    FROM supplier s
+        JOIN receipt r ON r.companyFk = s.id
+    WHERE r.id = ?;

print/templates/reports/campaign-metrics/campaign-metrics.html

@@ -1,95 +1,72 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
-                        <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <div class="columns">
-                                    <div class="size50">
-                                        <h1 class="title uppercase">{{$t('title')}}</h1>
-                                        <div class="size75">
-                                            <table class="row-oriented report-info">
-                                                <tbody>
-                                                    <tr>
-                                                        <td class="font gray">{{$t('Client')}}</td>
-                                                        <th>{{client.id}}</th>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class="font gray">{{$t('From')}}</td>
-                                                        <th>{{from | date('%d-%m-%Y')}}</th>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class="font gray">{{$t('To')}}</td>
-                                                        <th>{{to | date('%d-%m-%Y')}}</th>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    </div>
-                                    <div class="size50">
-                                        <div class="panel">
-                                            <div class="header">{{$t('clientData')}}</div>
-                                            <div class="body">
-                                                <h3 class="uppercase">{{client.socialName}}</h3>
-                                                <div>
-                                                    {{client.street}}
-                                                </div>
-                                                <div>
-                                                    {{client.postcode}}, {{client.city}} ({{client.province}})
-                                                </div>
-                                                <div>
-                                                    {{client.country}}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <table class="column-oriented">
-                                    <thead>
-                                        <tr>
-                                            <th>{{$t('Code')}}</th>
-                                            <th class="number">{{$t('Quantity')}}</th>
-                                            <th width="50%">{{$t('Concept')}}</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody v-for="sale in sales">
-                                        <tr>
-                                            <td>{{sale.itemFk | zerofill('000000')}}</td>
-                                            <td class="number">{{Math.trunc(sale.subtotal)}}</td>
-                                            <td width="50%">{{sale.concept}}</td>
-                                        </tr>
-                                        <tr class="description font light-gray">
-                                            <td colspan="7">
-                                                <span v-if="sale.value5">
-                                                    <strong>{{sale.tag5}}</strong> {{sale.value5}}
-                                                </span> 
-                                                <span v-if="sale.value6">
-                                                    <strong>{{sale.tag6}}</strong> {{sale.value6}}
-                                                </span> 
-                                                <span v-if="sale.value7">
-                                                    <strong>{{sale.tag7}}</strong> {{sale.value7}}
-                                                </span> 
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
+<report-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block">
+            <div class="columns">
+                <div class="size50">
+                    <h1 class="title uppercase">{{$t('title')}}</h1>
+                    <div class="size75">
+                        <table class="row-oriented report-info">
+                            <tbody>
+                                <tr>
+                                    <td class="font gray">{{$t('Client')}}</td>
+                                    <th>{{client.id}}</th>
+                                </tr>
+                                <tr>
+                                    <td class="font gray">{{$t('From')}}</td>
+                                    <th>{{from | date('%d-%m-%Y')}}</th>
+                                </tr>
+                                <tr>
+                                    <td class="font gray">{{$t('To')}}</td>
+                                    <th>{{to | date('%d-%m-%Y')}}</th>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="size50">
+                    <div class="panel">
+                        <div class="header">{{$t('clientData')}}</div>
+                        <div class="body">
+                            <h3 class="uppercase">{{client.socialName}}</h3>
+                            <div>{{client.street}}</div>
+                            <div>{{client.postcode}}, {{client.city}} ({{client.province}})</div>
+                            <div>{{client.country}}</div>
                         </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('client', [client.id])"
-                            v-bind:center-text="client.socialName"
-                            v-bind="$props">
-                        </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+                    </div>
+                </div>
+            </div>
+            <table class="column-oriented">
+                <thead>
+                    <tr>
+                        <th>{{$t('Code')}}</th>
+                        <th class="number">{{$t('Quantity')}}</th>
+                        <th width="50%">{{$t('Concept')}}</th>
+                    </tr>
+                </thead>
+                <tbody v-for="sale in sales">
+                    <tr>
+                        <td>{{sale.itemFk | zerofill('000000')}}</td>
+                        <td class="number">{{Math.trunc(sale.subtotal)}}</td>
+                        <td width="50%">{{sale.concept}}</td>
+                    </tr>
+                    <tr class="description font light-gray">
+                        <td colspan="7">
+                            <span v-if="sale.value5"> <strong>{{sale.tag5}}</strong> {{sale.value5}} </span>
+                            <span v-if="sale.value6"> <strong>{{sale.tag6}}</strong> {{sale.value6}} </span>
+                            <span v-if="sale.value7"> <strong>{{sale.tag7}}</strong> {{sale.value7}} </span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <template v-slot:footer>
+        <report-footer
+            id="pageFooter"
+            v-bind:left-text="$t('client', [client.id])"
+            v-bind:center-text="client.socialName"
+            v-bind="$props"
+        >
+        </report-footer>
+    </template>
+</report-body>

print/templates/reports/campaign-metrics/campaign-metrics.js

@@ -1,5 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const reportHeader = new Component('report-header');
+const reportBody = new Component('report-body');
 const reportFooter = new Component('report-footer');
 
 module.exports = {
@@ -20,7 +20,7 @@ module.exports = {
         },
     },
     components: {
-        'report-header': reportHeader.build(),
+        'report-body': reportBody.build(),
         'report-footer': reportFooter.build()
     },
     props: {

print/templates/reports/claim-pickup-order/claim-pickup-order.html

@@ -1,94 +1,77 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
-                        <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <div class="columns">
-                                    <div class="size50">
-                                        <h1 class="title uppercase">{{$t('title')}}</h1>
-                                        <table class="row-oriented">
-                                            <tbody>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t('claimId')}}</td>
-                                                    <th>{{id}}</th>
-                                                </tr>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t('clientId')}}</td>
-                                                    <th>{{client.id}}</th>
-                                                </tr>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t('phone')}}</td>
-                                                    <th>{{client.phone}}</th>
-                                                </tr>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t('date')}}</td>
-                                                    <th>{{dated}}</th>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                    <div class="size50">
-                                        <div class="panel">
-                                            <div class="header">{{$t('clientData')}}</div>
-                                            <div class="body">
-                                                <h3 class="uppercase">{{client.nickname}}</h3>
-                                                <div>
-                                                    {{client.street}}
-                                                </div>
-                                                <div>
-                                                    {{client.postalCode}}, {{client.city}} ({{client.province}})
-                                                </div>
-                                                <div>
-                                                    {{client.country}}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <table class="column-oriented vn-mt-ml">
-                                    <thead>
-                                        <tr>
-                                            <th>{{$t('reference')}}</th>
-                                            <th class="number">{{$t('quantity')}}</th>
-                                            <th class="number">{{$t('claims')}}</th>
-                                            <th width="50%">{{$t('concept')}}</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody v-for="sale in sales" v-bind:key="sale.id">
-                                        <tr>
-                                            <td class="font gray">{{sale.id}}</td>
-                                            <td class="number">{{sale.quantity}}</td>
-                                            <td class="number">{{sale.claimQuantity}}</td>
-                                            <td width="50%">{{sale.concept}}</td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-
-                                <div class="panel sign">
-                                    <div class="header">{{$t('clientSignature')}}</div>
-                                    <div class="body centered">
-                                        <h3>{{client.name}}</h3>
-                                    </div>
-                                </div>
-                            </div>
+<report-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block">
+            <div class="columns">
+                <div class="size50">
+                    <h1 class="title uppercase">{{$t('title')}}</h1>
+                    <table class="row-oriented">
+                        <tbody>
+                            <tr>
+                                <td class="font gray uppercase">{{$t('claimId')}}</td>
+                                <th>{{id}}</th>
+                            </tr>
+                            <tr>
+                                <td class="font gray uppercase">{{$t('clientId')}}</td>
+                                <th>{{client.id}}</th>
+                            </tr>
+                            <tr>
+                                <td class="font gray uppercase">{{$t('phone')}}</td>
+                                <th>{{client.phone}}</th>
+                            </tr>
+                            <tr>
+                                <td class="font gray uppercase">{{$t('date')}}</td>
+                                <th>{{dated}}</th>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="size50">
+                    <div class="panel">
+                        <div class="header">{{$t('clientData')}}</div>
+                        <div class="body">
+                            <h3 class="uppercase">{{client.nickname}}</h3>
+                            <div>{{client.street}}</div>
+                            <div>{{client.postalCode}}, {{client.city}} ({{client.province}})</div>
+                            <div>{{client.country}}</div>
                         </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('claim', [id])"
-                            v-bind:center-text="client.name"
-                            v-bind="$props">
-                        </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+                    </div>
+                </div>
+            </div>
+
+            <table class="column-oriented vn-mt-ml">
+                <thead>
+                    <tr>
+                        <th>{{$t('reference')}}</th>
+                        <th class="number">{{$t('quantity')}}</th>
+                        <th class="number">{{$t('claims')}}</th>
+                        <th width="50%">{{$t('concept')}}</th>
+                    </tr>
+                </thead>
+                <tbody v-for="sale in sales" v-bind:key="sale.id">
+                    <tr>
+                        <td class="font gray">{{sale.id}}</td>
+                        <td class="number">{{sale.quantity}}</td>
+                        <td class="number">{{sale.claimQuantity}}</td>
+                        <td width="50%">{{sale.concept}}</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div class="panel sign">
+                <div class="header">{{$t('clientSignature')}}</div>
+                <div class="body centered">
+                    <h3>{{client.name}}</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+    <template v-slot:footer>
+        <report-footer
+            id="pageFooter"
+            v-bind:left-text="$t('claim', [id])"
+            v-bind:center-text="client.name"
+            v-bind="$props"
+        >
+        </report-footer>
+    </template>
+</report-body>

print/templates/reports/claim-pickup-order/claim-pickup-order.js

@@ -1,5 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const reportHeader = new Component('report-header');
+const reportBody = new Component('report-body');
 const reportFooter = new Component('report-footer');
 
 module.exports = {
@@ -27,7 +27,7 @@ module.exports = {
         }
     },
     components: {
-        'report-header': reportHeader.build(),
+        'report-body': reportBody.build(),
         'report-footer': reportFooter.build()
     },
     props: {

print/templates/reports/client-debt-statement/client-debt-statement.html

@@ -1,95 +1,78 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
-                        <report-header v-bind="$props"></report-header>
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <div class="columns">
-                                    <div class="size50">
-                                        <div class="size75">
-                                            <h1 class="title uppercase">{{$t('title')}}</h1>
-                                            <table class="row-oriented">
-                                                <tbody>
-                                                    <tr>
-                                                        <td class="font gray uppercase">{{$t('clientId')}}</td>
-                                                        <th>{{client.id}}</th>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class="font gray uppercase">{{$t('date')}}</td>
-                                                        <th>{{dated}}</th>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    </div>
-                                    <div class="size50">
-                                        <div class="panel">
-                                            <div class="header">{{$t('clientData')}}</div>
-                                            <div class="body">
-                                                <h3 class="uppercase">{{client.socialName}}</h3>
-                                                <div>
-                                                    {{client.street}}
-                                                </div>
-                                                <div>
-                                                    {{client.postcode}}, {{client.city}} ({{client.province}})
-                                                </div>
-                                                <div>
-                                                    {{client.country}}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                    
-                                <table class="column-oriented">
-                                    <thead>
-                                        <tr>
-                                            <th>{{$t('date')}}</th>
-                                            <th>{{$t('concept')}}</th>
-                                            <th class="number">{{$t('invoiced')}}</th>
-                                            <th class="number">{{$t('payed')}}</th>
-                                            <th class="number">{{$t('balance')}}</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody v-for="sale in sales" :key="sale.id">
-                                        <tr>
-                                            <td>{{sale.issued | date('%d-%m-%Y')}}</td>
-                                            <td>{{sale.ref}}</td>
-                                            <td class="number">{{sale.debtOut}}</td>
-                                            <td class="number">{{sale.debtIn}}</td>
-                                            <td class="number">{{getBalance(sale)}}</td>
-                                        </tr>
-                                    </tbody>
-                                    <tfoot>
-                                        <tr>
-                                            <td></td>
-                                            <td></td>
-                                            <td class="number">
-                                                <strong class="pull-left">Total</strong> 
-                                                {{getTotalDebtOut() | currency('EUR', $i18n.locale)}}
-                                            </td>
-                                            <td class="number">{{getTotalDebtIn() | currency('EUR', $i18n.locale)}}</td>
-                                            <td class="number">{{totalBalance | currency('EUR', $i18n.locale)}}</td>
-                                        </tr>
-                                    </tfoot>
-                                </table>
-                            </div>
+<report-body v-bind="$props">
+    <div class="grid-row">
+        <div class="grid-block">
+            <div class="columns">
+                <div class="size50">
+                    <div class="size75">
+                        <h1 class="title uppercase">{{$t('title')}}</h1>
+                        <table class="row-oriented">
+                            <tbody>
+                                <tr>
+                                    <td class="font gray uppercase">{{$t('clientId')}}</td>
+                                    <th>{{client.id}}</th>
+                                </tr>
+                                <tr>
+                                    <td class="font gray uppercase">{{$t('date')}}</td>
+                                    <th>{{dated}}</th>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="size50">
+                    <div class="panel">
+                        <div class="header">{{$t('clientData')}}</div>
+                        <div class="body">
+                            <h3 class="uppercase">{{client.socialName}}</h3>
+                            <div>{{client.street}}</div>
+                            <div>{{client.postcode}}, {{client.city}} ({{client.province}})</div>
+                            <div>{{client.country}}</div>
                         </div>
-                        <!-- Footer block -->
-                        <report-footer id="pageFooter"
-                            v-bind:left-text="$t('client', [client.id])"
-                            v-bind:center-text="client.socialName"
-                            v-bind="$props">
-                        </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+                    </div>
+                </div>
+            </div>
+
+            <table class="column-oriented">
+                <thead>
+                    <tr>
+                        <th>{{$t('date')}}</th>
+                        <th>{{$t('concept')}}</th>
+                        <th class="number">{{$t('invoiced')}}</th>
+                        <th class="number">{{$t('payed')}}</th>
+                        <th class="number">{{$t('balance')}}</th>
+                    </tr>
+                </thead>
+                <tbody v-for="sale in sales" :key="sale.id">
+                    <tr>
+                        <td>{{sale.issued | date('%d-%m-%Y')}}</td>
+                        <td>{{sale.ref}}</td>
+                        <td class="number">{{sale.debtOut}}</td>
+                        <td class="number">{{sale.debtIn}}</td>
+                        <td class="number">{{getBalance(sale)}}</td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td></td>
+                        <td></td>
+                        <td class="number">
+                            <strong class="pull-left">Total</strong>
+                            {{getTotalDebtOut() | currency('EUR', $i18n.locale)}}
+                        </td>
+                        <td class="number">{{getTotalDebtIn() | currency('EUR', $i18n.locale)}}</td>
+                        <td class="number">{{totalBalance | currency('EUR', $i18n.locale)}}</td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+    </div>
+    <template v-slot:footer>
+        <report-footer
+            id="pageFooter"
+            v-bind:left-text="$t('client', [client.id])"
+            v-bind:center-text="client.socialName"
+            v-bind="$props"
+        >
+        </report-footer>
+    </template>
+</report-body>

print/templates/reports/client-debt-statement/client-debt-statement.js

@@ -1,5 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const reportHeader = new Component('report-header');
+const reportBody = new Component('report-body');
 const reportFooter = new Component('report-footer');
 
 module.exports = {
@@ -64,7 +64,7 @@ module.exports = {
         },
     },
     components: {
-        'report-header': reportHeader.build(),
+        'report-body': reportBody.build(),
         'report-footer': reportFooter.build()
     },
     props: {

print/templates/reports/collection-label/assets/css/import.js

@@ -0,0 +1,12 @@
+const Stylesheet = require(`vn-print/core/stylesheet`);
+
+const path = require('path');
+const vnPrintPath = path.resolve('print');
+
+module.exports = new Stylesheet([
+    `${vnPrintPath}/common/css/spacing.css`,
+    `${vnPrintPath}/common/css/misc.css`,
+    `${vnPrintPath}/common/css/layout.css`,
+    `${vnPrintPath}/common/css/report.css`,
+    `${__dirname}/style.css`])
+    .mergeStyles();

print/templates/reports/collection-label/assets/css/style.css

@@ -0,0 +1,37 @@
+html {
+	font-family: "Roboto";
+	margin-top: -7px;
+}
+* {
+	box-sizing: border-box;
+	text-align: center;
+	font-size: 26px;
+}
+#vertical {
+	writing-mode: vertical-rl;
+	height: 226px;
+	margin-left: -13px;
+}
+.outline {
+	border: 1px solid black;
+	padding: 5px;
+}
+#nickname {
+	font-size: 22px;
+}
+#agencyDescripton {
+	font-size: 32px;
+	font-weight: bold;
+}
+#bold {
+	font-weight: bold;
+}
+#barcode{
+	width: 390px;
+}
+#shipped {
+	font-weight: bold;
+}
+#ticketFk, #vertical {
+	font-size: 34px;
+}

print/templates/reports/collection-label/collection-label.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html v-bind:lang="$i18n.locale">
+<body>
+<table v-for="labelData in labelsData" style="break-before: page;">
+<tbody>
+	<tr>
+		<td rowspan="6"><span id="vertical">{{labelData.levelV}}</span></td>
+		<td id="ticketFk" >{{labelData.ticketFk}} ⬸ {{labelData.clientFk}}</td>
+		<td colspan="2" id="shipped">{{labelData.shipped}}</td>
+	</tr>
+	<tr>
+		<td rowspan="3"><div v-html="getBarcode(labelData.ticketFk)" id="barcode"></div></td>
+		<td class="outline">{{labelData.workerCode}}</td>
+	</tr>
+	<tr>
+		<td class="outline">{{labelData.labelCount}}</td>
+	</tr>
+	<tr>
+		<td class="outline">{{labelData.size}}</td>
+	</tr>
+	<tr>
+		<td><div id="agencyDescripton">{{labelData.agencyDescription}}</div></td>
+		<td id="bold">{{labelData.lineCount}}</td>
+	</tr>
+	<tr>
+		<td id="nickname">{{labelData.nickName}}</td>
+		<td id="bold">{{labelData.agencyHour}}</td>
+	</tr>
+</tbody>
+</table>
+</body>
+</html>

print/templates/reports/collection-label/collection-label.js

@@ -0,0 +1,46 @@
+const jsBarcode = require('jsbarcode');
+const {DOMImplementation, XMLSerializer} = require('xmldom');
+const UserError = require('vn-loopback/util/user-error');
+
+module.exports = {
+    name: 'collection-label',
+    props: {
+        id: {
+            type: Number,
+            required: true,
+            description: 'The ticket or collection id'
+        }
+    },
+    async serverPrefetch() {
+        let ticketIds;
+        const res = await this.rawSqlFromDef('tickets', [this.id]);
+
+        if (res.length) {
+            ticketIds = [];
+            for (const row of res)
+                ticketIds.push(row.ticketFk);
+        } else
+            ticketIds = [this.id];
+
+        this.labelsData = await this.rawSqlFromDef('labelsData', [ticketIds]);
+
+        if (!this.labelsData.length)
+            throw new UserError('Empty data source');
+    },
+    methods: {
+        getBarcode(id) {
+            const xmlSerializer = new XMLSerializer();
+            const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
+            const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+            jsBarcode(svgNode, id, {
+                xmlDocument: document,
+                format: 'code128',
+                displayValue: false,
+                width: 3.8,
+                height: 110,
+            });
+            return xmlSerializer.serializeToString(svgNode);
+        },
+    }
+};

print/templates/reports/collection-label/locale/es.yml

@@ -0,0 +1 @@
+reportName: labelCollection

print/templates/reports/collection-label/options.json

@@ -0,0 +1,11 @@
+{
+    "width": "10.4cm",
+    "height": "4.8cm",
+    "margin": {
+        "top": "0cm",
+        "right": "0.5cm",
+        "bottom": "0cm",
+        "left": "0cm"
+    },
+    "printBackground": true
+}

print/templates/reports/collection-label/sql/labelsData.sql

@@ -0,0 +1,35 @@
+SELECT c.itemPackingTypeFk,
+		CONCAT(tc.collectionFk, ' ', LEFT(cc.code, 4)) color,
+		CONCAT(tc.collectionFk, ' ', SUBSTRING('ABCDEFGH',tc.wagon, 1), '-', tc.`level`) levelV,
+		tc.ticketFk,
+		LEFT(COALESCE(et.description, zo.name, am.name),12) agencyDescription,
+		am.name,
+		t.clientFk,
+		CONCAT(CAST(SUM(sv.volume) AS DECIMAL(5, 2)), 'm³') m3 ,
+		CAST(IF(ic.code = 'plant', CONCAT(MAX(i.`size`),' cm'), COUNT(*)) AS CHAR) size,
+		w.code workerCode,
+		tt.labelCount,
+		IF(HOUR(t.shipped), TIME_FORMAT(t.shipped, '%H:%i'), TIME_FORMAT(zo.`hour`, '%H:%i')) agencyHour,
+		DATE_FORMAT(t.shipped, '%d/%m/%y') shipped,
+		COUNT(*) lineCount,
+		t.nickName
+	FROM vn.ticket t
+		JOIN vn.ticketCollection tc ON tc.ticketFk = t.id
+		JOIN vn.collection c ON c.id = tc.collectionFk
+		LEFT JOIN vn.collectionColors cc ON cc.shelve = tc.`level`
+			AND cc.wagon = tc.wagon
+			AND cc.trainFk = c.trainFk
+		JOIN vn.sale s ON s.ticketFk = t.id
+		LEFT JOIN vn.saleVolume sv ON sv.saleFk = s.id	
+		JOIN vn.item i ON i.id = s.itemFk
+		JOIN vn.itemType it ON it.id = i.typeFk
+		JOIN vn.itemCategory ic ON ic.id = it.categoryFk
+		JOIN vn.worker w ON w.id = c.workerFk
+		JOIN vn.agencyMode am ON am.id = t.agencyModeFk
+		LEFT JOIN vn.ticketTrolley tt ON tt.ticket = t.id
+		LEFT JOIN vn.`zone` zo ON t.zoneFk = zo.id
+		LEFT JOIN vn.routesMonitor rm ON rm.routeFk = t.routeFk
+		LEFT JOIN vn.expeditionTruck et ON et.id = rm.expeditionTruckFk	
+	WHERE tc.ticketFk IN (?)
+	GROUP BY t.id
+	ORDER BY cc.`code`;

print/templates/reports/collection-label/sql/tickets.sql

@@ -0,0 +1,3 @@
+SELECT ticketFk
+	FROM ticketCollection
+	WHERE collectionFk = ?

print/templates/reports/credit-request/credit-request.html

@@ -1,190 +1,164 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
-    <body>
-        <table class="grid">
-            <tbody>
-                <tr>
-                    <td>
-                        <!-- Header block -->
-                        <report-header v-bind="$props"></report-header>
-
-                        <!-- Block -->
-                        <div class="grid-row info-panel">
-                            <div class="grid-block">
-                                <h1 class="title centered uppercase">{{$t('fields.title')}}</h1>
-                            </div>
-                        </div>
-
-                        <!-- Block -->
-                        <table>
-                            <tbody>
-                                <tr>
-                                    <td style="width: 70%; text-align: right; padding-right: 2em">{{$t('fields.date')}}:</td>
-                                    <th>
-                                        <div class="field wide-rectangle">
-                                            <span></span>
-                                        </div>
-                                    </th>
-                                </tr>
-                            </tbody>
-                        </table>
-
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <div class="info-panel">
-                                    <div class="green-background">
-                                        <h3>{{$t('fields.companyInfo')}}</h3>
+<report-body v-bind="$props">
+    <div class="grid-row info-panel">
+        <div class="grid-block">
+            <h1 class="title centered uppercase">{{$t('fields.title')}}</h1>
+        </div>
+    </div>
+    <table>
+        <tbody>
+            <tr>
+                <td style="width: 70%; text-align: right; padding-right: 2em">{{$t('fields.date')}}:</td>
+                <th>
+                    <div class="field wide-rectangle">
+                        <span></span>
+                    </div>
+                </th>
+            </tr>
+        </tbody>
+    </table>
+    <div class="grid-row">
+        <div class="grid-block">
+            <div class="info-panel">
+                <div class="green-background">
+                    <h3>{{$t('fields.companyInfo')}}</h3>
+                </div>
+                <div class="body">
+                    <table style="width: 100%">
+                        <tbody>
+                            <tr>
+                                <td>{{$t('fields.companyName')}}:</td>
+                                <th colspan="3">
+                                    <div class="field wide-rectangle">
+                                        <span></span>
                                     </div>
-                                    <div class="body">
-                                        <table style="width: 100%">
-                                            <tbody>
-                                                <tr>
-                                                    <td>{{$t('fields.companyName')}}:</td>
-                                                    <th colspan="3">
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                                <tr>
-                                                    <td>{{$t('fields.businessType')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                    <td>{{$t('fields.antiquity')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                                <tr>
-                                                    <td>{{$t('fields.surface')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                    <td>{{$t('fields.numberOfEmployees')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                                <tr>
-                                                    <td>{{$t('fields.owner')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                    <td>{{$t('fields.phone')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                                <tr>
-                                                    <td>{{$t('fields.payer')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                    <td>{{$t('fields.phone')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                            </tbody>
-                                        </table>
+                                </th>
+                            </tr>
+                            <tr>
+                                <td>{{$t('fields.businessType')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
                                     </div>
+                                </th>
+                                <td>{{$t('fields.antiquity')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                            </tr>
+                            <tr>
+                                <td>{{$t('fields.surface')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                                <td>{{$t('fields.numberOfEmployees')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                            </tr>
+                            <tr>
+                                <td>{{$t('fields.owner')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                                <td>{{$t('fields.phone')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                            </tr>
+                            <tr>
+                                <td>{{$t('fields.payer')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                                <td>{{$t('fields.phone')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block">
+            <div class="info-panel" style="width: 98%">
+                <div class="green-background">
+                    <h3>{{$t('fields.economicInfo')}}</h3>
+                </div>
+                <div class="body">
+                    <table>
+                        <tbody>
+                            <tr class="row-oriented">
+                                <td>{{$t('fields.previousSalesVolume')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                            </tr>
+                            <tr class="row-oriented">
+                                <td>{{$t('fields.forecastedSalesVolume')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                            </tr>
+                            <tr class="row-oriented">
+                                <td>{{$t('fields.forecastedPurchases')}}:</td>
+                                <th>
+                                    <div class="field wide-rectangle">
+                                        <span></span>
+                                    </div>
+                                </th>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="grid-row">
+        <div class="grid-block">
+            <div>
+                <table style="border-top: 1px solid #ddd" class="info-panel">
+                    <tbody>
+                        <tr class="row-oriented" style="width: 100%">
+                            <td>{{$t('fields.personFilling')}}:</td>
+                            <th>
+                                <div class="field wide-rectangle">
+                                    <span></span>
                                 </div>
-                            </div>
-                        </div>
-
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <div class="info-panel" style="width: 98%">
-                                    <div class="green-background">
-                                        <h3>{{$t('fields.economicInfo')}}</h3>
-                                    </div>
-                                    <div class="body">
-                                        <table>
-                                            <tbody>
-                                                <tr class="row-oriented">
-                                                    <td>{{$t('fields.previousSalesVolume')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                                <tr class="row-oriented">
-                                                    <td>{{$t('fields.forecastedSalesVolume')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                                <tr class="row-oriented">
-                                                    <td>{{$t('fields.forecastedPurchases')}}:</td>
-                                                    <th>
-                                                        <div class="field wide-rectangle">
-                                                            <span></span>
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </div>
+                            </th>
+                            <td>{{$t('fields.phone')}}:</td>
+                            <th>
+                                <div class="field wide-rectangle">
+                                    <span></span>
                                 </div>
-                            </div>
-                        </div>
-
-                        <!-- Block -->
-                        <div class="grid-row">
-                            <div class="grid-block">
-                                <div>
-                                    <table style="border-top: 1px solid #DDD" class="info-panel">
-                                        <tbody>
-                                            <tr class="row-oriented" style="width: 100%">
-                                                <td>{{$t('fields.personFilling')}}:</td>
-                                                <th>
-                                                    <div class="field wide-rectangle">
-                                                        <span></span>
-                                                    </div>
-                                                </th>
-                                                <td>{{$t('fields.phone')}}:</td>
-                                                <th>
-                                                    <div class="field wide-rectangle">
-                                                        <span></span>
-                                                    </div>
-                                                </th>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- Footer block -->
-                        <report-footer
-                            id="pageFooter"
-                            v-bind:left-text="dated"
-                            v-bind="$props">
-                        </report-footer>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </body>
-</html>
+                            </th>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <template v-slot:footer>
+        <report-footer id="pageFooter" v-bind:left-text="dated" v-bind="$props"> </report-footer>
+    </template>
+</report-body>

print/templates/reports/credit-request/credit-request.js

@@ -1,5 +1,5 @@
 const Component = require(`vn-print/core/component`);
-const reportHeader = new Component('report-header');
+const reportBody = new Component('report-body')
 const reportFooter = new Component('report-footer');
 
 const rptCreditRequest = {
@@ -12,7 +12,7 @@ const rptCreditRequest = {
         }
     },
     components: {
-        'report-header': reportHeader.build(),
+        'report-body': reportBody.build(),
         'report-footer': reportFooter.build()
     }
 };

print/templates/reports/delivery-note/delivery-note.html

@@ -1,304 +1,257 @@
-<!DOCTYPE html>
-<html v-bind:lang="$i18n.locale">
+<report-body v-bind="$props">
+    <template v-slot:header>
+        <report-header v-bind="$props" v-bind:company-code="ticket.companyCode"> </report-header>
+    </template>
+    <div class="grid-row">
+        <div class="grid-block">
+            <div class="columns">
+                <div class="size50">
+                    <div class="size75 vn-mt-ml">
+                        <h1 class="title uppercase">{{$t(deliverNoteType)}}</h1>
+                        <table class="row-oriented ticket-info">
+                            <tbody>
+                                <tr>
+                                    <td class="font gray uppercase">{{$t('clientId')}}</td>
+                                    <th>{{client.id}}</th>
+                                </tr>
+                                <tr>
+                                    <td class="font gray uppercase">{{$t(deliverNoteType)}}</td>
+                                    <th>{{ticket.id}}</th>
+                                </tr>
+                                <tr>
+                                    <td class="font gray uppercase">{{$t('date')}}</td>
+                                    <th>{{ticket.shipped | date('%d-%m-%Y')}}</th>
+                                </tr>
+                                <tr>
+                                    <td class="font gray uppercase">{{$t('packages')}}</td>
+                                    <th>{{ticket.packages}}</th>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="size50">
+                    <div class="panel">
+                        <div class="header">{{$t('deliveryAddress')}}</div>
+                        <div class="body">
+                            <h3 class="uppercase">{{address.nickname}}</h3>
+                            <div>{{address.street}}</div>
+                            <div>{{address.postalCode}}, {{address.city}} ({{address.province}})</div>
+                        </div>
+                    </div>
 
-<body>
-    <table class="grid">
-        <tbody>
-            <tr>
-                <td>
-                    <!-- Header block -->
-                    <report-header v-bind="$props" v-bind:company-code="ticket.companyCode">
-                    </report-header>
-                    <!-- Block -->
-                    <div class="grid-row">
-                        <div class="grid-block">
-                            <div class="columns">
-                                <div class="size50">
-                                    <div class="size75 vn-mt-ml">
-                                        <h1 class="title uppercase">{{$t(deliverNoteType)}}</h1>
-                                        <table class="row-oriented ticket-info">
-                                            <tbody>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t('clientId')}}</td>
-                                                    <th>{{client.id}}</th>
-                                                </tr>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t(deliverNoteType)}}</td>
-                                                    <th>{{ticket.id}}</th>
-                                                </tr>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t('date')}}</td>
-                                                    <th>{{ticket.shipped | date('%d-%m-%Y')}}</th>
-                                                </tr>
-                                                <tr>
-                                                    <td class="font gray uppercase">{{$t('packages')}}</td>
-                                                    <th>{{ticket.packages}}</th>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                </div>
-                                <div class="size50">
-                                    <div class="panel">
-                                        <div class="header">{{$t('deliveryAddress')}}</div>
-                                        <div class="body">
-                                            <h3 class="uppercase">{{address.nickname}}</h3>
-                                            <div>
-                                                {{address.street}}
-                                            </div>
-                                            <div>
-                                                {{address.postalCode}}, {{address.city}} ({{address.province}})
-                                            </div>
-                                        </div>
-                                    </div>
+                    <div class="panel">
+                        <div class="header">{{$t('fiscalData')}}</div>
+                        <div class="body">
+                            <div>{{client.socialName}}</div>
+                            <div>{{client.street}}</div>
+                            <div>{{client.fi}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-                                    <div class="panel">
-                                        <div class="header">{{$t('fiscalData')}}</div>
-                                        <div class="body">
-                                            <div>
-                                                {{client.socialName}}
-                                            </div>
-                                            <div>
-                                                {{client.street}}
-                                            </div>
-                                            <div>
-                                                {{client.fi}}
-                                            </div>
-                                        </div>
+            <h2>{{$t('saleLines')}}</h2>
+            <table class="column-oriented">
+                <thead>
+                    <tr>
+                        <th width="5%">{{$t('reference')}}</th>
+                        <th class="number">{{$t('quantity')}}</th>
+                        <th width="50%">{{$t('concept')}}</th>
+                        <th class="number" v-if="showPrices">{{$t('price')}}</th>
+                        <th class="centered" width="5%" v-if="showPrices">{{$t('discount')}}</th>
+                        <th class="centered" v-if="showPrices">{{$t('vat')}}</th>
+                        <th class="number" v-if="showPrices">{{$t('amount')}}</th>
+                    </tr>
+                </thead>
+                <tbody v-for="sale in sales" class="no-page-break">
+                    <tr>
+                        <td width="5%">{{sale.itemFk | zerofill('000000')}}</td>
+                        <td class="number">{{sale.quantity}}</td>
+                        <td width="50%">{{sale.concept}}</td>
+                        <td class="number" v-if="showPrices">{{sale.price | currency('EUR', $i18n.locale)}}</td>
+                        <td class="centered" width="5%" v-if="showPrices">{{(sale.discount / 100) | percentage}}</td>
+                        <td class="centered" v-if="showPrices">{{sale.vatType}}</td>
+                        <td class="number" v-if="showPrices">
+                            {{sale.price * sale.quantity * (1 - sale.discount / 100) | currency('EUR', $i18n.locale)}}
+                        </td>
+                    </tr>
+                    <tr class="description font light-gray">
+                        <td colspan="7">
+                            <span v-if="sale.value5"> <strong>{{sale.tag5}}</strong> {{sale.value5}} </span>
+                            <span v-if="sale.value6"> <strong>{{sale.tag6}}</strong> {{sale.value6}} </span>
+                            <span v-if="sale.value7"> <strong>{{sale.tag7}}</strong> {{sale.value7}} </span>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot v-if="showPrices">
+                    <tr>
+                        <td colspan="6" class="font bold">
+                            <span class="pull-right">{{$t('subtotal')}}</span>
+                        </td>
+                        <td class="number">{{getSubTotal() | currency('EUR', $i18n.locale)}}</td>
+                    </tr>
+                </tfoot>
+            </table>
+
+            <div class="columns vn-mb-ml">
+                <div class="size100 no-page-break" v-if="services.length > 0">
+                    <h2>{{$t('services.title')}}</h2>
+                    <table class="column-oriented">
+                        <thead>
+                            <tr>
+                                <th width="5%"></th>
+                                <th class="number">{{$t('services.theader.quantity')}}</th>
+                                <th width="50%">{{$t('services.theader.concept')}}</th>
+                                <th class="number">{{$t('services.theader.price')}}</th>
+                                <th class="centered" width="5%"></th>
+                                <th class="centered">{{$t('services.theader.vat')}}</th>
+                                <th class="number">{{$t('services.theader.amount')}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="service in services">
+                                <td width="5%"></td>
+                                <td class="number">{{service.quantity}}</td>
+                                <td width="50%">{{service.description}}</td>
+                                <td class="number">{{service.price | currency('EUR', $i18n.locale)}}</td>
+                                <td class="centered" width="5%"></td>
+                                <td class="centered">{{service.taxDescription}}</td>
+                                <td class="number">{{service.price | currency('EUR', $i18n.locale)}}</td>
+                            </tr>
+                        </tbody>
+                        <tfoot>
+                            <tr>
+                                <td colspan="6" class="font bold">
+                                    <span class="pull-right">{{$t('services.tfoot.subtotal')}}</span>
+                                </td>
+                                <td class="number">{{serviceTotal | currency('EUR', $i18n.locale)}}</td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                    <span class="font gray">* {{ $t('services.warning') }}</span>
+                </div>
+            </div>
+            <div class="columns">
+                <div id="packagings" class="size100 no-page-break" v-if="packagings.length > 0">
+                    <h2>{{$t('packagings.title')}}</h2>
+                    <table class="column-oriented">
+                        <thead>
+                            <tr>
+                                <th>{{$t('packagings.theader.reference')}}</th>
+                                <th class="number">{{$t('packagings.theader.quantity')}}</th>
+                                <th wihth="75%">{{$t('packagings.theader.concept')}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="packaging in packagings">
+                                <td>{{packaging.itemFk | zerofill('000000')}}</td>
+                                <td class="number">{{packaging.quantity}}</td>
+                                <td width="85%">{{packaging.name}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="columns vn-mt-xl" v-if="showPrices">
+                <div id="taxes" class="size50 pull-right no-page-break" v-if="taxes">
+                    <table class="column-oriented">
+                        <thead>
+                            <tr>
+                                <th colspan="4">{{$t('taxes.title')}}</th>
+                            </tr>
+                        </thead>
+                        <thead class="light">
+                            <tr>
+                                <th width="45%">{{$t('taxes.theader.type')}}</th>
+                                <th width="25%" class="number">{{$t('taxes.theader.taxBase')}}</th>
+                                <th>{{$t('taxes.theader.tax')}}</th>
+                                <th class="number">{{$t('taxes.theader.fee')}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="tax in taxes">
+                                <td width="45%">{{tax.name}}</td>
+                                <td width="25%" class="number">{{tax.Base | currency('EUR', $i18n.locale)}}</td>
+                                <td>{{tax.vatPercent | percentage}}</td>
+                                <td class="number">{{tax.tax | currency('EUR', $i18n.locale)}}</td>
+                            </tr>
+                        </tbody>
+                        <tfoot>
+                            <tr class="font bold">
+                                <td width="45%">{{$t('subtotal')}}</td>
+                                <td width="20%" class="number">{{getTotalBase() | currency('EUR', $i18n.locale)}}</td>
+                                <td></td>
+                                <td class="number">{{getTotalTax()| currency('EUR', $i18n.locale)}}</td>
+                            </tr>
+                            <tr class="font bold">
+                                <td colspan="2">{{$t('total')}}</td>
+                                <td colspan="2" class="number">{{getTotal() | currency('EUR', $i18n.locale)}}</td>
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+
+                <div id="phytosanitary" class="size50 pull-left no-page-break">
+                    <div class="panel">
+                        <div class="body">
+                            <div class="flag">
+                                <div class="columns">
+                                    <div class="size25">
+                                        <img v-bind:src="getReportSrc('europe.png')" />
                                     </div>
+                                    <div class="size75 flag-text"><strong>{{$t('plantPassport')}}</strong><br /></div>
                                 </div>
                             </div>
-
-                            <!-- Sales block -->
-                            <h2>{{$t('saleLines')}}</h2>
-                            <table class="column-oriented">
-                                <thead>
-                                    <tr>
-                                        <th width="5%">{{$t('reference')}}</th>
-                                        <th class="number">{{$t('quantity')}}</th>
-                                        <th width="50%">{{$t('concept')}}</th>
-                                        <th class="number" v-if="showPrices">{{$t('price')}}</th>
-                                        <th class="centered" width="5%" v-if="showPrices">{{$t('discount')}}</th>
-                                        <th class="centered" v-if="showPrices">{{$t('vat')}}</th>
-                                        <th class="number" v-if="showPrices">{{$t('amount')}}</th>
-                                    </tr>
-                                </thead>
-                                <tbody v-for="sale in sales" class="no-page-break">
-                                    <tr>
-                                        <td width="5%">{{sale.itemFk | zerofill('000000')}}</td>
-                                        <td class="number">{{sale.quantity}}</td>
-                                        <td width="50%">{{sale.concept}}</td>
-                                        <td class="number" v-if="showPrices">{{sale.price | currency('EUR',
-                                            $i18n.locale)}}</td>
-                                        <td class="centered" width="5%" v-if="showPrices">{{(sale.discount / 100) |
-                                            percentage}}</td>
-                                        <td class="centered" v-if="showPrices">{{sale.vatType}}</td>
-                                        <td class="number" v-if="showPrices">{{sale.price * sale.quantity * (1 -
-                                            sale.discount / 100) | currency('EUR', $i18n.locale)}}</td>
-                                    </tr>
-                                    <tr class="description font light-gray">
-                                        <td colspan="7">
-                                            <span v-if="sale.value5">
-                                                <strong>{{sale.tag5}}</strong> {{sale.value5}}
-                                            </span>
-                                            <span v-if="sale.value6">
-                                                <strong>{{sale.tag6}}</strong> {{sale.value6}}
-                                            </span>
-                                            <span v-if="sale.value7">
-                                                <strong>{{sale.tag7}}</strong> {{sale.value7}}
-                                            </span>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                                <tfoot v-if="showPrices">
-                                    <tr>
-                                        <td colspan="6" class="font bold">
-                                            <span class="pull-right">{{$t('subtotal')}}</span>
-                                        </td>
-                                        <td class="number">{{getSubTotal() | currency('EUR', $i18n.locale)}}</td>
-                                    </tr>
-                                </tfoot>
-                            </table>
-                            <!-- End of sales block -->
-
-                            <div class="columns vn-mb-ml">
-                                <!-- Services block-->
-                                <div class="size100 no-page-break" v-if="services.length > 0">
-                                    <h2>{{$t('services.title')}}</h2>
-                                    <table class="column-oriented">
-                                        <thead>
-                                            <tr>
-                                                <th width="5%"></th>
-                                                <th class="number">{{$t('services.theader.quantity')}}</th>
-                                                <th width="50%">{{$t('services.theader.concept')}}</th>
-                                                <th class="number">{{$t('services.theader.price')}}</th>
-                                                <th class="centered" width="5%"></th>
-                                                <th class="centered">{{$t('services.theader.vat')}}</th>
-                                                <th class="number">{{$t('services.theader.amount')}}</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr v-for="service in services">
-                                                <td width="5%"></td>
-                                                <td class="number">{{service.quantity}}</td>
-                                                <td width="50%">{{service.description}}</td>
-                                                <td class="number">{{service.price | currency('EUR', $i18n.locale)}}
-                                                </td>
-                                                <td class="centered" width="5%"></td>
-                                                <td class="centered">{{service.taxDescription}}</td>
-                                                <td class="number">{{service.price | currency('EUR', $i18n.locale)}}
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                        <tfoot>
-                                            <tr>
-                                                <td colspan="6" class="font bold">
-                                                    <span class="pull-right">{{$t('services.tfoot.subtotal')}}</span>
-                                                </td>
-                                                <td class="number">{{serviceTotal | currency('EUR', $i18n.locale)}}</td>
-                                            </tr>
-                                        </tfoot>
-                                    </table>
-                                    <span class="font gray">* {{ $t('services.warning') }}</span>
+                            <div class="phytosanitary-info">
+                                <div>
+                                    <strong>A</strong>
+                                    <span>{{getBotanical()}}</span>
                                 </div>
-                                <!-- End of services block -->
-                            </div>
-                            <div class="columns">
-                                <!-- Packages block -->
-                                <div id="packagings" class="size100 no-page-break" v-if="packagings.length > 0">
-                                    <h2>{{$t('packagings.title')}}</h2>
-                                    <table class="column-oriented">
-                                        <thead>
-                                            <tr>
-                                                <th>{{$t('packagings.theader.reference')}}</th>
-                                                <th class="number">{{$t('packagings.theader.quantity')}}</th>
-                                                <th wihth="75%">{{$t('packagings.theader.concept')}}</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr v-for="packaging in packagings">
-                                                <td>{{packaging.itemFk | zerofill('000000')}}</td>
-                                                <td class="number">{{packaging.quantity}}</td>
-                                                <td width="85%">{{packaging.name}}</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
+                                <div>
+                                    <strong>B</strong>
+                                    <span>ES17462130</span>
                                 </div>
-                                <!-- End of packages block -->
-                            </div>
-                            <div class="columns vn-mt-xl" v-if="showPrices">
-                                <!-- Taxes block -->
-                                <div id="taxes" class="size50 pull-right no-page-break" v-if="taxes">
-                                    <table class="column-oriented">
-                                        <thead>
-                                            <tr>
-                                                <th colspan="4">{{$t('taxes.title')}}</th>
-                                            </tr>
-                                        </thead>
-                                        <thead class="light">
-                                            <tr>
-                                                <th width="45%">{{$t('taxes.theader.type')}}</th>
-                                                <th width="25%" class="number">{{$t('taxes.theader.taxBase')}}</th>
-                                                <th>{{$t('taxes.theader.tax')}}</th>
-                                                <th class="number">{{$t('taxes.theader.fee')}}</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            <tr v-for="tax in taxes">
-                                                <td width="45%">{{tax.name}}</td>
-                                                <td width="25%" class="number">
-                                                    {{tax.Base | currency('EUR', $i18n.locale)}}
-                                                </td>
-                                                <td>{{tax.vatPercent | percentage}}</td>
-                                                <td class="number">{{tax.tax | currency('EUR', $i18n.locale)}}</td>
-                                            </tr>
-                                        </tbody>
-                                        <tfoot>
-                                            <tr class="font bold">
-                                                <td width="45%">{{$t('subtotal')}}</td>
-                                                <td width="20%" class="number">
-                                                    {{getTotalBase() | currency('EUR', $i18n.locale)}}
-                                                </td>
-                                                <td></td>
-                                                <td class="number">{{getTotalTax()| currency('EUR', $i18n.locale)}}</td>
-                                            </tr>
-                                            <tr class="font bold">
-                                                <td colspan="2">{{$t('total')}}</td>
-                                                <td colspan="2" class="number">{{getTotal() | currency('EUR',
-                                                    $i18n.locale)}}</td>
-                                            </tr>
-                                        </tfoot>
-                                    </table>
+                                <div>
+                                    <strong>C</strong>
+                                    <span>{{ticket.id}}</span>
                                 </div>
-                                <!-- End of taxes block -->
-
-                                <!-- Phytosanitary block -->
-                                <div id="phytosanitary" class="size50 pull-left no-page-break">
-                                    <div class="panel">
-                                        <div class="body">
-                                            <div class="flag">
-                                                <div class="columns">
-                                                    <div class="size25">
-                                                        <img v-bind:src="getReportSrc('europe.png')" />
-                                                    </div>
-                                                    <div class="size75 flag-text">
-                                                        <strong>{{$t('plantPassport')}}</strong><br />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="phytosanitary-info">
-                                                <div>
-                                                    <strong>A</strong>
-                                                    <span>{{getBotanical()}}</span>
-                                                </div>
-                                                <div>
-                                                    <strong>B</strong>
-                                                    <span>ES17462130</span>
-                                                </div>
-                                                <div>
-                                                    <strong>C</strong>
-                                                    <span>{{ticket.id}}</span>
-                                                </div>
-                                                <div>
-                                                    <strong>D</strong>
-                                                    <span>ES</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- End of phytosanitary block -->
-                            </div>
-                            <div class="columns">
-                                <!-- Signature block -->
-                                <div class="size50 pull-left no-page-break">
-                                    <div id="signature" class="panel" v-if="signature && signature.id">
-                                        <div class="header">{{$t('digitalSignature')}}</div>
-                                        <div class="body centered">
-                                            <img v-bind:src="dmsPath" />
-                                            <div>{{signature.created | date('%d-%m-%Y')}}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- End of signature block -->
-                            </div>
-                            <div class="columns vn-mb-ml" v-if="hasObservations">
-                                <!-- Observations block-->
-                                <div class="size100 no-page-break">
-                                    <h2>{{$t('observations')}}</h2>
-                                    <p class="observations">{{ticket.description}}</p>
+                                <div>
+                                    <strong>D</strong>
+                                    <span>ES</span>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <!-- Footer block -->
-                    <report-footer id="pageFooter" v-bind:company-code="ticket.companyCode"
-                        v-bind:left-text="footerType" v-bind:center-text="client.socialName" v-bind="$props">
-                    </report-footer>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</body>
-
-</html>
+                </div>
+            </div>
+            <div class="columns">
+                <div class="size50 pull-left no-page-break">
+                    <div id="signature" class="panel" v-if="signature && signature.id">
+                        <div class="header">{{$t('digitalSignature')}}</div>
+                        <div class="body centered">
+                            <img v-bind:src="dmsPath" />
+                            <div>{{signature.created | date('%d-%m-%Y')}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="columns vn-mb-ml" v-if="hasObservations">
+                <div class="size100 no-page-break">
+                    <h2>{{$t('observations')}}</h2>
+                    <p class="observations">{{ticket.description}}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <template v-slot:footer>
+        <report-footer
+            id="pageFooter"
+            v-bind:company-code="ticket.companyCode"
+            v-bind:left-text="footerType"
+            v-bind:center-text="client.socialName"
+            v-bind="$props"
+        >
+        </report-footer>
+    </template>
+</report-body>