Some of my regular readers (?) will recall a post I made on the first of February, titled “Import SaaS invoices into FreeAgent”. In this post, I outlined a Chrome Browser Extension I built that short circuits some of the effort needed to get invoices from your various online providers into FreeAgent. This little utility has been saving me time and hassle and I figured others might find it useful too.
I don’t use Chrome
After sharing it, I got some feedback from people saying a) they didn’t want to use Chrome, b) they didn’t want to have to visit lots of websites to get their invoices and c) they just use their inbox. On further questioning, I was surprised to discover that these users focus their efforts around email and spend time exporting and importing PDFs. This is an activity I perform once a month, since my accountant emails me an invoice.
I had considered email integration when I first started working on a solution to my invoice woes, but one of my concerns was privacy. I didn’t want to capture or store user’s information. This made a local browser extension an ideal solution since the data only leaves your computer when going to FreeAgent. That said, there seems to be a few people doing this mundane, repetitive task a few times a month.
Automate it!
I decided to see is this was something that could be automated, for everybody knows that computers love mundane, repetitive tasks (until they rise up and enslave us). The idea was simple. Connect to your Gmail account, import emails that contain invoices and add those invoices to FreeAgent.
After a few hours reading the Gmail API documentation and screwing around with OAuth (!), I figured it was possible, so I got started.
After three weeks of coding for a few hours each evening, I’m proud to say that I got it all working. It’s not fully automatic, but enough to make the chore less annoying! MVP and all that.
Invoice Porter 0.1
This is Invoice Porter 0.1. Forgive the name. All the cool invoice related names are taken.
Setting up Invoice Porter is straight forward. You need to connect to both FreeAgent and Gmail. This is done use OAuth, so no messing around with passwords. Gmail access is Read Only, so Invoice Porter can’t alter your account or send emails. This is the settings screen.
Ignore the fact the Enabled switchs are off. It’s more for decoration.
You can see under the poorly titled “Connections” heading, that I’ve connected my Gmail account and that I’m using a Label called invoices. When you add the Gmail connection, you can choose any of your existing labels. Using a label means that Invoice Porter is only notified of email that’s tagged with that Label. This saves my backend code having to sift through all your email and it gives you more control over what invoices are actually processed.
Once hooked up Gmail, you just apply the “Invoices” label to emails as they arrive. I also think Gmail will let you do this automatically, but I don’t know. I should, but I don’t.
Once you start tagging emails, they will appear under the Invoices tab, automatically!
This screen isn’t great (who needs to see milliseconds?) and you’ve probably spotted the emails are from me (I’m forwarding them for testing purposes), but I hope you get the idea.
Clicking on an invoice opens the import screen.
On the right, you’ll see a preview of any PDF that has been attached. I’m using an evaluation library to render it as an image (hence the red text sprawled across it). The idea is that you’ll see the content of the invoice, giving you an easy to to copy it across into the relevant fields on the left. In the image above I’ve used a random PDF for demonstration purposes.
This should make it easy to import into FreeAgent. At present, this screen will create an explanation for the selected bank transaction, so you can use some of the details (such as date and amount) to prepopulate the fields even further. If you’re like me, lots of invoices come from the US, so they are in dollars, whereas the bank transaction is in pounds. Use the details from the transaction itself means you don’t need to worry about trying to guess the exchange rates.
The Tech
In terms of technology, InvoicePoter is written using ReactJS with a C# WebAPI backend, hosted on Azure. Data is persisted using Azure Table and Blob storage. Unfortunately, Table Storage isn’t really suited for storing a few rows per user, so I need to look at something else, maybe DocumentDB. Authentication is provided by Auth0. Pretty slick.
What’s next?
I’m quite keen to release this application onto the world. I have to clean a few rough edges in the UI and I need to move it from sandbox APIs to production APIs. I also have to sort out refreshing access tokens and renewing Gmail watches, but that should be straight forward enough.
I need your help
I really need to get this product & idea evaluated by real people, to be sure it’s helpful and something that saves you time. I was to eventually automate it, so that PDFs can be parsed automatically and explanations created with your direct input. To this, it needs to be generating revenue and I can only generate revenue by building a product that makes people’s lives easier.
If you’re somebody that’s currently saving their PDFs to disk before adding them to FreeAgent, I’d love for you to get in touch. My email is tomas@coldbear.co.uk.
If you’re not, but you know somebody who might be, could you please share this post with them?
As always, feedback is welcome. If you’ve any questions or comments, email me or use the comments section on the blog.
Thanks!
Tomas McGuinness 