feat: update ui to make the zome_call

Holo-Host · Apr 4, 2024 · 9adb6b6 · 9adb6b6
1 parent 0c5975b
commit 9adb6b6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 38 deletions.
diff --git a/src/components/settings/hostingPreferences/HAppSelectionSection.vue b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
@@ -16,10 +16,13 @@ const isHostingCategoriesExclusionsBusy = ref(false)
 
 const emit = defineEmits(['update:jurisdiction'])
 
-function updateJurisdiction(jurisdiction:  {
-      criteria_type: ECriteriaType
-      value: string[],
-    }): void {
+interface Jurisdiction {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  criteria_type: ECriteriaType
+  value: string[]
+}
+
+function updateJurisdiction(jurisdiction: Jurisdiction): void {
   emit('update:jurisdiction', jurisdiction)
 }
 
@@ -51,7 +54,7 @@ function saveHostingCategoriesExclusions(): void {
             :options="countries"
             :is-busy="isJurisdictionLoading"
             :initially-selected="props.hostingJurisdictions.criteriaType === ECriteriaType.exclude ? props.hostingJurisdictions.value : []"
-            @update:value="updateJurisdiction({value: $event, criteria_type: ECriteriaType.exclude})"
+            @save="updateJurisdiction({value: $event, criteria_type: ECriteriaType.exclude})"
           />
         </div>
         <div class="happ-selection-section__tags-item happ-selection-section__tags-item-include">
@@ -61,7 +64,7 @@ function saveHostingCategoriesExclusions(): void {
             :options="countries"
             :is-busy="isJurisdictionLoading"
             :initially-selected="props.hostingJurisdictions.criteriaType === 'include' ? props.hostingJurisdictions.value : []"
-            @update:value="updateJurisdiction({value: $event, criteria_type: ECriteriaType.include})"
+            @save="updateJurisdiction({value: $event, criteria_type: ECriteriaType.include})"
           />
         </div>
       </div>

diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
@@ -120,8 +120,8 @@ export interface HostPreferencesResponse {
   max_fuel_before_invoice: string
   invoice_due_in_days: number
   jurisdiction_prefs: {
-    value: string[],
-    is_exclusion: boolean;
+    value: string[]
+    is_exclusion: boolean
   }
   timestamp: number
 }
@@ -134,8 +134,8 @@ export interface DefaultPreferencesPayload {
   max_fuel_before_invoice: string
   invoice_due_in_days: number
   jurisdiction_prefs: {
-    value: string[],
-    is_exclusion: boolean;
+    value: string[]
+    is_exclusion: boolean
   }
 }
 
@@ -658,7 +658,7 @@ export function useHposInterface(): HposInterface {
 
   async function getHostingJurisdictions(): Promise<
     HposHolochainCallResponse | { error: unknown }
-    > {
+  > {
     let holoportId = ''
 
     if (window.location.host.split(':')[0] === 'localhost') {
@@ -691,7 +691,7 @@ export function useHposInterface(): HposInterface {
       return {
         jurisdiction_prefs: {
           value: ['Poland'], // QUESTION: shouldn't this be empty if there is an error?
-          is_exclusion: false,
+          is_exclusion: false
         },
         timestamp: 0
       }
@@ -1023,7 +1023,7 @@ export function useHposInterface(): HposInterface {
     stopHostingHApp,
     updateHAppHostingPlan,
     getServiceLogs,
-    HPOS_API_URL,
+    HPOS_API_URL
   }
 }
 /* eslint-enable camelcase */
diff --git a/src/pages/HostingPreferences.vue b/src/pages/HostingPreferences.vue
@@ -87,10 +87,13 @@ async function updatePrice({ prop, value }: UpdatePricePayload): Promise<void> {
   await setDefaultHostPreferences()
 }
 
-async function updateHostingJurisdiction(jursidiction: {
-      criteria_type: ECriteriaType
-      value: string[],
-    }): Promise<void> {
+interface HostingJurisdiction {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  criteria_type: ECriteriaType
+  value: string[]
+}
+
+async function updateHostingJurisdiction(jurisdiction: HostingJurisdiction): Promise<void> {
   preferencesStore.updateHostingJurisdiction(jurisdiction)
   await setDefaultHostPreferences()
 }
@@ -157,10 +160,10 @@ async function invoicePaymentDueChanged({ period }: InvoiceDue): Promise<void> {
         :is-jurisdiction-loading="isUpdating"
         :hosting-jurisdictions="hostingJurisdictions"
         class="hosting-preferences__happ-selection"
-        data-test-hosting-preferences-happ-selection-section        
+        data-test-hosting-preferences-happ-selection-section
         @update:jurisdiction="updateHostingJurisdiction"
-        />
-        
+      />
+
       <GlobalHostingPlanModal
         :key="isPaidHostingEnabled"
         :plan-value="isPaidHostingEnabled ? EHostingPlan.paid : EHostingPlan.free"

diff --git a/src/store/preferences.ts b/src/store/preferences.ts
@@ -1,16 +1,10 @@
 import { defineStore } from 'pinia'
-import {
-  DefaultPreferencesPayload,
-  useHposInterface
-} from '@/interfaces/HposInterface'
+import { DefaultPreferencesPayload, useHposInterface } from '@/interfaces/HposInterface'
 import { isHostPreferencesResponse } from '@/types/predicates'
 import type { HostingJurisdictions, InvoicesData, PricesData } from '@/types/types'
 import { ECriteriaType } from '@/types/types'
 
-const {
-  getHostPreferences,
-  setDefaultHAppPreferences,
-} = useHposInterface()
+const { getHostPreferences, setDefaultHAppPreferences } = useHposInterface()
 
 const kInitialPrice = 0.0001
 
@@ -62,7 +56,7 @@ export const usePreferencesStore = defineStore('preferences', {
         invoice_due_in_days: invoiceDuePeriod,
         jurisdiction_prefs: {
           value: this.hostingJurisdictions.value,
-          is_exclusion: this.hostingJurisdictions.criteriaType === ECriteriaType.exclude,
+          is_exclusion: this.hostingJurisdictions.criteriaType === ECriteriaType.exclude
         }
       }
 
@@ -97,27 +91,25 @@ export const usePreferencesStore = defineStore('preferences', {
 
     updateHostingJurisdiction(jurisdiction: {
       criteria_type: ECriteriaType
-      value: string[],
+      value: string[]
     }): void {
-      this.hostingJurisdictions.value = jurisdiction.value;
-      this.hostingJurisdictions.criteriaType = jurisdiction.criteria_type;
+      this.hostingJurisdictions.value = jurisdiction.value
+      this.hostingJurisdictions.criteriaType = jurisdiction.criteria_type
     },
 
     async getHostPreferences(): Promise<void> {
       const response = await getHostPreferences()
 
-      if (
-        !isHostPreferencesResponse(response)
-      ) {
+      if (!isHostPreferencesResponse(response)) {
         // If the request failed, update the timestamp to trigger a re-render of the selects
         this.hostingJurisdictions.timestamp = Date.now()
         return
       }
 
       this.hostingJurisdictions = {
-        value: response.jurisdiction_prefs.value || [],
+        value: response.jurisdiction_prefs?.value || [],
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        criteriaType: response.jurisdiction_prefs.is_exclusion
+        criteriaType: response.jurisdiction_prefs?.is_exclusion
           ? ECriteriaType.exclude
           : ECriteriaType.include,
         timestamp: response.timestamp
@@ -164,6 +156,6 @@ export const usePreferencesStore = defineStore('preferences', {
       this.invoicesSettings.due = {
         period: invoiceDueInDays
       }
-    },
+    }
   }
 })