nocloud invoices

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

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>

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 }) {