Complete Order design

We are moving to the Complete Order view; this view appears when you tap on the Complete Order button. This view will be a modal that lays on top of our main view:

Figure 4.15

We'll break this view up into two sections, Top Order and Bottom Order:

Figure 4.16

We could break this up into more; for example, if we were using MapKit here, we could create a view with all the code for displaying the map and the arrival time. Since we are just displaying an image, we are keeping it simple. We will do a few more screens together, and at the end of this chapter, you will get to try it out on your own.

Let's work on the order view, starting with the Top Order view.

The Top Order view

Now that we have a better idea of the direction, let's open the TopOrderView file; before the last curly brace, add the following variable:

var closeBtn: some View {
    Group {
  &...