2023-11-14 What Happens When I get an Email

I thought it might be fun to share an example of what happens when I get an email sent in to my helpdesk. The email that I'm thinking of came in today and basically had two questions:

  • a customer has two recurring products that they don't want any more
  • a customer didn't get three products that are on their recurring list

Those two questions are simple enough to answer- I explained how to remove a recurring product from a customer's account and provided a nice screenshot with an arrow where to look. The second question, I took a look at the customer's system log. I was able to see that when the order in question was created, the three products did not have a retail price so the software could not add them to the customer's account.

Done. Simple.

But wait... the subscriptions page needs help

Now here's where things usually take a turn.

While I was answering the first question, I noticed that one of the input elements on the subscriptions page was just a little off and could be better. So I went and updated the master default css stylesheet and moved it down a little bit.

I wanted to make sure it looked fine on mobile and tablets too, so I used Firefox Dev to simulate a mobile page, and was able to see how the page looked from desktop alllll the way down to mobile size. There were definitely some things I wanted to make better.

The 'back' and 'continue shopping' buttons at the top could be aligned better and needed a little padding when the screen size shrank below 500px wide (tablet/phone size). I wanted to add another 'update subscriptions' button at the top of the page so the user wouldn't have to scroll all the way down to the bottom of the page. This needed a good bit of experimentation to figure out where it should be and how it should resize and adjust its placement when scaling down the screensize.

The next thing I see is there is just not great spacing for the 'how often' dropdown box, so I can tweak that a little bit for small screensizes, make sure it's not colliding with any other buttons around it, and looks good.

Great! Looks much better to me now, and I think this will be easier to use for people on mobile, and it looks cleaner for all sizes, and it's nice to have that other button at the top.

Moving on.

About that system log...

I can see how difficult it is to read anything in the system log, so I empathize with admin users there. It'd be nice if I could make it easier to read.

I fire up ChatGPT and give it some prompts about what I'm looking for, ask for some examples of logging practices, ask for some nice language that is easy to read, and use it to help brainstorm and gather ideas of what I want to do.

I decide to add some badges to show if a log entry is dealing with an Order. It'd be nice to see if a log entry was about a customer logging in, so I add badge for that too. Let's go ahead and add badges for if order contents are updated.

I notice that when a product is unsubbed, the system doesn't record an order id in the log so I would have to just guess what order the log entry was for based on the log entries around it. That's not a great idea, so I pause and head over to the function that unsubs products and find the log entry that records the action. I add in the order ID info, test it, make sure I didn't break anything, and that's all set!

It won't help for past unsub actions, but moving forward it will!

Break it down into groups!

You know what else would be great? If I could break this really long list of log entries down into groups based on time. Events seem to happen in groups, like a customer logs in to make a bunch of subs and then they are done. So if that could be grouped, it might be easier to read.

So now when we are reading log entries, I check to see if there is a log in event so we automatically start a new grouping, and also I check to see if there has been enough time between the log entries to start a new group. I go ahead and settle on "if there has been at least one hour since the last log entry, start a new grouping". That seems to work based on the accounts I'm looking at.

I just need more data

Right now I'm really wishing I had more system log data to look at, but my developer snapshots purposely exclude system log entries- so I'm thinking it would be nice to be able to just click a button and get a bunch of MySQL queries from a production account and paste those into my localhost here.

So I build that button. I go ahead and wait for the automated checks to process on my build-server, then I deploy it live. Now I can get ALL the log entries for any customer I want, paste them here locally, and have way more data to test for the new system log changes.

Sweet. So much more data to work with! Now I can build 'adapters' that will clarify log events, add little badges, categorize etc.

Making log entries easier to read

The system log is gross and impossible to read.

It's dangerous to change the actual log events because you never know what other features or functions might rely on them, so what we want to do here is parse out things like the "order id" so that we can group and categorize events better. This will take some work since each log entry is a little different.

But Wayne, why are they different? Well, because they have been built, modified, improved, added to, over the course of the last 13 years. It happens, we do the best we can with it.

So now we have a nice shiny system log page that has potential for us to build upon for the future. However, I don't want to force this change onto users, so we need to set this as an optional display type.

Sigh... ok let's build an option to enable the new view

This means building a new option on the page to enable or disable the 'new view'. We are also going to put a banner at the top of the page saying "check it out!" so admin users can try the new view easily.

Did someone say... icons?

Maybe one last thing, I think it'd be really cool to have some icons in here so when a customer adds something to their order, in the log we see a cart with a plus or something. Ok, maybe we'll just do a little of that and then call it a day.

So I'm getting a little carried away with icons now, I'm super-imposing little red icons over the recurring icon to signify something has been removed and it all looks great.

I want answers, and I want them now!

You know what would be even more great? If I could easily search all these log entries on the page- instantly.

I hop over to ChatGPT and ask for a jquery input snippet to search all rows in all tables on the page for whatever I type in, instantly, and hide all rows that do not contain the word I'm typing. Easy! This looks great and works great, however, because I have put the date of the log entries on the outside of the table, I'm getting a weird effect where if the date has no entries, it's just a long list of dates. So I need to hide the dates if the table is not being shown at all. Back to ChatGPT for a quick fix.

All fixed, looks great, got a little carried away again and now if the system log entry was created by an admin user, or an admin user logged in as the customer, you'll see the admin users name in purple, with a little wizard hat icon next to it.

Can we just see recurring log entries on the order page?

Come to think of it, wouldn't it be great if we could see ALL the recurring product log entries on the order details page? I think it would. That way, when we are looking at an order we can see what the system was able to add, and what it wasn't able to add. So I head off to work on the order details page, whip up a new section, and now we have a 'recurring log' area underneath the order contents on the order details page. Great.

Done. Really, I promise. For now.

OK! That's enough let's get all this code committed to the repository, let the automated build and testing process run, and then I'll check the feature out on the Kiva Logic demo site before pushing it out to production. First I'll push it out to just one 'server' and see how it's working, and if it looks good, then I'll continue deploying it to all the servers.

I'm pasting this document into ChatGPT to ask for proofreading right now, then, I'll hop on KivaLogic.com, filter for my active customers, and send them a link to this new post on my help desk here at HelpScout.

Have a look, let me know what works for you, any comments or ideas are always welcome. Have a great day

-wayne (hello@kivalogic.com)

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.