Backwards to go Forwards

It's a new week, and it seems like it's going to be a pretty busy one. Last week, I finished up, or at least I thought I did, the frontend part of the bank check component of the payment application. In this application, there are 2 basic streams. One, where the user can come in with a valid quote ID, fill out their billing information, and then proceed to checkout and purchase their plan. The other is managed by the sales representative without a quote ID. So, if the representative is with a customer in some capacity, they can go through the checkout process without creating a quote, thus saving some time and streamlining the process. Before I got here, only the first of these options was available, and I helped to create the second option. We rolled that out about a week and a half ago, and it's been doing pretty well. Sales are up and the representatives seem happy with the application so far. The representatives, and more importantly, the executives, have had it on their mind for some time to add a feature to be able to pay with a bank account instead of a credit card. This would give the representatives some flexibility and the company would save a good amount of money. I started this project about a week and a half ago, but I really didn't get going on it until last week.

The credit card option has a nice little package included where the credit card information shows up dynamically on a nice little animation of a credit card. The company saw this and decided they wanted something similar with a bank check for the bank account. I signed up to do this, but much to my demise, there are no packages that align with this type of animation. So, I set out to create it on my own. After about 3 or 4 failed attempts, I finally got it right, implementing the CSS Grid system. Bringing in the information onto the check was actually the easy part; creating this animation was quite difficult. When I finally got it to a point where I was satisfied with it, I took a look at how it looked in responsive views, and it was so ugly. So, I spent most of my day Friday and half of my morning today making sure it looked the same on every view. Finally, I got it to a point where I was quite pleased with it. I then decided I wanted to implement a trick I learned in Jonas Schmedtmann's CSS course and turn all pixel values into REMs, which is always good practice. I did so, took a look, and realized I had broken the whole thing, or at least thought I had. I reversed the changes, which had taken me a solid 20 minutes, and realized it wasn't broken because of that, but because of something I had done before that and not realized. So, tomorrow, when I have time, I will set about to change this back.

At noon, we went into a meeting with the backend developer and the CTO, along with a couple other people on the team. It was not as productive of a meeting as I would have hoped. It was one where I felt we really didn't tackle the issue at hand and actually added unnecessary steps to the equation. Apparently, the backend developer needed some more information to be able to identify the customers more clearly, so we had to call the database with an API for the representative to pick their customer from a list of their IDs. We also decided we would like to make the representative have to pass another authentication step before proceeding at the very beginning. Now they have to give us their ID along with a valid phone number. I was able to get this all set up pretty easily but the search step to find their lead is going to take a few hours. What we want is for them to start inputting their lead's name and for a list to show up on the screen matching the input value. We have the API all ready to go; it's now just a matter of architecting the UI. Luckily, React makes things like this a real breeze, and it will just be a matter of creating a map of the matches. We are limiting it to only 10 results at a time, since any more would really bog down the application. My cohort is working on doing some refactoring on the different form fields to implement React-Hook-Forms, which is a really nice package for managing forms and validation with hooks. Our goal is to complete each side of our work by lunch time tomorrow, and I think we'll make it with ease.

Until tomorrow!