Feature/happ unhosting

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;

src/components/StopHostingModal.vue

@@ -1,110 +1,165 @@
+<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 { EModal } from '@/constants/ui'
+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()
+
+const props = defineProps<{
+  hApp: HAppDetails
+}>()
+
+const emit = defineEmits(['close', 'update:hosting'])
+
+const isConfirmed = ref(false)
+const isBusy = ref(false)
+const isError = ref(false)
+
+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')
+
+    isBusy.value = false
+    isConfirmed.value = false
+
+    setTimeout(() => {
+      showModal(EModal.error_modal)
+    }, 300)
+
+    return
+  }
+
+  // If success
+  isBusy.value = false
+  isConfirmed.value = true
+}
+
+function close(): void {
+  isBusy.value = false
+  isConfirmed.value = false
+  isError.value = false
+  emit('close')
+  emit('update:hosting', !props.hApp.enabled)
+}
+</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=" props.hApp.enabled ? 'sm': 'md'"
+    @close="emit('close')"
+  >
+    <div
+      v-if="!isConfirmed && !isError"
+      class="stop-hosting-modal"
+    >
+      <ExclamationCircleIcon class="stop-hosting-modal__icon" />
+      <p class="stop-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">
+        {{ props.hApp.enabled ? t('happ_details.disable_hosting_modal.description_one') : t('happ_details.enable_hosting_modal.description_one') }}
+      </span>
+      <span v-if="props.hApp.enabled">{{ 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"
+    >
+      <CheckCircleIcon class="stop-hosting-modal__icon" />
+      <p class="stop-hosting-modal__title">
+        {{ props.hApp.enabled ? t('happ_details.disable_hosting_modal.success.title') : t('happ_details.enable_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
+        v-if="props.hApp.enabled"
+        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"
+        :is-disabled="isBusy"
+        @click="close"
+      >
+        {{ t('$.cancel') }}
       </BaseButton>
 
-      <BaseButton @click="$emit('close')">
-        Cancel
+      <BaseButton
+        class="stop-hosting-modal__confirm-button"
+        :is-busy="isBusy"
+        :is-disabled="isBusy"
+        @click="confirm"
+      >
+        {{ props.hApp.enabled ? t('happ_details.disable_hosting_modal.confirmation_button') : t('happ_details.enable_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;
+
+  &__icon {
+    width: 66px;
+    height: 66px;
+    color: var(--primary-color);
+  }
+
+  &__title {
+    margin-top: 20px;
+    font-weight: 600;
+  }
+
+  &__description {
+    margin-top: 8px;
+    font-weight: 600;
+  }
+
+  &__confirm-button {
+    margin-left: 16px;
+  }
 }
 </style>

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>
@@ -69,9 +75,17 @@ 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"
+            @update:hosting="updateHosting"
+          />
+        </div>
 
         <HAppDetailsEarnings
           :h-app="props.hApp"
@@ -82,11 +96,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 +168,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 +193,6 @@ const props = defineProps<{
     &-usage {
       margin-top: 32px;
     }
-
-    &-stop-hosting {
-      margin-top: 32px;
-    }
   }
 }