Output taxID to templates if necessary (#255)

hql287 · Mar 7, 2018 · 4000314 · 4000314
1 parent b9347af
commit 4000314
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/preview/templates/business/components/Header.jsx b/preview/templates/business/components/Header.jsx
@@ -63,7 +63,7 @@ const Heading = styled.h1`
 
 // Component
 function Header({ t, invoice, profile, configs }) {
-  const { recipient } = invoice;
+  const { tax, recipient } = invoice;
   const currentLanguage = configs.language;
   return (
     <InvoiceHeader>
@@ -74,7 +74,9 @@ function Header({ t, invoice, profile, configs }) {
           <p>{profile.address}</p>
           <p>{profile.email}</p>
           <p>{profile.phone}</p>
+          { tax && <p>Tax ID: { tax.tin }</p> }
         </Company>
+
         {configs.showRecipient && (
           <Recipient>
             <h4>{t('preview:common:billedTo', { lng: currentLanguage })}</h4>

diff --git a/preview/templates/minimal/components/Footer.jsx b/preview/templates/minimal/components/Footer.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 const Wrapper = styled.div`
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
 `;
 
@@ -26,7 +27,7 @@ const Column = styled.div`
 // Component
 function Footer({ t, invoice, profile, configs }) {
   const currentLanguage = configs.language;
-  const { recipient } = invoice;
+  const { tax, recipient } = invoice;
   return (
     <Wrapper>
       <Column left>
@@ -35,6 +36,7 @@ function Footer({ t, invoice, profile, configs }) {
         <p>{profile.address}</p>
         <p>{profile.email}</p>
         <p>{profile.phone}</p>
+        { tax && <p>Tax ID: { tax.tin }</p> }
       </Column>
       {configs.showRecipient && (
         <Column right>

diff --git a/preview/templates/minimal/components/Header.jsx b/preview/templates/minimal/components/Header.jsx
@@ -32,12 +32,13 @@ const Heading = styled.h1`
 
 // Component
 function Header({ t, invoice, profile, configs }) {
-  const currentLanguage = configs.language;
+  const { language } = configs;
+  const { dueDate } = invoice;
   return (
     <Wrapper>
       <div>
         <Heading accentColor={configs.accentColor}>
-          {t('preview:common:invoice', {lng: currentLanguage})}
+          {t('preview:common:invoice', {lng: language})}
         </Heading>
         <h4 className="label">
           # {' '}
@@ -49,30 +50,30 @@ function Header({ t, invoice, profile, configs }) {
           }
         </h4>
         <p>
-          {t('preview:common:created', {lng: currentLanguage})}:
+          {t('preview:common:created', {lng: language})}:
           {' '}
-          {moment(invoice.created_at).lang(currentLanguage).format(configs.dateFormat)}
+          {moment(invoice.created_at).lang(language).format(configs.dateFormat)}
         </p>
-        {invoice.dueDate && [
+        {dueDate && [
           <p key="dueDate">
-            {t('preview:common:due', { lng: currentLanguage })}:{' '}
-            {invoice.dueDate.useCustom
-              ? moment(invoice.dueDate.selectedDate)
-                  .lang(currentLanguage)
+            {t('preview:common:due', { lng: language })}:{' '}
+            {dueDate.useCustom
+              ? moment(dueDate.selectedDate)
+                  .lang(language)
                   .format(configs.dateFormat)
               : moment(
-                  calTermDate(invoice.created_at, invoice.dueDate.paymentTerm)
+                  calTermDate(invoice.created_at, dueDate.paymentTerm)
                 )
-                  .lang(currentLanguage)
+                  .lang(language)
                   .format(configs.dateFormat)}
           </p>,
           <p key="dueDateNote">
-            {!invoice.dueDate.useCustom &&
+            {!dueDate.useCustom &&
               `
             (
               ${t(
                 `form:fields:dueDate:paymentTerms:${
-                  invoice.dueDate.paymentTerm
+                  dueDate.paymentTerm
                 }:description`
               )}
             )