Added additional designs

app/Models/Account.php

@@ -908,7 +908,6 @@ class Account extends Eloquent
         switch ($feature) {
             // Pro
             case FEATURE_CUSTOMIZE_INVOICE_DESIGN:
-            case FEATURE_REMOVE_CREATED_BY:
             case FEATURE_DIFFERENT_DESIGNS:
             case FEATURE_EMAIL_TEMPLATES_REMINDERS:
             case FEATURE_INVOICE_SETTINGS:
@@ -933,6 +932,7 @@ class Account extends Eloquent
                 }
                 // Fallthrough
             case FEATURE_CLIENT_PORTAL_CSS:
+            case FEATURE_REMOVE_CREATED_BY:
                 return !empty($planDetails);// A plan is required even for self-hosted users
 
             // Enterprise; No Trial allowed; grandfathered for old pro users

public/js/pdf.pdfmake.js

@@ -87,12 +87,17 @@ function GetPdfMake(invoice, javascript, callback) {
     var dd = JSON.parse(javascript, jsonCallBack);
     var designId = invoice.invoice_design_id;
     if (!invoice.features.remove_created_by) {
-        if (designId == NINJA.TEMPLATES.CLEAN || designId == NINJA.TEMPLATES.NORMAL) {
+        var footer = dd.footer();
-            dd.footer.columns.push({image: logoImages.imageLogo1, alignment: 'right', width: 130, margin: [0, 0, 0, 0]})
+        if (footer) {
-        } else if (designId == NINJA.TEMPLATES.BOLD) {
+            if (designId == NINJA.TEMPLATES.PLAYFUL) {
-            dd.footer[1].columns.push({image: logoImages.imageLogo2, alignment: 'right', width: 130, margin: [0, -20, 20, 0]})
+                footer.push({image: logoImages.imageLogo1, alignment: 'right', width: 130, margin: [0, 0, 10, 10]})
-        } else if (designId == NINJA.TEMPLATES.MODERN) {
+            } else if (designId == NINJA.TEMPLATES.BOLD) {
-            dd.footer[1].columns[0].stack.push({image: logoImages.imageLogo3, alignment: 'left', width: 130, margin: [40, 6, 0, 0]});
+                footer[1].columns.push({image: logoImages.imageLogo2, alignment: 'right', width: 130, margin: [0, -20, 20, 0]})
+            } else if (designId == NINJA.TEMPLATES.MODERN) {
+                footer[1].columns[0].stack.push({image: logoImages.imageLogo3, alignment: 'left', width: 130, margin: [40, 6, 0, 0]});
+            } else {
+                footer.columns.push({image: logoImages.imageLogo1, alignment: 'right', width: 130, margin: [0, 0, 0, 0]})
+            }
         }
     }
 

resources/views/accounts/invoice_design.blade.php

@@ -116,8 +116,8 @@
       {!! Former::open()->addClass('warn-on-exit')->onchange('if(!window.loadingFonts)refreshPDF()') !!}
 
       {!! Former::populateField('invoice_design_id', $account->invoice_design_id) !!}
-      {!! Former::populateField('body_font_id', $account->body_font_id) !!}
+      {!! Former::populateField('body_font_id', $account->getBodyFontId()) !!}
-      {!! Former::populateField('header_font_id', $account->header_font_id) !!}
+      {!! Former::populateField('header_font_id', $account->getHeaderFontId()) !!}
       {!! Former::populateField('live_preview', intval($account->live_preview)) !!}
       {!! Former::populateField('font_size', $account->font_size) !!}
       {!! Former::populateField('page_size', $account->page_size) !!}
@@ -261,21 +261,15 @@
                 ->appendIcon(Icon::create('edit'))
                 ->asLinkTo(URL::to('/settings/customize_design'))
                 ->large(),
-            Button::success(trans('texts.save'))
+            Auth::user()->hasFeature(FEATURE_CUSTOMIZE_INVOICE_DESIGN) ?
-                ->submit()->large()
+                Button::success(trans('texts.save'))
-                ->appendIcon(Icon::create('floppy-disk'))
+                    ->submit()->large()
-                ->withAttributes(['class' => 'save-button'])
+                    ->appendIcon(Icon::create('floppy-disk'))
+                    ->withAttributes(['class' => 'save-button']) :
+                false
         ) !!}
     <br/>
 
-      @if (!Auth::user()->hasFeature(FEATURE_CUSTOMIZE_INVOICE_DESIGN))
-        <script>
-              $(function() {
-                $('form.warn-on-exit input, .save-button').prop('disabled', true);
-              });
-          </script>
-      @endif
-
       {!! Former::close() !!}
 
     </div>

resources/views/invoices/pdf.blade.php

@@ -70,7 +70,7 @@
   logoImages.imageLogoWidth2 =325/2;
   logoImages.imageLogoHeight2 = 81/2;
 
-  logoImages.imageLogo3 = "{{ Form::image_data('images/report_logo3.jpg') }}";
+  logoImages.imageLogo3 = "{{ Form::image_data('images/report_logo3.png') }}";
   logoImages.imageLogoWidth3 =325/2;
   logoImages.imageLogoHeight3 = 81/2;
 

storage/templates/business.js

@@ -0,0 +1,246 @@
+{
+    "content": [
+    {
+        "columns": 
+        [
+            {
+        		"image": "$accountLogo",
+        		"fit": [120, 80]
+    		},
+            {
+                "width": 300,
+                "stack": "$accountDetails",
+                "margin": [140, 0, 0, 0]
+        	},
+        	{
+                "width": 150,
+                "stack": "$accountAddress"
+        	}
+        ] 
+    },
+    {
+    	"columns": [
+		{
+			"width": 120,
+			"stack": [
+                {"text": "$invoiceIssuedToLabel", "style":"issuedTo"},
+                "$clientDetails"
+            ],
+			"margin": [0, 20, 0, 0]
+		},
+		{
+            "canvas": [{ "type": "rect", "x": 20, "y": 0, "w": 174, "h": "$invoiceDetailsHeight","r":10, "lineWidth": 1,"color":"$primaryColor:#eb792d"}],  
+            "width":36,
+            "margin":[200,25,0,0]
+        },
+		{
+            "table": { 
+                "widths": [64, 70],
+                "body": "$invoiceDetails"
+            },
+            "layout": "noBorders",
+			"margin": [200, 34, 0, 0]
+		}
+	]
+    },
+    {"canvas": [{ "type": "rect", "x": 0, "y": 0, "w": 515, "h": 32,"r":8, "lineWidth": 1,"color":"$secondaryColor:#374e6b"}],"width":10,"margin":[0,20,0,-45]},
+    {
+        "style": "invoiceLineItemsTable",
+        "table": {
+            "headerRows": 1,
+            "widths": "$invoiceLineItemColumns",
+            "body": "$invoiceLineItems"
+        },
+        "layout": {
+            "hLineWidth": "$notFirst:1",
+            "vLineWidth": "$notFirst:.5",
+            "hLineColor": "#FFFFFF",
+            "vLineColor": "#FFFFFF",
+            "paddingLeft": "$amount:8", 
+            "paddingRight": "$amount:8", 
+            "paddingTop": "$amount:12", 
+            "paddingBottom": "$amount:12" 
+        }
+    },    
+    {
+    "columns": [
+      "$notesAndTerms",
+      {
+        "stack": [
+          {
+            "style": "subtotals",
+            "table": {
+              "widths": ["*", "35%"],
+              "body": "$subtotalsWithoutBalance"
+            },
+            "layout": {
+              "hLineWidth": "$none",
+              "vLineWidth": "$none",
+              "paddingLeft": "$amount:34",
+              "paddingRight": "$amount:8",
+              "paddingTop": "$amount:4",
+              "paddingBottom": "$amount:4"
+            }
+          },
+        {
+          "canvas": [
+          {
+            "type": "rect",
+            "x": 76,
+            "y": 20,
+            "w": 182,
+            "h": 30,
+            "r": 7,
+            "lineWidth": 1,
+            "color": "$secondaryColor:#374e6b"
+          }
+        ]
+        },
+          {
+            "style": "subtotalsBalance",
+            "table": {
+                "widths": ["*", "35%"],
+                "body": "$subtotalsBalance"
+            },
+            "layout": {
+              "hLineWidth": "$none",
+              "vLineWidth": "$none",
+              "paddingLeft": "$amount:34",
+              "paddingRight": "$amount:8",
+              "paddingTop": "$amount:4",
+              "paddingBottom": "$amount:4"
+            }
+          }
+        ]
+      }
+    ]
+    },
+    {
+        "stack": [
+            "$invoiceDocuments"
+        ],
+        "style": "invoiceDocuments"
+    }
+    ],
+    "footer": {
+        "columns": [
+            {
+                "text": "$invoiceFooter",
+                "alignment": "left"
+            }
+        ],
+        "margin": [40, -20, 40, 0]
+    },    
+    "defaultStyle": {
+        "fontSize": "$fontSize",
+        "margin": [8, 4, 8, 4]
+    },
+    "styles": {
+        "primaryColor":{
+            "color": "$primaryColor:#299CC2"
+        },
+        "accountName": {
+            "bold": true
+        },
+        "accountDetails": {
+            "color": "#AAA9A9",
+            "margin": [0,2,0,1]
+        },
+        "accountAddress": {
+            "color": "#AAA9A9",
+            "margin": [0,2,0,1]
+        },
+        "even": {
+            "fillColor":"#E8E8E8"
+        },
+        "odd": {
+            "fillColor":"#F7F7F7"
+        },
+        "productKey": {
+            "bold": true
+        },
+        "balanceDueLabel": {
+            "fontSize": "$fontSizeLargest",
+            "color": "#ffffff",            
+            "bold": true
+        },
+        "balanceDue": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true,
+            "color":"#ffffff",
+            "alignment":"right"
+        },
+        "invoiceDetails": {
+            "color": "#ffffff"
+        },
+        "tableHeader": {
+            "color": "#ffffff",
+            "fontSize": "$fontSizeLargest",
+            "bold": true
+        },
+        "costTableHeader": {
+            "alignment": "right"
+        },
+        "qtyTableHeader": {
+            "alignment": "right"
+        },
+        "taxTableHeader": {
+            "alignment": "right"
+        },
+        "lineTotalTableHeader": {
+            "alignment": "right"
+        },        
+        "issuedTo": {
+            "margin": [0,2,0,1],
+            "bold": true,
+            "color": "#374e6b"
+        },
+        "clientDetails": {
+            "margin": [0,2,0,1]
+        },
+        "clientName": {
+            "color": "$primaryColor:#eb792d"
+        },
+        "invoiceLineItemsTable": {
+            "margin": [0, 10, 0, 10]
+        },
+        "invoiceDetailsValue": {
+            "alignment": "right"
+        },
+        "cost": {
+            "alignment": "right"
+        },
+        "quantity": {
+            "alignment": "right"
+        },
+        "tax": {
+            "alignment": "right"
+        },
+        "lineTotal": {
+            "alignment": "right"
+        },
+        "subtotals": {
+            "alignment": "right"
+        },            
+        "subtotalsBalance": {
+            "alignment": "right",
+            "margin": [0, -25, 0, 0]
+        },            
+         "termsLabel": {
+            "bold": true,
+            "margin": [0, 0, 0, 4]
+        },
+        "header": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true
+        },
+        "subheader": {
+            "fontSize": "$fontSizeLarger"
+        },
+        "help": {
+            "fontSize": "$fontSizeSmaller",
+            "color": "#737373"
+        }
+    },
+    "pageMargins": [40, 40, 40, 40]
+}

storage/templates/creative.js

@@ -0,0 +1,221 @@
+{
+    "content": [
+    {		
+        "columns": [
+    		{
+    			"stack": "$clientDetails"
+    		},
+            {
+                "stack": "$accountDetails"
+            },
+            {
+                "stack": "$accountAddress"
+            },
+            {
+                "image": "$accountLogo",
+                "fit": [120, 80],
+                "alignment": "right"
+            }
+        ],
+        "margin": [0, 0, 0, 20]
+    },
+	{
+		"columns": [
+            {"text": 
+                [
+                    {"text": "$entityTypeUC", "style": "header1"},
+                    {"text": "#", "style": "header2"},
+                    {"text": "$invoiceNumber", "style":"header2"}
+                ],
+                "width": "*"
+            },
+    		{
+    			"width":200,
+                "table": { 
+                    "body": "$invoiceDetails"
+                },
+                "layout": "noBorders",
+    			"margin": [16, 4, 0, 0]
+    		}
+		],
+        "margin": [0, 0, 0, 20]
+	},
+	{"canvas": [{ "type": "line", "x1": 0, "y1": 5, "x2": 515, "y2": 5, "lineWidth": 3,"lineColor":"$primaryColor:#AE1E54"}]},
+    {
+        "style": "invoiceLineItemsTable",
+        "table": {
+            "headerRows": 1,
+            "widths": "$invoiceLineItemColumns",
+            "body": "$invoiceLineItems"
+        },
+        "layout": {
+            "hLineWidth": "$none",
+            "vLineWidth": "$none",
+            "hLineColor": "$primaryColor:#E8E8E8",
+            "paddingLeft": "$amount:8", 
+            "paddingRight": "$amount:8", 
+            "paddingTop": "$amount:8", 
+            "paddingBottom": "$amount:8"            
+        }
+    },    
+    {
+        "columns": [
+        "$notesAndTerms",
+        {
+            "style": "subtotals",
+            "table": {
+                "widths": ["*", "40%"],
+                "body": "$subtotalsWithoutBalance"
+            },
+            "layout": {
+                "hLineWidth": "$none",
+                "vLineWidth": "$none",
+                "paddingLeft": "$amount:34", 
+                "paddingRight": "$amount:8", 
+                "paddingTop": "$amount:4", 
+                "paddingBottom": "$amount:4"            
+            }
+        }
+        ]
+    },
+	{
+		"canvas": [{ "type": "line", "x1": 0, "y1": 20, "x2": 515, "y2": 20, "lineWidth": 3,"lineColor":"$primaryColor:#AE1E54"}],
+        "margin": [0, -8, 0, -8]
+	},
+    {
+        "text": "$balanceDueLabel",
+        "style": "balanceDueLabel"
+    },
+    {
+        "text": "$balanceDue",
+        "style": "balanceDue"
+    },
+    {
+        "stack": [
+            "$invoiceDocuments"
+        ],
+        "style": "invoiceDocuments"
+    }
+    ],
+    "footer": {
+        "columns": [
+            {
+                "text": "$invoiceFooter",
+                "alignment": "left"
+            }
+        ],
+        "margin": [40, -20, 40, 0]
+    },
+    "defaultStyle": {
+        "fontSize": "$fontSize",
+        "margin": [8, 4, 8, 4]
+    },
+    "styles": {
+        "primaryColor":{
+            "color": "$primaryColor:#AE1E54"
+        },
+        "accountName": {
+            "margin": [4, 2, 4, 2],
+            "color": "$primaryColor:#AE1E54",
+            "bold": true
+        },
+        "accountDetails": {
+            "margin": [4, 2, 4, 2]
+        },
+        "accountAddress": {
+            "margin": [4, 2, 4, 2]
+        },
+        "odd": {
+            "fillColor":"#F4F4F4"
+        },
+        "productKey": {
+            "bold": true
+        },
+        "balanceDueLabel": {
+            "fontSize": "$fontSizeLargest",
+            "margin": [320,20,0,0]
+        },
+        "balanceDue": {
+            "fontSize": "$fontSizeLargest",
+            "color": "$primaryColor:#AE1E54",
+            "bold": true,
+            "margin":[0,-10,10,0],
+            "alignment": "right"
+        },
+        "invoiceDetailBalanceDue": {
+            "bold": true,
+            "color": "$primaryColor:#AE1E54"
+        },
+        "invoiceDetailBalanceDueLabel": {
+            "bold": true
+        },
+        "tableHeader": {
+            "bold": true,
+            "color": "$primaryColor:#AE1E54",
+            "fontSize": "$fontSizeLargest"
+        },
+        "costTableHeader": {
+            "alignment": "right"
+        },
+        "qtyTableHeader": {
+            "alignment": "right"
+        },
+        "taxTableHeader": {
+            "alignment": "right"
+        },
+        "lineTotalTableHeader": {
+            "alignment": "right"
+        },        
+        "clientName": {
+            "bold": true
+        },
+        "clientDetails": {
+            "margin": [0,2,0,1]
+        },
+        "header1": {
+            "bold": true, 
+            "margin": [0, 30, 0, 16],
+            "fontSize": 46           
+        },
+        "header2": {
+            "margin": [0, 30, 0, 16],
+            "fontSize": 46,
+            "italics": true, 
+            "color": "$primaryColor:#AE1E54"
+        },
+        "invoiceLineItemsTable": {
+            "margin": [0, 4, 0, 16]
+        },        
+        "cost": {
+            "alignment": "right"
+        },
+        "quantity": {
+            "alignment": "right"
+        },
+        "tax": {
+            "alignment": "right"
+        },
+        "lineTotal": {
+            "alignment": "right"
+        },
+        "subtotals": {
+            "alignment": "right"
+        },            
+        "termsLabel": {
+            "bold": true,
+            "margin": [0, 0, 0, 4]
+        },
+        "header": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true
+        },
+        "subheader": {
+            "fontSize": "$fontSizeLarger"
+        },
+        "help": {
+            "fontSize": "$fontSizeSmaller",
+            "color": "#737373"
+        }
+    },
+    "pageMargins": [40, 40, 40, 40]
+}

storage/templates/elegant.js

@@ -0,0 +1,206 @@
+{
+    "content": [
+    {
+        "image": "$accountLogo",
+        "fit": [120, 80],
+        "alignment": "center",
+        "margin": [0, 0, 0, 30]
+    },
+    {"canvas": [{ "type": "line", "x1": 0, "y1": 5, "x2": 515, "y2": 5, "lineWidth": 2}]},
+    {"canvas": [{ "type": "line", "x1": 0, "y1": 3, "x2": 515, "y2": 3, "lineWidth": 1}]},
+    {
+        "columns": [
+        {
+            "width": 120,
+            "stack": [
+                {"text": "$invoiceToLabel", "style": "header", "margin": [0, 0, 0, 6]}, 
+                "$clientDetails"
+            ]
+        },
+        {
+            "width": 10,
+            "canvas": [{ "type": "line", "x1": -2, "y1": 18, "x2": -2, "y2": 80, "lineWidth": 1,"dash": { "length": 2 }}]
+        },
+        {
+            "width": 120,
+            "stack": "$accountDetails",
+            "margin": [0, 20, 0, 0]
+        },
+        {
+            "width": 110,
+            "stack": "$accountAddress",
+            "margin": [0, 20, 0, 0]
+        },
+        {
+            "stack": [
+                {"text": "$detailsLabel", "style": "header", "margin": [0, 0, 0, 6]}, 
+                {
+                    "width":180,
+                    "table": { 
+                        "body": "$invoiceDetails"
+                    },
+                    "layout": "noBorders"
+                }
+            ]            
+        }],
+        "margin": [0, 20, 0, 0]
+    },
+    {
+        "style": "invoiceLineItemsTable",
+        "table": {
+            "headerRows": 1,
+            "widths": "$invoiceLineItemColumns",
+            "body": "$invoiceLineItems"
+        },
+        "layout": {
+            "hLineWidth": "$notFirst:.5",
+            "vLineWidth": "$none",
+            "paddingLeft": "$amount:8", 
+            "paddingRight": "$amount:8", 
+            "paddingTop": "$amount:12", 
+            "paddingBottom": "$amount:12"
+        }
+    },    
+    {
+        "columns": [
+        "$notesAndTerms",
+        {
+            "style": "subtotals",
+            "table": {
+                "widths": ["*", "40%"],
+                "body": "$subtotalsWithoutBalance"
+            },
+            "layout": {
+                "hLineWidth": "$none",
+                "vLineWidth": "$none",
+                "paddingLeft": "$amount:34", 
+                "paddingRight": "$amount:8", 
+                "paddingTop": "$amount:4", 
+                "paddingBottom": "$amount:4" 
+            }
+        }
+        ]
+    },
+    {
+        "canvas": [{ "type": "line", "x1": 270, "y1": 20, "x2": 515, "y2": 20, "lineWidth": 1,"dash": { "length": 2 }}]
+    },
+    {
+        "text": "$balanceDueLabel",
+        "style": "balanceDueLabel"
+    },
+    {
+        "text": "$balanceDue",
+        "style": "balanceDue"
+    },
+    {
+        "canvas": [{ "type": "line", "x1": 270, "y1": 20, "x2": 515, "y2": 20, "lineWidth": 1,"dash": { "length": 2 }}]
+    },
+    {
+        "stack": [
+            "$invoiceDocuments"
+        ],
+        "style": "invoiceDocuments"
+    }],    
+    "footer": [
+    {
+        "text": "$invoiceFooter",
+        "margin": [40, -40, 40, 20]
+    },
+    {"canvas": [{ "type": "line", "x1": 35, "y1": 5, "x2": 555, "y2": 5, "lineWidth": 2,"margin": [30,0,0,0]}]},
+    {"canvas": [{ "type": "line", "x1": 35, "y1": 3, "x2": 555, "y2": 3, "lineWidth": 1,"margin": [30,0,0,0]}]}
+    ],
+    "defaultStyle": {
+        "fontSize": "$fontSize",
+        "margin": [8, 4, 8, 4]
+    },
+    "styles": {
+        "accountDetails": {
+            "margin": [0, 2, 0, 1]
+        },
+        "clientDetails": {
+            "margin": [0, 2, 0, 1]
+        },
+        "accountAddress": {
+            "margin": [0, 2, 0, 1]
+        },
+        "clientName": {
+            "bold": true
+        },
+        "accountName": {
+            "bold": true
+        },
+        "odd": {
+        },
+        "balanceDueLabel": {
+            "fontSize": "$fontSizeLargest",
+            "color": "$primaryColor:#5a7b61",
+            "margin": [320,20,0,0]
+        },
+        "balanceDue": {
+            "fontSize": "$fontSizeLargest",
+            "color": "$primaryColor:#5a7b61",
+            "style": true,
+            "margin":[0,-14,8,0],
+            "alignment":"right"
+        },    
+        "invoiceDetailBalanceDue": {
+            "color": "$primaryColor:#5a7b61",
+            "bold": true
+        },        
+        "header": {
+            "fontSize": 14,
+            "bold": true
+        },
+        "tableHeader": {
+            "bold": true,
+            "color": "$primaryColor:#5a7b61",
+            "fontSize": "$fontSizeLargest"
+        },
+        "costTableHeader": {
+            "alignment": "right"
+        },
+        "qtyTableHeader": {
+            "alignment": "right"
+        },
+        "taxTableHeader": {
+            "alignment": "right"
+        },
+        "lineTotalTableHeader": {
+            "alignment": "right"
+        },        
+        "invoiceLineItemsTable": {
+            "margin": [0, 40, 0, 16]
+        },
+        "cost": {
+            "alignment": "right"
+        },
+        "quantity": {
+            "alignment": "right"
+        },
+        "tax": {
+            "alignment": "right"
+        },
+        "lineTotal": {
+            "alignment": "right"
+        },
+        "subtotals": {
+            "alignment": "right"
+        },            
+        "termsLabel": {
+            "bold": true,
+            "margin": [0, 0, 0, 4]
+        },
+        "header": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true
+        },
+        "subheader": {
+            "fontSize": "$fontSizeLarger"
+        },
+        "help": {
+            "fontSize": "$fontSizeSmaller",
+            "color": "#737373"
+        }
+    },
+    "pageMargins": [40, 40, 40, 40]
+}

storage/templates/hipster.js

@@ -0,0 +1,217 @@
+{
+    "content": [
+    {
+        "columns": [
+		{
+			"width":10,
+			"canvas": [{ "type": "line", "x1": 0, "y1": 0, "x2": 0, "y2": 75, "lineWidth": 0.5}]
+		},
+        {
+			"width":120,
+            "stack": [
+                {"text": "$fromLabelUC", "style": "fromLabel"}, 
+                "$accountDetails" 
+            ]
+        },
+        {
+			"width":120,
+            "stack": [
+                {"text": " "},
+                "$accountAddress"
+            ],
+			"margin": [10, 0, 0, 16]
+        },
+		{
+			"width":10,
+			"canvas": [{ "type": "line", "x1": 0, "y1": 0, "x2": 0, "y2": 75, "lineWidth": 0.5}]
+		},
+		{
+			"stack": [
+                {"text": "$toLabelUC", "style": "toLabel"}, 
+                "$clientDetails"
+            ]
+		},
+		[
+            {
+                "image": "$accountLogo",
+                "fit": [120, 80]
+            }
+        ]
+        ]
+    },
+    {
+        "text": "$entityTypeUC",
+        "margin": [0, 4, 0, 8],
+        "bold": "true",
+        "fontSize": 42
+    },
+	{
+        "columnGap": 16,
+		"columns": [
+			{
+				"width":"auto",
+				"text": ["$invoiceNoLabel"," ","$invoiceNumberValue"],
+				"bold": true,
+				"color":"$primaryColor:#bc9f2b",
+				"fontSize":10
+			},
+			{
+				"width":"auto",
+				"text": ["$invoiceDateLabel"," ","$invoiceDateValue"],
+				"fontSize":10
+			},
+			{
+				"width":"auto",
+				"text": ["$dueDateLabel?"," ","$dueDateValue"],
+				"fontSize":10
+			},
+			{
+				"width":"*",
+				"text": ["$balanceDueLabel"," ",{"text":"$balanceDue", "bold":true, "color":"$primaryColor:#bc9f2b"}],
+				"fontSize":10
+			}
+		]
+	},
+    {
+		"margin": [0, 26, 0, 0],
+        "table": {
+            "headerRows": 1,
+            "widths": "$invoiceLineItemColumns",
+            "body": "$invoiceLineItems"
+        },
+        "layout": {
+            "hLineWidth": "$none",
+            "vLineWidth": "$amount:.5",
+            "paddingLeft": "$amount:8", 
+            "paddingRight": "$amount:8", 
+            "paddingTop": "$amount:8", 
+            "paddingBottom": "$amount:8"            
+        }
+    },
+    {
+        "columns": [
+        {
+            "stack": "$notesAndTerms",
+            "width": "*",
+            "margin": [0, 12, 0, 0]
+        },
+        {
+            "width": 200,
+            "style": "subtotals",
+            "table": {
+                "widths": ["*", "36%"],
+                "body": "$subtotals"
+            },
+            "layout": {
+                "hLineWidth": "$none",
+                "vLineWidth": "$notFirst:.5",
+                "paddingLeft": "$amount:8", 
+                "paddingRight": "$amount:8", 
+                "paddingTop": "$amount:12", 
+                "paddingBottom": "$amount:4"            
+            }
+        }
+        ]
+    },
+    {
+        "stack": [
+            "$invoiceDocuments"
+        ],
+        "style": "invoiceDocuments"
+    }
+    ],
+    "footer": {
+        "columns": [
+            {
+                "text": "$invoiceFooter",
+                "alignment": "left"
+            }
+        ],
+        "margin": [40, -20, 40, 0]
+    },
+    "defaultStyle": {
+        "fontSize": "$fontSize",
+        "margin": [8, 4, 8, 4]
+    },
+    "styles": {
+        "accountName": {
+            "bold": true
+        },
+        "clientName": {
+            "bold": true
+        },
+        "balanceDueLabel": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true
+        },
+        "balanceDue": {
+            "fontSize": "$fontSizeLargest",
+            "color": "$primaryColor:#bc9f2b",
+            "bold": true
+        },
+        "tableHeader": {
+            "bold": true,
+            "fontSize": "$fontSizeLargest"
+        },
+        "costTableHeader": {
+            "alignment": "right"
+        },
+        "qtyTableHeader": {
+            "alignment": "right"
+        },
+        "taxTableHeader": {
+            "alignment": "right"
+        },
+        "lineTotalTableHeader": {
+            "alignment": "right"
+        },        
+        "fromLabel": {
+            "color": "$primaryColor:#bc9f2b",
+            "bold": true  
+        },
+        "toLabel": {
+            "color": "$primaryColor:#bc9f2b",
+            "bold": true  
+        },
+        "accountDetails": {
+            "margin": [0, 2, 0, 1]
+        },
+        "accountAddress": {
+            "margin": [0, 2, 0, 1]
+        },
+        "clientDetails": {
+            "margin": [0, 2, 0, 1]
+        },
+        "cost": {
+            "alignment": "right"
+        },
+        "quantity": {
+            "alignment": "right"
+        },
+        "tax": {
+            "alignment": "right"
+        },
+        "lineTotal": {
+            "alignment": "right"
+        },
+        "subtotals": {
+            "alignment": "right"
+        },            
+        "termsLabel": {
+            "bold": true,
+            "margin": [0, 16, 0, 4]
+        },
+        "header": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true
+        },
+        "subheader": {
+            "fontSize": "$fontSizeLarger"
+        },
+        "help": {
+            "fontSize": "$fontSizeSmaller",
+            "color": "#737373"
+        }
+    },
+    "pageMargins": [40, 40, 40, 40]
+}

storage/templates/playful.js

@@ -0,0 +1,269 @@
+{
+    "content": [
+    {
+        "columns": [
+		{
+			"image": "$accountLogo",
+			"fit": [120, 80]
+		},
+		{"canvas": [{ "type": "rect", "x": 0, "y": 0, "w": 190, "h": "$invoiceDetailsHeight","r":5, "lineWidth": 1,"color":"$primaryColor:#009d91"}],"width":10,"margin":[200,0,0,0]},
+		{
+			"width":400,
+            "table": { 
+                "body": "$invoiceDetails"
+            },
+            "layout": "noBorders",
+			"margin": [210, 10, 10, 0]
+		}
+        ] 
+    },
+	{
+        "margin": [0, 18, 0, 0],
+        "columnGap": 50,
+		"columns": [
+			{
+				"width": 212,
+				"stack": [
+                    {"text": "$invoiceToLabel:", "style": "toLabel"},
+                    {
+                        "canvas": [{ "type": "line", "x1": 0, "y1": 4, "x2": 150, "y2": 4, "lineWidth": 1,"dash": { "length": 3 },"lineColor":"$primaryColor:#009d91"}],
+                        "margin": [0, 0, 0, 4]
+                    },
+                    "$clientDetails",
+                    {"canvas": [{ "type": "line", "x1": 0, "y1": 9, "x2": 150, "y2": 9, "lineWidth": 1,"dash": { "length": 3 },"lineColor":"$primaryColor:#009d91"}]}
+                ]
+			},
+			{
+                "width": "*",
+				"stack": [
+                    {"text": "$fromLabel:", "style": "fromLabel"},
+                    {
+                        "canvas": [{ "type": "line", "x1": 0, "y1": 4, "x2": 250, "y2": 4, "lineWidth": 1,"dash": { "length": 3 },"lineColor":"$primaryColor:#009d91"}],
+                        "margin": [0, 0, 0, 4]
+                    },
+                    {"columns":[
+                        "$accountDetails",
+                        "$accountAddress"    
+                    ], "columnGap": 4},                    
+                    {"canvas": [{ "type": "line", "x1": 0, "y1": 9, "x2": 250, "y2": 9, "lineWidth": 1,"dash": { "length": 3 },"lineColor":"$primaryColor:#009d91"}]}
+                ]
+			}
+		]
+	},
+	{"canvas": [{ "type": "rect", "x": 0, "y": 0, "w": 515, "h": 35,"r":6, "lineWidth": 1,"color":"$primaryColor:#009d91"}],"width":10,"margin":[0,30,0,-30]},
+    {
+        "style": "invoiceLineItemsTable",
+        "table": {
+            "headerRows": 1,
+            "widths": "$invoiceLineItemColumns",
+            "body": "$invoiceLineItems"
+        },
+        "layout": {
+            "hLineWidth": "$notFirst:.5",
+            "vLineWidth": "$none",
+            "hLineColor": "$primaryColor:#009d91",
+            "paddingLeft": "$amount:8", 
+            "paddingRight": "$amount:8", 
+            "paddingTop": "$amount:8", 
+            "paddingBottom": "$amount:8"
+        }
+    },    
+    {
+    "columns": [
+      "$notesAndTerms",
+      {
+        "stack": [
+          {
+            "style": "subtotals",
+            "table": {
+              "widths": ["*", "35%"],
+              "body": "$subtotalsWithoutBalance"
+            },
+            "layout": {
+              "hLineWidth": "$none",
+              "vLineWidth": "$none",
+              "paddingLeft": "$amount:34",
+              "paddingRight": "$amount:8",
+              "paddingTop": "$amount:4",
+              "paddingBottom": "$amount:4"
+            }
+          },
+        {
+          "canvas": [
+          {
+            "type": "rect",
+            "x": 76,
+            "y": 20,
+            "w": 182,
+            "h": 30,
+            "r": 4,
+            "lineWidth": 1,
+            "color": "$primaryColor:#009d91"
+          }
+        ]
+        },
+          {
+            "style": "subtotalsBalance",
+            "table": {
+                "widths": ["*", "35%"],
+                "body": "$subtotalsBalance"
+            },
+            "layout": {
+              "hLineWidth": "$none",
+              "vLineWidth": "$none",
+              "paddingLeft": "$amount:34",
+              "paddingRight": "$amount:8",
+              "paddingTop": "$amount:4",
+              "paddingBottom": "$amount:4"
+            }
+          }
+        ]
+      }
+    ]
+  },    
+    {
+        "stack": [
+            "$invoiceDocuments"
+        ],
+        "style": "invoiceDocuments"
+    }
+],    
+    "footer": [
+        {"canvas": [{ "type": "line", "x1": 0, "y1": 38, "x2": 68, "y2": 38, "lineWidth": 6,"lineColor":"#009d91"}]},
+        {"canvas": [{ "type": "line", "x1": 68, "y1": 0, "x2": 135, "y2": 0, "lineWidth": 6,"lineColor":"#1d766f"}]},
+        {"canvas": [{ "type": "line", "x1": 135, "y1": 0, "x2": 201, "y2": 0, "lineWidth": 6,"lineColor":"#ffb800"}]},
+        {"canvas": [{ "type": "line", "x1": 201, "y1": 0, "x2": 267, "y2": 0, "lineWidth": 6,"lineColor":"#bf9730"}]},
+        {"canvas": [{ "type": "line", "x1": 267, "y1": 0, "x2": 333, "y2": 0, "lineWidth": 6,"lineColor":"#ac2b50"}]},
+        {"canvas": [{ "type": "line", "x1": 333, "y1": 0, "x2": 399, "y2": 0, "lineWidth": 6,"lineColor":"#e60042"}]},
+        {"canvas": [{ "type": "line", "x1": 399, "y1": 0, "x2": 465, "y2": 0, "lineWidth": 6,"lineColor":"#ffb800"}]},
+        {"canvas": [{ "type": "line", "x1": 465, "y1": 0, "x2": 532, "y2": 0, "lineWidth": 6,"lineColor":"#009d91"}]},
+        {"canvas": [{ "type": "line", "x1": 532, "y1": 0, "x2": 600, "y2": 0, "lineWidth": 6,"lineColor":"#ac2b50"}]},
+        {
+            "text": "$invoiceFooter",
+            "alignment": "left",
+            "margin": [40, -60, 40, 0]
+        }
+    ],
+    "header": [
+        {"canvas": [{ "type": "line", "x1": 0, "y1": 0, "x2": 68, "y2": 0, "lineWidth": 9,"lineColor":"#009d91"}]},
+        {"canvas": [{ "type": "line", "x1": 68, "y1": 0, "x2": 135, "y2": 0, "lineWidth": 9,"lineColor":"#1d766f"}]},
+        {"canvas": [{ "type": "line", "x1": 135, "y1": 0, "x2": 201, "y2": 0, "lineWidth": 9,"lineColor":"#ffb800"}]},
+        {"canvas": [{ "type": "line", "x1": 201, "y1": 0, "x2": 267, "y2": 0, "lineWidth": 9,"lineColor":"#bf9730"}]},
+        {"canvas": [{ "type": "line", "x1": 267, "y1": 0, "x2": 333, "y2": 0, "lineWidth": 9,"lineColor":"#ac2b50"}]},
+        {"canvas": [{ "type": "line", "x1": 333, "y1": 0, "x2": 399, "y2": 0, "lineWidth": 9,"lineColor":"#e60042"}]},
+        {"canvas": [{ "type": "line", "x1": 399, "y1": 0, "x2": 465, "y2": 0, "lineWidth": 9,"lineColor":"#ffb800"}]},
+        {"canvas": [{ "type": "line", "x1": 465, "y1": 0, "x2": 532, "y2": 0, "lineWidth": 9,"lineColor":"#009d91"}]},
+        {"canvas": [{ "type": "line", "x1": 532, "y1": 0, "x2": 600, "y2": 0, "lineWidth": 9,"lineColor":"#ac2b50"}]}
+    ],
+    "defaultStyle": {
+        "fontSize": "$fontSize",
+        "margin": [8, 4, 8, 4]
+    },
+    "styles": {
+        "accountName": {
+            "color": "$secondaryColor:#bb3328"
+        },
+        "accountDetails": {
+            "margin": [0, 2, 0, 1]
+        },
+        "accountAddress": {
+            "margin": [0, 2, 0, 1]
+        },
+        "clientDetails": {
+            "margin": [0, 2, 0, 1]
+        },
+        "clientName": {
+            "color": "$secondaryColor:#bb3328"
+        },
+        "even": {
+			"fillColor":"#E8E8E8"
+        },
+        "odd": {
+            "fillColor":"#F7F7F7"
+        },
+        "productKey": {
+            "color": "$secondaryColor:#bb3328"
+        },
+        "lineTotal": {
+            "bold": true
+        },
+        "tableHeader": {
+            "bold": true,
+            "fontSize": "$fontSizeLargest",
+            "color": "#FFFFFF"
+        },
+        "costTableHeader": {
+            "alignment": "right"
+        },
+        "qtyTableHeader": {
+            "alignment": "right"
+        },
+        "lineTotalTableHeader": {
+            "alignment": "right"
+        },        
+        "balanceDueLabel": {
+            "fontSize": "$fontSizeLargest",
+            "color":"#FFFFFF",
+            "bold": true
+        },
+        "balanceDue": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true,
+            "color":"#FFFFFF",
+            "alignment":"right"
+        },
+        "invoiceDetails": {
+            "color": "#FFFFFF"
+        },
+        "invoiceLineItemsTable": {
+            "margin": [0, 0, 0, 16]
+        },
+        "invoiceDetailBalanceDueLabel": {
+            "bold": true
+        },
+        "invoiceDetailBalanceDue": {
+            "bold": true
+        },
+        "fromLabel": {
+            "color": "$primaryColor:#009d91"
+        },
+        "toLabel": {
+            "color": "$primaryColor:#009d91"
+        },
+        "cost": {
+            "alignment": "right"
+        },
+        "quantity": {
+            "alignment": "right"
+        },
+        "tax": {
+            "alignment": "right"
+        },
+        "lineTotal": {
+            "alignment": "right"
+        },
+        "subtotals": {
+            "alignment": "right"
+        },            
+        "subtotalsBalance": {
+            "alignment": "right",
+            "margin": [0, -25, 0, 0]
+        },            
+        "termsLabel": {
+            "bold": true,
+            "margin": [0, 0, 0, 4]
+        },
+        "header": {
+            "fontSize": "$fontSizeLargest",
+            "bold": true
+        },
+        "subheader": {
+            "fontSize": "$fontSizeLarger"
+        },
+        "help": {
+            "fontSize": "$fontSizeSmaller",
+            "color": "#737373"
+        }
+    },
+    "pageMargins": [40, 40, 40, 40]
+}