Dunia Games - Redeem Get Gacha

Redeem Get Gacha is one of the features of Dunia Games where the user redeems a voucher code, but what they get is not a game voucher or DG Rings like the common redeem. What they get is a Gacha, so the prize is still a surprise until they open it themselves.

It starts the same as the usual redeem, where the user only needs to enter their voucher code on the redeem page. But after the code is valid, the flow is different, because instead of showing the items that can be chosen, the page tells the user that they have a Gacha that is not opened yet.

Before the Gacha is opened, the user is asked for their email, because that is where the prize is going to be sent. So this feature can still be used without having to log in first, and the email becomes the identity of the user to receive the prize.

After that the Gacha is opened and the prize is revealed, for example 1600 Diamond Mobile Legends, complete with the reminder to redeem it before it is expired. From there the user can go directly to the detail of the prize, which contains the image of the prize, the way to redeem it, and the terms and conditions.

What is interesting about this feature is that it joins two features that already existed before, namely the redeem voucher and the gacha, so the whole state has to keep matching between them, starting from the voucher code that is valid but the Gacha is already opened, until the prize that is already revealed but is not redeemed yet.

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, form validation of the voucher code and the email, the state of the gacha and the prize, empty state, error state, etc.).

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