From 028dd71456356c5b686ec2dc7bf6ff98545c7de2 Mon Sep 17 00:00:00 2001
From: 639852 <sasha.bobyliev@mail.ru>
Date: Thu, 8 Aug 2024 04:35:22 +0400
Subject: [PATCH] - Added nocloud invoices

---
 src/components/cloud/create/calculator.vue    |  12 +-
 src/components/cloud/create/customAddons.vue  | 159 ++++++++++++++++++
 src/components/cloud/create/ovhAddons.vue     |  15 +-
 .../cloud/modules/ione/panels/addons.vue      | 151 +----------------
 .../cloud/modules/keyweb/panels/addons.vue    |  75 ++++++---
 .../cloud/modules/keyweb/panels/os.vue        |  41 +++--
 .../cloud/modules/ovh cloud/panels/addons.vue |  19 +++
 .../cloud/modules/ovh cloud/panels/os.vue     |   3 +-
 .../cloud/modules/ovh cloud/panels/plan.vue   |   5 +-
 .../modules/ovh dedicated/panels/addons.vue   |  77 +++++----
 .../modules/ovh dedicated/panels/plan.vue     |  55 +++---
 .../cloud/modules/ovh vps/panels/addons.vue   |  65 ++++---
 src/components/cloud/vdc/ipsPrice.vue         |   2 +-
 src/components/invoice/invoiceItem.vue        |  82 ++++-----
 src/components/invoice/transactionItem.vue    |  40 ++---
 src/components/services/custom/index.vue      |  60 ++++---
 src/components/services/domains/order.vue     |   2 +-
 src/routes/cloud/vdcCloud.vue                 |   4 +-
 src/stores/addons.js                          |  19 +--
 src/stores/app.js                             |  16 ++
 src/stores/invoices.js                        |  86 +++++++---
 21 files changed, 585 insertions(+), 403 deletions(-)
 create mode 100644 src/components/cloud/create/customAddons.vue
 create mode 100644 src/components/cloud/modules/ovh cloud/panels/addons.vue

diff --git a/src/components/cloud/create/calculator.vue b/src/components/cloud/create/calculator.vue
index f6401a4b..6a296f0a 100644
--- a/src/components/cloud/create/calculator.vue
+++ b/src/components/cloud/create/calculator.vue
@@ -21,7 +21,7 @@
           justify="space-between"
           style="font-size: 1.1rem"
         >
-          <a-col> {{ capitalize($t(key)) }}{{ getAddonsValue(key) }}: </a-col>
+          <a-col> {{ capitalize(getAddonsTitle(key)) }}{{ getAddonsValue(key) }}: </a-col>
           <a-col> {{ +(price * currency.rate).toFixed(2) }} {{ currency.code }} </a-col>
         </a-row>
       </transition-group>
@@ -126,6 +126,7 @@ import { EditorContainer } from 'nocloud-ui'
 
 import { useCloudStore } from '@/stores/cloud.js'
 import useCloudPrices from '@/hooks/cloud/prices.js'
+import { useAddonsStore } from '@/stores/addons.js'
 import { useCurrency } from '@/hooks/utils'
 import { checkPayg } from '@/functions.js'
 
@@ -145,6 +146,7 @@ const emits = defineEmits(['update:tarification'])
 const i18n = useI18n()
 const { currency } = useCurrency()
 const cloudStore = useCloudStore()
+const addonsStore = useAddonsStore()
 
 const [product] = inject('useProduct', () => [])()
 const [options] = inject('useOptions', () => [])()
@@ -193,6 +195,14 @@ function getAddonsValue (key) {
   return isFinite(value) ? ` (${value} Gb)` : ''
 }
 
+function getAddonsTitle (key) {
+  if (cloudStore.plan.type === 'ione') {
+    return addonsStore.addons.find(({ uuid }) => uuid === key)?.title ?? key
+  } else {
+    return i18n.t(key)
+  }
+}
+
 async function createOrder () {
   const instance = { config: options.config, billingPlan: cloudStore.plan }
   const price = productFullPrice.value
diff --git a/src/components/cloud/create/customAddons.vue b/src/components/cloud/create/customAddons.vue
new file mode 100644
index 00000000..1731732a
--- /dev/null
+++ b/src/components/cloud/create/customAddons.vue
@@ -0,0 +1,159 @@
+<template>
+  <a-spin
+    v-if="isLoading"
+    style="display: block; margin: 0 auto"
+    :spinning="isLoading"
+    :tip="$t('loading')"
+  />
+
+  <a-flex v-else vertical gap="small" class="addons">
+    <a-card
+      v-for="(group, name) in groups"
+      :key="name"
+      :title="capitalize(name)"
+      style="width: 100%"
+    >
+      <a-card-grid
+        v-for="addon of group"
+        :key="addon.uuid"
+        class="card-item"
+        @click="changeAddons(addon)"
+      >
+        <div
+          class="order__slider-name"
+          style="grid-template-columns: 1fr auto auto; gap: 10px"
+        >
+          <span style="font-weight: 700; font-size: 16px">
+            {{ addon.title }}
+          </span>
+
+          <span style="font-weight: 700">
+            {{ getPeriod(product.period) }}
+          </span>
+
+          <a-checkbox :checked="options.addons.includes(addon.uuid)" />
+          <span style="grid-column: 1 / 4" v-html="addon.description ?? ''" />
+        </div>
+      </a-card-grid>
+    </a-card>
+  </a-flex>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue'
+import { useAddonsStore } from '@/stores/addons.js'
+import { useCloudStore } from '@/stores/cloud.js'
+import { useNotification, usePeriod } from '@/hooks/utils'
+
+const addonsStore = useAddonsStore()
+const cloudStore = useCloudStore()
+
+const { getPeriod } = usePeriod()
+const { openNotification } = useNotification()
+
+const [product] = inject('useProduct')()
+const [options, setOptions] = inject('useOptions')()
+const [price, setPrice] = inject('usePriceOVH')()
+
+const addons = computed(() =>
+  addonsStore.addons.filter(({ uuid }) =>
+    cloudStore.plan.addons.includes(uuid) || product.value.addons?.includes(uuid)
+  )
+)
+
+const groups = computed(() =>
+  Object.groupBy(addons.value, ({ group }) => group)
+)
+
+function changeAddons ({ uuid, periods }) {
+  if (options.addons.includes(uuid)) {
+    const value = { ...price.addons }
+
+    delete value[uuid]
+    setOptions('addons', options.addons.filter((addon) => addon !== uuid))
+    setPrice('addons', value)
+  } else {
+    setOptions('addons', [...options.addons, uuid])
+    setPrice('addons', {
+      ...price.addons, [uuid]: periods[product.value.period]
+    })
+  }
+}
+
+const isLoading = ref(false)
+
+async function fetch () {
+  isLoading.value = true
+  try {
+    await addonsStore.fetch({ filters: {} })
+
+    console.log(addonsStore.addons)
+  } catch (error) {
+    openNotification('error', {
+      message: error.response?.data?.message ?? error.message ?? error
+    })
+    console.error(error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+fetch()
+
+const theme = inject('theme')
+const backgroundStyle = computed(() =>
+  (theme.value) ? 'var(--bright_font)' : 'var(--bright_bg)'
+)
+</script>
+
+<script>
+export default { name: 'CustomAddons' }
+</script>
+
+<style scoped>
+.addons :deep(.ant-card-head) {
+  padding: 0 16px;
+  background: v-bind('backgroundStyle');
+}
+
+.addons :deep(.ant-card-body) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.addons :deep(.ant-card-loading-content) {
+  width: 100%;
+}
+
+.addons .card-item {
+  width: 100%;
+  padding: 12px 16px;
+  cursor: pointer;
+  border: 0 solid transparent;
+  background: v-bind('backgroundStyle');
+}
+
+.addons .order__slider-name {
+  display: grid;
+  justify-items: center;
+  gap: 5px;
+}
+
+.addons .order__slider-name :deep(.ant-checkbox) {
+  box-shadow: 0 0 5px var(--main);
+}
+
+.addons .order__slider-name img {
+  max-height: 65px;
+}
+
+.card-item .order__slider-name {
+  justify-items: start;
+}
+
+.card-item--active {
+  padding: 19px;
+  border: 5px solid var(--main);
+}
+</style>
diff --git a/src/components/cloud/create/ovhAddons.vue b/src/components/cloud/create/ovhAddons.vue
index 23bb67c4..df86caea 100644
--- a/src/components/cloud/create/ovhAddons.vue
+++ b/src/components/cloud/create/ovhAddons.vue
@@ -50,7 +50,7 @@ watch(() => props.addons, (value) => {
   if (!data.ovhConfig) return
   if (data.ovhConfig.addons.length < 1) return
 
-  options.config.addons.forEach((addon) => {
+  options.addons.forEach((addon) => {
     const keys = Object.keys(value)
     const key = keys.find((el) => addon.includes(el))
 
@@ -61,7 +61,7 @@ watch(() => props.addons, (value) => {
 
 function setAddon (code, addon, key) {
   const addonsPrices = JSON.parse(JSON.stringify(price.addons))
-  const addonsCodes = JSON.parse(JSON.stringify(options.config.addons))
+  const addonsCodes = JSON.parse(JSON.stringify(options.addons))
 
   if (code === '-1') {
     delete addonsPrices[key]
@@ -76,13 +76,20 @@ function setAddon (code, addon, key) {
   }
 
   setPrice('addons', addonsPrices)
-  setOptions('config.addons', addonsCodes)
+  setOptions('addons', addonsCodes)
 }
 
+// function selectorMode (addons) {
+//   const values = Object.values(addons)
+
+//   if (values.length < 1) return null
+//   return values.every(({ multiple }) => multiple) ? 'multiple' : null
+// }
+
 function addonName (addons) {
   const keys = Object.keys(addons)
 
-  return options.config.addons.find((el) => keys.includes(el)) ?? '-1'
+  return options.addons.find((el) => keys.includes(el)) ?? '-1'
 }
 
 function addonPrice ({ periods }) {
diff --git a/src/components/cloud/modules/ione/panels/addons.vue b/src/components/cloud/modules/ione/panels/addons.vue
index aaabb654..f2515eec 100644
--- a/src/components/cloud/modules/ione/panels/addons.vue
+++ b/src/components/cloud/modules/ione/panels/addons.vue
@@ -1,49 +1,9 @@
 <template>
-  <a-spin
-    v-if="isLoading"
-    style="display: block; margin: 0 auto"
-    :spinning="isLoading"
-    :tip="$t('loading')"
-  />
-
-  <a-flex v-else vertical gap="small" class="addons">
-    <a-card
-      v-for="(group, name) in groups"
-      :key="name"
-      :title="capitalize(name)"
-      style="width: 100%"
-    >
-      <a-card-grid
-        v-for="addon of group"
-        :key="addon.uuid"
-        class="card-item"
-        @click="changeAddons(addon)"
-      >
-        <div
-          class="order__slider-name"
-          style="grid-template-columns: 1fr auto auto; gap: 10px"
-        >
-          <span style="font-weight: 700; font-size: 16px">
-            {{ addon.title }}
-          </span>
-
-          <span style="font-weight: 700">
-            {{ getPeriod(product.period) }}
-          </span>
-
-          <a-checkbox :checked="options.addons.includes(addon.title)" />
-          <span style="grid-column: 1 / 4" v-html="addon.description ?? ''" />
-        </div>
-      </a-card-grid>
-    </a-card>
-  </a-flex>
+  <custom-addons />
 </template>
 
 <script setup>
-import { computed, inject, ref } from 'vue'
-import { useAddonsStore } from '@/stores/addons.js'
-import { useCloudStore } from '@/stores/cloud.js'
-import { useNotification, usePeriod } from '@/hooks/utils'
+import customAddons from '@/components/cloud/create/customAddons.vue'
 
 defineProps({
   mode: { type: String, required: true },
@@ -52,115 +12,8 @@ defineProps({
   productSize: { type: String, required: true },
   isFlavorsLoading: { type: Boolean, default: false }
 })
-
-const addonsStore = useAddonsStore()
-const cloudStore = useCloudStore()
-
-const { getPeriod } = usePeriod()
-const { openNotification } = useNotification()
-const [product] = inject('useProduct')()
-const [options, setOptions] = inject('useOptions')()
-const [price, setPrice] = inject('usePriceOVH')()
-
-const addons = computed(() =>
-  addonsStore.addons.filter(({ uuid }) =>
-    cloudStore.plan.addons.includes(uuid) || product.value.addons?.includes(uuid)
-  )
-)
-
-const groups = computed(() =>
-  Object.groupBy(addons.value, ({ group }) => group)
-)
-
-function changeAddons ({ title, periods }) {
-  if (options.addons.includes(title)) {
-    const value = { ...price.addons }
-
-    delete value[title]
-    setOptions('addons', options.addons.filter((addon) => addon !== title))
-    setPrice('addons', value)
-  } else {
-    setOptions('addons', [...options.addons, title])
-    setPrice('addons', {
-      ...price.addons, [title]: periods[product.value.period]
-    })
-  }
-}
-
-const isLoading = ref(false)
-
-async function fetch () {
-  isLoading.value = true
-  try {
-    await addonsStore.fetch({ filters: {} })
-
-    console.log(addonsStore.addons)
-  } catch (error) {
-    openNotification('error', {
-      message: error.response?.data?.message ?? error.message ?? error
-    })
-    console.error(error)
-  } finally {
-    isLoading.value = false
-  }
-}
-
-fetch()
-
-const theme = inject('theme')
-const backgroundStyle = computed(() =>
-  (theme.value) ? 'var(--bright_font)' : 'var(--bright_bg)'
-)
 </script>
 
 <script>
 export default { name: 'IoneAddonsPanel' }
 </script>
-
-<style scoped>
-.addons :deep(.ant-card-head) {
-  padding: 0 16px;
-  background: v-bind('backgroundStyle');
-}
-
-.addons :deep(.ant-card-body) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-
-.addons :deep(.ant-card-loading-content) {
-  width: 100%;
-}
-
-.addons .card-item {
-  width: 100%;
-  padding: 12px 16px;
-  cursor: pointer;
-  border: 0 solid transparent;
-  background: v-bind('backgroundStyle');
-}
-
-.addons .order__slider-name {
-  display: grid;
-  justify-items: center;
-  gap: 5px;
-}
-
-.addons .order__slider-name :deep(.ant-checkbox) {
-  box-shadow: 0 0 5px var(--main);
-}
-
-.addons .order__slider-name img {
-  max-height: 65px;
-}
-
-.card-item .order__slider-name {
-  justify-items: start;
-}
-
-.card-item--active {
-  padding: 19px;
-  border: 5px solid var(--main);
-}
-</style>
diff --git a/src/components/cloud/modules/keyweb/panels/addons.vue b/src/components/cloud/modules/keyweb/panels/addons.vue
index 5e866cfc..23d70557 100644
--- a/src/components/cloud/modules/keyweb/panels/addons.vue
+++ b/src/components/cloud/modules/keyweb/panels/addons.vue
@@ -9,6 +9,10 @@
         :value="getAddon(addon)"
         @update:value="setAddon($event, addon[$event], key)"
       >
+        <a-select-option v-if="!Object.values(addon).at(0)?.required" value="-1">
+          {{ $t('ip.none') }}
+        </a-select-option>
+
         <a-select-option v-for="(item, id) in addon" :key="id">
           {{ item.title }} ({{ item.price }} {{ currency.code }})
         </a-select-option>
@@ -20,10 +24,10 @@
 <script setup>
 import { computed, inject, nextTick, watch } from 'vue'
 import { useCloudStore } from '@/stores/cloud.js'
+import { useAddonsStore } from '@/stores/addons.js'
 import { useCurrency } from '@/hooks/utils'
-import { getTarification } from '@/functions.js'
 
-const props = defineProps({
+defineProps({
   mode: { type: String, required: true },
   productSize: { type: String, required: true },
   plans: { type: Array, default: () => [] },
@@ -32,63 +36,86 @@ const props = defineProps({
 })
 
 const cloudStore = useCloudStore()
+const addonsStore = useAddonsStore()
 const { currency } = useCurrency()
+
 const [product] = inject('useProduct', () => [])()
 const [options, setOptions] = inject('useOptions', () => [])()
 const [price, setPrice] = inject('usePriceOVH', () => [])()
 
 const addons = computed(() => {
-  const addons = { backup: {} }
-
-  Object.keys(addons).forEach((addon) => {
-    const { meta } = cloudStore.plan.products[product.value.key] ?? {}
-
-    meta?.addons?.forEach((addonKey) => {
-      const resource = cloudStore.plan.resources.find(({ key }) => addonKey === key) ?? {}
-      const { title, price, meta: { type } } = resource
-
-      const isEqualMode = getTarification(resource.period) === props.mode
-      const isInclude = resource.key.toLowerCase().includes(addon)
-
-      if (addonKey && isInclude && isEqualMode && resource.public) {
-        addons[addon][resource.key] = { price, title, type }
-      }
-    })
+  const result = { backup: {} }
+
+  const filtered = addonsStore.addons.filter(({ uuid }) =>
+    cloudStore.plan.addons.includes(uuid) || product.value.addons?.includes(uuid)
+  )
+
+  filtered.forEach(({ uuid, title, periods, meta, system, group, public: enabled }) => {
+    const isInclude = meta.key?.toJson().toLowerCase().includes('backup')
+    const isEqualGroup = group === cloudStore.plan.uuid
+    const key = (system && isInclude) ? 'backup' : group
+
+    if (!enabled || (!isEqualGroup && system)) return
+    if (system && !isInclude) return
+    if (!result[key]) result[key] = {}
+
+    result[key][uuid] = {
+      title,
+      required: system,
+      type: meta.type?.toJson() ?? 'custom',
+      price: periods[product.value.period]
+    }
   })
 
-  return addons
+  return result
 })
 
 watch(addons, setAddons)
 setAddons(addons.value)
 
+if (addonsStore.addons.length < 1) {
+  addonsStore.fetch()
+}
+
 async function setAddons (value) {
   await nextTick()
   Object.entries(value).forEach(([key, value]) => {
     const [code, addon] = Object.entries(value)[0] ?? []
 
-    if (!code) return
+    if (!code || !addon.required) return
     setAddon(code, addon, key)
   })
 }
 
 async function setAddon (code, addon, key) {
-  const addonsPrices = JSON.parse(JSON.stringify(price.addons))
+  const addonsPrices = { ...price.addons }
+  const addonsKeys = [...options.addons]
+  const keys = Object.keys(addons.value[key])
 
   if (code === '-1') {
+    addonsKeys.forEach((code, i) => {
+      if (keys.includes(code)) {
+        addonsKeys.splice(i, 1)
+
+        addon = addons.value[key][code]
+      }
+    })
+
     delete addonsPrices[key]
   } else {
     addonsPrices[key] = addon.price
+    addonsKeys.push(code)
   }
 
   setPrice('addons', addonsPrices)
+  setOptions('addons', addonsKeys)
+
+  if (addon.type === 'custom') return
   setOptions(`config.configurations.${addon.type}`, code.split('$')[0])
 }
 
 function getAddon (addons) {
-  const keys = Object.values(options.config.configurations ?? {})
-
-  return Object.keys(addons).find((item) => keys.find((key) => item.includes(key)))
+  return Object.keys(addons).find((key) => options.addons.includes(key))
 }
 </script>
 
diff --git a/src/components/cloud/modules/keyweb/panels/os.vue b/src/components/cloud/modules/keyweb/panels/os.vue
index b8d64360..d4efdc08 100644
--- a/src/components/cloud/modules/keyweb/panels/os.vue
+++ b/src/components/cloud/modules/keyweb/panels/os.vue
@@ -99,8 +99,9 @@ import { inject, ref, watch, nextTick } from 'vue'
 import { storeToRefs } from 'pinia'
 import passwordMeter from 'vue-simple-password-meter'
 
-import { getTarification } from '@/functions.js'
 import { useCloudStore } from '@/stores/cloud.js'
+import { useAddonsStore } from '@/stores/addons.js'
+
 import imagesList from '@/components/ui/images.vue'
 
 const props = defineProps({
@@ -112,30 +113,46 @@ const props = defineProps({
 })
 
 const cloudStore = useCloudStore()
+const addonsStore = useAddonsStore()
 const images = ref([])
 
 const { authData } = storeToRefs(useCloudStore())
+const [product] = inject('useProduct', () => [])()
 const [options, setOptions] = inject('useOptions', () => [])()
 const [price, setPrice] = inject('usePriceOVH', () => [])()
 
+watch(() => addonsStore.addons, setImages)
 watch(() => props.productSize, setImages)
 if (props.productSize) setImages()
 
 async function setImages () {
   await nextTick()
-  const values = Object.values(cloudStore.plan.products ?? {})
-  const product = values.find(({ title, period }) =>
-    title === props.productSize && getTarification(period) === props.mode
-  )
-
-  if (!product) return
-  product.meta.os.sort()
-  images.value = product.meta.os.map((el) => {
-    const { title, price, meta } = cloudStore.plan
-      .resources.find(({ key }) => key === el) ?? {}
 
-    return { key: el, type: meta.type, name: title, desc: title, price }
+  if (!product.value) return
+  const filtered = addonsStore.addons.filter(({ uuid }) =>
+    cloudStore.plan.addons.includes(uuid) || product.value.addons?.includes(uuid)
+  )
+  const list = []
+
+  filtered.forEach((item) => {
+    const { uuid, title, periods, meta, system, group, public: enabled } = item
+    const isEqualGroup = group === cloudStore.plan.uuid
+    const isIncluded = meta.type?.toJson().includes('OS')
+
+    if (title.toLowerCase().includes('disabled')) return
+    if (!system || !isIncluded) return
+    if (!enabled || !isEqualGroup) return
+
+    list.push({
+      key: uuid,
+      name: title,
+      desc: title,
+      type: meta.type?.toJson(),
+      price: periods[product.value.period]
+    })
   })
+
+  images.value = list
 }
 
 function setOS (item, index) {
diff --git a/src/components/cloud/modules/ovh cloud/panels/addons.vue b/src/components/cloud/modules/ovh cloud/panels/addons.vue
new file mode 100644
index 00000000..eebf411e
--- /dev/null
+++ b/src/components/cloud/modules/ovh cloud/panels/addons.vue	
@@ -0,0 +1,19 @@
+<template>
+  <custom-addons />
+</template>
+
+<script setup>
+import customAddons from '@/components/cloud/create/customAddons.vue'
+
+defineProps({
+  mode: { type: String, required: true },
+  plans: { type: Array, required: true },
+  products: { type: Array, required: true },
+  productSize: { type: String, required: true },
+  isFlavorsLoading: { type: Boolean, default: false }
+})
+</script>
+
+<script>
+export default { name: 'OvhCloudAddonsPanel' }
+</script>
diff --git a/src/components/cloud/modules/ovh cloud/panels/os.vue b/src/components/cloud/modules/ovh cloud/panels/os.vue
index 2e9cbec6..d9f52ac8 100644
--- a/src/components/cloud/modules/ovh cloud/panels/os.vue	
+++ b/src/components/cloud/modules/ovh cloud/panels/os.vue	
@@ -82,7 +82,8 @@ const plusIcon = defineAsyncComponent(
 
 const props = defineProps({
   mode: { type: String, required: true },
-  productSize: { type: String, required: true }
+  productSize: { type: String, required: true },
+  isFlavorsLoading: { type: Boolean, default: false }
 })
 
 watch(() => props.productSize, setImages)
diff --git a/src/components/cloud/modules/ovh cloud/panels/plan.vue b/src/components/cloud/modules/ovh cloud/panels/plan.vue
index 6f95aed0..9bea800a 100644
--- a/src/components/cloud/modules/ovh cloud/panels/plan.vue	
+++ b/src/components/cloud/modules/ovh cloud/panels/plan.vue	
@@ -66,8 +66,11 @@ import { useRoute } from 'vue-router'
 import { useCloudStore } from '@/stores/cloud.js'
 
 const props = defineProps({
+  mode: { type: String, required: true },
+  plans: { type: Array, required: true },
   products: { type: Array, required: true },
-  mode: { type: String, required: true }
+  productSize: { type: String, required: true },
+  isFlavorsLoading: { type: Boolean, default: false }
 })
 const emits = defineEmits(['update:periods', 'update:product-size'])
 
diff --git a/src/components/cloud/modules/ovh dedicated/panels/addons.vue b/src/components/cloud/modules/ovh dedicated/panels/addons.vue
index 18041c52..dc3aff96 100644
--- a/src/components/cloud/modules/ovh dedicated/panels/addons.vue	
+++ b/src/components/cloud/modules/ovh dedicated/panels/addons.vue	
@@ -5,50 +5,63 @@
 <script setup>
 import { computed, inject } from 'vue'
 import { useCloudStore } from '@/stores/cloud.js'
+import { useAddonsStore } from '@/stores/addons.js'
+
 import ovhAddons from '@/components/cloud/create/ovhAddons.vue'
 
-const props = defineProps({
+defineProps({
   mode: { type: String, required: true },
   products: { type: Array, required: true }
 })
 
 const cloudStore = useCloudStore()
-const [options] = inject('useOptions', () => [])()
+const addonsStore = useAddonsStore()
+const [product] = inject('useProduct', () => [])()
 
 const addons = computed(() => {
-  const addons = { 'Public network': {}, 'Private network': {} }
-
-  Object.keys(addons).forEach((addon) => {
-    cloudStore.plan.resources?.forEach(({ price, key, title }) => {
-      const { addons: addonsKeys } = props.products.find(
-        (el) => el.value === options.config.planCode
-      ) ?? {}
-
-      const [duration, , addonKey] = key.split(' ')
-      const period = {
-        price: { value: price },
-        duration,
-        pricingMode: (duration === 'P1Y') ? 'upfront12' : 'default'
-      }
-
-      const keys = (addonsKeys ?? {})[period.duration] ?? []
-      const isInclude = (keys?.some((el) => typeof el === 'string'))
-        ? keys?.includes(key)
-        : keys?.find(({ id }) => id.includes(key))?.id
-      const isEqualMode = period.pricingMode === props.mode
-      const isAddon = (addon === 'Public network')
-        ? addonKey.startsWith('bandwidth') || key.includes('traffic')
-        : key.includes('vrack')
-
-      if (title === '') title = addonKey
-      if (isInclude && isAddon && isEqualMode) {
-        addons[addon][addonKey] = { periods: [period], title }
-      }
-    })
+  const result = { 'Public network': {}, 'Private network': {} }
+
+  const filtered = addonsStore.addons.filter(({ uuid }) =>
+    cloudStore.plan.addons.includes(uuid) || product.value.addons?.includes(uuid)
+  )
+  console.log(filtered)
+
+  filtered.forEach(({ uuid, title, periods, meta, system, group, public: enabled }) => {
+    const addonGroups = ['bandwidth', 'traffic', 'vrack']
+    const addonGroup = addonGroups.find((key) =>
+      meta.key?.toJson().toLowerCase().includes(key)
+    )
+
+    let addon = (system && addonGroup) ? addonGroup : group
+    const isEqualGroup = group === cloudStore.plan.uuid
+    const key = meta.id?.toJson() ?? ''
+
+    const [duration, , addonKey] = key.split(' ') ?? []
+    const isPublic = addonKey?.startsWith('bandwidth') || key.includes('traffic')
+
+    if (isPublic) addon = 'Public network'
+    else if (key.includes('vrack')) addon = 'Private network'
+
+    if (!enabled || (!isEqualGroup && system)) return
+    if (system && !addonGroup) return
+    if (!result[addon]) result[addon] = {}
+
+    const period = {
+      price: { value: periods[product.value.period] },
+      duration,
+      pricingMode: (duration === 'P1Y') ? 'upfront12' : 'default'
+    }
+
+    if (title === '') title = addonKey
+    result[addon][uuid] = { periods: [period], title, multiple: !system }
   })
 
-  return addons
+  return result
 })
+
+if (addonsStore.addons.length < 1) {
+  addonsStore.fetch()
+}
 </script>
 
 <script>
diff --git a/src/components/cloud/modules/ovh dedicated/panels/plan.vue b/src/components/cloud/modules/ovh dedicated/panels/plan.vue
index 955df2d5..9a80e59b 100644
--- a/src/components/cloud/modules/ovh dedicated/panels/plan.vue	
+++ b/src/components/cloud/modules/ovh dedicated/panels/plan.vue	
@@ -124,7 +124,10 @@
 import { getCurrentInstance, watch, inject, computed, ref, nextTick, defineAsyncComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+
 import { useCloudStore } from '@/stores/cloud.js'
+import { useAddonsStore } from '@/stores/addons.js'
+
 import { useCurrency } from '@/hooks/utils'
 import { getDisk } from '@/functions.js'
 
@@ -148,7 +151,9 @@ const app = getCurrentInstance().appContext.config.globalProperties
 const route = useRoute()
 const i18n = useI18n()
 const cloudStore = useCloudStore()
+const addonsStore = useAddonsStore()
 
+const [productItem] = inject('useProduct', () => [])()
 const [options, setOptions] = inject('useOptions', () => [])()
 const [price, setPrice] = inject('usePriceOVH', () => [])()
 const { currency } = useCurrency()
@@ -184,13 +189,13 @@ const filteredProducts = computed(() =>
   })
 )
 
-watch(filteredProducts, (value) => {
-  if (value.length < 1) {
+watch([filteredProducts, () => addonsStore.addons], ([products, addons]) => {
+  if (products.length < 1 || addons.length < 1) {
     resetData()
     return
   }
 
-  value.sort((a, b) =>
+  products.sort((a, b) =>
     a.periods[0].price.value - b.periods[0].price.value
   )
 
@@ -206,7 +211,7 @@ watch(filteredProducts, (value) => {
   }
 
   nextTick(() => {
-    product.value = value[1]?.value ?? value[0]?.value
+    product.value = products[1]?.value ?? products[0]?.value
   })
 })
 
@@ -308,12 +313,16 @@ async function setResource (resource, changeTarifs = true) {
   const prod = Object.entries(cloudStore.plan.products)
     .find(([key]) => key.includes(value))
 
-  const { meta: { addons } } = cloudStore.plan
-    .products[`${duration} ${value}`] ?? prod[1]
+  const { addons } = cloudStore.plan.products[`${duration} ${value}`] ?? prod[1]
+
+  let addon = addonsStore.addons.find(({ uuid, meta }) => {
+    const isIncluded = addons?.includes(uuid)
+    const addonId = meta.id?.toJson() ?? ''
+
+    return isIncluded && addonId.includes(resource.value)
+  })
+  let addonKey = addon?.meta.id?.toJson()
 
-  let addonKey = (addons?.some((el) => typeof el === 'string'))
-    ? addons?.find((id) => id.includes(resource.value))
-    : addons?.find(({ id }) => id.includes(resource.value))?.id
   let item = periods[0]
   const tarifs = []
 
@@ -321,13 +330,14 @@ async function setResource (resource, changeTarifs = true) {
     setOptions('ram.size', parseInt(addonKey?.split(' ').at(-1).split('-')[1] ?? 0))
   }
   if (resource.key === 'disk') {
-    addonKey = addons?.find((id) => {
-      if (typeof id !== 'string') id = id.id
-      const isDisk = id.includes('raid')
+    addon = addonsStore.addons.find(({ uuid, meta }) => {
+      const isIncluded = addons?.includes(uuid)
+      const addonId = meta.id?.toJson() ?? ''
+      const isDisk = addonId.includes('raid')
 
-      return isDisk && (getDisk(id) * 1024) === resource.value
+      return isIncluded && isDisk && (getDisk(addonId) * 1024) === resource.value
     })
-    if (addonKey?.id) addonKey = addonKey.id
+    addonKey = addon?.meta.id?.toJson()
 
     setOptions('disk.size', getDisk(addonKey) * 1024)
     if (addonKey?.includes('hybrid')) setOptions('disk.type', 'SSD + HDD')
@@ -354,8 +364,7 @@ async function setResource (resource, changeTarifs = true) {
   setPrice('value', item.price.value)
   setPrice('addons', {
     ...price.addons,
-    [resource.key]: cloudStore.plan.resources
-      .find((el) => el.key.includes(addonKey))?.price ?? 0
+    [resource.key]: addon?.periods[productItem.value.period] ?? 0
   })
 
   setOptions('config.planCode', value)
@@ -375,23 +384,23 @@ function setResources (changeTarifs = true) {
 
 function getResources (ram, disk, value) {
   const entries = Object.entries(cloudStore.plan.products)
-  const { meta: { addons } } = entries.find(([key]) => key.includes(value))[1]
+  const { addons } = entries.find(([key]) => key.includes(value))[1]
 
   addons?.forEach((id) => {
-    if (typeof id !== 'string') id = id.id
-    const resource = cloudStore.plan.resources.find(({ key }) => key === id)
+    const resource = addonsStore.addons.find(({ uuid }) => uuid === id)
+    const addonKey = resource?.meta.id?.toJson()
 
     if (!resource || !resource?.public) return
-    if (id.includes('ram')) {
-      const value = parseInt(id.split(' ').at(-1).split('-')[1])
+    if (addonKey.includes('ram')) {
+      const value = parseInt(addonKey.split(' ').at(-1).split('-')[1])
       const i = ram.findIndex((item) => item.value === value)
 
       if (i !== -1) return
       ram.push({ value, label: resource.title, price: resource.price })
     }
 
-    if (id.includes('raid')) {
-      const value = getDisk(id)
+    if (addonKey.includes('raid')) {
+      const value = getDisk(addonKey)
       const i = disk.findIndex((item) => item.value === value)
 
       if (i !== -1) return
diff --git a/src/components/cloud/modules/ovh vps/panels/addons.vue b/src/components/cloud/modules/ovh vps/panels/addons.vue
index 55909042..0451f4de 100644
--- a/src/components/cloud/modules/ovh vps/panels/addons.vue	
+++ b/src/components/cloud/modules/ovh vps/panels/addons.vue	
@@ -3,48 +3,57 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { useCloudStore } from '@/stores/cloud.js'
+import { useAddonsStore } from '@/stores/addons.js'
+
 import ovhAddons from '@/components/cloud/create/ovhAddons.vue'
 
-const props = defineProps({
+defineProps({
   mode: { type: String, required: true },
   productSize: { type: String, required: true },
   products: { type: Array, required: true }
 })
 
 const cloudStore = useCloudStore()
+const addonsStore = useAddonsStore()
+const [product] = inject('useProduct', () => [])()
 
 const addons = computed(() => {
-  const addons = { backup: {}, snapshot: {}, disk: {} }
-
-  Object.keys(addons).forEach((addon) => {
-    cloudStore.plan.resources?.forEach(({ price, key, title, public: pub }) => {
-      if (!pub) return
-
-      const { addons: addonsKeys } = props.products.find(
-        (el) => el.title === props.productSize
-      ) ?? { addons: {} }
-
-      const [duration, addonKey] = key.split(' ')
-      const period = {
-        price: { value: price },
-        duration,
-        pricingMode: (duration === 'P1Y') ? 'upfront12' : 'default'
-      }
-
-      const isInclude = addonsKeys[duration]?.includes(key)
-      const isEqualMode = period.pricingMode === props.mode
-
-      if (title === '') title = addonKey
-      if (isInclude && key.includes(addon) && isEqualMode) {
-        addons[addon][addonKey] = { periods: [period], title }
-      }
-    })
+  const result = { backup: {}, snapshot: {}, disk: {} }
+
+  const filtered = addonsStore.addons.filter(({ uuid }) =>
+    cloudStore.plan.addons.includes(uuid) || product.value.addons?.includes(uuid)
+  )
+
+  filtered.forEach(({ uuid, title, periods, meta, system, group, public: enabled }) => {
+    const addonGroups = ['backup', 'snapshot', 'disk']
+    const addonGroup = addonGroups.find((key) =>
+      meta.key?.toJson().toLowerCase().includes(key)
+    )
+    const isEqualGroup = group === cloudStore.plan.uuid
+    const key = (system && addonGroup) ? addonGroup : group
+
+    if (!enabled || (!isEqualGroup && system)) return
+    if (system && !addonGroup) return
+    if (!result[key]) result[key] = {}
+
+    const [duration] = meta.key?.toJson().split(' ') ?? []
+    const period = {
+      price: { value: periods[product.value.period] },
+      duration,
+      pricingMode: (duration === 'P1Y') ? 'upfront12' : 'default'
+    }
+
+    result[key][uuid] = { title, periods: [period], multiple: !system }
   })
 
-  return addons
+  return result
 })
+
+if (addonsStore.addons.length < 1) {
+  addonsStore.fetch()
+}
 </script>
 
 <script>
diff --git a/src/components/cloud/vdc/ipsPrice.vue b/src/components/cloud/vdc/ipsPrice.vue
index 1c0e1aae..d89be7a3 100644
--- a/src/components/cloud/vdc/ipsPrice.vue
+++ b/src/components/cloud/vdc/ipsPrice.vue
@@ -52,7 +52,7 @@ const price = computed(() => {
       ({ key }) => key.includes('ips')
     )
 
-    resources.forEach(({ price, period }) => {
+    resources.forEach(({ price = 0, period = 2592000 }) => {
       const k = period / 2592000
 
       result.push(+(price / k).toFixed(2))
diff --git a/src/components/invoice/invoiceItem.vue b/src/components/invoice/invoiceItem.vue
index 70bffbc7..e26a907d 100644
--- a/src/components/invoice/invoiceItem.vue
+++ b/src/components/invoice/invoiceItem.vue
@@ -40,7 +40,7 @@
         :title="$t('Payment will be made from your account balance.')"
         :ok-text="$t('Yes')"
         :cancel-text="$t('Cancel')"
-        @confirm="createInvoiceByBalance(invoice.id)"
+        @confirm="createInvoiceByBalance"
       >
         <div class="invoice__btn" style="margin-left: auto" @click.stop>
           <span class="invoice__pay invoice__balance-pay">
@@ -53,7 +53,7 @@
       <div
         v-if="invoice.status === 'Unpaid'"
         class="invoice__btn"
-        @click.stop="createInvoice(invoice.id)"
+        @click.stop="paidInvoice"
       >
         <span class="invoice__pay">
           {{ $t('Pay').toLowerCase() }}
@@ -99,15 +99,15 @@ const isBalanceLoading = ref(false)
 const currencyCode = ref('')
 
 const currency = computed(() => {
-  const code = authStore.userdata.currency ?? 'USD'
+  const code = authStore.userdata.currency.title ?? 'USD'
   if (code === currencyCode.value) return { code, rate: 1 }
 
   const { rate } = currenciesStore.currencies.find((el) =>
-    el.from === code && el.to === currencyCode.value
+    el.from.title === code && el.to.title === currencyCode.value
   ) ?? {}
 
   const { rate: reverseRate } = currenciesStore.currencies.find(
-    (el) => el.to === code && el.from === currencyCode.value
+    (el) => el.to.title === code && el.from.title === currencyCode.value
   ) ?? { rate: 1 }
 
   return { code, rate: (rate) || 1 / reverseRate }
@@ -141,46 +141,53 @@ const total = computed(() => {
   return Math.abs((total * rate)).toFixed(2)
 })
 
-async function createInvoice (id) {
+async function paidInvoice () {
   isLoading.value = true
-  if (props.invoice.status === 'Unpaid') {
-    getPaytoken(id)
-    return
-  }
-
-  if (!props.invoice.meta) {
-    getPaytoken(id)
-    return
-  }
-
   try {
-    const type = (props.invoice.total > 0) ? 'debit' : 'top-up'
-
-    const { invoiceid } = api.get(authStore.baseURL, {
-      params: {
-        run: 'create_inv',
-        invoice_id: id,
-        product: props.invoice.meta.description ?? props.invoice.service,
-        invoice_type: props.invoice.meta.invoiceType ?? type,
-        sum: total.value
-      }
-    })
+    if (props.invoice.type) {
+      await invoicesStore.updateStatus(props.invoice.id, 'PAID')
 
-    openNotification('success', { message: i18n.t('Done') })
-    getPaytoken(invoiceid)
+      openNotification('success', { message: i18n.t('Done') })
+    } else {
+      await createInvoice()
+    }
   } catch (error) {
     openNotification('error', {
       message: error.response?.data?.message ?? error.message ?? error
     })
     console.error(error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function createInvoice () {
+  if (props.invoice.status === 'Unpaid' || !props.invoice.meta) {
+    getPaytoken(props.invoice.id)
+    return
   }
+
+  const type = (props.invoice.total > 0) ? 'debit' : 'top-up'
+
+  const { invoiceid } = api.get(authStore.baseURL, {
+    params: {
+      run: 'create_inv',
+      invoice_id: props.invoice.id,
+      product: props.invoice.meta.description ?? props.invoice.service,
+      invoice_type: props.invoice.meta.invoiceType ?? type,
+      sum: total.value
+    }
+  })
+
+  openNotification('success', { message: i18n.t('Done') })
+  await getPaytoken(invoiceid)
 }
 
-async function createInvoiceByBalance (id) {
+async function createInvoiceByBalance () {
   isBalanceLoading.value = true
   try {
     await api.get(authStore.baseURL, {
-      params: { run: 'balance_paid', invoice_id: id }
+      params: { run: 'balance_paid', invoice_id: props.invoice.id }
     })
 
     await invoicesStore.fetch(true)
@@ -196,15 +203,11 @@ async function createInvoiceByBalance (id) {
 }
 
 async function getPaytoken (id) {
-  try {
-    const response = await api.get(authStore.baseURL, {
-      params: { run: 'get_pay_token', invoice_id: id }
-    })
+  const response = await api.get(authStore.baseURL, {
+    params: { run: 'get_pay_token', invoice_id: id }
+  })
 
-    window.location.href = response
-  } finally {
-    isLoading.value = false
-  }
+  window.location.href = response
 }
 
 if (props.invoice.currencycode === 'NCU') {
@@ -225,7 +228,6 @@ export default { name: 'InvoiceView' }
   box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.05);
   border-radius: 15px;
   background-color: var(--bright_font);
-  color: inherit;
   cursor: pointer;
 }
 
diff --git a/src/components/invoice/transactionItem.vue b/src/components/invoice/transactionItem.vue
index d00b6bad..84eaf534 100644
--- a/src/components/invoice/transactionItem.vue
+++ b/src/components/invoice/transactionItem.vue
@@ -6,7 +6,7 @@
   >
     <div class="invoice__middle">
       <div class="invoice__cost" :style="{ color: costColor }">
-        {{ -(invoice.total * currency.rate).toFixed(2) }} {{ currency.code }}
+        {{ -(invoice.cost * currency.rate).toFixed(2) }} {{ currency.code }}
       </div>
       <div class="invoice__date-item invoice__invDate">
         <div class="invoice__date-title">
@@ -50,50 +50,41 @@
 <script setup>
 import { computed, defineAsyncComponent } from 'vue'
 import { useRouter } from 'vue-router'
-import config from '@/appconfig.js'
 
 import { useAppStore } from '@/stores/app.js'
-import { useAuthStore } from '@/stores/auth.js'
-import { useCurrenciesStore } from '@/stores/currencies.js'
 import { useInstancesStore } from '@/stores/instances.js'
+import { useCurrency } from '@/hooks/utils'
+import config from '@/appconfig.js'
+
+const rightIcon = defineAsyncComponent(
+  () => import('@ant-design/icons-vue/RightOutlined')
+)
 
 const props = defineProps({
   invoice: { type: Object, required: true }
 })
 
 const router = useRouter()
-
+const { currency: baseCurrency } = useCurrency()
 const { toDate } = useAppStore()
-const authStore = useAuthStore()
-const currenciesStore = useCurrenciesStore()
 const instancesStore = useInstancesStore()
 
-const rightIcon = defineAsyncComponent(
-  () => import('@ant-design/icons-vue/RightOutlined')
+const currency = computed(() =>
+  (props.invoice.currency)
+    ? { code: props.invoice.currency?.title, rate: 1 }
+    : baseCurrency.value
 )
+
 const costColor = computed(() => {
-  if (props.invoice?.total < 0) {
+  if (props.invoice?.cost < 0) {
     return config.colors.success
-  } else if (props.invoice?.total > 0) {
+  } else if (props.invoice?.cost > 0) {
     return config.colors.err
   } else {
     return null
   }
 })
 
-const currency = computed(() => {
-  const code = authStore.userdata.currency ?? 'USD'
-  const { rate } = currenciesStore.currencies.find((el) =>
-    el.to === code && el.from === props.invoice.currency
-  ) ?? {}
-
-  const { rate: reverseRate } = currenciesStore.currencies.find(
-    (el) => el.from === code && el.to === props.invoice.currency
-  ) ?? { rate: 1 }
-
-  return { code, rate: (rate) || 1 / reverseRate }
-})
-
 const isClickable = computed(() => {
   const isRecordsExist = props.invoice.records?.length > 0
   const isMessageExist = props.invoice.meta.description
@@ -126,7 +117,6 @@ export default { name: 'SingleInvoice' }
   box-shadow: 5px 8px 10px rgba(0, 0, 0, 0.05);
   border-radius: 15px;
   background-color: var(--bright_font);
-  color: rgba(0, 0, 0, 0.7);
   cursor: pointer;
 }
 
diff --git a/src/components/services/custom/index.vue b/src/components/services/custom/index.vue
index 9019d9e8..fbdc1e6e 100644
--- a/src/components/services/custom/index.vue
+++ b/src/components/services/custom/index.vue
@@ -92,7 +92,7 @@
           </transition>
 
           <a-card
-            v-if="fetchLoading || getProducts.addons && getProducts.addons.length > 0"
+            v-if="fetchLoading || filteredAddons.length > 0"
             style="margin-top: 15px"
             :title="`${$t('Addons')} (${$t('choose addons you want')})`"
             :loading="fetchLoading"
@@ -102,10 +102,10 @@
             </div>
             <template v-else>
               <a-card-grid
-                v-for="addon of getProducts.addons"
-                :key="addon.id"
+                v-for="addon of filteredAddons"
+                :key="addon.uuid"
                 class="card-item"
-                @click="changeAddons(addon.key)"
+                @click="changeAddons(addon.uuid)"
               >
                 <div
                   class="order__slider-name"
@@ -116,11 +116,11 @@
                   </span>
 
                   <span style="font-weight: 700">
-                    {{ getPeriod(addon.period) }}
+                    {{ getPeriod(getProducts.period) }}
                   </span>
 
-                  <a-checkbox :checked="options.addons.includes(addon.key)" />
-                  <span style="grid-column: 1 / 4" v-html="addon.meta?.description ?? ''" />
+                  <a-checkbox :checked="options.addons.includes(addon.uuid)" />
+                  <span style="grid-column: 1 / 4" v-html="addon.description ?? ''" />
                 </div>
               </a-card-grid>
             </template>
@@ -199,7 +199,7 @@
           <a-col style="font-size: 1.5rem">
             <transition name="textchange" mode="out-in">
               <template v-if="!fetchLoading">
-                {{ getProducts.price ?? 0 }} {{ currency.code }}
+                {{ (getProducts.price ?? 0) + addonsPrice }} {{ currency.code }}
               </template>
               <div v-else class="loadingLine loadingLine--total" />
             </transition>
@@ -241,6 +241,7 @@ import { checkPayg, createInvoice } from '@/functions.js'
 import { useAppStore } from '@/stores/app.js'
 import { useAuthStore } from '@/stores/auth.js'
 import { useCurrenciesStore } from '@/stores/currencies.js'
+import { useAddonsStore } from '@/stores/addons.js'
 
 import { useSpStore } from '@/stores/sp.js'
 import { usePlansStore } from '@/stores/plans.js'
@@ -287,6 +288,7 @@ export default {
     ...mapState(useAppStore, ['onLogin']),
     ...mapState(useAuthStore, ['isLogged', 'userdata', 'fetchBillingData', 'baseURL']),
     ...mapState(useCurrenciesStore, ['currencies', 'fetchCurrencies']),
+    ...mapState(useAddonsStore, { addons: 'addons', fetchAddons: 'fetch' }),
     getProducts () {
       if (Object.keys(this.products).length === 0) return 'NAN'
       if ((this.options.size || true) === true) return 'NAN'
@@ -359,6 +361,19 @@ export default {
 
       return result
     },
+    filteredAddons () {
+      const product = this.products[this.options.size]
+      const plan = this.plans.find(({ uuid }) => uuid === this.plan)
+
+      return this.addons.filter(({ uuid }) =>
+        plan.addons.includes(uuid) || product.addons.includes(uuid)
+      )
+    },
+    addonsPrice () {
+      return this.options.addons.reduce((result, uuid) =>
+        result + (this.getAddon(uuid)?.price ?? 0), 0
+      )
+    },
     typesOptions () {
       const types = []
 
@@ -530,8 +545,8 @@ export default {
       if (!keys.includes(value)) this.changePeriods(value)
       this.options.addons = []
 
-      this.getProducts.addons.forEach(({ meta, key }) => {
-        if (meta.autoEnable) this.options.addons.push(key)
+      this.filteredAddons.forEach(({ meta, uuid }) => {
+        if (meta.autoEnable) this.options.addons.push(uuid)
       })
     },
     'options.period' (value) {
@@ -574,6 +589,10 @@ export default {
       this.spStore.fetchShowcases(!this.isLogged)
     }
 
+    if (this.addons.length < 1) {
+      this.fetchAddons()
+    }
+
     Promise.all(promises).catch((err) => {
       const message = err.response?.data?.message ?? err.message ?? err
 
@@ -655,17 +674,16 @@ export default {
         this.options.period = this.periods[0]
       }
     },
-    changeAddons (key) {
-      if (this.options.addons.includes(key)) {
-        this.options.addons = this.options.addons.filter((addon) => addon !== key)
+    changeAddons (uuid) {
+      if (this.options.addons.includes(uuid)) {
+        this.options.addons = this.options.addons.filter((addon) => addon !== uuid)
       } else {
-        this.options.addons.push(key)
+        this.options.addons.push(uuid)
       }
     },
     getAddon (addon) {
-      const item = this.getProducts.addons.find(({ key }) => key === addon)
-      const period = item.period / this.getProducts.period
-      const price = item.price * ((period >= 1) ? period : 1 / period)
+      const item = this.filteredAddons.find(({ uuid }) => uuid === addon)
+      const price = item.periods[this.getProducts.period]
 
       return {
         ...item,
@@ -693,13 +711,11 @@ export default {
       const plan = this.plans.find(({ uuid }) => uuid === this.plan)
 
       const instances = [{
-        config: {
-          addons: this.options.addons,
-          auto_start: plan.meta.auto_start
-        },
+        config: { auto_start: plan.meta.auto_start },
         title: this.getProducts.title,
         billing_plan: { uuid: this.plan },
-        product: this.options.size
+        product: this.options.size,
+        addons: this.options.addons
       }]
       const newGroup = {
         title: this.userdata.title + Date.now(),
diff --git a/src/components/services/domains/order.vue b/src/components/services/domains/order.vue
index aa0173f2..8dc9469b 100644
--- a/src/components/services/domains/order.vue
+++ b/src/components/services/domains/order.vue
@@ -697,7 +697,7 @@ export default {
       this.modal.confirmCreate = true
     },
     getProducts () {
-      const prices = { suffix: this.userdata.currency }
+      const prices = { suffix: this.userdata.currency.title }
 
       if (this.onCart.length === 0) {
         return {
diff --git a/src/routes/cloud/vdcCloud.vue b/src/routes/cloud/vdcCloud.vue
index cd2faea2..782483df 100644
--- a/src/routes/cloud/vdcCloud.vue
+++ b/src/routes/cloud/vdcCloud.vue
@@ -88,6 +88,7 @@ const price = computed(() => {
 
     const { price = 0, period = 2592000 } = billingPlan.products[product] ?? {}
 
+    if (+period === 0) return 0
     return price / (period / 2592000)
   })
 
@@ -99,8 +100,9 @@ const price = computed(() => {
       switch (key) {
         case `drive_${type}`: {
           const size = inst.resources.drive_size / 1024
+          const value = price / (period / 2592000) * size
 
-          result.push(price / (period / 2592000) * size)
+          if (value) result.push(value)
           break
         }
 
diff --git a/src/stores/addons.js b/src/stores/addons.js
index 1b20dcd0..d8b1a2cf 100644
--- a/src/stores/addons.js
+++ b/src/stores/addons.js
@@ -1,27 +1,14 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import { createPromiseClient } from '@connectrpc/connect'
-import { createConnectTransport } from '@connectrpc/connect-web'
 
 import { AddonsService } from 'nocloud-proto/proto/es/billing/billing_connect'
 import { ListAddonsRequest } from 'nocloud-proto/proto/es/billing/addons/addons_pb'
-import { useAuthStore } from './auth.js'
+import { useAppStore } from './app.js'
 
 export const useAddonsStore = defineStore('addons', () => {
-  const authStore = useAuthStore()
-
-  const transport = createConnectTransport({
-    baseUrl: (VUE_APP_BASE_URL.endsWith('/') ? VUE_APP_BASE_URL : `${VUE_APP_BASE_URL}/`),
-    useBinaryFormat: import.meta.env.PROD,
-    interceptors: [
-      (next) => (req) => {
-        req.header.set('Authorization', `Bearer ${authStore.token}`)
-        return next(req)
-      }
-    ]
-  })
-  const addonsApi = createPromiseClient(AddonsService, transport)
-
+  const app = useAppStore()
+  const addonsApi = createPromiseClient(AddonsService, app.transport)
   const addons = ref([])
 
   return {
diff --git a/src/stores/app.js b/src/stores/app.js
index 4e31e580..5e9f8f77 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -2,6 +2,9 @@ import { computed, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { defineStore } from 'pinia'
 import { AppstoreOutlined, DatabaseFilled, FundOutlined, MessageOutlined, SettingFilled } from '@ant-design/icons-vue'
+import { createConnectTransport } from '@connectrpc/connect-web'
+
+import { useAuthStore } from './auth.js'
 import config from '@/appconfig.js'
 /*
 ROUTER WORKS THERE!
@@ -9,6 +12,18 @@ ROUTER WORKS THERE!
 export const useAppStore = defineStore('app', () => {
   const router = useRouter()
   const route = useRoute()
+  const auth = useAuthStore()
+
+  const transport = createConnectTransport({
+    baseUrl: (VUE_APP_BASE_URL.endsWith('/') ? VUE_APP_BASE_URL : `${VUE_APP_BASE_URL}/`),
+    useBinaryFormat: import.meta.env.PROD,
+    interceptors: [
+      (next) => (req) => {
+        req.header.set('Authorization', `Bearer ${auth.token}`)
+        return next(req)
+      }
+    ]
+  })
 
   const notification = ref(false)
   const activeTabName = ref('')
@@ -81,6 +96,7 @@ export const useAppStore = defineStore('app', () => {
     isMaintananceMode,
     isButtonsVisible,
     domainInfo,
+    transport,
 
     setTabByName (value) {
       if (['root', 'openVDC'].includes(value)) value = 'services'
diff --git a/src/stores/invoices.js b/src/stores/invoices.js
index c728d3a3..03336138 100644
--- a/src/stores/invoices.js
+++ b/src/stores/invoices.js
@@ -1,12 +1,21 @@
-import { computed, ref } from 'vue'
+import { capitalize, computed, ref } from 'vue'
 import { defineStore } from 'pinia'
+
+import { createPromiseClient } from '@connectrpc/connect'
+import { BillingService } from 'nocloud-proto/proto/es/billing/billing_connect'
+import { BillingStatus, GetInvoicesRequest, UpdateInvoiceStatusRequest } from 'nocloud-proto/proto/es/billing/billing_pb'
+
+import { useAppStore } from './app.js'
 import { useAuthStore } from './auth.js'
+
 import { toDate } from '@/functions.js'
 import config from '@/appconfig.js'
 import api from '@/api.js'
 
 export const useInvoicesStore = defineStore('invoices', () => {
+  const app = useAppStore()
   const auth = useAuthStore()
+  const invoicesApi = createPromiseClient(BillingService, app.transport)
 
   const isLoading = ref(false)
   const invoices = ref([])
@@ -21,7 +30,7 @@ export const useInvoicesStore = defineStore('invoices', () => {
       filtered = invoices.value.filter(ticket => filter.value.includes(ticket.status))
     }
 
-    return filtered.sort((a, b) => {
+    return filtered.toSorted((a, b) => {
       const dictionary = {
         Cancelled: 1,
         Paid: 1,
@@ -38,51 +47,84 @@ export const useInvoicesStore = defineStore('invoices', () => {
     })
   })
 
+  function toInvoice (transaction) {
+    const status = capitalize(BillingStatus[transaction.status].toLowerCase())
+
+    return {
+      id: transaction.number,
+      date: toDate(Number(transaction.created), '-', false, true),
+      duedate: toDate(Number(transaction.deadline), '-', false, true),
+      total: transaction.total,
+      status,
+      credit: 0,
+      service: transaction.service,
+      currencycode: transaction.currency,
+      meta: transaction.meta,
+      type: transaction.type
+    }
+  }
+
   return {
     invoices,
     isLoading,
     filter,
     getInvoices,
 
-    async fetch (silent) {
+    async fetch (silent, page = 1, limit = 10) {
       try {
         if (!config.whmcsSiteUrl) return
         if (!silent) isLoading.value = true
-        const account = auth.userdata.uuid
+
         const promises = [
           api.get(auth.baseURL, { params: { run: 'get_invoices' } }),
-          api.transactions.list({ account, type: 'invoice' })
+          this.fetchNcInvoices({ field: 'created', sort: 'DESC', page, limit })
         ]
-        const response = await Promise.all(promises)
 
-        const result = response[0]?.invoices?.invoice ?? []
+        const response = await Promise.allSettled(promises)
+        const result = response[0].value?.invoices?.invoice ?? []
 
-        response[1].pool.forEach((el) => {
+        response[1].value.pool.forEach((el) => {
           if (el.meta.invoiceCreate) return
-          result.push({
-            id: el.uuid,
-            date: toDate(el.proc, '-', false, true),
-            duedate: toDate(el.exec, '-', false, true),
-            total: el.total,
-            status: 'Unpaid',
-            credit: 0,
-            service: el.service,
-            currencycode: el.currency,
-            meta: el.meta
-          })
+          result.push(toInvoice(el))
         })
 
         result.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
-        if (!response[0]?.ERROR) invoices.value = result
-        else return response[0].ERROR
+        invoices.value = result
 
-        return result
+        if (!response[0]?.ERROR) return result
+        else return response[0].ERROR
       } catch (error) {
         console.error(error)
         throw error
       } finally {
         isLoading.value = false
       }
+    },
+
+    async fetchNcInvoices (params) {
+      try {
+        const response = await invoicesApi.getInvoices(
+          new GetInvoicesRequest(params)
+        )
+
+        return response
+      } catch (error) {
+        console.error(error)
+        throw error
+      }
+    },
+
+    async updateStatus (uuid, status) {
+      try {
+        const response = await invoicesApi.updateInvoiceStatus(
+          new UpdateInvoiceStatusRequest({ uuid, status: BillingStatus[status] })
+        )
+
+        return response
+      } catch (error) {
+        console.error(error)
+        throw error
+      }
     }
   }
 })