Merge pull request #156 from Holo-Host/feature/jurisdiction-updates

Feature/jurisdiction updates

src/components/modals/GlobalHostingPlanModal.vue

@@ -16,7 +16,7 @@ import { HApp, useHposInterface } from '@/interfaces/HposInterface'
 import { useDashboardStore } from '@/store/dashboard'
 import { usePreferencesStore } from '@/store/preferences'
 import { isError as isErrorPredicate } from '@/types/predicates'
-import { EHostingPlan, MappedHApp } from '@/types/types'
+import { EHostingPlan, ECriteriaType, MappedHApp } from '@/types/types'
 
 const { t } = useI18n()
 const dashboardStore = useDashboardStore()
@@ -254,7 +254,11 @@ async function setDefaultHostPreferences(): Promise<void> {
     preferencesStore.updateInvoiceFrequency(7, 1);
     preferencesStore.updateInvoiceDue(7);
     preferencesStore.updateInvoiceFrequency(7, 0);
-    await preferencesStore.setDefaultPreferences()
+    preferencesStore.updateHostingJurisdiction({
+      value: [],
+      criteria_type: ECriteriaType.exclude,
+    });
+    await preferencesStore.setDefaultPreferences();
   } catch (e) {
     isError.value = true
   }

src/components/settings/hostingPreferences/BaseCombobox.vue

@@ -25,18 +25,19 @@ const props = withDefaults(
     isLoading?: boolean
     isSaving?: boolean
     label?: string
+    initiallySelected?: string[]
   }>(),
   {
     options: () => [],
     isLoading: false,
     isSaving: false,
-    label: ''
+    label: '',
+    initiallySelected: () => []
   }
 )
 
 const isEditing = ref(false)
 
-const initiallySelected: string[] = []
 const previouslySelected = ref<Option[]>([])
 
 const mappedValues: Option[] = props.options.map((label, index) => ({
@@ -45,7 +46,7 @@ const mappedValues: Option[] = props.options.map((label, index) => ({
 }))
 
 const selectedOptions = ref<Option[]>(
-  mappedValues.filter((option) => initiallySelected.includes(option.label))
+  mappedValues.filter((option) => props.initiallySelected.includes(option.label))
 )
 
 const visibleOptions = computed(() => {
@@ -85,7 +86,10 @@ function removeOption(optionToBeRemoved: Option): void {
 }
 
 function save(): void {
-  emit('save', selectedOptions.value)
+  emit(
+    'save',
+    selectedOptions.value.map((option) => option.label)
+  )
 }
 
 function cancel(): void {
@@ -156,15 +160,18 @@ watch(
         </BaseTooltip>
       </CategoryChip>
     </div>
+
     <span
       v-else
       class="exclusion-select__exclusions-selected"
     >
       None
     </span>
+
     <PencilIcon
       v-if="!isEditing"
       class="exclusion-select__exclusions-edit-icon"
+      :class="{ 'exclusion-select__exclusions-edit-icon--disabled': props.isSaving }"
       @click="edit"
     />
 
@@ -261,6 +268,12 @@ watch(
       margin-left: 8px;
       margin-top: 4px;
       cursor: pointer;
+
+      &--disabled {
+        opacity: 0.15;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
     }
 
     &-combobox {
@@ -283,6 +296,8 @@ watch(
 
       &--disabled {
         opacity: 0.15;
+        pointer-events: none;
+        cursor: not-allowed;
       }
     }
 

src/components/settings/hostingPreferences/ExclusionSelect.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import ExclusionSelect from '@/components/settings/hostingPreferences/BaseCombobox.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    options: string[]
+    isBusy: boolean
+    initiallySelected?: string[]
+  }>(),
+  {
+    label: '',
+    initiallySelected: () => []
+  }
+)
+
+const emit = defineEmits(['save'])
+
+function save(selectedOptions: string[]): void {
+  emit('save', selectedOptions)
+}
+</script>
+
+<template>
+  <ExclusionSelect
+    :label="props.label"
+    :options="props.options"
+    :is-saving="props.isBusy"
+    :initially-selected="props.initiallySelected"
+    @save="save"
+  />
+</template>

src/components/settings/hostingPreferences/HAppSelectionSection.vue

@@ -1,7 +1,40 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import SettingsSection from '../SettingsSection.vue'
-import CategoryExclusionSelect from '@/components/settings/hostingPreferences/CategoryExclusionSelect.vue'
-import JurisdictionExclusionSelect from '@/components/settings/hostingPreferences/JurisdictionExclusionSelect.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 { ECriteriaType } from '@/types/types'
+
+const props = defineProps<{
+  hostingJurisdictions: HostingJurisdictions
+  isJurisdictionLoading: boolean
+}>()
+
+const isHostingCategoriesExclusionsBusy = ref(false)
+
+const emit = defineEmits(['update:jurisdiction'])
+
+interface Jurisdiction {
+  // 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)
+}
 </script>
 
 <template>
@@ -10,20 +43,50 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
     class="happ-selection-section"
   >
     <div class="card-content">
-      <JurisdictionExclusionSelect />
+      <div class="happ-selection-section__tags">
+        <span class="happ-selection-section__selection-label happ-selection-section__selection-label--main">
+          {{ $t('hosting_preferences.happ_selection.jurisdiction_exclusions') }}
+        </span>
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-exclude">
+          <ExclusionSelect
+            :key="props.hostingJurisdictions.timestamp"
+            label="hosting_preferences.happ_selection.exclude"
+            :options="countries"
+            :is-busy="isJurisdictionLoading"
+            :initially-selected="props.hostingJurisdictions.criteriaType === ECriteriaType.exclude ? props.hostingJurisdictions.value : []"
+            @save="updateJurisdiction({value: $event, criteria_type: ECriteriaType.exclude})"
+          />
+        </div>
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-include">
+          <ExclusionSelect
+            :key="props.hostingJurisdictions.timestamp"
+            label="hosting_preferences.happ_selection.include"
+            :options="countries"
+            :is-busy="isJurisdictionLoading"
+            :initially-selected="props.hostingJurisdictions.criteriaType === 'include' ? props.hostingJurisdictions.value : []"
+            @save="updateJurisdiction({value: $event, criteria_type: ECriteriaType.include})"
+          />
+        </div>
+      </div>
 
-      <div class="happ-selection-section__category-tags">
+      <div class="happ-selection-section__tags happ-selection-section--category">
         <span class="happ-selection-section__selection-label happ-selection-section__selection-label--main">
           {{ $t('hosting_preferences.happ_selection.category_tags') }}
         </span>
-        <div class="happ-selection-section__category-tags-item happ-selection-section__category-tags-item-exclude">
-          <CategoryExclusionSelect
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-exclude">
+          <ExclusionSelect
             label="hosting_preferences.happ_selection.exclude"
+            :options="categories"
+            :is-busy="isHostingCategoriesExclusionsBusy"
+            @save="saveHostingCategoriesExclusions"
           />
         </div>
-        <div class="happ-selection-section__category-tags-item happ-selection-section__category-tags-item-include">
-          <CategoryExclusionSelect
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-include">
+          <ExclusionSelect
             label="hosting_preferences.happ_selection.include"
+            :options="categories"
+            :is-busy="isHostingCategoriesExclusionsBusy"
+            @save="saveHostingCategoriesExclusions"
           />
         </div>
       </div>
@@ -34,12 +97,15 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
 <style lang="scss" scoped>
 .card-content {
   padding: 0 0 35px 0;
-  opacity: 0.5;
-  pointer-events: none;
 }
 
 .happ-selection-section {
-  &__category-tags {
+  &--category {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__tags {
     margin-top: 16px;
 
     &-selected {
@@ -49,7 +115,7 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
     }
   }
 
-  &__category-tags-item {
+  &__tags-item {
     margin-top: 12px;
     padding-left: 40px;
     display: flex;

src/interfaces/HposInterface.ts

@@ -1,13 +1,12 @@
 /* eslint-disable camelcase */
 import { decode } from '@msgpack/msgpack'
 import axios from 'axios'
-import { decodeAgentId } from '../../ui-common-library/src/utils/agent'
 import { kAuthTokenLSKey, kCoreAppVersionLSKey } from '@/constants'
 import kHttpStatus from '@/constants/httpStatues'
 import router from '@/router'
 import { isKycLevel } from '@/types/predicates'
 import type { CheckAuthResponse, EUserKycLevel, PricesData } from '@/types/types'
-import { EHostingPlan } from '@/types/types'
+import { ECriteriaType, EHostingPlan } from '@/types/types'
 import { retry } from '@/utils/functionUtils'
 import { eraseHpAdminKeypair, getHpAdminKeypair } from '@/utils/keyManagement'
 
@@ -120,6 +119,11 @@ export interface HostPreferencesResponse {
   max_time_before_invoice: { secs: number; nanos: number }
   max_fuel_before_invoice: string
   invoice_due_in_days: number
+  jurisdiction_prefs: {
+    value: string[]
+    is_exclusion: boolean
+  }
+  timestamp: number
 }
 
 export interface DefaultPreferencesPayload {
@@ -129,6 +133,10 @@ export interface DefaultPreferencesPayload {
   max_time_before_invoice: { secs: number; nanos: number }
   max_fuel_before_invoice: string
   invoice_due_in_days: number
+  jurisdiction_prefs: {
+    value: string[]
+    is_exclusion: boolean
+  }
 }
 
 type HposHolochainCallResponse =
@@ -648,6 +656,50 @@ 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,
@@ -698,6 +750,7 @@ export function useHposInterface(): HposInterface {
         method: 'get',
         path: '/config'
       })
+
       return {
         hostPubKey: admin.public_key,
         registrationEmail: admin.email,