Unlocking Checkout Steps
The confirming steps of a checkout on white: the title "Confirm", three step dots (a green check, a black "2" with "DELIVERY DETAILS", a grey "3") and the order's card with "Order 12329", "$19.11", "Placed on 3 June 2022" and a large square button, grey with a down arrow. A light grey drawer under the card asks one thing at a time: "SELECT AN OPTION" with Delivery and Pickup, where the suggested one sits in a grey pill that turns black when tapped; that unfolds "DELIVERY BY", a strip of hours whose middle pill turns black the same way; and that unfolds "DELIVERY TO" with "Home" and a teal "Change", at which the card's button turns green and its arrow turns to the right. Confirm folds the drawer away while the two black picks fly up to the card's right side, the option landing as plain words and the hour as a pill; the price greys, the card grows to show the address over a street map on which a teal route draws itself, the third dot takes over and a green "Done" appears. Done grows into a green sheet that takes the whole screen, on which a drawn parcel with a check badge, "Checkout successful!" and a black "Return to Dashboard" scale up; returning puts the form back as it started.
Is this your design? Ask for a correction or removal
React Native · Expo SDK 52+, TypeScript
✦ If the result drifts from the video, tell your agent what looks different and how it should look. A short correction usually closes the gap.