feat/invoice and payment preferences

src/components/settings/hostingPreferences/InvoicesDueRow.vue

@@ -26,9 +26,8 @@ function onDueChange(value: number | string): void {
     <span>{{ $t('hosting_preferences.invoices.due.part_one') }}</span>
 
     <TimeDropdownSelect
-      is-disabled
       :value="props.data.due.period"
-      :options="['N/A', 7, 30]"
+      :options="[7, 14, 28]"
       @update:selected-value="onDueChange"
     />
 

src/components/settings/hostingPreferences/InvoicesFrequencyRow.vue

@@ -35,16 +35,14 @@ function onFrequencyAmountChange(value: number): void {
     <span>{{ $t('hosting_preferences.invoices.frequency.part_one') }}</span>
 
     <TimeDropdownSelect
-      is-disabled
       :value="props.data.frequency.period"
-      :options="['N/A', 7, 30]"
+      :options="[7, 15, 30]"
       @update:selected-value="onFrequencyPeriodChange"
     />
 
     <span>{{ $t('hosting_preferences.invoices.frequency.part_two') }}</span>
 
     <BaseEditableInput
-      is-disabled
       :value="formatCurrency(Number(props.data.frequency.amount), 0)"
       unit="HF"
       class="invoices-frequency-section__amount"

src/components/settings/hostingPreferences/InvoicesSection.vue

@@ -12,11 +12,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:frequency', 'update:due'])
 
-function updateFrequency(value: number | string): void {
+function updateFrequency(value: number): void {
   emit('update:frequency', value)
 }
 
-function updateDue(value) {
+function updateDue(value: number) {
   emit('update:due', value)
 }
 </script>
@@ -46,15 +46,9 @@ function updateDue(value) {
 
       <div class="invoices-section__notes">
         <div>
-          <span>{{ $t('hosting_preferences.invoices.note_one.part_one') }}</span>
-          <span class="invoices-section__notes-value">{{ 2 * props.data.due.period || 'N/A' }} {{ $t('$.days') }}</span>
-          <span>{{ $t('hosting_preferences.invoices.note_one.part_two') }}</span>
-        </div>
-
-        <div class="invoices-section__note-two">
-          <span>{{ $t('hosting_preferences.invoices.note_two.part_one') }}</span>
-          <span class="invoices-section__notes-value">{{ 4 * props.data.due.period || 'N/A' }} {{ $t('$.days') }}</span>
-          <span>{{ $t('hosting_preferences.invoices.note_two.part_two') }}</span>
+          <span>{{ $t('hosting_preferences.invoices.note.part_one') }}</span>
+          <span class="invoices-section__notes-value">{{ props.data.due.period }} {{ $t('$.days') }}</span>
+          <span>{{ $t('hosting_preferences.invoices.note.part_two') }}</span>
         </div>
       </div>
     </div>

src/interfaces/HposInterface.ts

@@ -113,19 +113,21 @@ interface CoreAppVersionResponse {
 }
 
 export interface HostPreferencesResponse {
-  max_fuel_before_invoice: string
-  max_time_before_invoice: [number, number]
-  price_bandwidth: string
   price_compute: string
   price_storage: string
+  price_bandwidth: string
+  max_time_before_invoice: { secs: number; nanos: number }
+  max_fuel_before_invoice: string
+  invoice_due_in_days: number
 }
 
 export interface DefaultPreferencesPayload {
-  max_fuel_before_invoice: string
   price_compute: string
   price_storage: string
   price_bandwidth: string
-  max_time_before_invoice: [number, number]
+  max_time_before_invoice: { secs: number; nanos: number }
+  max_fuel_before_invoice: string
+  invoice_due_in_days: number
 }
 
 type HposHolochainCallResponse =

src/locales/en.ts

@@ -151,14 +151,10 @@ export default {
         part_one: 'Payment is due',
         part_two: 'after invoice date'
       },
-      note_one: {
-        part_one: '*hApps will be paused from hosting if payment is not received',
+      note: {
+        part_one: '*Apps will be paused from hosting if payment is not received',
         part_two: 'after invoice date'
       },
-      note_two: {
-        part_one: '*hApps will be removed if payment is not received',
-        part_two: 'after invoice date'
-      }
     },
     prices: {
       header: 'Price Configuration',

src/pages/HostingPreferences.vue

@@ -8,7 +8,7 @@ import PricesSection from '@/components/settings/hostingPreferences/PricesSectio
 import TogglePaidHostingSection from '@/components/settings/hostingPreferences/TogglePaidHostingSection.vue'
 import { usePreferencesStore } from '@/store/preferences'
 import { useUserStore } from '@/store/user'
-import type { UpdatePricePayload } from '@/types/types'
+import type { InvoiceDue, InvoiceFrequency, UpdatePricePayload } from '@/types/types'
 import { EHostingPlan, EUserKycLevel } from '@/types/types'
 
 const preferencesStore = usePreferencesStore()
@@ -95,6 +95,16 @@ function onTogglePaidHosting(isToggledOn: boolean): void {
 function updateHostingPlan(): void {
   closeModal()
 }
+
+async function invoiceFrequencyChanged({ period, amount }: InvoiceFrequency): Promise<void> {
+  preferencesStore.updateInvoiceFrequency(period, amount);
+  await setDefaultHostPreferences();
+}
+
+async function invoicePaymentDueChanged({ period }: InvoiceDue): Promise<void> {
+  preferencesStore.updateInvoiceDue(period);
+  await setDefaultHostPreferences();
+}
 </script>
 
 <template>
@@ -130,6 +140,8 @@ function updateHostingPlan(): void {
         :data="invoicesSettings"
         class="hosting-preferences__invoices"
         data-test-hosting-preferences-invoices-section
+        @update:frequency="invoiceFrequencyChanged"
+        @update:due="invoicePaymentDueChanged"
       />
 
       <HAppSelectionSection

src/store/preferences.ts

@@ -22,20 +22,27 @@ export const usePreferencesStore = defineStore('preferences', {
     },
     invoicesSettings: {
       frequency: {
-        amount: 0, // in fuel type
-        period: 'N/A' // in duration days
+        amount: 0,
+        period: 7
       },
       due: {
-        period: 'N/A' // in duration days
+        period: 7
       }
     }
   }),
 
   actions: {
     async setDefaultPreferences(): Promise<void> {
+      let maxTimeBeforeInvoice = Number(this.invoicesSettings.frequency.period) || 7
+      let invoiceDuePeriod = Number(this.invoicesSettings.due.period) || 7
+
       const payload: DefaultPreferencesPayload = {
-        max_fuel_before_invoice: '0',
-        max_time_before_invoice: [0, 0],
+        max_fuel_before_invoice: `${this.invoicesSettings.frequency.amount}`,
+        max_time_before_invoice: {
+          secs: maxTimeBeforeInvoice * 24 * 60 * 60,
+          nanos: 0
+        },
+        invoice_due_in_days: invoiceDuePeriod,
         price_compute: `${this.pricesSettings.cpu}`,
         price_storage: `${this.pricesSettings.storage}`,
         price_bandwidth: `${this.pricesSettings.bandwidth}`
@@ -78,8 +85,9 @@ export const usePreferencesStore = defineStore('preferences', {
       }
 
       const {
-        max_fuel_before_invoice: amount,
-        max_time_before_invoice: durationThreshold,
+        max_fuel_before_invoice: invoiceHolofuelThreshold,
+        max_time_before_invoice: invoiceDurationThreshold,
+        invoice_due_in_days: invoiceDueDays,
         price_compute: cpu,
         price_storage: storage,
         price_bandwidth: bandwidth
@@ -93,22 +101,28 @@ export const usePreferencesStore = defineStore('preferences', {
         }
       }
 
-      if (amount && durationThreshold) {
-        // NB: This value is not implemented in DNAs, return mock for now
-        const deadline = 'N/A'
-
-        this.invoicesSettings = {
-          frequency: {
-            amount: Number(amount),
-            period: 'N/A' // durationThreshold
-          },
-          due: {
-            period: deadline
-          }
+      this.invoicesSettings = {
+        frequency: {
+          amount: Number(invoiceHolofuelThreshold) || 0,
+          period: Number(invoiceDurationThreshold.secs / 24 / 60 / 60) || 7
+        },
+        due: {
+          period: Number(invoiceDueDays) || 7
         }
       }
 
       this.isLoaded = true
+    },
+    updateInvoiceFrequency(invoiceFrequency: number, invoiceMaxHolofuel: number) {
+      this.invoicesSettings.frequency = {
+        amount: invoiceMaxHolofuel,
+        period: invoiceFrequency
+      }
+    },
+    updateInvoiceDue(invoiceDueInDays: number) {
+      this.invoicesSettings.due = {
+        period: invoiceDueInDays
+      }
     }
   }
 })

src/types/types.ts

@@ -32,11 +32,11 @@ export interface PricesData {
 
 export interface InvoicesData {
   due: {
-    period: string
+    period: number
   }
   frequency: {
     amount: number
-    period: string
+    period: number
   }
 }
 
@@ -96,3 +96,12 @@ export interface UpdateHAppPlanProps {
   id: string
   value: EHostingPlan
 }
+
+export type InvoiceFrequency = {
+  period: number;
+  amount: number;
+}
+
+export type InvoiceDue = {
+  period: number;
+};