feat: implement hosting categories UI

src/components/settings/hostingPreferences/HAppSelectionSection.vue

@@ -4,36 +4,35 @@ import SettingsSection from '../SettingsSection.vue'
 import ExclusionSelect from '@/components/settings/hostingPreferences/ExclusionSelect.vue'
 import { categories } from '@/constants/categories'
 import { countries } from '@/constants/countries'
-import type { HostingJurisdictions } from '@/types/types'
+import type { HostingJurisdictions, HostingCategories } from '@/types/types'
 import { ECriteriaType } from '@/types/types'
 
 const props = defineProps<{
   hostingJurisdictions: HostingJurisdictions
-  isJurisdictionLoading: boolean
+  hostingCategories: HostingCategories
+  isLoading: boolean
 }>()
 
-const isHostingCategoriesExclusionsBusy = ref(false)
-
-const emit = defineEmits(['update:jurisdiction'])
+const emit = defineEmits(['update:jurisdiction', 'update:categories'])
 
 interface Jurisdiction {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   criteria_type: ECriteriaType
   value: string[]
 }
 
+interface Categories {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  criteria_type: ECriteriaType
+  value: string[]
+}
+
 function updateJurisdiction(jurisdiction: Jurisdiction): void {
   emit('update:jurisdiction', jurisdiction)
 }
 
-function saveHostingCategoriesExclusions(): void {
-  isHostingCategoriesExclusionsBusy.value = true
-  // Make an API call to save new selected options
-
-  setTimeout(() => {
-    isHostingCategoriesExclusionsBusy.value = false
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-  }, 2000)
+function updateCategories(categories: Categories): void {
+  emit('update:categories', categories)
 }
 </script>
 
@@ -52,7 +51,7 @@ function saveHostingCategoriesExclusions(): void {
             :key="props.hostingJurisdictions.timestamp"
             label="hosting_preferences.happ_selection.exclude"
             :options="countries"
-            :is-busy="isJurisdictionLoading"
+            :is-busy="isLoading"
             :initially-selected="props.hostingJurisdictions.criteriaType === ECriteriaType.exclude ? props.hostingJurisdictions.value : []"
             @save="updateJurisdiction({value: $event, criteria_type: ECriteriaType.exclude})"
           />
@@ -62,7 +61,7 @@ function saveHostingCategoriesExclusions(): void {
             :key="props.hostingJurisdictions.timestamp"
             label="hosting_preferences.happ_selection.include"
             :options="countries"
-            :is-busy="isJurisdictionLoading"
+            :is-busy="isLoading"
             :initially-selected="props.hostingJurisdictions.criteriaType === 'include' ? props.hostingJurisdictions.value : []"
             @save="updateJurisdiction({value: $event, criteria_type: ECriteriaType.include})"
           />
@@ -75,18 +74,22 @@ function saveHostingCategoriesExclusions(): void {
         </span>
         <div class="happ-selection-section__tags-item happ-selection-section__tags-item-exclude">
           <ExclusionSelect
+            :key="props.hostingCategories.timestamp"
             label="hosting_preferences.happ_selection.exclude"
             :options="categories"
-            :is-busy="isHostingCategoriesExclusionsBusy"
-            @save="saveHostingCategoriesExclusions"
+            :is-busy="isLoading"
+            :initially-selected="props.hostingCategories.criteriaType === 'include' ? props.hostingCategories.value : []"
+            @save="updateCategories({value: $event, criteria_type: ECriteriaType.include})"
           />
         </div>
         <div class="happ-selection-section__tags-item happ-selection-section__tags-item-include">
           <ExclusionSelect
+            :key="props.hostingCategories.timestamp"
             label="hosting_preferences.happ_selection.include"
             :options="categories"
-            :is-busy="isHostingCategoriesExclusionsBusy"
-            @save="saveHostingCategoriesExclusions"
+            :is-busy="isLoading"
+            :initially-selected="props.hostingCategories.criteriaType === 'include' ? props.hostingCategories.value : []"
+            @save="updateCategories({value: $event, criteria_type: ECriteriaType.include})"
           />
         </div>
       </div>
@@ -100,11 +103,6 @@ function saveHostingCategoriesExclusions(): void {
 }
 
 .happ-selection-section {
-  &--category {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
   &__tags {
     margin-top: 16px;
 

src/interfaces/HposInterface.ts

@@ -123,6 +123,10 @@ export interface HostPreferencesResponse {
     value: string[]
     is_exclusion: boolean
   }
+  categories_prefs: {
+    value: string[]
+    is_exclusion: boolean
+  }
   timestamp: number
 }
 
@@ -137,6 +141,10 @@ export interface DefaultPreferencesPayload {
     value: string[]
     is_exclusion: boolean
   }
+  categories_prefs: {
+    value: string[]
+    is_exclusion: boolean
+  }
 }
 
 type HposHolochainCallResponse =
@@ -656,50 +664,6 @@ export function useHposInterface(): HposInterface {
     }
   }
 
-  async function getHostingJurisdictions(): Promise<
-    HposHolochainCallResponse | { error: unknown }
-  > {
-    let holoportId = ''
-
-    if (window.location.host.split(':')[0] === 'localhost') {
-      const holoportUrl = `${import.meta.env.VITE_HOLOPORT_URL}` || ''
-      holoportId = holoportUrl.split('//')[1]?.split('.')[0] ?? ''
-    } else {
-      holoportId = window.location.host.split('//')[1]?.split('.')[0] ?? ''
-    }
-
-    const params = {
-      appId: localStorage.getItem(kCoreAppVersionLSKey),
-      roleId: 'core-app',
-      zomeName: 'hha',
-      fnName: 'get_hosting_jurisdictions',
-      payload: holoportId
-    }
-
-    try {
-      const hostingJurisdictions = await hposHolochainCall({
-        method: 'post',
-        path: '/zome_call',
-        pathPrefix: '/api/v2',
-        responseType: 'arraybuffer',
-        params
-      })
-
-      return hostingJurisdictions
-    } catch (error) {
-      console.error('getHostingJurisdictions encountered an error: ', error)
-      return {
-        jurisdiction_prefs: {
-          value: ['Poland'], // QUESTION: shouldn't this be empty if there is an error?
-          is_exclusion: false
-        },
-        timestamp: 0
-      }
-
-      // return false
-    }
-  }
-
   async function checkAuth(
     email: string,
     password: string,

src/pages/HostingPreferences.vue

@@ -22,6 +22,7 @@ const isPaidHostingEnabled = ref(userStore.kycLevel !== EUserKycLevel.two)
 const pricesSettings = computed(() => preferencesStore.pricesSettings)
 const invoicesSettings = computed(() => preferencesStore.invoicesSettings)
 const hostingJurisdictions = computed(() => preferencesStore.hostingJurisdictions)
+const hostingCategories = computed(() => preferencesStore.hostingCategories)
 
 const isModalVisible = ref(false)
 
@@ -93,11 +94,22 @@ interface HostingJurisdiction {
   value: string[]
 }
 
+interface HostingCategories {
+  // 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()
 }
 
+async function updateHostingCategories(categories: HostingCategories): Promise<void> {
+  preferencesStore.updateHostingCategories(categories)
+  await setDefaultHostPreferences()
+}
+
 function onTogglePaidHosting(isToggledOn: boolean): void {
   isPaidHostingEnabled.value = isToggledOn
 
@@ -157,11 +169,13 @@ async function invoicePaymentDueChanged({ period }: InvoiceDue): Promise<void> {
       />
 
       <HAppSelectionSection
-        :is-jurisdiction-loading="isUpdating"
+        :is-loading="isUpdating"
         :hosting-jurisdictions="hostingJurisdictions"
+        :hosting-categories="hostingCategories"
         class="hosting-preferences__happ-selection"
         data-test-hosting-preferences-happ-selection-section
         @update:jurisdiction="updateHostingJurisdiction"
+        @update:categories="updateHostingCategories"
       />
 
       <GlobalHostingPlanModal

src/store/preferences.ts

@@ -1,7 +1,12 @@
 import { defineStore } from 'pinia'
 import { DefaultPreferencesPayload, useHposInterface } from '@/interfaces/HposInterface'
 import { isHostPreferencesResponse } from '@/types/predicates'
-import type { HostingJurisdictions, InvoicesData, PricesData } from '@/types/types'
+import type {
+  HostingCategories,
+  HostingJurisdictions,
+  InvoicesData,
+  PricesData
+} from '@/types/types'
 import { ECriteriaType } from '@/types/types'
 
 const { getHostPreferences, setDefaultHAppPreferences } = useHposInterface()
@@ -13,6 +18,12 @@ interface State {
   pricesSettings: PricesData
   invoicesSettings: InvoicesData
   hostingJurisdictions: HostingJurisdictions
+  hostingCategories: HostingCategories
+}
+
+interface RawHostingCategories {
+  criteria_type: ECriteriaType
+  value: string[]
 }
 
 export const usePreferencesStore = defineStore('preferences', {
@@ -36,6 +47,11 @@ export const usePreferencesStore = defineStore('preferences', {
       value: [],
       criteriaType: ECriteriaType.exclude,
       timestamp: 0
+    },
+    hostingCategories: {
+      value: [],
+      criteriaType: ECriteriaType.exclude,
+      timestamp: 0
     }
   }),
 
@@ -64,6 +80,10 @@ export const usePreferencesStore = defineStore('preferences', {
         jurisdiction_prefs: {
           value: this.hostingJurisdictions.value,
           is_exclusion: this.hostingJurisdictions.criteriaType === ECriteriaType.exclude
+        },
+        categories_prefs: {
+          value: this.hostingCategories.value,
+          is_exclusion: this.hostingCategories.criteriaType === ECriteriaType.exclude
         }
       }
 
@@ -104,12 +124,18 @@ export const usePreferencesStore = defineStore('preferences', {
       this.hostingJurisdictions.criteriaType = jurisdiction.criteria_type
     },
 
+    updateHostingCategories(categories: RawHostingCategories): void {
+      this.hostingCategories.value = categories.value
+      this.hostingCategories.criteriaType = categories.criteria_type
+    },
+
     async getHostPreferences(): Promise<void> {
       const response = await getHostPreferences()
 
       if (!isHostPreferencesResponse(response)) {
         // If the request failed, update the timestamp to trigger a re-render of the selects
         this.hostingJurisdictions.timestamp = Date.now()
+        this.hostingCategories.timestamp = Date.now()
         return
       }
 
@@ -122,6 +148,15 @@ export const usePreferencesStore = defineStore('preferences', {
         timestamp: response.timestamp
       }
 
+      this.hostingCategories = {
+        value: response.categories_prefs?.value || [],
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        criteriaType: response.categories_prefs?.is_exclusion
+          ? ECriteriaType.exclude
+          : ECriteriaType.include,
+        timestamp: response.timestamp
+      }
+
       const {
         max_fuel_before_invoice: invoiceHolofuelThreshold,
         max_time_before_invoice: invoiceDurationThreshold,

src/types/types.ts

@@ -128,3 +128,9 @@ export interface HostingJurisdictions {
   criteriaType: ECriteriaType
   timestamp: number
 }
+
+export interface HostingCategories {
+  value: string[]
+  criteriaType: ECriteriaType
+  timestamp: number
+}