feat: add shipping cost to cart

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

@@ -32,11 +32,10 @@
                         <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">
-                        <strong>{{formatCurrency(cartTotal,
+
-                            cart.products[0]?.currency)}}</strong>
                     </div>
                 </div>
                 <div class="row q-mt-md">
@@ -44,11 +43,21 @@
                         <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">
-                        <strong>00.00</strong>
+                        <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">
@@ -56,51 +65,12 @@
                         <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">
-                        <strong>00.00</strong>
+
                     </div>
                 </div>
-                
-                <!-- <q-item>
-                    <q-item-section>
-                        <q-item-label>
-                            <strong>Subtotal:</strong>
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label> <strong>{{formatCurrency(cartTotal,
-                                cart.products[0]?.currency)}}</strong></q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label> xx</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label>
-                            <strong>Shipping:</strong>
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label> 0.00</q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label> xx</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-item>
-                    <q-item-section>
-                        <q-item-label>
-                            <strong>Total:</strong>
-                        </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label> </q-item-label>
-                    </q-item-section>
-                </q-item> -->
 
             </q-card-section>
 

static/components/shopping-cart-checkout/shopping-cart-checkout.js

@@ -5,10 +5,11 @@ async function shoppingCartCheckout(path) {
     name: 'shopping-cart-checkout',
     template,
 
-    props: ['cart'],
+    props: ['cart', 'stall'],
     data: function () {
       return {
         paymentMethod: 'ln',
+        shippingZone: null,
         paymentOptions: [
           {
             label: 'Lightning Network',
@@ -30,17 +31,37 @@ async function shoppingCartCheckout(path) {
         if (!this.cart.products?.length) return 0
         return this.cart.products.reduce((t, p) => p.price + t, 0)
       },
+      cartTotalWithShipping() {
+        if (!this.shippingZone) return this.cartTotal
+        return this.cartTotal + this.shippingZone.cost
+      },
+      shippingZoneLabel() {
+        if (!this.shippingZone) {
+          return 'Shipping Zone'
+        }
+        const zoneName = this.shippingZone.name.substring(0, 10)
+        if (this.shippingZone?.name.length < 10) {
+          return zoneName
+        }
+        return zoneName + '...'
+      }
     },
     methods: {
       formatCurrency: function (value, unit) {
         return formatCurrency(value, unit)
       },
+      selectShippingZone: function (zone) {
+        this.shippingZone = zone
+      },
       requestInvoice: function () {
 
       }
     },
     created() {
-      console.log('### shoppingCartCheckout', this.cart)
+      console.log('### shoppingCartCheckout', this.stall)
+      if (this.stall.shipping?.length === 1) {
+        this.shippingZone = this.stall.shipping[0]
+      }
     }
   })
 }

static/js/market.js

@@ -53,7 +53,8 @@ const market = async () => {
 
         merchants: [],
         shoppingCarts: [],
-        shoppingCartCheckout: null,
+        checkoutCart: null,
+        checkoutStall: null,
 
         activePage: 'market',
 
@@ -611,8 +612,9 @@ const market = async () => {
         this.$q.localStorage.set('nostrmarket.shoppingCarts', this.shoppingCarts)
       },
 
-      checkoutCart(cart) {
+      checkoutStallCart(cart) {
-        this.shoppingCartCheckout = cart
+        this.checkoutCart = cart
+        this.checkoutStall = this.stalls.find(s => s.id === cart.id)
         this.setActivePage('shopping-cart-checkout')
       }
 

templates/nostrmarket/market.html

@@ -212,9 +212,9 @@
           @remove-merchant="removeMerchant"></market-config>
         <shopping-cart-list v-else-if="activePage === 'shopping-cart-list'" :carts="shoppingCarts"
           @add-to-cart="addProductToCart" @remove-from-cart="removeProductFromCart" @remove-cart="removeCart"
-          @checkout-cart="checkoutCart"></shopping-cart-list>
+          @checkout-cart="checkoutStallCart"></shopping-cart-list>
         <shopping-cart-checkout v-else-if="activePage === 'shopping-cart-checkout'"
-          :cart="shoppingCartCheckout"></shopping-cart-checkout>
+          :cart="checkoutCart"  :stall="checkoutStall"></shopping-cart-checkout>
         <customer-stall v-else-if="!isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
           :products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)"
           :product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"