From 7208c8bb4063be15aea5c06728caccd7f1e8768d Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Tue, 16 Jan 2024 12:06:49 +0100
Subject: [PATCH 1/5] feat: add BaseCombobox component and use it for
 Jurisdiction selection

---
 package.json                                  |   1 +
 src/components/BaseCombobox.vue               | 278 ++++++++++++++++++
 src/components/CategoryChip.vue               |   9 +-
 .../HAppSelectionSection.vue                  | 149 +++++++++-
 src/constants/countries.ts                    | 238 +++++++++++++++
 yarn.lock                                     |  19 ++
 6 files changed, 688 insertions(+), 6 deletions(-)
 create mode 100644 src/components/BaseCombobox.vue
 create mode 100644 src/constants/countries.ts

diff --git a/package.json b/package.json
index d6828656..58b324b9 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "start-mock-hpos-api-with-auth": "node mock-hpos-api/runMockHposApi.js --email test@test.com --password asasas"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.17",
     "@heroicons/vue": "^2.0.17",
     "@holo-host/hp-admin-keypair": "^0.3.0",
     "@vueuse/components": "^10.1.2",
diff --git a/src/components/BaseCombobox.vue b/src/components/BaseCombobox.vue
new file mode 100644
index 00000000..3a174e2f
--- /dev/null
+++ b/src/components/BaseCombobox.vue
@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot
+} from '@headlessui/vue'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+import { ref, computed } from 'vue'
+
+interface Option {
+  id: number
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    options: Option[]
+    selected: Option[]
+    multiple?: boolean
+    placeholder?: string
+  }>(),
+  {
+    multiple: false,
+    placeholder: ''
+  }
+)
+
+const emit = defineEmits(['update:selected'])
+
+const query = ref('')
+
+const filteredOptions = computed(() =>
+  query.value === ''
+    ? props.options
+    : props.options.filter((option) =>
+      option.label
+        .toLowerCase()
+        .replace(/\s+/g, '')
+        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+    )
+)
+</script>
+
+<template>
+  <div class="base-combobox__wrapper">
+    <Combobox
+      :model-value="props.selected"
+      multiple
+      @update:model-value="emit('update:selected', $event)"
+    >
+      <div class="base-combobox__combobox">
+        <div class="base-combobox__combobox-content">
+          <div
+            class="base-combobox__combobox-input-wrapper"
+          >
+            <ComboboxInput
+              class="base-combobox__input"
+              :display-value="(option) => option.label"
+              @change="query = $event.target.value"
+            />
+            <ComboboxButton
+              class="base-combobox__button"
+            >
+              <ChevronUpDownIcon
+                class="base-combobox__chevron"
+                aria-hidden="true"
+              />
+            </ComboboxButton>
+          </div>
+          <TransitionRoot
+            leave="transition ease-in duration-100"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+            @after-leave="query = ''"
+          >
+            <ComboboxOptions
+              class="base-combobox__options"
+            >
+              <div
+                v-if="filteredOptions.length === 0 && query !== ''"
+                class="base-combobox__option--no-results"
+              >
+                Nothing found.
+              </div>
+
+              <ComboboxOption
+                v-for="option in filteredOptions"
+                :key="option.id"
+                v-slot="{ selected, active }"
+                as="template"
+                :value="option"
+              >
+                <li
+                  class="base-combobox__option"
+                  :class="{
+                    'base-combobox__option--active': active,
+                    'base-combobox__option--inactive': !active,
+                  }"
+                >
+                  <span
+                    class="base-combobox__option-label"
+                    :class="{
+                      'base-combobox__option-label--selected': selected,
+                      'base-combobox__option-label--not-selected': !selected
+                    }"
+                  >
+                    {{ option.label }}
+                  </span>
+                  <span
+                    v-if="selected"
+                    class="base-combobox__option-check"
+                    :class="{
+                      'base-combobox__option-check--active': active,
+                      'base-combobox__option-check--inactive': !active
+                    }"
+                  >
+                    <CheckIcon
+                      class="base-combobox__option-check-icon"
+                      aria-hidden="true"
+                    />
+                  </span>
+                </li>
+              </ComboboxOption>
+            </ComboboxOptions>
+          </TransitionRoot>
+        </div>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base-combobox {
+  &__wrapper {
+    width: 500px;
+  }
+
+  &__combobox {
+    display: flex;
+  }
+
+  &__combobox-content {
+    position: relative;
+    margin-top: 4px;
+  }
+
+  &__combobox-input-wrapper {
+    position: relative;
+    width: 100%;
+    cursor: default;
+    overflow: hidden;
+    border-radius: 0.375rem;
+    border: solid 1px var(--grey-light-color);
+    background-color: #fff;
+    text-align: left;
+
+    &:focus {
+      outline: 0;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px var(--primary-color);
+    }
+  }
+
+  &__input {
+    width: 100%;
+    border: none;
+    padding: 8px 40px 8px 12px;
+    font-size: 14px;
+    line-height: 1.25rem;
+    color: var(--gray);
+
+    &:focus {
+      outline-color: var(--primary-color);
+    }
+  }
+
+  &__button {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    padding-right: 8px;
+    background-color: transparent;
+    border: none;
+  }
+
+  &__chevron {
+    width: 20px;
+    height: 20px;
+    color: var(--gray-color);
+  }
+
+  &__options {
+    position: absolute;
+    margin-top: 4px;
+    max-height: 240px;
+    width: 100%;
+    overflow: auto;
+    border-radius: 0.375rem;
+    border: 1px solid var(--grey-light-color);
+    background-color: #fff;
+    padding: 4px 0;
+
+    &:focus {
+      outline: 0;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px var(--primary-color);
+    }
+  }
+
+  &__option {
+    position: relative;
+    cursor: default;
+    user-select: none;
+    padding: 8px 16px 8px 40px;
+
+    &--active {
+      background-color: var(--primary-color);
+      color: var(--white);
+    }
+
+    &--inactive {
+      color: var(--grey-color);
+    }
+
+    &--no-result {
+      position: relative;
+      user-select: none;
+      cursor: default;
+      padding: 8px 16px;
+      color: var(--gray-color);
+    }
+
+    &-label {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &--selected {
+        font-weight: 700;
+      }
+
+      &--not-selected {
+        font-weight: 400;
+      }
+    }
+
+    &-check {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+
+      &--active {
+        color: var(--white);
+      }
+
+      &--inactive {
+        color: var(--primary-color);
+      }
+
+      &-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/CategoryChip.vue b/src/components/CategoryChip.vue
index 8712c74b..e9ffa056 100644
--- a/src/components/CategoryChip.vue
+++ b/src/components/CategoryChip.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="category-chip"
   >
-    <span class="category-chip__dot"></span>
+    <span v-if="withDot" class="category-chip__dot"></span>
     <span class="category-chip__label">{{ label }}</span>
+		<slot />
   </div>
 </template>
 
@@ -11,7 +12,11 @@ const props = defineProps({
   label: {
     type: String,
     required: true
-  }
+  },
+	withDot: {
+		type: Boolean,
+		default: true
+	}
 })
 </script>
 
diff --git a/src/components/settings/hostingPreferences/HAppSelectionSection.vue b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
index 43bc50b4..a66afb57 100644
--- a/src/components/settings/hostingPreferences/HAppSelectionSection.vue
+++ b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
@@ -1,21 +1,126 @@
 <script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import { computed, ref } from 'vue'
 import SettingsSection from '../SettingsSection.vue'
+import BaseCombobox from '@/components/BaseCombobox.vue'
+import CategoryChip from '@/components/CategoryChip.vue'
+import CircledExIcon from '@/components/icons/CircledExIcon.vue'
+import FilledCheckIcon from '@/components/icons/FilledCheckIcon.vue'
 import PencilIcon from '@/components/icons/PencilIcon.vue'
+import { countries } from '@/constants/countries'
+
+const isEditing = ref(false)
+
+const mappedCountries = countries.map((country, index) => ({
+  id: index + 1,
+  label: country
+}))
+
+const selectedJurisdictions = [
+  {
+    id: 1,
+    label: 'Nigeria'
+  },
+  {
+    id: 2,
+    label: 'Poland'
+  },
+  {
+    id: 3,
+    label: 'United States'
+  },
+  {
+    id: 4,
+    label: 'United Kingdom'
+  }
+]
+
+const visibleJurisdictions = computed(() => {
+  return [...selectedJurisdictions].splice(0, 2)
+})
+
+const remainingJurisdictionsCount = computed(() => {
+  return selectedJurisdictions.length - visibleJurisdictions.value.length
+})
+
+function edit(): void {
+  isEditing.value = true
+}
+
+function updateJurisdictions(selected: any): void {
+  console.log(selected)
+}
 </script>
 
 <template>
   <SettingsSection
     :title="$t('hosting_preferences.happ_selection.header')"
-    is-disabled
     class="happ-selection-section"
   >
-    <div class="card-content disabled">
+    <div class="card-content">
       <div class="happ-selection-section__jurisdiction-exclusions">
         <span class="selection-label">
           {{ $t('hosting_preferences.happ_selection.jurisdiction_exclusions') }}
         </span>
-        <span class="selection-choices">None</span>
-        <PencilIcon class="pencil" />
+        <div
+          v-if="selectedJurisdictions.length > 0"
+          class="happ-selection-section__jurisdiction-exclusions-selected"
+        >
+          <div
+            v-for="option in visibleJurisdictions"
+            :key="option.id"
+            class="happ-selection-section__jurisdiction-exclusions-selected-item"
+          >
+            <CategoryChip
+              :with-dot="false"
+              :label="option.label"
+            >
+              <XMarkIcon class="happ-selection-section__jurisdiction-exclusions-selected-item-delete-icon" />
+            </CategoryChip>
+          </div>
+
+          <CategoryChip
+            :with-dot="false"
+            :label="`+${remainingJurisdictionsCount} more`"
+						class="happ-selection-section__jurisdiction-exclusions-selected-item"
+					>
+          </CategoryChip>
+        </div>
+        <span
+          v-else
+          class="selection-choices"
+        >
+          None
+        </span>
+        <PencilIcon
+          v-if="!isEditing"
+          class="happ-selection-section__jurisdiction-exclusions-edit-icon"
+          @click="edit"
+        />
+
+        <div
+          v-if="isEditing"
+          class="happ-selection-section__jurisdiction-exclusions-edit"
+        >
+          <FilledCheckIcon
+            class="happ-selection-section__jurisdiction-exclusions-edit-button"
+            data-testid="save-button"
+            @click="save"
+          />
+
+          <CircledExIcon
+            class="happ-selection-section__jurisdiction-exclusions-edit-button"
+            data-testid="cancel-button"
+            @click="cancel"
+          />
+
+          <BaseCombobox
+            :options="mappedCountries"
+            :selected="selectedJurisdictions"
+            class="happ-selection-section__jurisdiction-exclusions-combobox"
+            @update:selected="updateJurisdictions"
+          />
+        </div>
       </div>
 
       <div class="happ-selection-section__category-tags">
@@ -63,6 +168,42 @@ import PencilIcon from '@/components/icons/PencilIcon.vue'
     margin-top: 4px;
     display: flex;
     align-items: center;
+
+    &-selected {
+      display: flex;
+      align-items: center;
+    }
+
+    &-selected-item {
+      margin-right: 8px;
+      white-space: nowrap;
+    }
+
+    &-selected-item-delete-icon {
+      width: 14px;
+      margin-left: 4px;
+      cursor: pointer;
+    }
+
+    &-edit-icon {
+      margin-left: 8px;
+      margin-top: 4px;
+      cursor: pointer;
+    }
+
+    &-combobox {
+      margin-left: 8px;
+    }
+
+    &-edit {
+      display: flex;
+      align-items: center;
+
+      &-button {
+        margin-left: 8px;
+        cursor: pointer;
+      }
+    }
   }
 
   &__category-tags {
diff --git a/src/constants/countries.ts b/src/constants/countries.ts
new file mode 100644
index 00000000..9718555d
--- /dev/null
+++ b/src/constants/countries.ts
@@ -0,0 +1,238 @@
+export const countries = [
+  'Afghanistan',
+  'Aland Islands',
+  'Albania',
+  'Algeria',
+  'Andorra',
+  'Angola',
+  'Anguilla',
+  'Antigua And Barbuda',
+  'Argentina',
+  'Armenia',
+  'Aruba',
+  'Australia',
+  'Austria',
+  'Azerbaijan',
+  'Bahamas',
+  'Bahrain',
+  'Bangladesh',
+  'Barbados',
+  'Belarus',
+  'Belgium',
+  'Belize',
+  'Benin',
+  'Bermuda',
+  'Bhutan',
+  'Bolivia',
+  'Bosnia And Herzegovina',
+  'Botswana',
+  'Bouvet Island',
+  'Brazil',
+  'British Indian Ocean Territory',
+  'Virgin Islands, British',
+  'Brunei',
+  'Bulgaria',
+  'Burkina Faso',
+  'Burundi',
+  'Cambodia',
+  'Republic of Cameroon',
+  'Canada',
+  'Cape Verde',
+  'Caribbean Netherlands',
+  'Cayman Islands',
+  'Central African Republic',
+  'Chad',
+  'Chile',
+  'China',
+  'Christmas Island',
+  'Cocos (Keeling) Islands',
+  'Colombia',
+  'Comoros',
+  'Congo',
+  'Congo, The Democratic Republic Of The',
+  'Cook Islands',
+  'Costa Rica',
+  'Croatia',
+  'Curaçao',
+  'Cyprus',
+  'Czech Republic',
+  "Côte d'Ivoire",
+  'Denmark',
+  'Djibouti',
+  'Dominica',
+  'Dominican Republic',
+  'Ecuador',
+  'Egypt',
+  'El Salvador',
+  'Equatorial Guinea',
+  'Eritrea',
+  'Estonia',
+  'Eswatini',
+  'Ethiopia',
+  'Falkland Islands (Malvinas)',
+  'Faroe Islands',
+  'Fiji',
+  'Finland',
+  'France',
+  'French Guiana',
+  'French Polynesia',
+  'French Southern Territories',
+  'Gabon',
+  'Gambia',
+  'Georgia',
+  'Germany',
+  'Ghana',
+  'Gibraltar',
+  'Greece',
+  'Greenland',
+  'Grenada',
+  'Guadeloupe',
+  'Guatemala',
+  'Guernsey',
+  'Guinea',
+  'Guinea Bissau',
+  'Guyana',
+  'Haiti',
+  'Heard Island And Mcdonald Islands',
+  'Honduras',
+  'Hong Kong',
+  'Hungary',
+  'Iceland',
+  'India',
+  'Indonesia',
+  'Ireland',
+  'Isle Of Man',
+  'Israel',
+  'Italy',
+  'Jamaica',
+  'Japan',
+  'Jersey',
+  'Jordan',
+  'Kazakhstan',
+  'Kenya',
+  'Kiribati',
+  'Kosovo',
+  'Kuwait',
+  'Kyrgyzstan',
+  'Lao Peoples Democratic Republic',
+  'Latvia',
+  'Lebanon',
+  'Lesotho',
+  'Liberia',
+  'Libyan Arab Jamahiriya',
+  'Liechtenstein',
+  'Lithuania',
+  'Luxembourg',
+  'Macao',
+  'Madagascar',
+  'Malawi',
+  'Malaysia',
+  'Maldives',
+  'Mali',
+  'Malta',
+  'Martinique',
+  'Mauritania',
+  'Mauritius',
+  'Mayotte',
+  'Mexico',
+  'Moldova, Republic of',
+  'Monaco',
+  'Mongolia',
+  'Montenegro',
+  'Montserrat',
+  'Morocco',
+  'Mozambique',
+  'Myanmar',
+  'Namibia',
+  'Nauru',
+  'Nepal',
+  'Netherlands',
+  'Netherlands Antilles',
+  'New Caledonia',
+  'New Zealand',
+  'Nicaragua',
+  'Niger',
+  'Nigeria',
+  'Niue',
+  'Norfolk Island',
+  'North Macedonia',
+  'Norway',
+  'Oman',
+  'Pakistan',
+  'Palestine, State of',
+  'Panama',
+  'Papua New Guinea',
+  'Paraguay',
+  'Peru',
+  'Philippines',
+  'Pitcairn',
+  'Poland',
+  'Portugal',
+  'Qatar',
+  'Reunion',
+  'Romania',
+  'Russia',
+  'Rwanda',
+  'Samoa',
+  'San Marino',
+  'Sao Tome And Principe',
+  'Saudi Arabia',
+  'Senegal',
+  'Serbia',
+  'Seychelles',
+  'Sierra Leone',
+  'Singapore',
+  'Sint Maarten',
+  'Slovakia',
+  'Slovenia',
+  'Solomon Islands',
+  'Somalia',
+  'South Africa',
+  'South Georgia And The South Sandwich Islands',
+  'South Korea',
+  'South Sudan',
+  'Spain',
+  'Sri Lanka',
+  'Saint Barthélemy',
+  'Saint Helena',
+  'Saint Kitts And Nevis',
+  'Saint Lucia',
+  'Saint Martin',
+  'Saint Pierre And Miquelon',
+  'St. Vincent',
+  'Suriname',
+  'Svalbard And Jan Mayen',
+  'Sweden',
+  'Switzerland',
+  'Taiwan (Province of China)',
+  'Tajikistan',
+  'Tanzania, United Republic Of',
+  'Thailand',
+  'Timor Leste',
+  'Togo',
+  'Tokelau',
+  'Tonga',
+  'Trinidad and Tobago',
+  'Tunisia',
+  'Turkey',
+  'Turkmenistan',
+  'Turks and Caicos Islands',
+  'Tuvalu',
+  'United States Minor Outlying Islands',
+  'Uganda',
+  'Ukraine',
+  'United Arab Emirates',
+  'United Kingdom',
+  'United States',
+  'Uruguay',
+  'Uzbekistan',
+  'Vanuatu',
+  'Holy See (Vatican City State)',
+  'Venezuela',
+  'Vietnam',
+  'Wallis And Futuna',
+  'Western Sahara',
+  'Yemen',
+  'Zambia',
+  'Zimbabwe'
+]
diff --git a/yarn.lock b/yarn.lock
index bc724592..c72db2a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1704,6 +1704,13 @@
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
   integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
 
+"@headlessui/vue@^1.7.17":
+  version "1.7.17"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.17.tgz#153a17432a0fa4b58ac55e16e0c883b66bec5f83"
+  integrity sha512-hmJChv8HzKorxd9F70RGnECAwZfkvmmwOqreuKLWY/19d5qbWnSdw+DNbuA/Uo6X5rb4U5B3NrT+qBKPmjhRqw==
+  dependencies:
+    "@tanstack/vue-virtual" "^3.0.0-beta.60"
+
 "@heroicons/vue@^2.0.17":
   version "2.0.17"
   resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-2.0.17.tgz#4c23f26a715c2931c0d4fd5d2e77f8ede7a6a77b"
@@ -2280,6 +2287,18 @@
     "@swc/core-win32-ia32-msvc" "1.3.32"
     "@swc/core-win32-x64-msvc" "1.3.32"
 
+"@tanstack/virtual-core@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz#637bee36f0cabf96a1d436887c90f138a7e9378b"
+  integrity sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==
+
+"@tanstack/vue-virtual@^3.0.0-beta.60":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/vue-virtual/-/vue-virtual-3.0.1.tgz#ca96c169d3c66de3e6eef638a06c74275d77c619"
+  integrity sha512-85Cyi8m7h1xzGB2FyXMurPVFOZvatycVU7OfhQ8QFk27E4tQ7ISNfYEMrakTTaE0ZyNsKRFlAzHuwL1Bv1vuMw==
+  dependencies:
+    "@tanstack/virtual-core" "3.0.0"
+
 "@types/babel__core@^7.0.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.0.tgz#61bc5a4cae505ce98e1e36c5445e4bee060d8891"

From 03ab98830c768f848a0e47beb87a11011bc63156 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Thu, 18 Jan 2024 11:57:09 +0100
Subject: [PATCH 2/5] feat: implement jurisdiction selection

---
 src/assets/css/variables.css                  |   1 +
 src/components/BaseCombobox.vue               |  45 ++---
 src/components/BaseTooltip.vue                |   2 +-
 .../HAppSelectionSection.vue                  | 165 +++++++++++++-----
 4 files changed, 148 insertions(+), 65 deletions(-)

diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
index 13fcea1e..a230111d 100644
--- a/src/assets/css/variables.css
+++ b/src/assets/css/variables.css
@@ -6,6 +6,7 @@
 
     --primary-color: #00cad9;
     --primary-light-color: rgba(176, 236, 240, 0.72);
+    --primary-lighter-color: rgba(247, 254, 255, 1);
     --primary-extra-light-color: rgba(0, 202, 217, 0.06);
 
     --grey-color: #606c8b;
diff --git a/src/components/BaseCombobox.vue b/src/components/BaseCombobox.vue
index 3a174e2f..29c78e53 100644
--- a/src/components/BaseCombobox.vue
+++ b/src/components/BaseCombobox.vue
@@ -7,7 +7,7 @@ import {
   ComboboxOption,
   TransitionRoot
 } from '@headlessui/vue'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/20/solid'
 import { ref, computed } from 'vue'
 
 interface Option {
@@ -47,6 +47,7 @@ const filteredOptions = computed(() =>
 <template>
   <div class="base-combobox__wrapper">
     <Combobox
+      v-slot="{ open }"
       :model-value="props.selected"
       multiple
       @update:model-value="emit('update:selected', $event)"
@@ -64,9 +65,10 @@ const filteredOptions = computed(() =>
             <ComboboxButton
               class="base-combobox__button"
             >
-              <ChevronUpDownIcon
+              <ChevronDownIcon
                 class="base-combobox__chevron"
                 aria-hidden="true"
+                :class="{ 'base-combobox__chevron--open': open }"
               />
             </ComboboxButton>
           </div>
@@ -98,6 +100,8 @@ const filteredOptions = computed(() =>
                   :class="{
                     'base-combobox__option--active': active,
                     'base-combobox__option--inactive': !active,
+                    'base-combobox__option--selected': selected,
+                    'base-combobox__option--not-selected': !selected
                   }"
                 >
                   <span
@@ -134,46 +138,36 @@ const filteredOptions = computed(() =>
 
 <style lang="scss" scoped>
 .base-combobox {
-  &__wrapper {
-    width: 500px;
-  }
-
   &__combobox {
     display: flex;
   }
 
   &__combobox-content {
     position: relative;
-    margin-top: 4px;
   }
 
   &__combobox-input-wrapper {
     position: relative;
-    width: 100%;
     cursor: default;
     overflow: hidden;
     border-radius: 0.375rem;
     border: solid 1px var(--grey-light-color);
     background-color: #fff;
     text-align: left;
-
-    &:focus {
-      outline: 0;
-      border-color: var(--primary-color);
-      box-shadow: 0 0 0 3px var(--primary-color);
-    }
   }
 
   &__input {
-    width: 100%;
-    border: none;
     padding: 8px 40px 8px 12px;
     font-size: 14px;
     line-height: 1.25rem;
     color: var(--gray);
+    border: 1px solid transparent;
+    border-radius: 4px;
 
     &:focus {
-      outline-color: var(--primary-color);
+      outline: 0;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px var(--primary-color);
     }
   }
 
@@ -192,7 +186,12 @@ const filteredOptions = computed(() =>
   &__chevron {
     width: 20px;
     height: 20px;
-    color: var(--gray-color);
+    color: var(--primary-color);
+    transition: transform 0.2s ease-in-out;
+
+    &--open {
+      transform: rotate(180deg);
+    }
   }
 
   &__options {
@@ -209,7 +208,6 @@ const filteredOptions = computed(() =>
     &:focus {
       outline: 0;
       border-color: var(--primary-color);
-      box-shadow: 0 0 0 3px var(--primary-color);
     }
   }
 
@@ -219,8 +217,12 @@ const filteredOptions = computed(() =>
     user-select: none;
     padding: 8px 16px 8px 40px;
 
+    &--selected {
+      background-color: var(--primary-lighter-color);
+    }
+
     &--active {
-      background-color: var(--primary-color);
+      background-color: var(--primary-light-color);
       color: var(--white);
     }
 
@@ -241,6 +243,7 @@ const filteredOptions = computed(() =>
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      padding-right: 12px;
 
       &--selected {
         font-weight: 700;
@@ -255,7 +258,7 @@ const filteredOptions = computed(() =>
       position: absolute;
       top: 0;
       bottom: 0;
-      left: 0;
+      right: 12px;
       display: flex;
       align-items: center;
       padding-left: 12px;
diff --git a/src/components/BaseTooltip.vue b/src/components/BaseTooltip.vue
index cf5b36ab..7092798d 100644
--- a/src/components/BaseTooltip.vue
+++ b/src/components/BaseTooltip.vue
@@ -46,7 +46,7 @@ defineProps<{
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease 0.5s;
+  transition: opacity 0.3s ease 0.1s;
 }
 
 .fade-enter-from,
diff --git a/src/components/settings/hostingPreferences/HAppSelectionSection.vue b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
index a66afb57..48a68301 100644
--- a/src/components/settings/hostingPreferences/HAppSelectionSection.vue
+++ b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
@@ -3,6 +3,7 @@ import { XMarkIcon } from '@heroicons/vue/20/solid'
 import { computed, ref } from 'vue'
 import SettingsSection from '../SettingsSection.vue'
 import BaseCombobox from '@/components/BaseCombobox.vue'
+import BaseTooltip from '@/components/BaseTooltip.vue'
 import CategoryChip from '@/components/CategoryChip.vue'
 import CircledExIcon from '@/components/icons/CircledExIcon.vue'
 import FilledCheckIcon from '@/components/icons/FilledCheckIcon.vue'
@@ -11,44 +12,65 @@ import { countries } from '@/constants/countries'
 
 const isEditing = ref(false)
 
-const mappedCountries = countries.map((country, index) => ({
+interface Option {
+  id: number
+  label: string
+}
+
+const initiallySelectedJurisdictions: string[] = []
+const previouslySelectedJurisdictions = ref<Option[]>([])
+
+const mappedCountries: Option[] = countries.map((country, index) => ({
   id: index + 1,
   label: country
 }))
 
-const selectedJurisdictions = [
-  {
-    id: 1,
-    label: 'Nigeria'
-  },
-  {
-    id: 2,
-    label: 'Poland'
-  },
-  {
-    id: 3,
-    label: 'United States'
-  },
-  {
-    id: 4,
-    label: 'United Kingdom'
-  }
-]
+const selectedJurisdictions = ref<Option[]>(
+  mappedCountries.filter((country) => initiallySelectedJurisdictions.includes(country.label))
+)
 
 const visibleJurisdictions = computed(() => {
-  return [...selectedJurisdictions].splice(0, 2)
+  return [...selectedJurisdictions.value].splice(0, 2)
+})
+
+const remainingJurisdictions = computed(() => {
+  return [...selectedJurisdictions.value].splice(2)
 })
 
 const remainingJurisdictionsCount = computed(() => {
-  return selectedJurisdictions.length - visibleJurisdictions.value.length
+  return remainingJurisdictions.value.length
 })
 
+const isMoreSelectedJurisdictionsTooltipVisible = ref(false)
+
+function showMoreSelectedJurisdictions(): void {
+  isMoreSelectedJurisdictionsTooltipVisible.value = true
+}
+
 function edit(): void {
   isEditing.value = true
+  previouslySelectedJurisdictions.value = [...selectedJurisdictions.value]
 }
 
-function updateJurisdictions(selected: any): void {
-  console.log(selected)
+function updateJurisdictions(selected: Option[]): void {
+  selectedJurisdictions.value = selected
+}
+
+function removeJurisdiction(option: Option): void {
+  isEditing.value = true
+  selectedJurisdictions.value = selectedJurisdictions.value.filter(
+    (jurisdiction) => jurisdiction.id !== option.id
+  )
+}
+
+function save(): void {
+  // Make an API call to save new selected jurisdictions
+  isEditing.value = false
+}
+
+function cancel(): void {
+  isEditing.value = false
+  selectedJurisdictions.value = [...previouslySelectedJurisdictions.value]
 }
 </script>
 
@@ -59,7 +81,7 @@ function updateJurisdictions(selected: any): void {
   >
     <div class="card-content">
       <div class="happ-selection-section__jurisdiction-exclusions">
-        <span class="selection-label">
+        <span class="happ-selection-section__selection-label">
           {{ $t('hosting_preferences.happ_selection.jurisdiction_exclusions') }}
         </span>
         <div
@@ -75,20 +97,42 @@ function updateJurisdictions(selected: any): void {
               :with-dot="false"
               :label="option.label"
             >
-              <XMarkIcon class="happ-selection-section__jurisdiction-exclusions-selected-item-delete-icon" />
+              <XMarkIcon
+                class="happ-selection-section__jurisdiction-exclusions-selected-item-delete-icon"
+                @click="removeJurisdiction(option)"
+              />
             </CategoryChip>
           </div>
 
           <CategoryChip
+            v-if="selectedJurisdictions.length > 2"
             :with-dot="false"
             :label="`+${remainingJurisdictionsCount} more`"
-						class="happ-selection-section__jurisdiction-exclusions-selected-item"
-					>
+            class="happ-selection-section__jurisdiction-exclusions-selected-item"
+            @click="showMoreSelectedJurisdictions"
+          >
+            <BaseTooltip
+              v-click-outside="() => isMoreSelectedJurisdictionsTooltipVisible = false"
+              class="happ-selection-section__jurisdiction-exclusions-tooltip"
+              :is-visible="isMoreSelectedJurisdictionsTooltipVisible"
+            >
+              <div
+                v-for="remainingJurisdiction in remainingJurisdictions"
+                :key="remainingJurisdiction.id"
+                class="happ-selection-section__jurisdiction-exclusions-selected-item happ-selection-section__jurisdiction-exclusions-selected-item--remaining"
+              >
+                <span>{{ remainingJurisdiction.label }}</span>
+                <XMarkIcon
+                  class="happ-selection-section__jurisdiction-exclusions-selected-item-delete-icon"
+                  @click="removeJurisdiction(remainingJurisdiction)"
+                />
+              </div>
+            </BaseTooltip>
           </CategoryChip>
         </div>
         <span
           v-else
-          class="selection-choices"
+          class="happ-selection-section__jurisdiction-exclusions-selected"
         >
           None
         </span>
@@ -124,21 +168,29 @@ function updateJurisdictions(selected: any): void {
       </div>
 
       <div class="happ-selection-section__category-tags">
-        <span class="selection-label">
+        <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 selection-child-row">
-          <span class="selection-label">
+          <span class="happ-selection-section__selection-label happ-selection-section__selection-label--child">
             {{ $t('hosting_preferences.happ_selection.exclude') }}
           </span>
-          <span class="selection-choices">None</span>
+          <span
+            class="happ-selection-section__category-tags-selected"
+          >
+            None
+          </span>
           <PencilIcon />
         </div>
         <div class="happ-selection-section__category-tags-item selection-child-row">
-          <span class="selection-label">
+          <span class="happ-selection-section__selection-label happ-selection-section__selection-label--child happ-selection-section__selection-label--include">
             {{ $t('hosting_preferences.happ_selection.include') }}
           </span>
-          <span class="selection-choices">None</span>
+          <span
+            class="happ-selection-section__category-tags-selected"
+          >
+            None
+          </span>
           <PencilIcon />
         </div>
       </div>
@@ -151,20 +203,27 @@ function updateJurisdictions(selected: any): void {
   padding: 0 0 35px 0;
 }
 
-.selection-label {
-  flex-basis: 184px;
-}
+.happ-selection-section {
+  &__selection-label {
+    display: flex;
+    justify-content: end;
+    white-space: nowrap;
 
-.selection-choices {
-  flex-basis: 44px;
-}
+    &--main {
+      width: 140px;
+    }
 
-.selection-child-row .selection-label {
-  flex-basis: 144px;
-}
+    &--child {
+      margin-left: 50px;
+    }
+
+    &--include {
+      padding-left: 3px;
+    }
+  }
 
-.happ-selection-section {
   &__jurisdiction-exclusions {
+    height: 28px;
     margin-top: 4px;
     display: flex;
     align-items: center;
@@ -172,11 +231,21 @@ function updateJurisdictions(selected: any): void {
     &-selected {
       display: flex;
       align-items: center;
+      margin-left: 60px;
     }
 
     &-selected-item {
       margin-right: 8px;
       white-space: nowrap;
+      cursor: pointer;
+      position: relative;
+
+      &--remaining {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 24px;
+      }
     }
 
     &-selected-item-delete-icon {
@@ -204,10 +273,20 @@ function updateJurisdictions(selected: any): void {
         cursor: pointer;
       }
     }
+
+    &-tooltip {
+      top: 32px;
+    }
   }
 
   &__category-tags {
     margin-top: 16px;
+
+    &-selected {
+      display: flex;
+      align-items: center;
+      margin-left: 60px;
+    }
   }
 
   &__category-tags-item {

From d6fc050859cecb3804dcd384f2ecd76b0a384c61 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Fri, 19 Jan 2024 10:54:03 +0100
Subject: [PATCH 3/5] feat: extract exclusion selection component and add
 spinner

---
 .../hostingPreferences/ExclusionSelect.vue    | 279 ++++++++++++++++++
 .../HAppSelectionSection.vue                  | 153 +---------
 .../JurisdictionExclusionSelect.vue           |  25 ++
 3 files changed, 306 insertions(+), 151 deletions(-)
 create mode 100644 src/components/settings/hostingPreferences/ExclusionSelect.vue
 create mode 100644 src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue

diff --git a/src/components/settings/hostingPreferences/ExclusionSelect.vue b/src/components/settings/hostingPreferences/ExclusionSelect.vue
new file mode 100644
index 00000000..56802751
--- /dev/null
+++ b/src/components/settings/hostingPreferences/ExclusionSelect.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CircleSpinner from '../../../../ui-common-library/src/components/CircleSpinner.vue'
+import BaseCombobox from '@/components/BaseCombobox.vue'
+import BaseTooltip from '@/components/BaseTooltip.vue'
+import CategoryChip from '@/components/CategoryChip.vue'
+import CircledExIcon from '@/components/icons/CircledExIcon.vue'
+import FilledCheckIcon from '@/components/icons/FilledCheckIcon.vue'
+import PencilIcon from '@/components/icons/PencilIcon.vue'
+
+const { t } = useI18n()
+
+const emit = defineEmits(['save'])
+
+interface Option {
+  id: number
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    options: string[]
+    isLoading: boolean
+    isSaving: boolean
+  }>(),
+  {
+    options: () => [],
+    isLoading: false,
+    isSaving: false
+  }
+)
+
+const isEditing = ref(false)
+
+const initiallySelected: string[] = []
+const previouslySelected = ref<Option[]>([])
+
+const mappedValues: Option[] = props.options.map((country, index) => ({
+  id: index + 1,
+  label: country
+}))
+
+const selectedOptions = ref<Option[]>(
+  mappedValues.filter((option) => initiallySelected.includes(option.label))
+)
+
+const visibleOptions = computed(() => {
+  return [...selectedOptions.value].splice(0, 2)
+})
+
+const remainingOptions = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  return [...selectedOptions.value].splice(2)
+})
+
+const remainingOptionsCount = computed(() => {
+  return remainingOptions.value.length
+})
+
+const isMoreSelectedTooltipVisible = ref(false)
+
+function showMoreSelectedOptions(): void {
+  isMoreSelectedTooltipVisible.value = true
+}
+
+function edit(): void {
+  isEditing.value = true
+  previouslySelected.value = [...selectedOptions.value]
+}
+
+function updateOptions(selected: Option[]): void {
+  selectedOptions.value = selected
+}
+
+function removeOption(optionToBeRemoved: Option): void {
+  isEditing.value = true
+  selectedOptions.value = selectedOptions.value.filter(
+    (option) => option.id !== optionToBeRemoved.id
+  )
+}
+
+function save(): void {
+  emit('save', selectedOptions.value)
+}
+
+function cancel(): void {
+  isEditing.value = false
+  selectedOptions.value = [...previouslySelected.value]
+}
+</script>
+
+<template>
+  <div class="exclusion-select__exclusions">
+    <span class="exclusion-select__selection-label">
+      {{ t('hosting_preferences.happ_selection.jurisdiction_exclusions') }}
+    </span>
+
+    <div
+      v-if="selectedOptions.length > 0"
+      class="exclusion-select__exclusions-selected"
+      :class="{ 'exclusion-select__exclusions-selected--disabled': props.isSaving }"
+    >
+      <div
+        v-for="option in visibleOptions"
+        :key="option.id"
+        class="exclusion-select__exclusions-selected-item"
+      >
+        <CategoryChip
+          :with-dot="false"
+          :label="option.label"
+        >
+          <XMarkIcon
+            class="exclusion-select__exclusions-selected-item-delete-icon"
+            @click="removeOption(option)"
+          />
+        </CategoryChip>
+      </div>
+
+      <CategoryChip
+        v-if="selectedOptions.length > 2"
+        :with-dot="false"
+        :label="`+${remainingOptionsCount} more`"
+        class="exclusion-select__exclusions-selected-item"
+        @click="showMoreSelectedOptions"
+      >
+        <BaseTooltip
+          v-click-outside="() => isMoreSelectedTooltipVisible = false"
+          class="exclusion-select__exclusions-tooltip"
+          :is-visible="isMoreSelectedTooltipVisible"
+        >
+          <div
+            v-for="remainingOption in remainingOptions"
+            :key="remainingOption.id"
+            class="exclusion-select__exclusions-selected-item exclusion-select__exclusions-selected-item--remaining"
+          >
+            <span>{{ remainingOption.label }}</span>
+            <XMarkIcon
+              class="exclusion-select__exclusions-selected-item-delete-icon"
+              @click="removeOption(remainingOption)"
+            />
+          </div>
+        </BaseTooltip>
+      </CategoryChip>
+    </div>
+    <span
+      v-else
+      class="exclusion-select__exclusions-selected"
+    >
+      None
+    </span>
+    <PencilIcon
+      v-if="!isEditing"
+      class="exclusion-select__exclusions-edit-icon"
+      @click="edit"
+    />
+
+    <div
+      v-if="isEditing"
+      class="exclusion-select__exclusions-edit"
+      :class="{ 'exclusion-select__exclusions-edit--disabled': props.isSaving }"
+    >
+      <FilledCheckIcon
+        class="exclusion-select__exclusions-edit-button"
+        data-testid="save-button"
+        @click="save"
+      />
+
+      <CircledExIcon
+        class="exclusion-select__exclusions-edit-button"
+        data-testid="cancel-button"
+        @click="cancel"
+      />
+
+      <BaseCombobox
+        :options="mappedValues"
+        :selected="selectedOptions"
+        class="exclusion-select__exclusions-combobox"
+        @update:selected="updateOptions"
+      />
+    </div>
+
+    <CircleSpinner
+      :scale="0.5"
+      class="exclusion-select__exclusions-edit-spinner"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.exclusion-select {
+  &__selection-label {
+    display: flex;
+    justify-content: end;
+    white-space: nowrap;
+
+    &--main {
+      width: 140px;
+    }
+
+    &--child {
+      margin-left: 50px;
+    }
+
+    &--include {
+      padding-left: 3px;
+    }
+  }
+
+  &__exclusions {
+    height: 28px;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+
+    &-selected {
+      display: flex;
+      align-items: center;
+      margin-left: 60px;
+
+      &--disabled {
+        opacity: 0.15;
+      }
+    }
+
+    &-selected-item {
+      margin-right: 8px;
+      white-space: nowrap;
+      cursor: pointer;
+      position: relative;
+
+      &--remaining {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 24px;
+      }
+    }
+
+    &-selected-item-delete-icon {
+      width: 14px;
+      margin-left: 4px;
+      cursor: pointer;
+    }
+
+    &-edit-icon {
+      margin-left: 8px;
+      margin-top: 4px;
+      cursor: pointer;
+    }
+
+    &-combobox {
+      margin-left: 8px;
+    }
+
+    &-edit {
+      display: flex;
+      align-items: center;
+
+      &-button {
+        margin-left: 8px;
+        cursor: pointer;
+      }
+
+      &-spinner {
+      }
+
+      &--disabled {
+        opacity: 0.15;
+      }
+    }
+
+    &-tooltip {
+      top: 32px;
+    }
+  }
+}
+</style>
diff --git a/src/components/settings/hostingPreferences/HAppSelectionSection.vue b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
index 48a68301..5ea56941 100644
--- a/src/components/settings/hostingPreferences/HAppSelectionSection.vue
+++ b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { XMarkIcon } from '@heroicons/vue/20/solid'
-import { computed, ref } from 'vue'
 import SettingsSection from '../SettingsSection.vue'
 import BaseCombobox from '@/components/BaseCombobox.vue'
 import BaseTooltip from '@/components/BaseTooltip.vue'
@@ -8,70 +7,7 @@ import CategoryChip from '@/components/CategoryChip.vue'
 import CircledExIcon from '@/components/icons/CircledExIcon.vue'
 import FilledCheckIcon from '@/components/icons/FilledCheckIcon.vue'
 import PencilIcon from '@/components/icons/PencilIcon.vue'
-import { countries } from '@/constants/countries'
-
-const isEditing = ref(false)
-
-interface Option {
-  id: number
-  label: string
-}
-
-const initiallySelectedJurisdictions: string[] = []
-const previouslySelectedJurisdictions = ref<Option[]>([])
-
-const mappedCountries: Option[] = countries.map((country, index) => ({
-  id: index + 1,
-  label: country
-}))
-
-const selectedJurisdictions = ref<Option[]>(
-  mappedCountries.filter((country) => initiallySelectedJurisdictions.includes(country.label))
-)
-
-const visibleJurisdictions = computed(() => {
-  return [...selectedJurisdictions.value].splice(0, 2)
-})
-
-const remainingJurisdictions = computed(() => {
-  return [...selectedJurisdictions.value].splice(2)
-})
-
-const remainingJurisdictionsCount = computed(() => {
-  return remainingJurisdictions.value.length
-})
-
-const isMoreSelectedJurisdictionsTooltipVisible = ref(false)
-
-function showMoreSelectedJurisdictions(): void {
-  isMoreSelectedJurisdictionsTooltipVisible.value = true
-}
-
-function edit(): void {
-  isEditing.value = true
-  previouslySelectedJurisdictions.value = [...selectedJurisdictions.value]
-}
-
-function updateJurisdictions(selected: Option[]): void {
-  selectedJurisdictions.value = selected
-}
-
-function removeJurisdiction(option: Option): void {
-  isEditing.value = true
-  selectedJurisdictions.value = selectedJurisdictions.value.filter(
-    (jurisdiction) => jurisdiction.id !== option.id
-  )
-}
-
-function save(): void {
-  // Make an API call to save new selected jurisdictions
-  isEditing.value = false
-}
-
-function cancel(): void {
-  isEditing.value = false
-  selectedJurisdictions.value = [...previouslySelectedJurisdictions.value]
-}
+import JurisdictionExclusionSelect from '@/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue'
 </script>
 
 <template>
@@ -80,92 +16,7 @@ function cancel(): void {
     class="happ-selection-section"
   >
     <div class="card-content">
-      <div class="happ-selection-section__jurisdiction-exclusions">
-        <span class="happ-selection-section__selection-label">
-          {{ $t('hosting_preferences.happ_selection.jurisdiction_exclusions') }}
-        </span>
-        <div
-          v-if="selectedJurisdictions.length > 0"
-          class="happ-selection-section__jurisdiction-exclusions-selected"
-        >
-          <div
-            v-for="option in visibleJurisdictions"
-            :key="option.id"
-            class="happ-selection-section__jurisdiction-exclusions-selected-item"
-          >
-            <CategoryChip
-              :with-dot="false"
-              :label="option.label"
-            >
-              <XMarkIcon
-                class="happ-selection-section__jurisdiction-exclusions-selected-item-delete-icon"
-                @click="removeJurisdiction(option)"
-              />
-            </CategoryChip>
-          </div>
-
-          <CategoryChip
-            v-if="selectedJurisdictions.length > 2"
-            :with-dot="false"
-            :label="`+${remainingJurisdictionsCount} more`"
-            class="happ-selection-section__jurisdiction-exclusions-selected-item"
-            @click="showMoreSelectedJurisdictions"
-          >
-            <BaseTooltip
-              v-click-outside="() => isMoreSelectedJurisdictionsTooltipVisible = false"
-              class="happ-selection-section__jurisdiction-exclusions-tooltip"
-              :is-visible="isMoreSelectedJurisdictionsTooltipVisible"
-            >
-              <div
-                v-for="remainingJurisdiction in remainingJurisdictions"
-                :key="remainingJurisdiction.id"
-                class="happ-selection-section__jurisdiction-exclusions-selected-item happ-selection-section__jurisdiction-exclusions-selected-item--remaining"
-              >
-                <span>{{ remainingJurisdiction.label }}</span>
-                <XMarkIcon
-                  class="happ-selection-section__jurisdiction-exclusions-selected-item-delete-icon"
-                  @click="removeJurisdiction(remainingJurisdiction)"
-                />
-              </div>
-            </BaseTooltip>
-          </CategoryChip>
-        </div>
-        <span
-          v-else
-          class="happ-selection-section__jurisdiction-exclusions-selected"
-        >
-          None
-        </span>
-        <PencilIcon
-          v-if="!isEditing"
-          class="happ-selection-section__jurisdiction-exclusions-edit-icon"
-          @click="edit"
-        />
-
-        <div
-          v-if="isEditing"
-          class="happ-selection-section__jurisdiction-exclusions-edit"
-        >
-          <FilledCheckIcon
-            class="happ-selection-section__jurisdiction-exclusions-edit-button"
-            data-testid="save-button"
-            @click="save"
-          />
-
-          <CircledExIcon
-            class="happ-selection-section__jurisdiction-exclusions-edit-button"
-            data-testid="cancel-button"
-            @click="cancel"
-          />
-
-          <BaseCombobox
-            :options="mappedCountries"
-            :selected="selectedJurisdictions"
-            class="happ-selection-section__jurisdiction-exclusions-combobox"
-            @update:selected="updateJurisdictions"
-          />
-        </div>
-      </div>
+      <JurisdictionExclusionSelect />
 
       <div class="happ-selection-section__category-tags">
         <span class="happ-selection-section__selection-label happ-selection-section__selection-label--main">
diff --git a/src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue b/src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue
new file mode 100644
index 00000000..0813d78d
--- /dev/null
+++ b/src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ExclusionSelect from '@/components/settings/hostingPreferences/ExclusionSelect.vue'
+import { countries } from '@/constants/countries'
+
+const isSaving = ref(false)
+
+function save(): void {
+  isSaving.value = true
+  // Make an API call to save new selected options
+
+  setTimeout(() => {
+    isSaving.value = false
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  }, 2000)
+}
+</script>
+
+<template>
+  <ExclusionSelect
+    :options="countries"
+    :is-saving="isSaving"
+    @save="save"
+  />
+</template>

From 9191beec9a85424736fc67169a3900ca126564a8 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Fri, 19 Jan 2024 10:59:50 +0100
Subject: [PATCH 4/5] feat: finish editing on successful save

---
 .../hostingPreferences/ExclusionSelect.vue    | 14 +++-
 .../HAppSelectionSection.vue                  | 81 -------------------
 2 files changed, 13 insertions(+), 82 deletions(-)

diff --git a/src/components/settings/hostingPreferences/ExclusionSelect.vue b/src/components/settings/hostingPreferences/ExclusionSelect.vue
index 56802751..3ccf1426 100644
--- a/src/components/settings/hostingPreferences/ExclusionSelect.vue
+++ b/src/components/settings/hostingPreferences/ExclusionSelect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { XMarkIcon } from '@heroicons/vue/20/solid'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import CircleSpinner from '../../../../ui-common-library/src/components/CircleSpinner.vue'
 import BaseCombobox from '@/components/BaseCombobox.vue'
@@ -89,6 +89,15 @@ function cancel(): void {
   isEditing.value = false
   selectedOptions.value = [...previouslySelected.value]
 }
+
+watch(
+  () => props.isSaving,
+  () => {
+    if (!props.isSaving) {
+      isEditing.value = false
+    }
+  }
+)
 </script>
 
 <template>
@@ -182,6 +191,7 @@ function cancel(): void {
     </div>
 
     <CircleSpinner
+      v-if="props.isSaving"
       :scale="0.5"
       class="exclusion-select__exclusions-edit-spinner"
     />
@@ -264,6 +274,8 @@ function cancel(): void {
       }
 
       &-spinner {
+        width: 24px;
+        margin-left: 8px;
       }
 
       &--disabled {
diff --git a/src/components/settings/hostingPreferences/HAppSelectionSection.vue b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
index 5ea56941..05b4b7b6 100644
--- a/src/components/settings/hostingPreferences/HAppSelectionSection.vue
+++ b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import { XMarkIcon } from '@heroicons/vue/20/solid'
 import SettingsSection from '../SettingsSection.vue'
-import BaseCombobox from '@/components/BaseCombobox.vue'
-import BaseTooltip from '@/components/BaseTooltip.vue'
-import CategoryChip from '@/components/CategoryChip.vue'
-import CircledExIcon from '@/components/icons/CircledExIcon.vue'
-import FilledCheckIcon from '@/components/icons/FilledCheckIcon.vue'
 import PencilIcon from '@/components/icons/PencilIcon.vue'
 import JurisdictionExclusionSelect from '@/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue'
 </script>
@@ -55,81 +49,6 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
 }
 
 .happ-selection-section {
-  &__selection-label {
-    display: flex;
-    justify-content: end;
-    white-space: nowrap;
-
-    &--main {
-      width: 140px;
-    }
-
-    &--child {
-      margin-left: 50px;
-    }
-
-    &--include {
-      padding-left: 3px;
-    }
-  }
-
-  &__jurisdiction-exclusions {
-    height: 28px;
-    margin-top: 4px;
-    display: flex;
-    align-items: center;
-
-    &-selected {
-      display: flex;
-      align-items: center;
-      margin-left: 60px;
-    }
-
-    &-selected-item {
-      margin-right: 8px;
-      white-space: nowrap;
-      cursor: pointer;
-      position: relative;
-
-      &--remaining {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 24px;
-      }
-    }
-
-    &-selected-item-delete-icon {
-      width: 14px;
-      margin-left: 4px;
-      cursor: pointer;
-    }
-
-    &-edit-icon {
-      margin-left: 8px;
-      margin-top: 4px;
-      cursor: pointer;
-    }
-
-    &-combobox {
-      margin-left: 8px;
-    }
-
-    &-edit {
-      display: flex;
-      align-items: center;
-
-      &-button {
-        margin-left: 8px;
-        cursor: pointer;
-      }
-    }
-
-    &-tooltip {
-      top: 32px;
-    }
-  }
-
   &__category-tags {
     margin-top: 16px;
 

From 360c7eac931aa36fec5595bed8741c567a92e382 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Wed, 24 Jan 2024 11:09:29 +0100
Subject: [PATCH 5/5] feat: add category select

---
 src/assets/css/index.scss                     |  4 ++
 .../{ExclusionSelect.vue => BaseCombobox.vue} | 17 +++++----
 .../CategoryExclusionSelect.vue               | 35 ++++++++++++++++++
 .../HAppSelectionSection.vue                  | 37 +++++++++----------
 .../JurisdictionExclusionSelect.vue           |  3 +-
 src/constants/categories.ts                   | 35 ++++++++++++++++++
 6 files changed, 103 insertions(+), 28 deletions(-)
 rename src/components/settings/hostingPreferences/{ExclusionSelect.vue => BaseCombobox.vue} (95%)
 create mode 100644 src/components/settings/hostingPreferences/CategoryExclusionSelect.vue
 create mode 100644 src/constants/categories.ts

diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index d9e90dcb..dd3c1911 100755
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -1,3 +1,7 @@
 @import '../../../ui-common-library/artifacts/styles/common.css';
 @import 'styles.css';
 @import 'variables.css';
+
+.base-combobox__options {
+  z-index: 1;
+}
diff --git a/src/components/settings/hostingPreferences/ExclusionSelect.vue b/src/components/settings/hostingPreferences/BaseCombobox.vue
similarity index 95%
rename from src/components/settings/hostingPreferences/ExclusionSelect.vue
rename to src/components/settings/hostingPreferences/BaseCombobox.vue
index 3ccf1426..936c1124 100644
--- a/src/components/settings/hostingPreferences/ExclusionSelect.vue
+++ b/src/components/settings/hostingPreferences/BaseCombobox.vue
@@ -21,14 +21,16 @@ interface Option {
 
 const props = withDefaults(
   defineProps<{
-    options: string[]
-    isLoading: boolean
-    isSaving: boolean
+    options?: string[]
+    isLoading?: boolean
+    isSaving?: boolean
+    label?: string
   }>(),
   {
     options: () => [],
     isLoading: false,
-    isSaving: false
+    isSaving: false,
+    label: ''
   }
 )
 
@@ -37,9 +39,9 @@ const isEditing = ref(false)
 const initiallySelected: string[] = []
 const previouslySelected = ref<Option[]>([])
 
-const mappedValues: Option[] = props.options.map((country, index) => ({
+const mappedValues: Option[] = props.options.map((label, index) => ({
   id: index + 1,
-  label: country
+  label
 }))
 
 const selectedOptions = ref<Option[]>(
@@ -47,6 +49,7 @@ const selectedOptions = ref<Option[]>(
 )
 
 const visibleOptions = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   return [...selectedOptions.value].splice(0, 2)
 })
 
@@ -103,7 +106,7 @@ watch(
 <template>
   <div class="exclusion-select__exclusions">
     <span class="exclusion-select__selection-label">
-      {{ t('hosting_preferences.happ_selection.jurisdiction_exclusions') }}
+      {{ t(label) }}
     </span>
 
     <div
diff --git a/src/components/settings/hostingPreferences/CategoryExclusionSelect.vue b/src/components/settings/hostingPreferences/CategoryExclusionSelect.vue
new file mode 100644
index 00000000..6e2833c8
--- /dev/null
+++ b/src/components/settings/hostingPreferences/CategoryExclusionSelect.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ExclusionSelect from '@/components/settings/hostingPreferences/BaseCombobox.vue'
+import { categories } from '@/constants/categories'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+  }>(),
+  {
+    label: ''
+  }
+)
+
+const isSaving = ref(false)
+
+function save(): void {
+  isSaving.value = true
+  // Make an API call to save new selected options
+
+  setTimeout(() => {
+    isSaving.value = false
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  }, 2000)
+}
+</script>
+
+<template>
+  <ExclusionSelect
+    :label="props.label"
+    :options="categories"
+    :is-saving="isSaving"
+    @save="save"
+  />
+</template>
diff --git a/src/components/settings/hostingPreferences/HAppSelectionSection.vue b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
index 05b4b7b6..6f8f7d90 100644
--- a/src/components/settings/hostingPreferences/HAppSelectionSection.vue
+++ b/src/components/settings/hostingPreferences/HAppSelectionSection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import SettingsSection from '../SettingsSection.vue'
 import PencilIcon from '@/components/icons/PencilIcon.vue'
+import CategoryExclusionSelect from '@/components/settings/hostingPreferences/CategoryExclusionSelect.vue'
 import JurisdictionExclusionSelect from '@/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue'
 </script>
 
@@ -16,27 +17,15 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
         <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 selection-child-row">
-          <span class="happ-selection-section__selection-label happ-selection-section__selection-label--child">
-            {{ $t('hosting_preferences.happ_selection.exclude') }}
-          </span>
-          <span
-            class="happ-selection-section__category-tags-selected"
-          >
-            None
-          </span>
-          <PencilIcon />
+        <div class="happ-selection-section__category-tags-item happ-selection-section__category-tags-item-exclude">
+          <CategoryExclusionSelect
+            label="hosting_preferences.happ_selection.exclude"
+          />
         </div>
-        <div class="happ-selection-section__category-tags-item selection-child-row">
-          <span class="happ-selection-section__selection-label happ-selection-section__selection-label--child happ-selection-section__selection-label--include">
-            {{ $t('hosting_preferences.happ_selection.include') }}
-          </span>
-          <span
-            class="happ-selection-section__category-tags-selected"
-          >
-            None
-          </span>
-          <PencilIcon />
+        <div class="happ-selection-section__category-tags-item happ-selection-section__category-tags-item-include">
+          <CategoryExclusionSelect
+            label="hosting_preferences.happ_selection.include"
+          />
         </div>
       </div>
     </div>
@@ -64,6 +53,14 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
     padding-left: 40px;
     display: flex;
     align-items: center;
+
+    &-exclude {
+      margin-left: 51px;
+    }
+
+    &-include {
+      margin-left: 54px;
+    }
   }
 }
 </style>
diff --git a/src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue b/src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue
index 0813d78d..038b5b64 100644
--- a/src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue
+++ b/src/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import ExclusionSelect from '@/components/settings/hostingPreferences/ExclusionSelect.vue'
+import ExclusionSelect from '@/components/settings/hostingPreferences/BaseCombobox.vue'
 import { countries } from '@/constants/countries'
 
 const isSaving = ref(false)
@@ -18,6 +18,7 @@ function save(): void {
 
 <template>
   <ExclusionSelect
+    label="hosting_preferences.happ_selection.jurisdiction_exclusions"
     :options="countries"
     :is-saving="isSaving"
     @save="save"
diff --git a/src/constants/categories.ts b/src/constants/categories.ts
new file mode 100644
index 00000000..c65505a5
--- /dev/null
+++ b/src/constants/categories.ts
@@ -0,0 +1,35 @@
+export const categories = [
+  'Adult',
+  'Not-For-Profit',
+  'Books',
+  'Medical',
+  'Business',
+  'Music',
+  'Developer Tools',
+  'Crypto',
+  'Navigation',
+  'Education',
+  'News',
+  'Entertainment',
+  'Photo & Video',
+  'Finance',
+  'FinTech',
+  'Productivity',
+  'Food & Drink',
+  'Reference',
+  'Games',
+  'Gaming',
+  'Gambling',
+  'Graphics & Design',
+  'Shopping',
+  'Health & Fitness',
+  'Social Networking',
+  'Lifestyle',
+  'Sports',
+  'Kids',
+  'Travel',
+  'Magazines & Newspapers',
+  'Utilities',
+  'Weather',
+  'Open-Source'
+]