From a9fb4075769bb47b006cacc99dcfbf5f5f122a83 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Fri, 3 Nov 2023 11:36:56 +0100
Subject: [PATCH 1/5] feat(unhost-happ): add modal content

---
 src/components/StopHostingModal.vue           | 171 ++++++++++--------
 .../hAppDetails/HAppDetailsContent.vue        |  27 +--
 .../hAppDetails/HAppDetailsStopHosting.vue    |  60 +++---
 src/components/icons/BigCheckIcon.vue         |   8 +-
 src/locales/en.ts                             |  17 ++
 5 files changed, 157 insertions(+), 126 deletions(-)

diff --git a/src/components/StopHostingModal.vue b/src/components/StopHostingModal.vue
index 7e7c0593..3459e741 100644
--- a/src/components/StopHostingModal.vue
+++ b/src/components/StopHostingModal.vue
@@ -1,110 +1,121 @@
+<script lang="ts" setup>
+import BaseButton from '@uicommon/components/BaseButton'
+import BaseModal from '@uicommon/components/BaseModal'
+import { EButtonType } from '@uicommon/types/ui'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BigCheckIcon from '@/components/icons/BigCheckIcon'
+import ExclamationIcon from '@/components/icons/ExclamationIcon'
+import { HAppDetails } from '@/interfaces/HposInterface'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  hApp: HAppDetails
+}>()
+
+const emit = defineEmits(['close'])
+
+const isConfirmed = ref(false)
+
+function confirm(): void {
+  stopHostingHApp()
+  isConfirmed.value = true
+}
+
+function close(): void {
+  emit('close')
+}
+
+function stopHostingHApp(): void {
+  console.log('NOT YET IMPLEMENTED: Stopping hosting happ', props.hApp.name)
+}
+</script>
+
 <template>
-  <BaseModal @close="$emit('close')">
-    <div v-if="!confirmed" class="stop-hosting-modal">
-      <ExclamationIcon class="exclamation-icon" />
-      <p class="content">
-        Are you sure you want to stop hosting {{ hAppName }}?
-      </p>
-      <p class="content">
-        It will be removed from your HoloPort and will not be available for you to host again for 30 days. All invoices, logs and payments associated with this hApp will remain available to you.
+  <BaseModal
+    is-visible
+    content-padding="sm"
+    @close="emit('close')"
+  >
+    <div
+      v-if="!isConfirmed"
+      class="stop-hosting-modal"
+    >
+      <ExclamationIcon />
+      <p class="stop-hosting-modal__title">
+        {{ t('happ_details.disable_hosting_modal.title') }}
       </p>
+      <span class="stop-hosting-modal__description">
+        {{ t('happ_details.disable_hosting_modal.description_one') }}
+      </span>
+      <span>{{ t('happ_details.disable_hosting_modal.description_two') }}</span>
     </div>
-    <div v-if="confirmed" class="stop-hosting-modal">
-      <BigCheckIcon class="exclamation-icon" />
-      <p class="content">
-        This hApp has been removed from hosting.
+
+    <div
+      v-if="isConfirmed"
+      class="stop-hosting-modal"
+    >
+      <BigCheckIcon />
+      <p class="stop-hosting-modal__title">
+        {{ t('happ_details.disable_hosting_modal.success.title') }}
       </p>
-      <p class="content">
-        Please note it may take some time for the hApp to be fully removed from your HoloPort. Any hosting provided for storage during that time will be billed to the publisher.
+      <p class="stop-hosting-modal__description">
+        {{ t('happ_details.disable_hosting_modal.success.description') }}
       </p>
     </div>
 
     <template
-      v-if="confirmed"
+      v-if="isConfirmed"
       #buttons
     >
-      <BaseButton @click="closeAndGoToHapps">
-        Close
+      <BaseButton
+        @click="close"
+      >
+        {{ t('$.close') }}
       </BaseButton>
     </template>
+
     <template
       v-else
       #buttons
     >
-      <BaseButton @click="confirm">
-        Yes, I want to stop hosting this hApp
+      <BaseButton
+        :type="EButtonType.tertiary"
+        @click="close"
+      >
+        {{ t('$.cancel') }}
       </BaseButton>
 
-      <BaseButton @click="$emit('close')">
-        Cancel
+      <BaseButton
+        class="stop-hosting-modal__confirm-button"
+        @click="confirm"
+      >
+        {{ t('happ_details.disable_hosting_modal.confirmation_button') }}
       </BaseButton>
     </template>
   </BaseModal>
 </template>
 
-<script>
-import BaseButton from '@uicommon/components/BaseButton'
-import BaseModal from '@uicommon/components/BaseModal'
-import BigCheckIcon from '@/components/icons/BigCheckIcon'
-import ExclamationIcon from '@/components/icons/ExclamationIcon'
-
-export default {
-  name: 'StopHostingModal',
-
-  components: {
-    BaseModal,
-    BaseButton,
-    ExclamationIcon,
-    BigCheckIcon
-  },
-
-  props: {
-    hAppName: {
-      type: String,
-      required: true
-    }
-  },
-
-  emits: ['close', 'stop-hosting-happ'],
-
-  data() {
-    return {
-      confirmed: false
-    }
-  },
-
-  methods: {
-    confirm() {
-      this.$emit('stop-hosting-happ')
-      this.confirmed = true
-    },
-
-    closeAndGoToHapps() {
-      this.$emit('close')
-      this.$router.push('/happs')
-    }
-  }
-}
-</script>
-
-<style scoped>
+<style lang="scss" scoped>
 .stop-hosting-modal {
   display: flex;
   align-items: center;
-  padding-top: 26px;
   flex-direction: column;
-  font-style: normal;
   font-weight: 600;
-  font-size: 14px;
-  line-height: 19px;
-  text-align: center;
-  color: var(--grey-dark-color);
-}
-.exclamation-icon {
-  margin-bottom: 22px;
-}
-.content {
-  max-width: 625px;
-  margin: 0 0 20px 0;
+
+  &__title {
+    margin-top: 20px;
+    font-weight: 600;
+  }
+
+  &__description {
+    margin-top: 8px;
+    font-weight: 600;
+  }
+
+  &__confirm-button {
+    margin-left: 16px;
+  }
 }
 </style>
diff --git a/src/components/hAppDetails/HAppDetailsContent.vue b/src/components/hAppDetails/HAppDetailsContent.vue
index 4b6c3b90..d0a98e16 100644
--- a/src/components/hAppDetails/HAppDetailsContent.vue
+++ b/src/components/hAppDetails/HAppDetailsContent.vue
@@ -69,9 +69,16 @@ const props = defineProps<{
         </div>
 
         <!-- Desktop -->
-        <h2 class="happ-details__main-column-name desktop">
-          {{ props.hApp.name }}
-        </h2>
+        <div class="happ-details__main-column-header">
+          <h2 class="happ-details__main-column-name desktop">
+            {{ props.hApp.name }}
+          </h2>
+
+          <HAppDetailsStopHosting
+            :h-app="props.hApp"
+            class="happ-details__main-column-stop-hosting"
+          />
+        </div>
 
         <HAppDetailsEarnings
           :h-app="props.hApp"
@@ -82,11 +89,6 @@ const props = defineProps<{
           :h-app="props.hApp"
           class="happ-details__main-column-usage"
         />
-
-        <!--        <HAppDetailsStopHosting-->
-        <!--          :h-app="props.hApp"-->
-        <!--          class="happ-details__main-column-stop-hosting"-->
-        <!--        />-->
       </div>
     </div>
   </div>
@@ -159,6 +161,11 @@ const props = defineProps<{
       flex-direction: column;
     }
 
+		&-header {
+			display: flex;
+			justify-content: space-between;
+		}
+
     &-name {
       margin: 0 0 40px 0;
       color: var(--grey-dark-color);
@@ -179,10 +186,6 @@ const props = defineProps<{
     &-usage {
       margin-top: 32px;
     }
-
-    &-stop-hosting {
-      margin-top: 32px;
-    }
   }
 }
 
diff --git a/src/components/hAppDetails/HAppDetailsStopHosting.vue b/src/components/hAppDetails/HAppDetailsStopHosting.vue
index 09e28cf5..0527e83c 100644
--- a/src/components/hAppDetails/HAppDetailsStopHosting.vue
+++ b/src/components/hAppDetails/HAppDetailsStopHosting.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import BaseButton from '@uicommon/components/BaseButton.vue'
+import { EButtonType } from '@uicommon/types/ui'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import BaseTooltip from '@/components/BaseTooltip.vue'
 import AlertCircleIcon from '@/components/icons/AlertCircleIcon.vue'
 import StopHostingModal from '@/components/StopHostingModal.vue'
 import type { HAppDetails } from '@/interfaces/HposInterface'
@@ -12,6 +15,7 @@ const props = defineProps<{
 }>()
 
 const isHostingModalVisible = ref(false)
+const isDisableHostingTooltipVisible = ref(false)
 
 function openHostingModal(): void {
   isHostingModalVisible.value = true
@@ -20,33 +24,38 @@ function openHostingModal(): void {
 function closeHostingModal(): void {
   isHostingModalVisible.value = false
 }
-
-function stopHostingHApp(): void {
-  console.log('NOT YET IMPLEMENTED: Stopping hosting happ', props.hApp.name)
-}
 </script>
 
 <template>
   <div>
     <div class="happ-details__row">
-      <div
-        class="happ-details__label"
+      <BaseButton
+        :type="EButtonType.tertiary"
+        :title="t('happ_details.disable_hosting')"
         @click="openHostingModal"
-      >
-        {{ t('happ_details.stop_hosting') }}
-      </div>
+      />
       <div class="happ-details__warning">
-        <AlertCircleIcon class="alert-circle-icon" />
-        {{ t('happ_details.stop_hosting_warning') }}
+        <AlertCircleIcon
+          class="alert-circle-icon"
+          @mouseover="() => isDisableHostingTooltipVisible = true"
+          @mouseleave="() => isDisableHostingTooltipVisible = false"
+        />
+
+        <BaseTooltip
+          class="happ-details__warning-tooltip"
+          :is-visible="isDisableHostingTooltipVisible"
+        >
+          {{ $t('happ_details.disable_hosting_warning') }}
+        </BaseTooltip>
       </div>
     </div>
 
     <StopHostingModal
-      v-if="hApp"
+      v-if="props.hApp"
+      :h-app="props.hApp"
       :is-visible="isHostingModalVisible"
       :h-app-name="hApp?.name || ''"
       @close="closeHostingModal"
-      @stop-hosting-happ="stopHostingHApp"
     />
   </div>
 </template>
@@ -58,32 +67,23 @@ function stopHostingHApp(): void {
     align-items: center;
   }
 
-  &__label {
-    font-weight: 800;
-    font-size: 12px;
-    line-height: 16px;
-    text-decoration-line: underline;
-    color: var(--grey-dark-color);
-    margin-right: 10px;
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
   &__warning {
     display: flex;
+    position: relative;
     align-items: flex-start;
-    background: #f3f5f8;
     border-radius: 4px;
     color: var(--grey-dark-color);
     font-size: 12px;
     font-weight: 400;
     padding: 4px 12px;
-  }
-}
 
-.alert-circle-icon {
-  flex-shrink: 0;
-  margin-right: 12px;
+    &-tooltip {
+      position: absolute;
+      top: 30px;
+      right: 8px;
+      width: 204px;
+    }
+  }
 }
 
 @media screen and (max-width: 1050px) {
diff --git a/src/components/icons/BigCheckIcon.vue b/src/components/icons/BigCheckIcon.vue
index f94afa22..9feb15d0 100644
--- a/src/components/icons/BigCheckIcon.vue
+++ b/src/components/icons/BigCheckIcon.vue
@@ -8,12 +8,12 @@ import Icon from '@/components/icons/Icon.vue'
     viewBox="0 0 66 66"
   >
     <path
-      d="M16.21 0h-5.44a.79.79 0 100 1.58h3.62L6.65 9.32a.79.79 0 101.11 1.12l7.66-7.66v3.45a.79.79 0 101.58 0V.79a.79.79 0 00-.79-.79z"
-      fill="#313C59"
+      d="M33.0003 64.6801C39.266 64.6801 45.391 62.8221 50.6008 59.341C55.8105 55.86 59.871 50.9123 62.2688 45.1235C64.6666 39.3347 65.294 32.9649 64.0716 26.8196C62.8492 20.6743 59.832 15.0295 55.4015 10.5989C50.9709 6.16841 45.3261 3.15118 39.1808 1.9288C33.0355 0.706425 26.6657 1.33379 20.8769 3.73158C15.0881 6.12936 10.1404 10.1899 6.65936 15.3996C3.17831 20.6094 1.32031 26.7344 1.32031 33.0001C1.32905 41.3995 4.66956 49.4523 10.6088 55.3916C16.5481 61.3308 24.6009 64.6713 33.0003 64.6801ZM33.0003 6.60008C38.2217 6.60008 43.3259 8.14842 47.6674 11.0493C52.0088 13.9502 55.3926 18.0733 57.3907 22.8972C59.3889 27.7212 59.9117 33.0294 58.893 38.1505C57.8744 43.2716 55.36 47.9756 51.6679 51.6677C47.9758 55.3598 43.2718 57.8742 38.1507 58.8928C33.0296 59.9115 27.7214 59.3887 22.8975 57.3905C18.0735 55.3924 13.9504 52.0086 11.0495 47.6671C8.14865 43.3257 6.60031 38.2215 6.60031 33.0001C6.60031 25.9984 9.38173 19.2834 14.3327 14.3325C19.2837 9.3815 25.9986 6.60008 33.0003 6.60008Z"
+      fill="#00CAD9"
     />
     <path
-      d="M13.48 7.95a.79.79 0 00-.79.79v6.22c0 .29-.24.53-.52.53H2.1a.53.53 0 01-.52-.53V4.9c0-.28.24-.52.52-.52h6.25a.79.79 0 100-1.58H2.1A2.1 2.1 0 000 4.9v10.06c0 1.16.94 2.1 2.1 2.1h10.07a2.1 2.1 0 002.1-2.1V8.74a.79.79 0 00-.79-.8z"
-      fill="#313C59"
+      d="M28.4925 42.7879C28.7378 43.033 29.0291 43.2273 29.3496 43.3598C29.6701 43.4923 30.0135 43.5604 30.3603 43.5601H30.4791C30.8456 43.5429 31.2045 43.4495 31.533 43.2859C31.8614 43.1223 32.1521 42.892 32.3865 42.6097L45.5865 26.7697C46.0046 26.2291 46.1969 25.5475 46.1227 24.8681C46.0486 24.1887 45.7139 23.5645 45.1891 23.1268C44.6642 22.6892 43.99 22.4721 43.3084 22.5213C42.6267 22.5704 41.9907 22.882 41.5341 23.3905L30.1821 37.0063L24.3081 31.1323C23.8127 30.6369 23.1409 30.3586 22.4403 30.3586C21.7397 30.3586 21.0679 30.6369 20.5725 31.1323C20.0771 31.6277 19.7988 32.2995 19.7988 33.0001C19.7988 33.7006 20.0771 34.3725 20.5725 34.8679L28.4925 42.7879Z"
+      fill="#00CAD9"
     />
   </Icon>
 </template>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index bf6c09bd..21c664a4 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -42,6 +42,23 @@ export default {
     weekly_earnings: 'Weekly Earnings'
   },
   happ_details: {
+    disable_hosting: 'Disable Hosting',
+    disable_hosting_warning:
+      'Disabling hosting of a hApp will remove it and all associated data from your HoloPort.',
+    disable_hosting_modal: {
+      success: {
+        title: 'This hApp has been removed from hosting.',
+        description:
+          'Please note it may take some time for the hApp to be fully removed from your HoloPort. Any hosting provided for storage during that time will be billed to the manager.'
+      },
+      confirmation_button: 'Yes, disable',
+      description_one:
+        'It will be removed from your HoloPort and will not be available for you to host again for 30 days.',
+      description_two:
+        'All invoices, logs and payments associated with this hApp will remain available to you.',
+      title: 'Are you sure you want to disable this hApp?'
+    },
+    enable_hosting: 'Enable Hosting',
     earnings: {
       total: 'Total Earnings',
       last_7_days: 'Earned in last 7 days',

From 174f23be45a4bdf593bc753283843548784c0ec0 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Fri, 3 Nov 2023 14:46:39 +0100
Subject: [PATCH 2/5] feat(unhost-happ): add host variant

---
 src/components/ErrorModal.vue                 |  1 +
 src/components/StopHostingModal.vue           | 72 +++++++++++++++----
 .../hAppDetails/HAppDetailsStopHosting.vue    |  6 +-
 src/locales/en.ts                             | 11 +++
 4 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/src/components/ErrorModal.vue b/src/components/ErrorModal.vue
index 66ffa380..3d074382 100644
--- a/src/components/ErrorModal.vue
+++ b/src/components/ErrorModal.vue
@@ -43,6 +43,7 @@ function close() {
 	&__title {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		margin-top: 6px;
 		font-size: 26px;
 		font-weight: 600;
diff --git a/src/components/StopHostingModal.vue b/src/components/StopHostingModal.vue
index 3459e741..08728337 100644
--- a/src/components/StopHostingModal.vue
+++ b/src/components/StopHostingModal.vue
@@ -1,15 +1,19 @@
 <script lang="ts" setup>
+import { ExclamationCircleIcon, CheckCircleIcon } from '@heroicons/vue/24/outline'
 import BaseButton from '@uicommon/components/BaseButton'
 import BaseModal from '@uicommon/components/BaseModal'
+import { useModals } from '@uicommon/composables/useModals'
 import { EButtonType } from '@uicommon/types/ui'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import BigCheckIcon from '@/components/icons/BigCheckIcon'
-import ExclamationIcon from '@/components/icons/ExclamationIcon'
+import { EModal } from '@/constants/ui'
 import { HAppDetails } from '@/interfaces/HposInterface'
 
 const { t } = useI18n()
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
+const { showModal } = useModals()
+
 const props = defineProps<{
   hApp: HAppDetails
 }>()
@@ -17,16 +21,44 @@ const props = defineProps<{
 const emit = defineEmits(['close'])
 
 const isConfirmed = ref(false)
+const isBusy = ref(false)
+const isError = ref(false)
 
 function confirm(): void {
-  stopHostingHApp()
-  isConfirmed.value = true
+  isBusy.value = true
+
+  setTimeout(() => {
+    if (props.hApp.enabled) {
+      stopHostingHApp()
+    } else {
+      startHostingHApp()
+    }
+
+    // If failed
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
+    // showModal(EModal.error_modal)
+    // emit('close')
+    //
+    // isBusy.value = false
+    // isConfirmed.value = false
+
+    // If success
+    isBusy.value = false
+    isConfirmed.value = true
+  }, 2000)
 }
 
 function close(): void {
+  isBusy.value = false
+  isConfirmed.value = false
+  isError.value = false
   emit('close')
 }
 
+function startHostingHApp(): void {
+  console.log('NOT YET IMPLEMENTED: Starting hosting happ', props.hApp.name)
+}
+
 function stopHostingHApp(): void {
   console.log('NOT YET IMPLEMENTED: Stopping hosting happ', props.hApp.name)
 }
@@ -35,32 +67,35 @@ function stopHostingHApp(): void {
 <template>
   <BaseModal
     is-visible
-    content-padding="sm"
+    :content-padding=" props.hApp.enabled ? 'sm': 'md'"
     @close="emit('close')"
   >
     <div
-      v-if="!isConfirmed"
+      v-if="!isConfirmed && !isError"
       class="stop-hosting-modal"
     >
-      <ExclamationIcon />
+      <ExclamationCircleIcon class="stop-hosting-modal__icon" />
       <p class="stop-hosting-modal__title">
-        {{ t('happ_details.disable_hosting_modal.title') }}
+        {{ props.hApp.enabled ? t('happ_details.disable_hosting_modal.title') : t('happ_details.enable_hosting_modal.title') }}
       </p>
       <span class="stop-hosting-modal__description">
-        {{ t('happ_details.disable_hosting_modal.description_one') }}
+        {{ props.hApp.enabled ? t('happ_details.disable_hosting_modal.description_one') : t('happ_details.enable_hosting_modal.description_one') }}
       </span>
-      <span>{{ t('happ_details.disable_hosting_modal.description_two') }}</span>
+      <span v-if="props.hApp.enabled">{{ t('happ_details.disable_hosting_modal.description_two') }}</span>
     </div>
 
     <div
       v-if="isConfirmed"
       class="stop-hosting-modal"
     >
-      <BigCheckIcon />
+      <CheckCircleIcon class="stop-hosting-modal__icon" />
       <p class="stop-hosting-modal__title">
-        {{ t('happ_details.disable_hosting_modal.success.title') }}
+        {{ props.hApp.enabled ? t('happ_details.disable_hosting_modal.success.title') : t('happ_details.enable_hosting_modal.success.title') }}
       </p>
-      <p class="stop-hosting-modal__description">
+      <p
+        v-if="props.hApp.enabled"
+        class="stop-hosting-modal__description"
+      >
         {{ t('happ_details.disable_hosting_modal.success.description') }}
       </p>
     </div>
@@ -82,6 +117,7 @@ function stopHostingHApp(): void {
     >
       <BaseButton
         :type="EButtonType.tertiary"
+        :is-disabled="isBusy"
         @click="close"
       >
         {{ t('$.cancel') }}
@@ -89,9 +125,11 @@ function stopHostingHApp(): void {
 
       <BaseButton
         class="stop-hosting-modal__confirm-button"
+        :is-busy="isBusy"
+        :is-disabled="isBusy"
         @click="confirm"
       >
-        {{ t('happ_details.disable_hosting_modal.confirmation_button') }}
+        {{ props.hApp.enabled ? t('happ_details.disable_hosting_modal.confirmation_button') : t('happ_details.enable_hosting_modal.confirmation_button') }}
       </BaseButton>
     </template>
   </BaseModal>
@@ -104,6 +142,12 @@ function stopHostingHApp(): void {
   flex-direction: column;
   font-weight: 600;
 
+  &__icon {
+    width: 66px;
+    height: 66px;
+    color: var(--primary-color);
+  }
+
   &__title {
     margin-top: 20px;
     font-weight: 600;
diff --git a/src/components/hAppDetails/HAppDetailsStopHosting.vue b/src/components/hAppDetails/HAppDetailsStopHosting.vue
index 0527e83c..6c694069 100644
--- a/src/components/hAppDetails/HAppDetailsStopHosting.vue
+++ b/src/components/hAppDetails/HAppDetailsStopHosting.vue
@@ -30,8 +30,8 @@ function closeHostingModal(): void {
   <div>
     <div class="happ-details__row">
       <BaseButton
-        :type="EButtonType.tertiary"
-        :title="t('happ_details.disable_hosting')"
+        :type="props.hApp.enabled ? EButtonType.tertiary : EButtonType.primary"
+        :title="props.hApp.enabled ? t('happ_details.disable_hosting') : t('happ_details.enable_hosting')"
         @click="openHostingModal"
       />
       <div class="happ-details__warning">
@@ -45,7 +45,7 @@ function closeHostingModal(): void {
           class="happ-details__warning-tooltip"
           :is-visible="isDisableHostingTooltipVisible"
         >
-          {{ $t('happ_details.disable_hosting_warning') }}
+          {{ props.hApp.enabled ? $t('happ_details.disable_hosting_warning') : $t('happ_details.enable_hosting_warning') }}
         </BaseTooltip>
       </div>
     </div>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 7f60160d..d363a86a 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -59,6 +59,17 @@ export default {
       title: 'Are you sure you want to disable this hApp?'
     },
     enable_hosting: 'Enable Hosting',
+    enable_hosting_warning:
+      'Hosting a hApp will deploy it and all associated data to your Holoport.',
+    enable_hosting_modal: {
+      success: {
+        title: 'This hApp has been enabled and you are now hosting it. '
+      },
+      confirmation_button: 'Yes, host hApp',
+      description_one:
+        'Hosting this hApp will take up some space on your console and KYC level 2 users get paid for hosting.',
+      title: 'Are you sure you want to host this hApp?'
+    },
     earnings: {
       total: 'Total Earnings',
       last_7_days: 'Earned in last 7 days',

From 0727e8b797e8876f1faba546e8e01a40c7206a67 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Fri, 3 Nov 2023 14:48:05 +0100
Subject: [PATCH 3/5] feat(unhost-happ): bump to 1.0.0-alpha.9 version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 85e7de98..d0db654b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "host-console",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "private": true,
   "homepage": "https://holo-host.github.io/host-console-ui/",
   "scripts": {

From 7260b974fd7095614970dc7189781e1e039d0107 Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Wed, 15 Nov 2023 11:13:14 +0100
Subject: [PATCH 4/5] feat(happ-unhosting): hook up API

---
 src/components/StopHostingModal.vue           | 58 +++++++++----------
 .../hAppDetails/HAppDetailsContent.vue        | 15 +++--
 .../hAppDetails/HAppDetailsStopHosting.vue    |  7 +++
 src/interfaces/HposInterface.ts               | 38 ++++++++++++
 src/locales/en.ts                             |  2 +
 src/pages/HappDetails.vue                     | 22 ++++---
 6 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/src/components/StopHostingModal.vue b/src/components/StopHostingModal.vue
index 08728337..0b910df3 100644
--- a/src/components/StopHostingModal.vue
+++ b/src/components/StopHostingModal.vue
@@ -7,9 +7,11 @@ import { EButtonType } from '@uicommon/types/ui'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { EModal } from '@/constants/ui'
-import { HAppDetails } from '@/interfaces/HposInterface'
+import { HAppDetails, useHposInterface } from '@/interfaces/HposInterface'
+import { isError as isErrorPredicate } from '@/types/predicates'
 
 const { t } = useI18n()
+const { stopHostingHApp, startHostingHApp } = useHposInterface()
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
 const { showModal } = useModals()
@@ -18,34 +20,40 @@ const props = defineProps<{
   hApp: HAppDetails
 }>()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'update:hosting'])
 
 const isConfirmed = ref(false)
 const isBusy = ref(false)
 const isError = ref(false)
 
-function confirm(): void {
+async function confirm(): Promise<void> {
   isBusy.value = true
+  let result = null
+
+  if (props.hApp.enabled) {
+    result = await stopHostingHApp(props.hApp.id)
+  } else {
+    result = await startHostingHApp(props.hApp.id)
+  }
+
+  // If failed
+  if (isErrorPredicate(result)) {
+    emit('close')
 
-  setTimeout(() => {
-    if (props.hApp.enabled) {
-      stopHostingHApp()
-    } else {
-      startHostingHApp()
-    }
-
-    // If failed
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
-    // showModal(EModal.error_modal)
-    // emit('close')
-    //
-    // isBusy.value = false
-    // isConfirmed.value = false
-
-    // If success
     isBusy.value = false
-    isConfirmed.value = true
-  }, 2000)
+    isConfirmed.value = false
+
+    setTimeout(() => {
+      showModal(EModal.error_modal)
+    }, 300)
+
+    return
+  }
+
+  // If success
+  isBusy.value = false
+  isConfirmed.value = true
+  emit('update:hosting', !props.hApp.enabled)
 }
 
 function close(): void {
@@ -54,14 +62,6 @@ function close(): void {
   isError.value = false
   emit('close')
 }
-
-function startHostingHApp(): void {
-  console.log('NOT YET IMPLEMENTED: Starting hosting happ', props.hApp.name)
-}
-
-function stopHostingHApp(): void {
-  console.log('NOT YET IMPLEMENTED: Stopping hosting happ', props.hApp.name)
-}
 </script>
 
 <template>
diff --git a/src/components/hAppDetails/HAppDetailsContent.vue b/src/components/hAppDetails/HAppDetailsContent.vue
index d0a98e16..6cbc5335 100644
--- a/src/components/hAppDetails/HAppDetailsContent.vue
+++ b/src/components/hAppDetails/HAppDetailsContent.vue
@@ -13,6 +13,12 @@ const { t } = useI18n()
 const props = defineProps<{
   hApp: HAppDetails
 }>()
+
+const emit = defineEmits(['update:hosting'])
+
+function updateHosting(isEnabled: boolean): void {
+  emit('update:hosting', isEnabled)
+}
 </script>
 
 <template>
@@ -77,6 +83,7 @@ const props = defineProps<{
           <HAppDetailsStopHosting
             :h-app="props.hApp"
             class="happ-details__main-column-stop-hosting"
+            @update:hosting="updateHosting"
           />
         </div>
 
@@ -161,10 +168,10 @@ const props = defineProps<{
       flex-direction: column;
     }
 
-		&-header {
-			display: flex;
-			justify-content: space-between;
-		}
+    &-header {
+      display: flex;
+      justify-content: space-between;
+    }
 
     &-name {
       margin: 0 0 40px 0;
diff --git a/src/components/hAppDetails/HAppDetailsStopHosting.vue b/src/components/hAppDetails/HAppDetailsStopHosting.vue
index 6c694069..a095441d 100644
--- a/src/components/hAppDetails/HAppDetailsStopHosting.vue
+++ b/src/components/hAppDetails/HAppDetailsStopHosting.vue
@@ -14,6 +14,8 @@ const props = defineProps<{
   hApp: HAppDetails
 }>()
 
+const emit = defineEmits(['update:hosting'])
+
 const isHostingModalVisible = ref(false)
 const isDisableHostingTooltipVisible = ref(false)
 
@@ -24,6 +26,10 @@ function openHostingModal(): void {
 function closeHostingModal(): void {
   isHostingModalVisible.value = false
 }
+
+function updateHosting(isEnabled: boolean): void {
+  emit('update:hosting', isEnabled)
+}
 </script>
 
 <template>
@@ -55,6 +61,7 @@ function closeHostingModal(): void {
       :h-app="props.hApp"
       :is-visible="isHostingModalVisible"
       :h-app-name="hApp?.name || ''"
+      @update:hosting="updateHosting"
       @close="closeHostingModal"
     />
   </div>
diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
index 04de5dba..61bd1565 100644
--- a/src/interfaces/HposInterface.ts
+++ b/src/interfaces/HposInterface.ts
@@ -12,6 +12,8 @@ interface HposInterface {
   getUsage: () => Promise<UsageResponse | { error: unknown }>
   getHostedHApps: () => Promise<HApp[] | { error: unknown }>
   getHAppDetails: (id: string) => Promise<HAppDetails | { error: unknown }>
+  startHostingHApp: (id: string) => Promise<void | { error: unknown }>
+  stopHostingHApp: (id: string) => Promise<void | { error: unknown }>
   getHostEarnings: () => Promise<HostEarnings | { error: unknown }>
   getHostPreferences: () => Promise<HostPreferencesResponse | { error: unknown }>
   checkAuth: (email: string, password: string, authToken: string) => Promise<CheckAuthResponse>
@@ -441,6 +443,40 @@ export function useHposInterface(): HposInterface {
     }
   }
 
+  async function startHostingHApp(
+    id: string
+  ): Promise<HposHolochainCallResponse | { error: unknown }> {
+    try {
+      const result = await hposHolochainCall({
+        method: 'post',
+        pathPrefix: '/api/v2',
+        path: `/hosted_happs/${id}/enable`
+      })
+
+      return result
+    } catch (error) {
+      console.error('startHostingHApp encountered an error: ', error)
+      return { error }
+    }
+  }
+
+  async function stopHostingHApp(
+    id: string
+  ): Promise<HposHolochainCallResponse | { error: unknown }> {
+    try {
+      const result = await hposHolochainCall({
+        method: 'post',
+        pathPrefix: '/api/v2',
+        path: `/hosted_happs/${id}/disable`
+      })
+
+      return result
+    } catch (error) {
+      console.error('stopHostingHApp encountered an error: ', error)
+      return { error }
+    }
+  }
+
   async function getHostEarnings(): Promise<HposHolochainCallResponse | { error: unknown }> {
     try {
       return await hposHolochainCall({
@@ -790,6 +826,8 @@ export function useHposInterface(): HposInterface {
     redeemHoloFuel,
     getKycLevel,
     getHAppDetails,
+    startHostingHApp,
+    stopHostingHApp,
     HPOS_API_URL
   }
 }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index e975ccae..725dd9d8 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -19,8 +19,10 @@ export default {
     identicon_explanation:
       'This Identicon design and hash ID are both unique representations of this Host Console and associated HoloFuel address. Consider this address like a bank account, or crypto wallet. When you see this identicon, you know it’s your account.',
     learn_more: 'Learn more',
+    loading: 'Loading...',
     logout: 'Logout',
     next: 'Next',
+    something_went_wrong: 'Something went wrong',
     storage: 'Storage',
     terms_of_service: 'Terms of Service',
     try_again: 'Try again'
diff --git a/src/pages/HappDetails.vue b/src/pages/HappDetails.vue
index df3c0657..5ac570e6 100644
--- a/src/pages/HappDetails.vue
+++ b/src/pages/HappDetails.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import HAppDetailsContent from '@/components/hAppDetails/HAppDetailsContent.vue'
 import PrimaryLayout from '@/components/PrimaryLayout.vue'
@@ -10,6 +11,8 @@ import { isError as isErrorPredicate } from '@/types/predicates'
 const { getHAppDetails } = useHposInterface()
 const currentRoute = useRoute()
 
+const { t } = useI18n()
+
 const hApp = ref<HAppDetails>()
 const isLoading = ref(false)
 const isError = ref(false)
@@ -20,16 +23,15 @@ const breadcrumbs = computed(() => [
     path: '/happs'
   },
   {
-    label: isLoading.value ? 'Loading...' : hApp.value?.name ?? 'Something went wrong'
+    label: isLoading.value ? t('$.loading') : hApp.value?.name ?? t('$.something_went_wrong')
   }
 ])
 
 async function getData(): Promise<void> {
   isError.value = false
-
   isLoading.value = true
+
   const result = await getHAppDetails(currentRoute.params.id)
-  isLoading.value = false
 
   if (isErrorPredicate(result) && result.error) {
     isError.value = true
@@ -42,11 +44,16 @@ async function getData(): Promise<void> {
   isLoading.value = false
 }
 
-onMounted(() => {
-  getData()
-})
+function updateHosting(isEnabled: boolean): void {
+  hApp.value = {
+    ...hApp.value,
+    enabled: isEnabled
+  }
+}
 
-onMounted(async () => {})
+onMounted(async () => {
+  await getData()
+})
 </script>
 
 <template>
@@ -59,6 +66,7 @@ onMounted(async () => {})
       <HAppDetailsContent
         v-if="hApp"
         :h-app="hApp"
+        @update:hosting="updateHosting"
       />
     </template>
   </PrimaryLayout>

From f4ffef80a6999f537c11638f4c702102d225f9bf Mon Sep 17 00:00:00 2001
From: Mateusz Rybczonek <m.rybczonek@gmail.com>
Date: Wed, 15 Nov 2023 11:33:50 +0100
Subject: [PATCH 5/5] feat(happ-unhosting): move update emit after close emit

---
 src/components/StopHostingModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StopHostingModal.vue b/src/components/StopHostingModal.vue
index 0b910df3..f2325a98 100644
--- a/src/components/StopHostingModal.vue
+++ b/src/components/StopHostingModal.vue
@@ -53,7 +53,6 @@ async function confirm(): Promise<void> {
   // If success
   isBusy.value = false
   isConfirmed.value = true
-  emit('update:hosting', !props.hApp.enabled)
 }
 
 function close(): void {
@@ -61,6 +60,7 @@ function close(): void {
   isConfirmed.value = false
   isError.value = false
   emit('close')
+  emit('update:hosting', !props.hApp.enabled)
 }
 </script>