Custom shipping cost (#86)

* feat: simple UI for shipping zone per product

* feat: add empty cost

* fix: backwards compatible zones

* feat: finish UI for product shipping cost

* fix: some ui issues

* feat: add per product shipping cost

* feat: show receipt for product

* fix: publish per product shipping cost

static/components/stall-details/stall-details.js

@@ -23,19 +23,7 @@ async function stallDetails(path) {
           showDialog: false,
           showRestore: false,
           url: true,
-          data: {
-            id: null,
-            name: '',
-            categories: [],
-            images: [],
-            image: null,
-            price: 0,
-
-            quantity: 0,
-            config: {
-              description: ''
-            }
-          }
+          data: null
         },
         productsFilter: '',
         productsTable: {
@@ -76,18 +64,6 @@ async function stallDetails(path) {
               align: 'left',
               label: 'Quantity',
               field: 'quantity'
-            },
-            {
-              name: 'categories',
-              align: 'left',
-              label: 'Categories',
-              field: 'categories'
-            },
-            {
-              name: 'description',
-              align: 'left',
-              label: 'Description',
-              field: 'description'
             }
           ],
           pagination: {
@@ -112,6 +88,24 @@ async function stallDetails(path) {
         )
         return stall
       },
+      newEmtpyProductData: function() {
+        return {
+          id: null,
+          name: '',
+          categories: [],
+          images: [],
+          image: null,
+          price: 0,
+
+          quantity: 0,
+          config: {
+            description: '',
+            use_autoreply: false,
+            autoreply_message: '',
+            shipping: (this.stall.shipping_zones || []).map(z => ({id: z.id, name: z.name, cost: 0}))
+          }
+        }
+      },
       getStall: async function () {
         try {
           const { data } = await LNbits.api.request(
@@ -202,7 +196,7 @@ async function stallDetails(path) {
         }
       },
       sendProductFormData: function () {
-        var data = {
+        const data = {
           stall_id: this.stall.id,
           id: this.productDialog.data.id,
           name: this.productDialog.data.name,
@@ -265,7 +259,14 @@ async function stallDetails(path) {
         }
       },
       editProduct: async function (product) {
+        const emptyShipping = this.newEmtpyProductData().config.shipping
         this.productDialog.data = { ...product }
+        this.productDialog.data.config.shipping = emptyShipping.map(shippingZone => {
+          const existingShippingCost = (product.config.shipping || []).find(ps => ps.id === shippingZone.id)
+          shippingZone.cost = existingShippingCost?.cost || 0
+          return shippingZone
+        })
+        
         this.productDialog.showDialog = true
       },
       deleteProduct: async function (productId) {
@@ -293,19 +294,7 @@ async function stallDetails(path) {
           })
       },
       showNewProductDialog: async function (data) {
-        this.productDialog.data = data || {
-          id: null,
-          name: '',
-          description: '',
-          categories: [],
-          image: null,
-          images: [],
-          price: 0,
-          quantity: 0,
-          config: {
-            description: ''
-          }
-        }
+        this.productDialog.data = data || this.newEmtpyProductData()
         this.productDialog.showDialog = true
       },
       openSelectPendingProductDialog: async function () {
@@ -324,11 +313,16 @@ async function stallDetails(path) {
       },
       customerSelectedForOrder: function (customerPubkey) {
         this.$emit('customer-selected-for-order', customerPubkey)
+      },
+      shortLabel(value = ''){
+        if (value.length <= 44) return value
+        return value.substring(0, 40) + '...'
       }
     },
     created: async function () {
       await this.getStall()
       this.products = await this.getProducts()
+      this.productDialog.data = this.newEmtpyProductData()
     }
   })
 }