nostrmarket/static/components/shopping-cart-checkout/shopping-cart-checkout.html

<div>
    <q-card v-if="cart && stall" bordered class="q-mb-md">
        <q-item>
            <q-item-section avatar>
                <q-avatar>
                    <img v-if="cart.merchant?.profile?.picture" :src="cart.merchant?.profile?.picture">
                    <img v-else src="/nostrmarket/static/images/blank-avatar.webp">
                </q-avatar>
            </q-item-section>

            <q-item-section>
                <q-item-label>
                    <strong>
                        <span v-text="cart.products[0]?.stallName"></span>
                    </strong>
                </q-item-label>
                <q-item-label caption>
                    By <span v-text="cart.merchant?.profile?.name || cart.merchant?.publicKey"></span>
                </q-item-label>
            </q-item-section>
            <q-item-section side>

            </q-item-section>
        </q-item>

        <q-separator />
        <q-card-section v-if="orderConfirmed">

            <div class="row q-mt-md q-ml-md q-pr-md">
                <div class="col-xs-12 col-sm-12 col-md-2 q-mt-md">
                    <strong>Address:</strong>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-10">
                    <q-input v-model.trim="contactData.address" outlined
                        label="Address (required for physical shipping)"></q-input>
                </div>
            </div>

            <div class="row q-mt-md q-ml-md q-pr-md">
                <div class="col-xs-12 col-sm-12 col-md-2 q-mt-md">
                    <strong>Email:</strong>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-10">
                    <q-input v-model.trim="contactData.email" type="email" outlined label="Email (optional)"
                        hint="Merchant may not use email"></q-input>
                </div>
            </div>

            <div class="row q-mt-md q-ml-md q-pr-md">
                <div class="col-xs-12 col-sm-12 col-md-2 q-mt-md">
                    <strong>Message:</strong>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-10">
                    <q-input v-model.trim="contactData.message" outlined type="textarea" rows="3"
                        label="Message to Merchant (optional)"></q-input>
                </div>
            </div>
        </q-card-section>

        <q-card-section v-else horizontal>
            <q-card-section class="col-7">
                <div class="row q-mt-md">
                    <div class="col-xs-12 col-sm-12 col-md-4">
                        <strong>Subtotal:</strong>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4">
                        <strong>{{formatCurrency(cartTotal, stall.currency)}}</strong>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4">

                    </div>
                </div>
                <div class="row q-mt-md">
                    <div class="col-xs-12 col-sm-12 col-md-4">
                        <strong>Shipping:</strong>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4">
                        <strong v-if="shippingZone">{{formatCurrency(shippingZone.cost, stall.currency)}}</strong>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4">
                        <q-btn-dropdown unelevated color="secondary" rounded :label="shippingZoneLabel">
                            <q-item v-for="zone of stall.shipping" @click="selectShippingZone(zone)" :key="zone.id"
                                clickable v-close-popup>
                                <q-item-section>
                                    <q-item-label><span v-text="zone.name"></span></q-item-label>
                                    <q-item-label caption><span
                                            v-text="zone.countries?.join(', ')"></span></q-item-label>
                                </q-item-section>
                            </q-item>
                        </q-btn-dropdown>
                    </div>

                </div>
                <q-separator class="q-mt-sm" />
                <div class="row q-mt-md">
                    <div class="col-xs-12 col-sm-12 col-md-4">
                        <strong>Total:</strong>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4">
                        <strong>{{formatCurrency(cartTotalWithShipping, stall.currency)}}</strong>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4">

                    </div>
                </div>


            </q-card-section>

            <q-separator vertical />

            <q-card-section>
                <strong>Payment Method</strong>
                <q-option-group v-model="paymentMethod" :options="paymentOptions" color="green" disable />
            </q-card-section>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
            <div v-if="orderConfirmed">
                <q-btn @click="orderConfirmed = false" flat color="gray">
                    Back
                </q-btn>
                <q-btn @click="placeOrder()" flat color="primary">
                    Place Order
                </q-btn>
            </div>
            <div v-else>
                <q-btn @click="orderConfirmed = true" flat color="primary">
                    Confirm
                </q-btn>
            </div>

        </q-card-actions>
    </q-card>


</div>