Merge branch 'develop' into feature/happ-details

src/assets/css/variables.css

@@ -5,14 +5,16 @@
     --black-color: #000000;
 
     --primary-color: #00cad9;
-    --primary-light-color: rgba(0, 202, 217, 0.06);
+    --primary-light-color: rgba(176, 236, 240, 0.72);
+    --primary-extra-light-color: rgba(0, 202, 217, 0.06);
 
     --grey-color: #606c8b;
     --grey-dark-color: #313c59;
     --grey-light-color: #bcbfc6;
 
     --violet-color: #E339FF;
     --red-color: #ff5f5f;
+    --red-light-color: rgba(253, 232, 232);
     --green-color: #21BE98;
 
     --yellow-light-color: #ffe871;

src/components/BaseBanner.vue

@@ -0,0 +1,86 @@
+<template>
+	<Transition>
+		<div
+			class="banner"
+			:class="[type]"
+			@click.stop
+		>
+			<ExclamationTriangleIcon class="banner__icon" />
+			<div class="banner__content">
+				<span class="banner__content-title">{{ message }}</span>
+
+				<div class="banner__slot-content">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<script setup>
+import { ExclamationTriangleIcon } from '@heroicons/vue/20/solid'
+
+const props = defineProps({
+	type: {
+		type: String,
+		default: 'error',
+		validator(value) {
+			return ['error', 'warning', 'success'].includes(value)
+		}
+	},
+	message: {
+		type: String,
+		default: ''
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.banner {
+	width: 100%;
+	display: flex;
+	align-self: center;
+	color: white;
+	border-radius: 20px;
+
+	&__icon {
+		flex-shrink: 0;
+		width: 19px;
+		margin-left: 16px;
+	}
+
+	&.error {
+		background-color: var(--red-light-color);
+		color: var(--red-color);
+	}
+
+	&.warning {
+		background-color: var(--yellow-light-color);
+		color: var(--grey-dark-color);
+	}
+
+	&.success {
+		background-color: var(--green-color);
+	}
+
+	&__content {
+		display: flex;
+		align-items: start;
+		padding: 16px;
+		flex-direction: column;
+		font-style: normal;
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 19px;
+		text-align: left;
+
+		&-title {
+			font-weight: 800;
+		}
+	}
+
+	&__slot-content {
+		margin-top: 8px;
+	}
+}
+</style>

src/components/BaseTabSelect.vue

@@ -77,7 +77,7 @@ const emit = defineEmits(['update'])
     &--current {
       color: var(--primary-color);
       border-color: var(--primary-color);
-      background-color: var(--primary-light-color);
+      background-color: var(--primary-extra-light-color);
     }
 
     &--inactive {

src/components/dashboard/HappsCard.vue

@@ -27,7 +27,7 @@ const emit = defineEmits(['try-again-clicked'])
         v-if="!props.data || props.data.length === 0"
         class="no-happs"
       >
-        {{ $t('hosted_happs.no_happs') }}
+        {{ $t('hosted_happs.no_enabled_happs') }}
       </div>
       <div
         v-for="happ in props.data"
@@ -72,6 +72,8 @@ const emit = defineEmits(['try-again-clicked'])
   align-items: center;
   height: 100%;
   color: var(--grey-color);
+  font-size: 15px;
   font-weight: bold;
+	text-align: center;
 }
 </style>

src/components/modals/RedemptionInitiatedModal.vue

@@ -10,6 +10,7 @@ import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import RedemptionInitiatedModalItem from './RedemptionInitiatedModalItem.vue'
+import BaseBanner from '@/components/BaseBanner.vue'
 import { EModal, kDefaultDateTimeFormat, kMsInSecond } from '@/constants/ui'
 
 const { t } = useI18n()
@@ -95,6 +96,7 @@ const items = computed((): Item[] => [
 <template>
   <BaseModal
     :is-visible="visibleModal === EModal.redemption_initiated"
+    content-padding="sm"
     @close="hideModal"
   >
     <div class="redemption-initiated-modal">
@@ -107,13 +109,21 @@ const items = computed((): Item[] => [
       </div>
 
       <div class="redemption-initiated-modal__description">
-        <RedemptionInitiatedModalItem
-          v-for="item in items"
-          :key="item.label"
-          :label="item.label"
-          :value="item.value"
-          :tip-message="item.tipMessage || ''"
-        />
+        <BaseBanner message="Important">
+          <span class="redemption-initiated-modal__banner-content">
+            This is a request, it may be partially or totally accepted or rejected. To know the status of your request, please check redemption history, you will also receive an email if anything goes wrong.
+          </span>
+        </BaseBanner>
+
+        <div class="redemption-initiated-modal__description-items">
+          <RedemptionInitiatedModalItem
+            v-for="item in items"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
+            :tip-message="item.tipMessage || ''"
+          />
+        </div>
       </div>
     </div>
 
@@ -152,11 +162,20 @@ const items = computed((): Item[] => [
   &__description {
     display: flex;
     flex-direction: column;
-    margin-top: 40px;
+    margin-top: 12px;
+
+    &-items {
+      margin-top: 30px;
+      margin-left: 20px;
+    }
   }
 
   &__button {
     margin-top: 24px;
   }
+
+  &__banner-content {
+    text-decoration: underline;
+  }
 }
 </style>

src/interfaces/HposInterface.ts

@@ -10,7 +10,6 @@ import { eraseHpAdminKeypair, getHpAdminKeypair } from '@/utils/keyManagement'
 
 interface HposInterface {
   getUsage: () => Promise<UsageResponse | { error: unknown }>
-  getTopHostedHapps: () => Promise<HApp[] | { error: unknown }>
   getHostedHapps: () => Promise<HApp[] | { error: unknown }>
   getHAppDetails: (id: string) => Promise<HAppDetails | { error: unknown }>
   getHostEarnings: () => Promise<HostEarnings | { error: unknown }>
@@ -397,31 +396,6 @@ export function useHposInterface(): HposInterface {
     }
   }
 
-  async function getTopHostedHapps(): Promise<HposHolochainCallResponse | { error: unknown }> {
-    try {
-      // NB: the `/hosted_happs` endpoint returns happs sorted by earnings in descending order
-      const result = await hposHolochainCall({
-        method: 'get',
-        pathPrefix: '/api/v2',
-        path: '/hosted_happs',
-        params: {
-          usage_interval: 7,
-          quantity: kTopHappsToDisplay
-        }
-      })
-
-      if (isHappArray(result)) {
-        return result.filter((happ: HApp) => happ.enabled)
-      } else {
-        console.error("getTopHostedHapps didn't return an array")
-        return []
-      }
-    } catch (error) {
-      console.error('getTopHostedHapps encountered an error: ', error)
-      return { error }
-    }
-  }
-
   async function getHostedHapps(): Promise<HposHolochainCallResponse | { error: unknown }> {
     try {
       const result = await hposHolochainCall({
@@ -802,7 +776,6 @@ export function useHposInterface(): HposInterface {
 
   return {
     getUsage,
-    getTopHostedHapps,
     getHostedHapps,
     getHostEarnings,
     checkAuth,

src/locales/en.ts

@@ -65,9 +65,11 @@ export default {
     ...commonTranslations.holofuel_modal
   },
   hosted_happs: {
+    disabled: 'Disabled hApps',
+    enabled: 'Enabled hApps',
     hosted_for: 'Hosted for',
-    no_active_happs: 'You’re not hosting any hApps',
-    no_inactive_happs: 'You do not have any inactive hApps',
+    no_enabled_happs: 'You have not enabled any hApps for hosting',
+    no_disabled_happs: 'You have not disabled any hApps',
     no_filtered_happs: 'No hApps match your search',
     title: 'Top Hosted hApps'
   },

src/pages/DashboardPage.vue

@@ -14,6 +14,7 @@ import { isError } from '@/types/predicates'
 import type { HoloFuelCardData, Error } from '@/types/types'
 
 const kPaymentsToDisplay = 3
+const kTopHostedHAppsToDisplay = 3
 
 const router = useRouter()
 const dashboardStore = useDashboardStore()
@@ -41,7 +42,11 @@ const holoFuelCardData = computed((): HoloFuelCardData | Error => {
   }
 })
 
-const topHostedHapps = computed(() => dashboardStore.hostedHapps)
+const topHostedHapps = computed(() =>
+  isError(dashboardStore.hostedHapps)
+    ? dashboardStore.hostedHapps
+    : dashboardStore.hostedHapps.filter((hApp) => !hApp.enabled).slice(0, kTopHostedHAppsToDisplay)
+)
 
 const earnings = computed(() =>
   isError(dashboardStore.hostEarnings)
@@ -59,7 +64,7 @@ const usage = computed(() => dashboardStore.usage)
 
 async function getTopHostedHapps(): Promise<void> {
   isLoadingHostedHapps.value = true
-  await dashboardStore.getTopHostedHapps()
+  await dashboardStore.getHostedHapps()
   isLoadingHostedHapps.value = false
 }
 

src/pages/HAppsPage.vue

@@ -4,6 +4,7 @@ import BaseSearchInput from '@uicommon/components/BaseSearchInput.vue'
 import HAppCard from '@uicommon/components/HAppCard.vue'
 import { EChipType } from '@uicommon/types/ui'
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import BaseTabSelect from '@/components/BaseTabSelect.vue'
 import SortByDropdown from '@/components/hApps/SortByDropdown.vue'
 import PrimaryLayout from '@/components/PrimaryLayout.vue'
@@ -15,18 +16,23 @@ import { isError as isErrorPredicate } from '@/types/predicates'
 
 const store = useDashboardStore()
 
+const { t } = useI18n()
+
 const isLoading = ref(false)
 const isError = ref(false)
 
-const selectedTab = ref('active')
+const selectedTab = ref('enabled')
 
 const tabs = computed(() => [
-  { value: 'active', name: 'Active hApps', current: selectedTab.value === 'active' },
   {
-    value: 'inactive',
-    name: 'Inactive hApps',
-    href: '#',
-    current: selectedTab.value === 'inactive'
+    value: 'enabled',
+    name: t('hosted_happs.enabled'),
+    current: selectedTab.value === 'enabled'
+  },
+  {
+    value: 'disabled',
+    name: t('hosted_happs.disabled'),
+    current: selectedTab.value === 'disabled'
   }
 ])
 
@@ -66,7 +72,7 @@ const filteredHApps = computed((): HApp[] => {
   } else if (!isErrorPredicate(happs.value)) {
     // If hApps are hosted filter them by activity
     hAppsFilteredByActivity =
-      selectedTab.value === 'active'
+      selectedTab.value === 'enabled'
         ? happs.value.filter((hApp: HApp) => hApp.enabled)
         : happs.value.filter((hApp: HApp) => !hApp.enabled)
   }
@@ -172,7 +178,7 @@ onMounted(async () => {
       >
         <HAppCard
           is-empty
-          :empty-card-label="filterValue ? 'hosted_happs.no_filtered_happs' : selectedTab === 'active' ? 'hosted_happs.no_active_happs' : 'hosted_happs.no_inactive_happs'"
+          :empty-card-label="filterValue ? 'hosted_happs.no_filtered_happs' : selectedTab === 'enabled' ? 'hosted_happs.no_enabled_happs' : 'hosted_happs.no_disabled_happs'"
           class="happs__happ-list-item"
         />
       </div>

src/store/dashboard.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { HApp, HostEarnings, UsageResponse, useHposInterface } from '@/interfaces/HposInterface'
 
-const { getUsage, getTopHostedHapps, getHostEarnings, getHostedHapps } = useHposInterface()
+const { getUsage, getHostedHapps, getHostEarnings } = useHposInterface()
 
 interface State {
   usage: UsageResponse | { error: unknown }
@@ -33,16 +33,12 @@ export const useDashboardStore = defineStore('dashboard', {
       this.usage = await getUsage()
     },
 
-    async getTopHostedHapps(): Promise<void> {
-      this.hostedHApps = await getTopHostedHapps()
+    async getHostedHapps(): Promise<void> {
+      this.hostedHApps = await getHostedHapps()
     },
 
     async getEarnings(): Promise<void> {
       this.hostEarnings = await getHostEarnings()
-    },
-
-    async getHostedHApps(): Promise<void> {
-      this.hostedHApps = await getHostedHapps()
     }
   }
 })