26 — Sprinting & Sliding
Today’s Overview
After yesterday I had a ‘Process Transaction’ page setup displaying the correct customer data and showing the rewards. I pretty much just set everything up that I needed to in order to see and make use of the data that I need to make transactions possible. So basically I had a good start to this page but there was still a lot I had to do in order to style everything correctly and to make the process actually work. I shared mockups of this page yesterday but I will share them again below:
Process Transaction Page (XS)
Process Transaction Page (L)
I also want to share the components I was able to develop and get done today. You’ll recognize some of them from mockups of the page:
Atoms
- Pill
Pill
Molecules
- PillBar
- Redeem Reward Card
- Customer Transaction Modal
PillBar
Redeem Reward Card
Customer Transaction Modal
I wanted to start off building the actual components that will be used on this page and I started with the ‘pill’ component. This component isn’t just for this page it’s also going to be used on my settings page and it’ll surely be used in other areas as well as the software grows. But, this is the first time it was needed so I took care of building it now. After creating the ‘pill’ component, I created the ‘pill bar’ component which is pretty much the container that holds all of the ‘pill’ components. This is the component that then got put into my ‘process’ transaction page and has the two options:
- Give Points
- Redeem Reward
The next component I completed that you can see being used in the ‘process transaction’ page is the ‘Redeem Reward Card’ component. This is the component that will represent an individual reward item that the user has active and is offering. The user will be able to click on this item which will trigger the confirmation modal (we’ll talk more about this component later).
After some time I was able to get the component setup, styled, and working as expected. I now had the correct data and components created for the ‘Redeem Reward’ type of transaction, but I still needed to setup the layout for the ‘Give Points’ transaction. I brought in an input field component and textarea component both of which I created before and I just and put them where they needed to be and that was good to go.
Whether the user clicks the action button on ‘give points’ or ‘redeem reward’, it’s going to trigger the pop out ‘customer transaction modal’ and the only thing that will be different is the content. It they are redeeming a reward then they will get information about that action and the customer and if they are giving points the modal will display information about that action and the customer.
I got the modal working and displaying the right information. All that’s left is for me to to build out the functionality that will allow the user to actual process transactions and then i’ll have this entire feature complete. I did only style everything for mobile right now so i’ll need to come back and give all of the elements their responsive styles but I want to get going on the actual functionality right now and get that taken care of so that’s what i’m going to do next. It’s probably going to take a solid amount of time to get everything setup properly in my backend to make it work how I need to work. But, I think i’ll still have lots of time after I get this done to work on other things for the app. On top of finishing this feature I still need to create the side navigation bar and the settings page as well as finalize the customer info page and dashboard page and we’re already heading into day 27 so I definitely need to make sure developing the functionality for processing a transaction isn’t something I get wrapped up in for the entire day tomorrow. I’m excited for it though so on to Wednesday.
