Dunia Games - Redeem Single and Multiple Items

Redeem Single and Multiple Items is one of the features of Dunia Games where the user can redeem a game voucher and DG Rings. The user can redeem only one item (with the radio button) or more than one item at once (with the checkbox), and which one of them is used can be configured by the admin for every voucher.

It starts from the redeem page, where the user only needs to enter their voucher code. After the code is valid, the voucher is opened together with the items that are curated for it, for example Mobile Legends diamond, Google Play credit, or Steam credit.

From there the behaviour follows the configuration of the voucher. When it is a single item, the item is chosen with the radio button, so choosing another item automatically releases the previous one. And when it is a multiple item, the item is chosen with the checkbox, so the user can take more than one item at the same time from the same voucher.

Every item that is chosen opens its own form, because the destination of every item is different, for example the Game ID and the Zone ID that have to be filled and validated by themselves. There is also an item that can only be redeemed by a user who is already logged in, so it is marked and the login dialog appears first before it can be continued. After that comes the confirmation of the redeem together with the email of the user, so the history of the transaction can be sent to them.

The result is presented per item, so every item has its own card with its own purchase number, its own status, and the proof of the transaction that can be downloaded. This is the part that makes the multiple item interesting, because in one redeem the status of the items can be different from each other, so the page has to be able to present the success, the pending (when there is still a transaction that is being processed), and also the failed condition, without making the user confused about which item is which.

My job is to create this feature, both slicing (changing the image UI in Figma into html, css, and js code), and also integration (consume API, the dynamic form and validation of every item, the single and multiple selection behaviour, the state of every transaction, empty state, error state, etc.).

NB: Source code cannot be shared because it is a company asset.