feat: make late fee optional + don't include logo placeholder and empty client in the PDF (#31)

* fix: don't include the placeholder logo in PDF

* feat: make late fee optional

* fix: don't include the empty Client text in PDF

README.md

@@ -9,7 +9,7 @@ It is open-source and easily extendable. You can use it as a starter kit for mor
  
 Run it locally or host it yourself.
  
-You can always use the latest free version at [invoices.mokuapp.io](https://invoices.mokuapp.io)
+You can always use the latest free version at [invoices.elevate.ee](https://invoices.elevate.ee)
 
 Built with [Vue.js](https://vuejs.org/) and [Bootstrap](https://getbootstrap.com/)
 
@@ -35,7 +35,7 @@ Built with [Vue.js](https://vuejs.org/) and [Bootstrap](https://getbootstrap.com
 - Multilingual
 - PWA support 
 - Ready-to-go backend adapters
-  - [Browser Storage](https://invoices.mokuapp.io)
+  - [Browser Storage](https://invoices.elevate.ee)
   - [Wordpress](https://wordpress.org/plugins/beautiful-custom-invoices/)
   - Woocommerce (coming soon)
   - Google Drive (coming soon)

public/locales/en/invoice-header.json

@@ -3,6 +3,8 @@
   "invoice_number": "No.",
   "issued_at": "Issued at: ",
   "due_at": "Due at:",
+  "late_fee": "Late fee:",
+  "add_late_fee": "Add late fee",
   "modal_issued_at_title": "Issued at",
   "modal_due_at_title": "Due at"
 }

public/locales/en/team-form.json

@@ -16,6 +16,7 @@
     "website": "Website"
   },
   "invoicing": {
+    "invoice_late_fee": "Late fee (%)",
     "invoice_due_days": "Payment terms, days",
     "currency": "Default currency"
   },

src/components/clients/ClientSelector.vue

@@ -5,7 +5,7 @@
              ref="button"
              :tabindex="tabindex"
              @click="toggleOpen">
-            <span v-if="!value">{{ $t('client') }}</span>
+            <span v-if="!value" class="d-print-none">{{ $t('client') }}</span>
             <span v-else>{{ value }}</span>
         </div>
         <div class="search-popover__overlay" v-if="isOpen" @click="toggleOpen"></div>

src/components/invoices/InvoiceHeader.vue

@@ -37,7 +37,15 @@
                            :inline="true"
                            field="due_at"/>
         </BModal>
-        
+        <span :class="{'d-print-none': !invoice.late_fee}">
+            <br>{{ $t('late_fee') }}
+            <AppEditable :value="invoice.late_fee | currency"
+                         :errors="errors"
+                         suffix="%"
+                         field="late_fee"
+                         :placeholder="$t('add_late_fee')"
+                         @change="updateProp({ late_fee: $event })"/>
+        </span>
     </div>
 </template>
 <script>

src/components/team/TeamForm.vue

@@ -38,6 +38,10 @@
 
                 <b-tab :title="$t('tabs.invoicing')">
                     <div class="row">
+                        <AppInput :value="team.invoice_late_fee" @change="updateProp({ invoice_late_fee: $event })"
+                                  type="number"
+                                  :label="$t('invoicing.invoice_late_fee')" field="invoice_late_fee" :errors="errors"
+                                  class="col-12"/>
                         <AppInput :value="team.invoice_due_days" @change="updateProp({ invoice_due_days: $event })"
                                   type="number"
                                   :label="$t('invoicing.invoice_due_days')" field="invoice_due_days" :errors="errors"

src/components/team/TeamLogo.vue

@@ -4,7 +4,7 @@
              class="pointer"
              @click="openModal"
              :src="team.logo_url" style="width:100%; max-width:200px;">
-        <button class="btn btn-sm" @click="openModal" v-else>
+        <button class="btn btn-sm d-print-none" @click="openModal" v-else>
             <i class="material-icons material-icons-round md-36">file_upload</i>
         </button>
         <AppError :errors="errors" field="logo_url"/>

src/config/app.config.example.js

@@ -3,7 +3,7 @@
 export default {
   storageType: 'local',
   // base_url: wordpress.front_url,
-  // base_url: `${window.location.origin}${process.env.BASE_URL}`
+  // base_url: process.env.BASE_URL
   // api_url: wordpress.api_url,
   // api_nonce: wordpress.nonce,
 };

src/config/i18n.config.js

@@ -4,7 +4,6 @@ import VueI18Next from '@panter/vue-i18next';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import app from '@/main';
-import config from '@/config/app.config';
 
 Vue.use(VueI18Next);
 
@@ -16,7 +15,7 @@ const initialized = i18next.init({
   fallbackLng: 'en',
   whitelist: ['en', 'de', 'fr', 'et', 'fa', 'bn', 'es', 'pt_br', 'it', 'id', 'kr'],
   backend: {
-    loadPath: `${config.base_url || ''}/locales/{{lng}}/{{ns}}.json`,
+    loadPath: `${window.location.origin}/locales/{{lng}}/{{ns}}.json`,
   },
   detection: {
     order: ['querystring', 'path', 'localStorage', 'navigator'],

src/services/invoice.service.js

@@ -44,10 +44,19 @@ class InvoiceService {
       number: 'Number',
       client_id: 'Client',
       client_name: 'Client name',
+      client_address: 'Address',
+      client_postal_code: 'Postal code',
+      client_city: 'City',
       client_email: 'Client\'s email',
+      client_country: 'Country',
       from_name: 'Name',
+      from_address: 'Address',
+      from_postal_code: 'Postal code',
+      from_country: 'Country',
+      from_city: 'City',
       from_website: 'Website',
       from_email: 'Your email',
+      from_phone: 'Your phone',
       bank_name: 'Bank name',
       bank_account_no: 'Bank account details',
       rows: {

src/store/invoices.js

@@ -90,6 +90,7 @@ export default {
     },
     async updateTeam({ dispatch }, payload) {
       const teamProps = pick(payload.props, {
+        late_fee: 'invoice_late_fee',
         from_name: 'company_name',
         from_address: 'company_address',
         from_postal_code: 'company_postal_code',
@@ -179,6 +180,7 @@ export default {
           .add(team.invoice_due_days || 14, 'days')
           .format('YYYY-MM-DD'),
         number: generateInvoiceNumber(getters.all),
+        late_fee: team.invoice_late_fee || 0.5,
         currency: team.currency || 'USD',
       };
 

src/store/models/invoice.js

@@ -17,6 +17,7 @@ export default class Invoice extends Model {
       issued_at: this.attr(''),
       is_compact: this.attr(false),
       due_at: this.attr(''),
+      late_fee: this.attr(''),
       currency: this.attr(''),
       from_name: this.attr(''),
       from_address: this.attr(''),

src/store/models/team.js

@@ -31,6 +31,7 @@ export default class Team extends Model {
       contact_email: this.attr(''),
       contact_phone: this.attr(''),
       currency: this.attr(null),
+      invoice_late_fee: this.attr(null),
       invoice_due_days: this.attr(null),
       fields: this.hasMany(TeamField, 'team_id'),
       updated_at: this.attr(''),