It's your first day at work on an online payments company. You've finished onboarding and are just being assigned your first tickets for fixing a bug and making a couple style changes to a module in the platform were admins can review credit cards that have been recently added to the system.
Due to a recent oversight by another developer when merging to master, the card preview is broken. This preview should render when the user clicks on a card in the list.
You've been asked to:
- Find the broken click handler and plug it back in.
In addition to fixing this bug, for the preview to be closer to what cards look like in real life you've been asked to:
- Split the credit card number in groups of 4 numbers for display only.
- Fix logo sizes to make the preview height consistent across providers.
- Remove the "Cardholder's name" title from the preview. Displaying only the actual cardholder's name.
- Display the "Expires End" section below the cardholder's name.
The code for this technical test is based on the companion repo (devmode-io/react-credit-card-component-starter) created by Devmode.io for their Create a credit card component with React tutorial.