Merge pull request #117 from Holo-Host/feature/happ-details

Feature/happ details
Holo-Host · Nov 15, 2023 · 08e292a · 08e292a
2 parents 273dd65 + d4e0f4d
commit 08e292a
Show file tree

Hide file tree

Showing 16 changed files with 790 additions and 473 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "host-console",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "private": true,
   "homepage": "https://holo-host.github.io/host-console-ui/",
   "scripts": {

diff --git a/src/components/CategoryChip.vue b/src/components/CategoryChip.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="category-chip"
+  >
+    <span class="category-chip__dot"></span>
+    <span class="category-chip__label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.category-chip {
+  align-items: center;
+  display: inline-flex;
+  justify-content: start;
+  border-radius: 9999px;
+  padding: 4px 9px;
+  font-size: 12px;
+  font-weight: 700;
+	text-transform: capitalize;
+  background-color: #F3F5F8;
+  color: var(--grey-dark-color);
+
+  &__dot {
+    height: 8px;
+    width: 8px;
+    background-color: #0870A3;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+	&__label {
+    margin-left: 4px;
+  }
+}
+</style>
diff --git a/src/components/PrimaryLayout.vue b/src/components/PrimaryLayout.vue
@@ -26,12 +26,13 @@ const { showModal } = useModals()
 
 const props = withDefaults(
   defineProps<{
-    title: string
+    title?: string
     breadcrumbs?: BreadCrumb[]
     isContentLoading?: boolean
     isContentError?: boolean
   }>(),
   {
+    title: '',
     breadcrumbs: undefined,
     isContentLoading: false,
     isContentError: false

diff --git a/src/components/StopHostingModal.vue b/src/components/StopHostingModal.vue
@@ -3,7 +3,7 @@
     <div v-if="!confirmed" class="stop-hosting-modal">
       <ExclamationIcon class="exclamation-icon" />
       <p class="content">
-        Are you sure you want to stop hosting {{ happName }}?
+        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.
@@ -59,7 +59,7 @@ export default {
   },
 
   props: {
-    happName: {
+    hAppName: {
       type: String,
       required: true
     }

diff --git a/src/components/hAppDetails/HAppDetailsContent.vue b/src/components/hAppDetails/HAppDetailsContent.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import HAppImage from '@uicommon/components/HAppImage.vue'
+import { useI18n } from 'vue-i18n'
+import CategoryChip from '@/components/CategoryChip.vue'
+import HAppDetailsEarnings from '@/components/hAppDetails/HAppDetailsEarnings.vue'
+import HAppDetailsStopHosting from '@/components/hAppDetails/HAppDetailsStopHosting.vue'
+import HAppDetailsUsage from '@/components/hAppDetails/HAppDetailsUsage.vue'
+import LeftChevronIcon from '@/components/icons/LeftChevronIcon.vue'
+import type { HAppDetails } from '@/interfaces/HposInterface'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  hApp: HAppDetails
+}>()
+</script>
+
+<template>
+  <div class="happ-details">
+    <router-link
+      class="happ-details__back-link"
+      to="/happs"
+    >
+      <LeftChevronIcon />
+      {{ t('$.back') }}
+    </router-link>
+    <div class="happ-details__columns">
+      <div class="happ-details__left-column desktop">
+        <HAppImage
+          :happ="props.hApp"
+          size="178px"
+          class="happ-details__left-column-happ-image"
+        />
+        <div class="happ-details__left-column-description-label">
+          {{ t('$.description') }}
+        </div>
+        <div class="happ-details__left-column-description">
+          {{ props.hApp.description }}
+        </div>
+
+        <div class="happ-details__left-column-categories">
+          <CategoryChip
+            v-for="category in props.hApp.categories"
+            :key="category"
+            :label="category"
+            :custom-theme="{
+              fontColor: 'gray',
+              backgroundColor: 'grey-light-color'
+            }"
+            class="happ-details__left-column-category"
+          />
+        </div>
+      </div>
+
+      <div class="happ-details__main-column">
+        <!-- Mobile -->
+        <div class="happ-details__main-column-mobile">
+          <HAppImage
+            :happ="props.hApp"
+            size="124px"
+            class="happ-details__main-column-mobile-happ-image"
+          />
+          <h2 class="happ-details__main-column-name">
+            {{ props.hApp.name }}
+          </h2>
+          <div class="happ-details__main-column-description">
+            {{ props.hApp.description }}
+          </div>
+        </div>
+
+        <!-- Desktop -->
+        <h2 class="happ-details__main-column-name desktop">
+          {{ props.hApp.name }}
+        </h2>
+
+        <HAppDetailsEarnings
+          :h-app="props.hApp"
+          class="happ-details__main-column-earnings"
+        />
+
+        <HAppDetailsUsage
+          :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>
+</template>
+
+<style scoped lang="scss">
+.happ-details {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--white-color);
+  box-shadow: 0 4px 20px #eceef1;
+  border-radius: 5px;
+  margin: 0 10px 20px 0;
+  padding: 30px;
+  color: var(--grey-color);
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 600;
+
+  &__back-link {
+    color: var(--grey-color);
+    text-decoration: none;
+    font-size: 14px;
+    margin-bottom: 32px;
+  }
+
+  &__columns {
+    display: flex;
+  }
+
+  &__left-column {
+    display: flex;
+    flex: 0;
+    flex-direction: column;
+
+    &-happ-image {
+      margin-bottom: 38px;
+    }
+
+    &-description-label {
+      margin-bottom: 4px;
+    }
+
+    &-description {
+      font-weight: 700;
+      color: var(--grey-dark-color);
+    }
+
+    &-categories {
+      margin-top: 48px;
+    }
+
+    &-category {
+      display: block;
+      margin-top: 13px;
+      width: fit-content;
+      block-size: fit-content;
+    }
+  }
+
+  &__main-column {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    margin-left: 22px;
+
+    &-mobile {
+      display: none;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    &-name {
+      margin: 0 0 40px 0;
+      color: var(--grey-dark-color);
+      font-weight: bold;
+      font-size: 22px;
+      line-height: 22px;
+    }
+
+    &-description {
+      font-weight: 700;
+      color: var(--grey-dark-color);
+    }
+
+    &-earnings {
+      margin-top: 2px;
+    }
+
+    &-usage {
+      margin-top: 32px;
+    }
+
+    &-stop-hosting {
+      margin-top: 32px;
+    }
+  }
+}
+
+@media screen and (max-width: 1050px) {
+  .happ-details {
+    margin: 0 0 20px 0;
+    padding: 18px;
+
+    &__main-column {
+      margin: 0 4px;
+
+      &-mobile {
+        display: block;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      &-name {
+        margin-top: 12px;
+        margin-bottom: 12px;
+      }
+
+      &-description {
+        font-size: 11px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  .mobile-column {
+    display: flex;
+  }
+
+  .desktop {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/hAppDetails/HAppDetailsEarnings.vue b/src/components/hAppDetails/HAppDetailsEarnings.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { HAppDetails } from '@/interfaces/HposInterface'
+import { presentHolofuelAmount } from '@/utils'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  hApp: HAppDetails
+}>()
+</script>
+
+<template>
+  <div class="happ-details-earnings">
+    <div class="happ-details-earnings__info-row large-text">
+      {{ t('happ_details.earnings.total') }}:<span class="happ-details-earnings__info-row-value">&nbsp;{{ presentHolofuelAmount(props.hApp.earnings.total) }} HF</span>
+    </div>
+    <div class="happ-details-earnings__info-row earnings-margin">
+      {{ t('happ_details.earnings.last_7_days') }}:<span class="happ-details-earnings__info-row-value">&nbsp;{{ presentHolofuelAmount(props.hApp.earnings.last7Days) }} HF</span>
+    </div>
+    <div class="happ-details-earnings__info-row earnings-margin">
+      {{ t('happ_details.earnings.average_weekly') }}:<span class="happ-details-earnings__info-row-value">&nbsp;{{ presentHolofuelAmount(props.hApp.earnings.averageWeekly) }} HF</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.happ-details-earnings {
+  &__info-row {
+    display: flex;
+    align-items: center;
+    color: var(--grey-color);
+    margin-left: 4px;
+    margin-bottom: 16px;
+    font-size: 14px;
+
+    &-value {
+      font-weight: 700;
+      color: var(--grey-dark-color);
+    }
+  }
+
+  .large-text {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 1050px) {
+  .happ-details-earnings {
+    &__info-row {
+      font-size: 14px;
+    }
+
+    .mobile-margin {
+      margin-bottom: 40px;
+    }
+  }
+}
+</style>