From ae6dcaf50a6db703c50a686a1fd2d29823336305 Mon Sep 17 00:00:00 2001
From: khirvy019 <khirvy_19@yahoo.com>
Date: Mon, 29 Apr 2024 12:27:52 +0800
Subject: [PATCH 1/6] fix marketplace app not initializing properly

---
 src/layouts/MarketplaceLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/MarketplaceLayout.vue b/src/layouts/MarketplaceLayout.vue
index a1caa59f..bf1b9470 100644
--- a/src/layouts/MarketplaceLayout.vue
+++ b/src/layouts/MarketplaceLayout.vue
@@ -47,7 +47,7 @@ export default defineComponent({
     onMounted(() => loadApp())
 
     async function loadApp() {
-      if (marketplaceStore.appRefreshScopePromise) {
+      if (marketplaceStore.appRefreshScopePromise instanceof Promise) {
         return marketplaceStore.appRefreshScopePromise
       }
       marketplaceStore.appRefreshScopePromise = _loadApp()

From db06408c5446b46ad0b8d0f51279bd2607882061 Mon Sep 17 00:00:00 2001
From: khirvy019 <khirvy_19@yahoo.com>
Date: Mon, 29 Apr 2024 12:30:19 +0800
Subject: [PATCH 2/6] add addon options form in add & edit product page

---
 .../cartoptions/AddonsFormDialog.vue          | 521 ++++++++++++++++++
 .../cartoptions/AddonsInfoDialog.vue          |  53 ++
 .../cartoptions/AddonsInfoPanel.vue           |  60 ++
 src/marketplace/objects.js                    | 108 ++++
 src/marketplace/product-addons.js             |  46 ++
 src/pages/marketplace/products/AddProduct.vue |  55 ++
 .../marketplace/products/UpdateProduct.vue    |  62 +++
 7 files changed, 905 insertions(+)
 create mode 100644 src/components/marketplace/cartoptions/AddonsFormDialog.vue
 create mode 100644 src/components/marketplace/cartoptions/AddonsInfoDialog.vue
 create mode 100644 src/components/marketplace/cartoptions/AddonsInfoPanel.vue
 create mode 100644 src/marketplace/product-addons.js

diff --git a/src/components/marketplace/cartoptions/AddonsFormDialog.vue b/src/components/marketplace/cartoptions/AddonsFormDialog.vue
new file mode 100644
index 00000000..ed21dfbb
--- /dev/null
+++ b/src/components/marketplace/cartoptions/AddonsFormDialog.vue
@@ -0,0 +1,521 @@
+<template>
+  <q-dialog ref="dialogRef" persistent @hide="onDialogHide" position="bottom" full-height>
+    <q-card class="rounded-borders dialog-content-base" style="height:85vh !important;">
+      <div class="row items-center no-wrap dialog-content-header">
+        <div class="text-h6">{{ title }}</div>
+        <q-space/>
+        <q-btn
+          flat
+          icon="close"
+          padding="sm"
+          v-close-popup
+        />
+      </div>
+      <q-card-section class="q-pt-none q-r-mt-md">
+        <q-tab-panels
+          animated
+          keep-alive-include="list"
+          :model-value="addonFormData ? 'addon' : 'list'"
+        >
+          <q-tab-panel name="list" class="q-pa-sm">
+            <div class="row items-center">
+              <q-btn
+                v-if="clearable && formData?.length > 0"
+                :outline="$q.dark.isActive"
+                :flat="!$q.dark.isActive"
+                no-caps label="Clear"
+                color="grey"
+                padding="none md"
+                @click="() => clearForm({ submit: true, prompt: promptClear })"
+              />
+              <q-space/>
+              <q-btn
+                flat
+                icon="add"
+                @click="() => addAddon({ setEdit: true })"
+              />
+            </div>
+            <q-banner v-if="formError" class="bg-red text-white rounded-borders">
+              {{ formError }}
+            </q-banner>
+      
+            <div v-if="!formData.length" class="text-center text-grey text-subtitle1">
+              No addons
+            </div>
+            <q-list separator>
+              <TransitionGroup name="slide">
+                <q-item class="q-px-xs" v-for="(addon, index) in formData" :key="addon.__index">
+                  <q-item-section side class="q-pr-xs">
+                    <q-btn
+                        flat
+                        :disable="index <= 0"
+                        icon="north"
+                        padding="xs sm"
+                        size="sm"
+                        @click="() => moveAddonIndex({ addon, delta: -1 })"
+                      />
+                      <q-btn
+                        flat
+                        :disable="index >= formData.length-1"
+                        icon="south"
+                        padding="xs sm"
+                        size="sm"
+                        @click="() => moveAddonIndex({ addon, delta:  1 })"
+                      />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-grey">#{{ index+1 }}</q-item-label>
+                    <q-item-label>
+                      {{ addon?.label }}
+                      <q-icon v-if="!addon.hasOptions && addon?.hasInputRequired" name="keyboard" size="1.2em">
+                        <q-menu class="q-pa-sm">
+                          Some option/s for this addon has textbox enabled
+                        </q-menu>
+                      </q-icon>
+                    </q-item-label>
+                    <q-item-label caption>
+                      Selections required:
+                      {{ addon?.minOpts }}
+                      <template v-if="addon?.minOpts !== addon?.maxOpts">
+                        - {{ addon?.maxOpts }}
+                      </template>
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ addon?.priceRange?.minPrice }}
+                      <template v-if="addon?.priceRange?.minPrice !== addon?.priceRange?.maxPrice">
+                        - {{ addon?.priceRange?.maxPrice }}
+                      </template>
+                      {{  marketplaceStore?.currency }}
+                    </q-item-label>
+                    <q-item-label v-if="addon.hasOptions" caption>
+                      {{ addon?.options?.map?.(opt => opt?.label)?.filter?.(Boolean)?.join(', ') }}
+                      <q-icon v-if="addon?.hasInputRequired" name="keyboard" size="1.2em">
+                        <q-menu class="q-pa-sm">
+                          Some option/s for this addon has textbox enabled
+                        </q-menu>
+                      </q-icon>
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section avatar top>
+                    <div class="row items-center">
+                      <q-btn
+                        flat
+                        icon="edit"
+                        padding="xs sm"
+                        @click="() => toggleEditAddon(addon)"
+                      />
+                      <q-btn
+                        flat
+                        icon="delete"
+                        padding="xs sm"
+                        @click="() => removeAddonConfirm(addon)"
+                      />
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </TransitionGroup>
+            </q-list>
+            <div class="q-pt-md">
+              <q-btn
+                no-caps label="Save"
+                color="brandblue"
+                class="full-width q-mt-sm"
+                @click="() => submit()"
+              />
+            </div>
+          </q-tab-panel>
+          <q-tab-panel name="addon" class="q-pa-sm">
+            <q-form @submit="() => onAddonFormSubmit()">
+              <q-input
+                dense
+                label="Name"
+                v-model="addonFormData.label"
+                counter
+                maxlength="30"
+                :rules="[
+                  val => Boolean(val) || 'Required',
+                ]"
+              />
+              <q-slide-transition>
+                <div
+                  v-if="addonFormData?.options?.length !== 1"
+                  class="row items-center no-wrap q-r-mx-sm"
+                >
+                  <div class="q-pa-xs">
+                    <q-input
+                      dense
+                      label="Minimum select"
+                      type="number"
+                      v-model.number="addonFormData.minOpts"
+                      reactive-rules
+                      :rules="[
+                        val => (val >= 0 && val <= addonFormData?.options?.length) || 'Invalid',
+                        val => val <= addonFormData?.maxOpts || 'Must be less than max',
+                      ]"
+                    />
+                  </div>
+  
+                  <div class="q-pa-xs">
+                    <q-input
+                      dense
+                      label="Maximum select"
+                      type="number"
+                      v-model.number="addonFormData.maxOpts"
+                      reactive-rules
+                      :rules="[
+                        val => (val >= 0 && val <= addonFormData?.options?.length) || 'Invalid',
+                      ]"
+                    />
+                  </div>
+                </div>
+              </q-slide-transition>
+              <div class="row items-center justify-end q-mt-sm">
+                <div v-if="addonFormData?.options?.length !== 1" class="text-subtitle1 q-space">
+                  Choices
+                </div>
+                <q-btn
+                  flat
+                  padding="xs"
+                  icon-right="add"
+                  no-caps
+                  :label="addonFormData?.options?.length !== 1 ? '' : 'Add choices'"
+                  @click="() => addOptionToAddon()"
+                />
+              </div>
+              <TransitionGroup name="slide">
+                <div
+                  v-for="(option, index) in addonFormData?.options" :key="index"
+                  :class="addonFormData?.options?.length !== 1 ? 'option-card--multiple q-r-mx-sm' : ''"
+                  class="q-mb-sm q-pb-sm option-card"
+                >
+                  <div v-if="addonFormData?.options?.length !== 1" class="row items-center">
+                    <div class="text-grey q-space">#{{ index + 1 }}</div>
+                    <q-btn
+                      flat icon="delete_outline"
+                      padding="none xs"
+                      color="red"
+                      @click="() => addonFormData.options = addonFormData.options.filter(opt => opt !== option)"
+                    />
+                  </div>
+                  <div class="row items-start q-r-mx-sm no-wrap">
+                    <div v-if="addonFormData?.options?.length !== 1" class="col-8 q-pa-xs">
+                      <q-input
+                        dense
+                        label="Label"
+                        v-model="option.label"
+                        counter
+                        maxlength="30"
+                        reactive-rules
+                        :rules="[
+                          val => Boolean(val) || 'Required',
+                          val => !addonFormData.options.find((opt, idx) => opt?.label === val && idx !== index) || 'Duplicate values'
+                        ]"
+                      />
+                    </div>
+                    <div class="q-space q-pa-xs">
+                      <q-input
+                        dense
+                        label="Price"
+                        :suffix="marketplaceStore?.currency"
+                        v-model.number="option.price"
+                        :rules="[
+                          val => val >= 0 || 'Invalid',
+                        ]"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <q-checkbox flat dense v-model="option.requireInput">
+                      Include textbox
+                      <q-icon name="keyboard" color="grey"/>
+                    </q-checkbox>
+                    <q-icon name="help" size="1.25em" class="q-ml-sm">
+                      <q-menu class="q-pa-sm">
+                        A textbox will be provided to the customer for additional details when selecting this addon
+                      </q-menu>
+                    </q-icon>
+                  </div>
+                </div>
+              </TransitionGroup>
+              <div class="q-mt-md q-gutter-x-sm">
+                <q-btn
+                  no-caps
+                  :label="addonFormDataExists ? 'Update' : 'Add'"
+                  color="brandblue"
+                  class="full-width q-mt-md"
+                  type="submit"
+                />
+                <q-btn
+                  outline
+                  no-caps label="Cancel"
+                  color="grey"
+                  class="full-width q-mt-md"
+                  @click="() => addonFormData = null"
+                />
+              </div>
+            </q-form>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+import { parseProductAddon } from 'src/marketplace/product-addons.js'
+import { useDialogPluginComponent, useQuasar } from 'quasar'
+import { useMarketplaceStore } from 'src/stores/marketplace'
+import { computed, defineComponent, onMounted, ref, watch, watchEffect } from 'vue'
+
+export default defineComponent({
+  name: 'AddonsFormDialog',
+  emits: [
+    'update:modelValue',
+    ...useDialogPluginComponent.emits,
+  ],
+  props: {
+    modelValue: Boolean,
+    title: { type: String, default: 'Addons Form' },
+    initialValue: Array,
+    clearable: Boolean,
+    promptClear: Boolean,
+  },
+  setup(props, { emit: $emit }) {
+    const $q = useQuasar()
+    const { dialogRef, onDialogCancel, onDialogHide, onDialogOK } = useDialogPluginComponent()
+    const innerVal = ref(props.modelValue)
+    watch(innerVal, () => $emit('update:modelValue', innerVal.value))
+    watch(() => [props.modelValue], () => innerVal.value = props.modelValue)
+
+    const marketplaceStore = useMarketplaceStore()
+
+    onMounted(() => syncFormData())
+
+    let addonFormDataCtr = 0
+    function _createEmptyAddon(initialValue) {
+      const data = parseProductAddon(initialValue)
+      data.__index = ++addonFormDataCtr
+      // data.label = `Group ${addonFormDataCtr}`
+      // data.options.forEach((opt, index) => {
+      //   opt.label = `Option ${addonFormDataCtr}${index+1}`
+      // })
+      return data
+    }
+
+    function syncFormData() {
+      if (!Array.isArray(props.initialValue)) return
+      formData.value = props.initialValue.map(_createEmptyAddon)
+    }
+
+    const formError = ref('')
+    const formData = ref([].map(() => _createEmptyAddon()))
+    watchEffect(() => {
+      formData.value.forEach(addon => {
+        const prices = addon.options.map(opt => opt?.price)
+        const minPrice = Math.min(...prices)
+        const maxPrice = Math.max(...prices)
+
+        addon.hasOptions = addon.options.length > 1
+        addon.hasInputRequired = Boolean(addon.options.find(opt => opt?.requireInput))
+        addon.priceRange = { minPrice, maxPrice }
+      })
+    })
+    function addAddon(opts = { setEdit: false }) {
+      const addon = _createEmptyAddon()
+      if (opts?.setEdit) toggleEditAddon(addon);
+      else formData.value.push(addon)
+    }
+    function removeAddonConfirm(addon) {
+      if (!formData.value?.includes?.(addon)) return 
+      $q.dialog({
+        title: `Remove addon`,
+        message: `Remove addon '${addon?.label}'. Are you sure?`,
+        color: 'brandblue',
+        ok: true,
+        cancel: true,
+      }).onOk(() => removeAddon(addon))
+    }
+
+    function removeAddon(addon) {
+      formData.value = formData.value.filter(_addon => addon !== _addon)
+      addonFormData.value = null
+    }
+    function moveAddonIndex(opts={ addon, delta }) {
+      const index = formData.value.indexOf(opts?.addon)
+      if (index < 0) return
+
+      let newIndex = index + opts?.delta
+      if (Number.isNaN(newIndex)) return
+      newIndex = Math.min(newIndex, formData.value?.length-1)
+      newIndex = Math.max(newIndex, 0)
+      if (newIndex == index) return
+
+      formData.value.splice(index, 1)
+      formData.value.splice(newIndex, 0, opts?.addon);
+    }
+
+    function clearForm(opts={ submit: false, prompt: false }) {
+      if (opts?.prompt) return clearFormPrompt({ submit: opts?.submit })
+
+      formData.value = []
+      if (opts?.submit) submit()
+    }
+
+    function clearFormPrompt(opts={ submit: false }) {
+      $q.dialog({
+        title: 'Clear list',
+        message: 'Are you sure?',
+        color: 'brandblue',
+        ok: true,
+        cancel: true,
+      }).onOk(() => clearForm({ submit: opts?.submit, prompt: false }))
+    }
+
+    const addonFormData = ref([].map(_createEmptyAddon)[0])
+    watch(() => addonFormData.value?.options?.length, () => {
+      const length = addonFormData.value?.options?.length 
+      if (!Number.isSafeInteger(length)) return
+      if (length !== 1) return
+
+      addonFormData.value.minOpts = 0
+      addonFormData.value.maxOpts = 1
+    })
+    const addonFormDataExists = computed(() => {
+      return Boolean(
+        formData.value.find(addon => addon?.__index === addonFormData?.value?.__index)
+      )
+    })
+    function toggleEditAddon(addon) {
+      if (addonFormData.value?.__index == addon?.__index) {
+        addonFormData.value = null
+        return
+      }
+      addonFormData.value = JSON.parse(JSON.stringify(addon))
+      if (!Array.isArray(addonFormData.value.options) || addonFormData.value.options?.length < 1) {
+        addonFormData.value.options = [
+          { label: '', price: 0, requireInput: false },
+        ]
+      }
+    }
+    function addOptionToAddon() {
+      if (!addonFormData.value) return
+      if (!Array.isArray(addonFormData.value.options)) addonFormData.value.options = []
+      addonFormData.value.options.push({ label: '', price: 0, requireInput: false })
+    }
+
+    function onAddonFormSubmit() {
+      const index = formData.value.findIndex(addon => addonFormData.value.__index === addon.__index)
+      if (index >= 0) formData.value[index] = addonFormData.value
+      else formData.value.push(addonFormData.value)
+
+      addonFormData.value = null
+    }
+
+    const formValidation = ref({
+      duplicates: [],
+    })
+    watchEffect(() => {
+      formValidation.value.duplicates = getDuplicateLabelIndices()
+    })
+    function getDuplicateLabelIndices() {
+      const _map = {}
+      const duplicates = []
+      formData.value.forEach((addon, index) => {
+        if (!Array.isArray(_map[addon.label])) _map[addon.label] = []
+        _map[addon.label].push(index)
+        if (_map[addon.label]?.length > 1) duplicates.push(_map[addon.label])
+      })
+      return duplicates
+    }
+
+    function submit() {
+      const data = formData.value.map(parseProductAddon)
+      if (formValidation.value.duplicates.length > 0) {
+        formError.value = 'Duplicate names found'
+        return
+      }
+      onDialogOK(data)
+    }
+
+    return {
+      dialogRef, onDialogCancel, onDialogHide, onDialogOK,
+      innerVal,
+
+      marketplaceStore,
+
+      formError,
+      formData,
+      addAddon,
+      removeAddonConfirm,
+      removeAddon,
+      moveAddonIndex,
+
+      clearForm,
+      clearFormPrompt,
+
+      addonFormData,
+      addonFormDataExists,
+      toggleEditAddon,
+      addOptionToAddon,
+      onAddonFormSubmit,
+
+      submit,
+    }
+  }
+})
+</script>
+<style scoped>
+/* 1. declare transition */
+.slide-move,
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+/* 2. declare enter from and leave to state */
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+/* 3. ensure leaving items are taken out of layout flow so that moving
+      animations can be calculated correctly. */
+/* .slide-leave-active {
+  position: absolute;
+} */
+
+</style>
+<style lang="scss" scoped>
+.option-card {
+  transition: padding 0.1s ease-out, margin 0.1 ease-out;
+}
+.option-card--multiple {
+  border-radius: map-get($space-xs, 'y');
+  padding: map-get($space-xs, 'y') map-get($space-sm, 'x') map-get($space-sm, 'y') map-get($space-sm, 'x');
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+body.body--dark .option-card--multiple {
+  box-shadow: unset;
+  border: 1px solid white;
+}
+
+.dialog-content-base {
+  overflow: auto;
+  background-color: white;
+}
+
+.dialog-content-base .dialog-content-header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: inherit;
+  padding: map-get($space-md, 'y') map-get($space-md, 'x');
+}
+
+body.body--dark .dialog-content-base {
+  background-color: $dark;
+}
+
+</style>
diff --git a/src/components/marketplace/cartoptions/AddonsInfoDialog.vue b/src/components/marketplace/cartoptions/AddonsInfoDialog.vue
new file mode 100644
index 00000000..66941099
--- /dev/null
+++ b/src/components/marketplace/cartoptions/AddonsInfoDialog.vue
@@ -0,0 +1,53 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" position="bottom">
+    <q-card class="q-pa-md rounded-borders">
+      <div class="row items-center">
+        <div class="text-h6">{{ title }}</div>
+        <q-space/>
+        <q-btn
+          flat
+          icon="close"
+          padding="sm"
+          v-close-popup
+        />
+      </div>
+      <AddonsInfoPanel :addons="addons" :currency="currency"/>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+import { useDialogPluginComponent } from 'quasar'
+import { defineComponent, ref, watch } from 'vue'
+import AddonsInfoPanel from './AddonsInfoPanel.vue'
+
+export default defineComponent({
+  name: 'AddonsInfoDialog',
+  components: {
+    AddonsInfoPanel,
+  },
+  emits: [
+    'update:modelValue',
+    ...useDialogPluginComponent.emits,
+  ],
+  props: {
+    modelValue: Boolean,
+    addons: Array,
+    currency: String,
+    title: {
+      type: String,
+      default: 'Addon Options',
+    },
+  },
+  setup(props, { emit: $emit }) {
+    const { dialogRef, onDialogCancel, onDialogHide, onDialogOK } = useDialogPluginComponent()
+    const innerVal = ref(props.modelValue)
+    watch(innerVal, () => $emit('update:modelValue', innerVal.value))
+    watch(() => props.modelValue, () => innerVal.value = props.modelValue)
+    
+    return {
+      dialogRef, onDialogCancel, onDialogHide, onDialogOK,
+      innerVal
+    }
+  }
+})
+</script>
diff --git a/src/components/marketplace/cartoptions/AddonsInfoPanel.vue b/src/components/marketplace/cartoptions/AddonsInfoPanel.vue
new file mode 100644
index 00000000..aaa2f00f
--- /dev/null
+++ b/src/components/marketplace/cartoptions/AddonsInfoPanel.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div v-for="(addon, index) in addons" :key="index" class="q-pb-sm">
+      <div class="row items-center">
+        <div class="text-body">{{ addon?.label }}</div>
+        <q-icon v-if="!hasOptions(addon) && hasInputRequired(addon)" name="keyboard" size="1.2em" color="grey" class="q-ml-xs"/>
+        <q-space/>
+        <div class="text-right">
+          <div v-if="shouldDisplayMinMaxOpts(addon)" class="q-ml-xs text-grey text-caption" style="line-height:1.1em">
+            Required selected:
+            {{ addon?.minOpts }}
+            <template v-if="addon?.minOpts !== addon?.maxOpts">
+              - {{ addon?.maxOpts }}
+            </template>
+          </div>
+          <div v-if="!hasOptions(addon)" class="q-pl-sm">
+            {{ addon?.options?.[0]?.price }} {{ currency }}
+          </div>
+        </div>
+      </div>
+      <div v-if="hasOptions(addon)" class="q-pl-sm text-caption">
+        <div
+          v-for="(option, index2) in addon.options" :key="`${index}-${index2}`"
+          class="row items-center"
+        >
+          <div>
+            {{ option?.label }}
+            <q-icon v-if="option?.requireInput" name="keyboard" size="1.2em" color="grey"/>
+          </div>
+          <q-space/>
+          <div>{{ option?.price }} {{ currency }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'AddonsInfoPanel',
+  props: {
+    addons: Array,
+    currency: String,
+  },
+  methods: {
+    hasOptions(addon) {
+      return addon?.options?.length !== 1
+    },
+    hasInputRequired(addon) {
+      return Boolean(addon?.options?.find?.(opt => opt?.requireInput))
+    },
+    shouldDisplayMinMaxOpts(addon) {
+      if (addon?.minOpts <= 0 && addon?.maxOpts >= addon?.options?.length) return false
+      return true
+    }
+  }
+})
+</script>
+
diff --git a/src/marketplace/objects.js b/src/marketplace/objects.js
index 82ab3d25..a356f4b1 100644
--- a/src/marketplace/objects.js
+++ b/src/marketplace/objects.js
@@ -387,6 +387,7 @@ export class Product {
       fetchingStocks: false,
       fetchingShops: false,
       updatingCartOptions: false,
+      updatingAddons: false,
     }
   }
 
@@ -400,6 +401,8 @@ export class Product {
    * @param {String} [data.code]
    * @param {String[]} data.categories
    * @param {Object[]} [data.cart_options]
+   * @param {Object[]} [data.addons]
+   * @param {Number} [data.addons_count]
    * @param {Boolean} data.has_cart_options
    * @param {String} data.image_url
    * @param {String} [data.variant_image_url]
@@ -422,6 +425,8 @@ export class Product {
     this.code = data?.code
     if (Array.isArray(data?.categories)) this.categories = [...data.categories]
     if (Array.isArray(data?.cart_options)) this.cartOptions = [...data.cart_options]
+    if (Array.isArray(data?.addons)) this.addons = data.addons.map(Addon.parse)
+    this.addonsCount = data?.addons?.length ?? data?.addons_count
     this.hasCartOptions = data?.has_cart_options
     this.imageUrl = data?.image_url
     this.variantImageUrl = data?.variant_image_url
@@ -533,6 +538,27 @@ export class Product {
       })
   }
 
+
+  async fetchAddons() {
+    if (!this.id) return Promise.resolve()
+
+    this.$state.updatingAddons = true
+    const params = { ids: this.id }
+    return backend.get(`products/addons/`, { params })
+      .then(response => {
+        const obj = response?.data?.results?.find(product => product?.id == this?.id)
+        console.log('obj', obj)
+        if (obj) {
+          this.addons = obj?.addons.map?.(Addon.parse)
+          if (this.$raw) this.$raw.cartOptions = obj?.addons
+        }
+        return response
+      })
+      .finally(() => {
+        this.$state.updatingAddons = false
+      })
+  }
+
   async refetch(params={}) {
     if (!this.id) return
     this.$state.updating = true
@@ -576,6 +602,86 @@ export class Product {
 }
 
 
+export class Addon {
+  static parse(data) {
+    return new Addon(data)
+  }
+
+  constructor(data) {
+    this.raw = data
+  }
+
+  get raw() {
+    return this.$raw
+  }
+
+  /**
+   * @param {Object} data
+   * @param {Number} data.id
+   * @param {String} data.label
+   * @param {Number} data.min_opts
+   * @param {Number} data.max_opts
+   * @param {{ id: Number, label: String, price: Number, markup_price: Number, require_input: Boolean }[]} data.options
+   */
+  set raw(data) {
+    Object.defineProperty(this, '$raw', { enumerable: false, configurable: true, value: data })
+    this.id = data?.id
+    this.label = data?.label
+    this.minOpts = data?.min_opts
+    this.maxOpts = data?.max_opts
+    this.options = (Array.isArray(data?.options) ? data.options : []).map(option => {
+      return {
+        id: option?.id,
+        label: option?.label,
+        price: option?.price,
+        markupPrice: option?.markup_price,
+        requireInput: option?.require_input,
+      }
+    })
+  }
+
+  get hasOptions() {
+    return this.options?.length > 1
+  }
+
+  get option() {
+    if (!this.hasOptions) return
+    return this.option[0]
+  }
+}
+
+export class LineItemAddon {
+  static parse(data) {
+    return new LineItemAddon(data)
+  }
+
+  constructor(data) {
+    this.raw = data
+  }
+
+  get raw() {
+    return this.$raw
+  } 
+
+  /**
+   * @param {Object} data
+   * @param {Number} data.addon_option_id
+   * @param {String} data.label
+   * @param {Number} data.price
+   * @param {Number} data.markup_price
+   * @param {String} data.input_value
+   */
+  set raw(data) {
+    Object.defineProperty(this, '$raw', { enumerable: false, configurable: true, value: data })
+    this.addonOptionId = data?.addon_option_id
+    this.label = data?.label
+    this.price = data?.price
+    this.markupPrice = data?.markup_price
+    this.inputValue = data?.input_value
+  }
+}
+
+
 export class Shop {
   static parse(data) {
     return new Shop(data)
@@ -1572,6 +1678,7 @@ export class OrderItem {
    * @param {Number} data.price
    * @param {Number} data.markup_price
    * @param {{ schema:Array, data:Object }} [data.properties]
+   * @param {Object[]} [data.addons]
    */
   set raw(data) {
     Object.defineProperty(this, '$raw', { enumerable: false, configurable: true, value: data })
@@ -1582,6 +1689,7 @@ export class OrderItem {
     this.price = data?.price
     this.markupPrice = data?.markup_price
     this.properties = data?.properties
+    this.addons = (Array.isArray(data?.addons) ? data.addons: []).map(LineItemAddon.parse)
   }
 
   get propertiesText() {
diff --git a/src/marketplace/product-addons.js b/src/marketplace/product-addons.js
new file mode 100644
index 00000000..147704ae
--- /dev/null
+++ b/src/marketplace/product-addons.js
@@ -0,0 +1,46 @@
+/**
+ * 
+ * @typedef {Object} AddonOptionInfoAPI
+ * @property {String} label
+ * @property {Number} price
+ * @property {Number} markup_price
+ * @property {Boolean} require_input
+ * 
+ * @typedef {Object} AddonOptionInfo
+ * @property {String} label
+ * @property {Number} price
+ * @property {Number} [markupPrice]
+ * @property {Boolean} requireInput
+ * 
+ * @typedef {Object} AddonInfo
+ * @property {String} label
+ * @property {Number} minOpts
+ * @property {Number} maxOpts
+ * @property {AddonOptionInfo[]} options
+ * 
+ * @typedef {Object} AddonInfoAPI
+ * @property {String} label
+ * @property {Number} min_opts
+ * @property {Number} max_opts
+ * @property {AddonOptionInfoAPI[]} options
+ */
+
+
+/**
+ * @param {AddonInfo | AddonInfoAPI} addon 
+ */
+export function parseProductAddon(addon) {
+  return {
+    label: addon?.label,
+    minOpts: addon?.minOpts ?? addon?.min__opts,
+    maxOpts: addon?.maxOpts ?? addon?.max__opts,
+    options: (Array.isArray(addon?.options) ? addon.options : [])?.map?.(opt => {
+      return {
+        label: opt?.label,
+        price: opt?.price,
+        markupPrice: opt?.markupPrice || opt?.markup_price,
+        requireInput: opt?.requireInput ?? opt?.require_input,
+      }
+    })
+  }
+}
diff --git a/src/pages/marketplace/products/AddProduct.vue b/src/pages/marketplace/products/AddProduct.vue
index 2829a2ae..28e50b88 100644
--- a/src/pages/marketplace/products/AddProduct.vue
+++ b/src/pages/marketplace/products/AddProduct.vue
@@ -60,6 +60,10 @@
               errorMessage: formErrors?.categories,
             }"
           />
+        </q-card-section>
+      </q-card>
+      <q-card>
+        <q-card-section>
           <div class="row items-center">
             <div class="text-subtitle1">Cart options</div>
             <q-space/>
@@ -119,6 +123,24 @@
               </q-dialog>
             </template>
           </div>
+          <q-separator spaced/>
+          <div class="row items-center">
+            <div class="text-subtitle1">Addon Options</div>
+          </div>
+          <q-btn
+            v-if="!formData.addons?.length"
+            flat
+            no-caps label="Set Addons"
+            icon="edit"
+            class="full-width"
+            @click="() => openAddonsFormDialog()"
+          />
+          <AddonsInfoPanel
+            v-else
+            :addons="formData.addons"
+            :currency="marketplaceStore.currency"
+            @click="() => openAddonsFormDialog()"
+          />
         </q-card-section>
       </q-card>
       <q-card>
@@ -263,6 +285,7 @@
 </template>
 <script>
 import { backend } from 'src/marketplace/backend'
+import { parseProductAddon } from 'src/marketplace/product-addons'
 import { errorParser } from 'src/marketplace/utils'
 import { defineComponent, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -273,6 +296,8 @@ import MarketplaceHeader from 'src/components/marketplace/MarketplaceHeader.vue'
 import JSONFormDialog from 'src/components/marketplace/jsonform/JSONFormDialog.vue'
 import JSONFormPreview from 'src/components/marketplace/jsonform/JSONFormPreview.vue'
 import CategoriesField from 'src/components/marketplace/inventory/CategoriesField.vue'
+import AddonsFormDialog from 'src/components/marketplace/cartoptions/AddonsFormDialog.vue'
+import AddonsInfoPanel from 'src/components/marketplace/cartoptions/AddonsInfoPanel.vue'
 
 
 export default defineComponent({
@@ -282,6 +307,7 @@ export default defineComponent({
     MarketplaceHeader,
     JSONFormPreview,
     CategoriesField,
+    AddonsInfoPanel,
   },
   setup() {
     const marketplaceStore = useMarketplaceStore()
@@ -308,6 +334,7 @@ export default defineComponent({
       description: '',
       categories: [],
       cartOptions: undefined,
+      addons: [].map(parseProductAddon),
       variants: [createEmptyVariant()],
     })
 
@@ -350,6 +377,18 @@ export default defineComponent({
       })
     }
 
+    function openAddonsFormDialog() {
+      $q.dialog({
+        component: AddonsFormDialog,
+        componentProps: {
+          initialValue: formData.value.addons,
+          clearable: true,
+        }
+      }).onOk(addonsList => {
+        formData.value.addons = addonsList
+      })
+    }
+
     function addVariant() {
       if (!Array.isArray(formData.value.variants)) formData.value.variants = []
       formData.value.variants.push(createEmptyVariant())
@@ -363,6 +402,20 @@ export default defineComponent({
         description: formData.value.description,
         categories: [],
         cart_options: formData.value.cartOptions?.map?.(data => Object.assign({}, data, { _index: undefined })),
+        addons: formData.value.addons.map(addon => {
+          return {
+            label: addon.label,
+            min_opts: addon.minOpts,
+            max_opts: addon.maxOpts,
+            options: addon.options.map(option => {
+              return {
+                label: option.label,
+                price: option.price,
+                require_input: option.requireInput,
+              }
+            })
+          }
+        }),
         variants: [],
       }
       if (!data?.cart_options?.length) data.cart_options = null
@@ -440,6 +493,8 @@ export default defineComponent({
       showCartOptionsPreview,
       openPropertiesSchemaOptions,
 
+      openAddonsFormDialog,
+
       addVariant,
       addProduct,
     }
diff --git a/src/pages/marketplace/products/UpdateProduct.vue b/src/pages/marketplace/products/UpdateProduct.vue
index d7ce2b60..0792c51f 100644
--- a/src/pages/marketplace/products/UpdateProduct.vue
+++ b/src/pages/marketplace/products/UpdateProduct.vue
@@ -72,6 +72,11 @@
               errorMessage: formErrors?.categories,
             }"
           />
+        </q-card-section>
+      </q-card>
+
+      <q-card class="q-mt-md">
+        <q-card-section>
           <div class="row items-center">
             <div class="text-subtitle1">Cart options</div>
             <q-space/>
@@ -131,6 +136,24 @@
               </q-dialog>
             </template>
           </div>
+          <q-separator/>
+          <div class="row items-center">
+            <div class="text-subtitle1">Addon Options</div>
+          </div>
+          <q-btn
+            v-if="!formData.addons?.length"
+            flat
+            no-caps label="Set Addons"
+            icon="edit"
+            class="full-width"
+            @click="() => openAddonsFormDialog()"
+          />
+          <AddonsInfoPanel
+            v-else
+            :addons="formData.addons"
+            :currency="marketplaceStore.currency"
+            @click="() => openAddonsFormDialog()"
+          />
         </q-card-section>
       </q-card>
 
@@ -342,6 +365,7 @@
 <script>
 import { backend } from 'src/marketplace/backend'
 import { Product, Variant } from 'src/marketplace/objects'
+import { parseProductAddon } from 'src/marketplace/product-addons'
 import { errorParser } from 'src/marketplace/utils'
 import { useMarketplaceStore } from 'src/stores/marketplace'
 import { useQuasar } from 'quasar'
@@ -352,6 +376,8 @@ import MarketplaceHeader from 'src/components/marketplace/MarketplaceHeader.vue'
 import JSONFormDialog from 'src/components/marketplace/jsonform/JSONFormDialog.vue'
 import JSONFormPreview from 'src/components/marketplace/jsonform/JSONFormPreview.vue'
 import CategoriesField from 'src/components/marketplace/inventory/CategoriesField.vue'
+import AddonsFormDialog from 'src/components/marketplace/cartoptions/AddonsFormDialog.vue'
+import AddonsInfoPanel from 'src/components/marketplace/cartoptions/AddonsInfoPanel.vue'
 
 /**
  * For constructing update payload.
@@ -367,6 +393,7 @@ export default defineComponent({
     UploadImageField,
     JSONFormPreview,
     CategoriesField,
+    AddonsInfoPanel,
   },
   props: {
     productId: [Number, String]
@@ -419,6 +446,7 @@ export default defineComponent({
       description: '',
       categories: [],
       cartOptions: undefined,
+      addons: [].map(parseProductAddon),
       variants: [{
         obj: Variant.parse(null),
         remove: false,
@@ -494,6 +522,11 @@ export default defineComponent({
           price: variant.price,
         }
       })
+      if (!Array.isArray(product.value.addons)) {
+        formData.value.addons = []
+      } else {
+        formData.value.addons = product.value.addons.map(parseProductAddon)
+      }
 
       formData.value.newVariants = []
       resetFormErrors()
@@ -547,6 +580,19 @@ export default defineComponent({
       })
     }
 
+    function openAddonsFormDialog() {
+      $q.dialog({
+        component: AddonsFormDialog,
+        componentProps: {
+          initialValue: formData.value.addons,
+          clearable: true,
+          promptClear: true,
+        }
+      }).onOk(addonsList => {
+        formData.value.addons = addonsList
+      })
+    }
+
     function addVariant() {
       formData.value.newVariants.push(createEmptyNewVariant())
     }
@@ -560,6 +606,20 @@ export default defineComponent({
         image_url: undefinedOrUpdated(formData.value.imageUrl || "", product.value.imageUrl),
         update_variants: computedFormData.value.variants.update,
         add_variants: computedFormData.value.variants.add,
+        addons: formData.value.addons.map(addon => {
+          return {
+            label: addon.label,
+            min_opts: addon.minOpts,
+            max_opts: addon.maxOpts,
+            options: addon.options.map(option => {
+              return {
+                label: option.label,
+                price: option.price,
+                require_input: option.requireInput,
+              }
+            })
+          }
+        })
       }
       if (!data?.cart_options?.length) data.cart_options = null
 
@@ -686,6 +746,8 @@ export default defineComponent({
       showCartOptionsPreview,
       openPropertiesSchemaOptions,
 
+      openAddonsFormDialog,
+
       addVariant,
       updateProduct,
 

From 97b0490de32d41ee3e62d2bd3ee4a7edac77dc1d Mon Sep 17 00:00:00 2001
From: khirvy019 <khirvy_19@yahoo.com>
Date: Mon, 29 Apr 2024 12:30:52 +0800
Subject: [PATCH 3/6] add addon options column in storefront products page

---
 .../storefront/StorefrontProducts.vue         | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)

diff --git a/src/pages/marketplace/storefront/StorefrontProducts.vue b/src/pages/marketplace/storefront/StorefrontProducts.vue
index cd81c2ae..5379b0da 100644
--- a/src/pages/marketplace/storefront/StorefrontProducts.vue
+++ b/src/pages/marketplace/storefront/StorefrontProducts.vue
@@ -227,6 +227,40 @@
             />
           </q-td>
         </template>
+        <template v-slot:body-cell-addons="props">
+          <q-td :props="props">
+            <div class="row items-center no-wrap">
+              <template v-if="props.row?.addonsCount">
+                <q-btn
+                  :disable="props.row?.$state?.updatingAddons"
+                  :loading="props.row?.$state?.updatingAddons"
+                  flat
+                  no-caps
+                  label="View"
+                  no-wrap
+                  padding="xs"
+                  size="1em"
+                  dense
+                  @click="() => viewAddons(props.row)"
+                />
+                <q-separator vertical spaced/>
+              </template>
+              <q-btn
+                :disable="props.row?.$state?.updatingAddons"
+                :loading="props.row?.$state?.updatingAddons"
+                flat
+                no-caps
+                :label="props.row?.addonsCount ? 'Edit' : 'Add'"
+                :icon-right="props.row?.addonsCount ? undefined : 'add'"
+                no-wrap
+                :padding="props.row?.addonsCount ? 'xs' :'xs sm'"
+                :size="props.row?.addonsCount ? '1em' : undefined"
+                dense
+                @click="() => updateAddons(props.row)"
+              />
+            </div>
+          </q-td>
+        </template>
       </q-table>
     </q-pull-to-refresh>
     <ProductInventoryDialog
@@ -252,6 +286,8 @@ import ProductInventoryDialog from 'src/components/marketplace/inventory/Product
 import ProductSearchDialog from 'src/components/marketplace/ProductSearchDialog.vue';
 import JSONFormDialog from 'src/components/marketplace/jsonform/JSONFormDialog.vue';
 import ReviewsListDialog from 'src/components/marketplace/reviews/ReviewsListDialog.vue';
+import AddonsFormDialog from 'src/components/marketplace/cartoptions/AddonsFormDialog.vue';
+import AddonsInfoDialog from 'src/components/marketplace/cartoptions/AddonsInfoDialog.vue';
 
 export default defineComponent({
   name: 'StorefrontProducts',
@@ -344,6 +380,7 @@ export default defineComponent({
       { name: 'available', align: 'left', label: 'Available', sortable: true },
       { name: 'markup-price', align: 'left', label: 'Markup Price', field: 'markupPriceRangeText', format: val => `${val} ${marketplaceStore?.currency}`, sortable: true },
       { name: 'cart-options', align: 'left', label: 'Cart Options' },
+      { name: 'addons', align: 'left', label: 'Addon Options' },
       { name: 'created', align: 'center', label: 'Created', field: 'createdAt', format: formatTimestampToText, sortable: true },
       // { name: 'actions', align: 'center', label: '' },
     ]
@@ -478,6 +515,62 @@ export default defineComponent({
       })
     }
 
+    async function viewAddons(product=Product.parse()) {
+      if (product.addons === undefined) await product.fetchAddons()
+      $q.dialog({
+        component: AddonsInfoDialog,
+        componentProps: {
+          title: `${product.name} - Addon Options`,
+          addons: product.addons,
+          currency: marketplaceStore?.currency,
+        }
+      })
+    }
+
+    async function updateAddons(product=Product.parse()) {
+      if (product.addons === undefined) await product.fetchAddons()
+      $q.dialog({
+        component: AddonsFormDialog,
+        componentProps: {
+          title: `${product.name} - Addon Options`,
+          initialValue: product.addons,
+          clearable: true,
+          promptClear: true,
+        }
+      }).onOk(addonsList => {
+        const data = {
+          addons: addonsList.map(addon => {
+            return {
+              label: addon.label,
+              min_opts: addon.minOpts,
+              max_opts: addon.maxOpts,
+              options: addon.options.map(option => {
+                return {
+                  label: option.label,
+                  price: option.price,
+                  require_input: option.requireInput,
+                }
+              })
+            }
+          })
+        }
+        product.$state.updatingAddons = true
+        backend.patch(`products/${product.id}/`, data)
+          .then(response => {
+            product.raw = Object.assign({}, product.raw, response.data)
+            $q.notify({
+              message: 'Addon options updated',
+              icon: 'check',
+              color: 'brandblue',
+            })
+            return response
+          })
+          .finally(() => {
+            product.$state.updatingAddons = false
+          })
+      })
+    }
+
     function openAddProductsDialog() {
       $q.dialog({
         component: ProductSearchDialog,
@@ -569,6 +662,8 @@ export default defineComponent({
       confirmRemoveSelectedProducts,
       updateSelectedProductsAvailability,
       updateCartOptions,
+      viewAddons,
+      updateAddons,
       openAddProductsDialog,
 
       reviewsListDialog,

From 2a2dad5d55f0b5c64a5f88672c27db6b2989751e Mon Sep 17 00:00:00 2001
From: khirvy019 <khirvy_19@yahoo.com>
Date: Mon, 29 Apr 2024 12:35:50 +0800
Subject: [PATCH 4/6] display order item addons in order page and order detail
 dialog

---
 .../storefront/OrderDetailDialog.vue          | 53 ++++++++++------
 src/marketplace/utils.js                      |  6 ++
 .../marketplace/storefront/OrderPage.vue      | 61 ++++++++++++-------
 3 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/src/components/marketplace/storefront/OrderDetailDialog.vue b/src/components/marketplace/storefront/OrderDetailDialog.vue
index 82ae7ca5..2eccce26 100644
--- a/src/components/marketplace/storefront/OrderDetailDialog.vue
+++ b/src/components/marketplace/storefront/OrderDetailDialog.vue
@@ -36,30 +36,42 @@
         <table class="items-table full-width q-mt-md">
           <thead>
             <tr>
-              <th>Item</th>
+              <th colspan="2">Item</th>
               <th>Qty</th>
               <th>Price</th>
               <th>Subtotal</th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="orderItem in order?.items" :key="orderItem?.id">
-              <td class="text-weight-medium">
-                <div class="row items-center justify-left no-wrap full-width text-left q-my-xs">
-                  <q-img
-                    v-if="orderItem?.variant?.itemImage"
-                    :src="orderItem?.variant?.itemImage"
-                    width="35px"
-                    ratio="1"
-                    class="rounded-borders q-mr-xs"
-                  />
-                  <div>{{ orderItem?.variant?.itemName }}</div>
-                </div>
-              </td>
-              <td class="text-center" style="white-space:nowrap;">{{ orderItem?.quantity }}</td>
-              <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price }} {{ orderCurrency }}</td>
-              <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price * orderItem?.quantity }} {{ orderCurrency }}</td>
-            </tr>
+            <template v-for="orderItem in order?.items" :key="orderItem?.id">
+              <tr>
+                <td colspan="2" class="text-weight-medium order-item-cell">
+                  <div class="row items-center justify-left no-wrap full-width text-left q-my-xs">
+                    <q-img
+                      v-if="orderItem?.variant?.itemImage"
+                      :src="orderItem?.variant?.itemImage"
+                      width="35px"
+                      ratio="1"
+                      class="rounded-borders q-mr-xs"
+                    />
+                    <div>{{ orderItem?.variant?.itemName }}</div>
+                  </div>
+                </td>
+                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.quantity }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price }} {{ orderCurrency }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price * orderItem?.quantity }} {{ orderCurrency }}</td>
+              </tr>
+              <tr v-for="(addon, index) in orderItem.addons" :key="`${orderItem?.id}-${index}`">
+                <td></td>
+                <td>
+                  <div>{{ addon?.label }}</div>
+                  <div v-if="addon?.inputValue" class="text-caption bottom">{{ addon?.inputValue }}</div>
+                </td>
+                <td class="text-center" style="white-space:nowrap;">{{ addon?.price }} {{ orderCurrency }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ addon?.quantity }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ round(addon?.price * orderItem?.quantity, 3) }} {{ orderCurrency }}</td>
+              </tr>
+            </template>
           </tbody>
         </table>
         <q-separator spaced/>
@@ -99,7 +111,7 @@
 import { Order } from 'src/marketplace/objects'
 import { useDialogPluginComponent } from 'quasar'
 import { computed, defineComponent, ref, watch } from 'vue'
-import { formatTimestampToText } from 'src/marketplace/utils'
+import { formatTimestampToText, round } from 'src/marketplace/utils'
 
 export default defineComponent({
   name: 'OrderDetailDialog',
@@ -128,6 +140,7 @@ export default defineComponent({
 
       orderCurrency,
 
+      round,
       formatTimestampToText,
     }
   },
@@ -140,7 +153,7 @@ table.items-table {
 table.items-table tr td:last-child {
   text-align: end;
 }
-table.items-table tr td:first-child {
+table.items-table tr td.order-item-cell:first-child {
  width: 100%;
 }
 </style>
diff --git a/src/marketplace/utils.js b/src/marketplace/utils.js
index c01bdab2..c5898a36 100644
--- a/src/marketplace/utils.js
+++ b/src/marketplace/utils.js
@@ -1,6 +1,12 @@
 import ago from 's-ago'
 import { capitalize } from 'vue'
 
+
+export function round(value, decimals) {
+  const multiplier = 10 ** decimals
+  return Math.round(Number(value) * multiplier) / multiplier
+}
+
 export function lineItemPropertiesToText(data) {
   if (!data) return ''
   return Object.getOwnPropertyNames(data).map(name => {
diff --git a/src/pages/marketplace/storefront/OrderPage.vue b/src/pages/marketplace/storefront/OrderPage.vue
index cd8f7a2a..85fbe663 100644
--- a/src/pages/marketplace/storefront/OrderPage.vue
+++ b/src/pages/marketplace/storefront/OrderPage.vue
@@ -370,33 +370,48 @@
         <q-markup-table dense>
           <thead>
             <tr>
-              <th>Item</th>
-              <th>Qty</th>
+              <th colspan="2">Item</th>
               <th>Price</th>
+              <th>Qty</th>
               <th>Subtotal</th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="orderItem in order?.items" :key="orderItem?.id">
-              <td class="text-weight-medium" @click="displayVariant(orderItem?.variant)">
-                <div class="row items-center justify-left no-wrap full-width text-left q-my-xs">
-                  <q-img
-                    v-if="orderItem?.variant?.itemImage"
-                    :src="orderItem?.variant?.itemImage"
-                    width="35px"
-                    ratio="1"
-                    class="rounded-borders q-mr-xs"
-                  />
-                  <div class="q-space">
-                    <div class="text-weight-medium">{{ orderItem?.variant?.itemName }}</div>
-                    <div class="text-caption bottom">{{ orderItem?.propertiesText }} </div>
+            <template v-for="orderItem in order?.items" :key="orderItem?.id">
+              <tr>
+                <td
+                  colspan="2"
+                  class="text-weight-medium" @click="displayVariant(orderItem?.variant)"
+                >
+                  <div class="row items-center justify-left no-wrap full-width text-left q-my-xs">
+                    <q-img
+                      v-if="orderItem?.variant?.itemImage"
+                      :src="orderItem?.variant?.itemImage"
+                      width="35px"
+                      ratio="1"
+                      class="rounded-borders q-mr-xs"
+                    />
+                    <div class="q-space">
+                      <div class="text-weight-medium">{{ orderItem?.variant?.itemName }}</div>
+                      <div class="text-caption bottom">{{ orderItem?.propertiesText }} </div>
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td class="text-center" style="white-space:nowrap;">{{ orderItem?.quantity }}</td>
-              <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price }} {{ orderCurrency }}</td>
-              <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price * orderItem?.quantity }} {{ orderCurrency }}</td>
-            </tr>
+                </td>
+                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price }} {{ orderCurrency }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.quantity }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price * orderItem?.quantity }} {{ orderCurrency }}</td>
+              </tr>
+              <tr v-for="(addon, index) in orderItem.addons" :key="`${orderItem?.id}-${index}`">
+                <td></td>
+                <td>
+                  <div>{{ addon?.label }}</div>
+                  <div v-if="addon?.inputValue" class="text-caption bottom">{{ addon?.inputValue }}</div>
+                </td>
+                <td class="text-center" style="white-space:nowrap;">{{ addon?.price }} {{ orderCurrency }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ addon?.quantity }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ round(addon?.price * orderItem?.quantity, 3) }} {{ orderCurrency }}</td>
+              </tr>
+            </template>
           </tbody>
         </q-markup-table>
       </q-card>
@@ -509,7 +524,7 @@
 import { backend } from 'src/marketplace/backend'
 import { marketplaceRpc } from 'src/marketplace/rpc'
 import { Delivery, Order, OrderDispute, Payment, Review, Rider, Storefront, Variant } from 'src/marketplace/objects'
-import { errorParser, formatOrderStatus, parseOrderStatusColor, parsePaymentStatusColor, formatTimestampToText, formatDateRelative } from 'src/marketplace/utils'
+import { errorParser, formatOrderStatus, parseOrderStatusColor, parsePaymentStatusColor, formatTimestampToText, formatDateRelative, round } from 'src/marketplace/utils'
 import { useMarketplaceStore } from 'src/stores/marketplace'
 import { useNotificationsStore } from 'src/stores/notifications'
 import { debounce, useQuasar } from 'quasar'
@@ -532,6 +547,7 @@ import riderLocationPin from 'src/assets/marketplace/rider_map_marker_2.png'
 import merchantLocationPin from 'src/assets/marketplace/merchant_map_marker_2.png'
 import ImageViewerDialog from 'src/components/marketplace/ImageViewerDialog.vue'
 
+
 export default defineComponent({
   name: 'OrderPage',
   components: {
@@ -1382,6 +1398,7 @@ export default defineComponent({
       refreshPage,
 
       // utils funcs
+      round,
       formatOrderStatus, parseOrderStatusColor,
       parsePaymentStatusColor,
       formatTimestampToText,

From 12c189726bf4e506a336d15cebf86f6649c4a10a Mon Sep 17 00:00:00 2001
From: khirvy019 <khirvy_19@yahoo.com>
Date: Mon, 29 Apr 2024 12:36:58 +0800
Subject: [PATCH 5/6] fix axios error during compile and rutime

---
 package-lock.json | 1 +
 package.json      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index fcf83242..e0d0497e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@vueuse/components": "^10.5.0",
         "@vueuse/core": "^10.5.0",
         "apexcharts": "^3.37.3",
+        "axios": "^0.21.4",
         "axios-cache-adapter": "^2.7.3",
         "capacitor-secure-storage-plugin": "^0.7.1",
         "cashc": "^0.8.0",
diff --git a/package.json b/package.json
index 2627cd93..ceea83e4 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.5.0",
     "apexcharts": "^3.37.3",
+    "axios": "^0.21.4",
     "axios-cache-adapter": "^2.7.3",
     "capacitor-secure-storage-plugin": "^0.7.1",
     "cashc": "^0.8.0",

From 6c0620f80d0092b1e0e2e17552c9e32af103ab65 Mon Sep 17 00:00:00 2001
From: khirvy019 <khirvy_19@yahoo.com>
Date: Mon, 29 Apr 2024 16:03:06 +0800
Subject: [PATCH 6/6] ui fixes on order detail dialog and product form

---
 .../storefront/OrderDetailDialog.vue           |  4 ++--
 src/pages/marketplace/products/AddProduct.vue  | 18 +++++++++---------
 .../marketplace/products/UpdateProduct.vue     | 18 +++++++++---------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/marketplace/storefront/OrderDetailDialog.vue b/src/components/marketplace/storefront/OrderDetailDialog.vue
index 2eccce26..86309e87 100644
--- a/src/components/marketplace/storefront/OrderDetailDialog.vue
+++ b/src/components/marketplace/storefront/OrderDetailDialog.vue
@@ -37,8 +37,8 @@
           <thead>
             <tr>
               <th colspan="2">Item</th>
-              <th>Qty</th>
               <th>Price</th>
+              <th>Qty</th>
               <th>Subtotal</th>
             </tr>
           </thead>
@@ -57,8 +57,8 @@
                     <div>{{ orderItem?.variant?.itemName }}</div>
                   </div>
                 </td>
-                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.quantity }}</td>
                 <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price }} {{ orderCurrency }}</td>
+                <td class="text-center" style="white-space:nowrap;">{{ orderItem?.quantity }}</td>
                 <td class="text-center" style="white-space:nowrap;">{{ orderItem?.price * orderItem?.quantity }} {{ orderCurrency }}</td>
               </tr>
               <tr v-for="(addon, index) in orderItem.addons" :key="`${orderItem?.id}-${index}`">
diff --git a/src/pages/marketplace/products/AddProduct.vue b/src/pages/marketplace/products/AddProduct.vue
index 28e50b88..f8dc6795 100644
--- a/src/pages/marketplace/products/AddProduct.vue
+++ b/src/pages/marketplace/products/AddProduct.vue
@@ -127,18 +127,18 @@
           <div class="row items-center">
             <div class="text-subtitle1">Addon Options</div>
           </div>
-          <q-btn
-            v-if="!formData.addons?.length"
-            flat
-            no-caps label="Set Addons"
-            icon="edit"
-            class="full-width"
-            @click="() => openAddonsFormDialog()"
-          />
           <AddonsInfoPanel
-            v-else
+            v-if="formData.addons?.length"
             :addons="formData.addons"
             :currency="marketplaceStore.currency"
+          />
+          <q-btn
+            :flat="!formData.addons?.length"
+            :outline="Boolean(formData.addons?.length)"
+            :color="(formData.addons?.length && !$q.dark.isActive) ? 'brandblue' : ''"
+            no-caps :label="formData.addons?.length ? 'Edit' : 'Set Addons'"
+            icon="edit"
+            class="full-width"
             @click="() => openAddonsFormDialog()"
           />
         </q-card-section>
diff --git a/src/pages/marketplace/products/UpdateProduct.vue b/src/pages/marketplace/products/UpdateProduct.vue
index 0792c51f..ddd2e8d6 100644
--- a/src/pages/marketplace/products/UpdateProduct.vue
+++ b/src/pages/marketplace/products/UpdateProduct.vue
@@ -140,18 +140,18 @@
           <div class="row items-center">
             <div class="text-subtitle1">Addon Options</div>
           </div>
-          <q-btn
-            v-if="!formData.addons?.length"
-            flat
-            no-caps label="Set Addons"
-            icon="edit"
-            class="full-width"
-            @click="() => openAddonsFormDialog()"
-          />
           <AddonsInfoPanel
-            v-else
+            v-if="formData.addons?.length"
             :addons="formData.addons"
             :currency="marketplaceStore.currency"
+          />
+          <q-btn
+            :flat="!formData.addons?.length"
+            :outline="Boolean(formData.addons?.length)"
+            :color="(formData.addons?.length && !$q.dark.isActive) ? 'brandblue' : ''"
+            no-caps :label="formData.addons?.length ? 'Edit' : 'Set Addons'"
+            icon="edit"
+            class="full-width"
             @click="() => openAddonsFormDialog()"
           />
         </q-card-section>