From 0ab8a22fdd6915fa8ba6a3cb54c6d9d6b28d6ce2 Mon Sep 17 00:00:00 2001 From: Mateusz Rybczonek Date: Tue, 7 Nov 2023 13:23:08 +0100 Subject: [PATCH 1/8] feat(hosting-plan): implement radio buttons and modals --- src/components/BaseRadioButton.vue | 126 ++++++++++++++ src/components/dashboard/HappsCard.vue | 2 +- .../hAppDetails/HAppDetailsContent.vue | 18 +- .../hAppDetails/HAppDetailsHostingPlan.vue | 87 ++++++++++ src/components/modals/HostingPlanModal.vue | 161 ++++++++++++++++++ src/locales/en.ts | 14 ++ ui-common-library | 2 +- 7 files changed, 404 insertions(+), 6 deletions(-) create mode 100644 src/components/BaseRadioButton.vue create mode 100644 src/components/hAppDetails/HAppDetailsHostingPlan.vue create mode 100644 src/components/modals/HostingPlanModal.vue diff --git a/src/components/BaseRadioButton.vue b/src/components/BaseRadioButton.vue new file mode 100644 index 00000000..53b4ca25 --- /dev/null +++ b/src/components/BaseRadioButton.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/src/components/dashboard/HappsCard.vue b/src/components/dashboard/HappsCard.vue index 80e19116..5d43c9f0 100644 --- a/src/components/dashboard/HappsCard.vue +++ b/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_active_happs') }}
+ +
@@ -161,10 +167,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; @@ -186,6 +192,10 @@ const props = defineProps<{ &-usage { margin-top: 32px; } + + &-hosting-plan { + margin-top: 54px; + } } } diff --git a/src/components/hAppDetails/HAppDetailsHostingPlan.vue b/src/components/hAppDetails/HAppDetailsHostingPlan.vue new file mode 100644 index 00000000..08c21e9f --- /dev/null +++ b/src/components/hAppDetails/HAppDetailsHostingPlan.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/src/components/modals/HostingPlanModal.vue b/src/components/modals/HostingPlanModal.vue new file mode 100644 index 00000000..2b24dec5 --- /dev/null +++ b/src/components/modals/HostingPlanModal.vue @@ -0,0 +1,161 @@ + + + + + diff --git a/src/locales/en.ts b/src/locales/en.ts index d363a86a..d4cfdcb6 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -99,6 +99,20 @@ export default { no_filtered_happs: 'No hApps match your search', title: 'Top Hosted hApps' }, + hosting_plan: { + free: { + title: 'Are you sure you want to host this hApp for free?', + confirmation_button_label: 'Yes, host for free', + success_title: 'Hosting Plan Switched', + success_description: 'You’ve successfully switched to free hosting plan.' + }, + paid: { + title: 'Are you sure you want to stop hosting this hApp for free? ', + confirmation_button_label: 'Yes, switch to paid', + success_title: 'Hosting Plan Switched', + success_description: 'You’ve successfully switched to paid hosting plan.' + } + }, hosting_preferences: { header: 'Hosting Preferences', happ_selection: { diff --git a/ui-common-library b/ui-common-library index ca3e781a..52105762 160000 --- a/ui-common-library +++ b/ui-common-library @@ -1 +1 @@ -Subproject commit ca3e781a29e9da520c9522f8cbb4037c912262a2 +Subproject commit 5210576282c893ea9ed4085875ff789d9ff8a347 From 685aabf8e3eac7f0fe7e9a77559c93a95ec9d825 Mon Sep 17 00:00:00 2001 From: Mateusz Rybczonek Date: Tue, 7 Nov 2023 13:29:22 +0100 Subject: [PATCH 2/8] feat(hosting-plan): hide selector is hApp is not enabled --- src/components/hAppDetails/HAppDetailsContent.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/hAppDetails/HAppDetailsContent.vue b/src/components/hAppDetails/HAppDetailsContent.vue index e6c2820a..daa32fa5 100644 --- a/src/components/hAppDetails/HAppDetailsContent.vue +++ b/src/components/hAppDetails/HAppDetailsContent.vue @@ -92,6 +92,7 @@ const props = defineProps<{ /> From bba75b06daa017c97cad4dc862c493c2ae744f52 Mon Sep 17 00:00:00 2001 From: Mateusz Rybczonek Date: Thu, 16 Nov 2023 14:48:53 +0100 Subject: [PATCH 3/8] feat(happ-hosting-plan): hook up zome_call --- src/components/BaseRadioButton.vue | 8 +-- .../hAppDetails/HAppDetailsHostingPlan.vue | 16 +++--- src/components/modals/HostingPlanModal.vue | 53 +++++++++++-------- src/interfaces/HposInterface.ts | 40 ++++++++++++++ src/locales/en.ts | 7 +++ 5 files changed, 93 insertions(+), 31 deletions(-) diff --git a/src/components/BaseRadioButton.vue b/src/components/BaseRadioButton.vue index 53b4ca25..83659807 100644 --- a/src/components/BaseRadioButton.vue +++ b/src/components/BaseRadioButton.vue @@ -4,6 +4,7 @@ const props = defineProps<{ value: string label: string description: string + modelValue: string }>() const emit = defineEmits(['update:modelValue']) @@ -18,11 +19,12 @@ const emit = defineEmits(['update:modelValue']) >
diff --git a/src/components/hAppDetails/HAppDetailsHostingPlan.vue b/src/components/hAppDetails/HAppDetailsHostingPlan.vue index 08c21e9f..7a51f991 100644 --- a/src/components/hAppDetails/HAppDetailsHostingPlan.vue +++ b/src/components/hAppDetails/HAppDetailsHostingPlan.vue @@ -12,8 +12,8 @@ const props = defineProps<{ }>() function updatePlan(value: string) { - openModal() - console.log(value) + console.log(value) + openModal() } const isModalVisible = ref(false) @@ -29,13 +29,14 @@ function closeModal(): void {
- Hosting Plan + {{ t('happ_details.hosting_plan.label') }}
@@ -43,8 +44,9 @@ function closeModal(): void { diff --git a/src/components/modals/HostingPlanModal.vue b/src/components/modals/HostingPlanModal.vue index 2b24dec5..9b65b2a2 100644 --- a/src/components/modals/HostingPlanModal.vue +++ b/src/components/modals/HostingPlanModal.vue @@ -7,12 +7,14 @@ 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() // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment const { showModal } = useModals() +const { updateHAppHostingPlan } = useHposInterface() const props = defineProps<{ hApp: HAppDetails @@ -24,28 +26,35 @@ const isConfirmed = ref(false) const isBusy = ref(false) const isError = ref(false) -function confirm(): void { +async function confirm(): Promise { isBusy.value = true + let result = null - setTimeout(() => { - if (props.hApp.hostingPlan === 'paid') { - startFreeHosting() - } else { - startPaidHosting() - } + if (props.hApp.hostingPlan === 'paid') { + result = await updateHAppHostingPlan({ id: props.hApp.id, value: 'free' }) + } else { + result = await updateHAppHostingPlan({ id: props.hApp.id, value: 'paid' }) + } - // 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 failed + if (isErrorPredicate(result)) { + emit('close') - // 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 + + isBusy.value = true } function close(): void { @@ -57,10 +66,12 @@ function close(): void { function startFreeHosting(): void { console.log('NOT YET IMPLEMENTED: Starting free hosting happ', props.hApp.name) + emit('update:hosting-plan', true) } function startPaidHosting(): void { console.log('NOT YET IMPLEMENTED: Starting paid hosting happ', props.hApp.name) + emit('update:hosting-plan', true) } @@ -144,9 +155,9 @@ function startPaidHosting(): void { margin-top: 20px; font-weight: 600; - &--success { - font-weight: 800; - } + &--success { + font-weight: 800; + } } &__description { diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts index 61bd1565..58236b7e 100644 --- a/src/interfaces/HposInterface.ts +++ b/src/interfaces/HposInterface.ts @@ -1,5 +1,6 @@ /* eslint-disable camelcase */ import axios from 'axios' +import { decodeAgentId } from '../../ui-common-library/src/utils/agent' import { kAuthTokenLSKey, kCoreAppVersionLSKey } from '@/constants' import kHttpStatus from '@/constants/httpStatues' import router from '@/router' @@ -14,6 +15,7 @@ interface HposInterface { getHAppDetails: (id: string) => Promise startHostingHApp: (id: string) => Promise stopHostingHApp: (id: string) => Promise + updateHAppHostingPlan: (payload: UpdateHAppHostingPlanPayload) => Promise getHostEarnings: () => Promise getHostPreferences: () => Promise checkAuth: (email: string, password: string, authToken: string) => Promise @@ -31,6 +33,11 @@ interface HposInterface { HPOS_API_URL: string } +interface UpdateHAppHostingPlanPayload { + id: string + value: string +} + interface RedeemHoloFuelPayload { amount: string note?: string @@ -477,6 +484,38 @@ export function useHposInterface(): HposInterface { } } + async function updateHAppHostingPlan({ + id, + value + }: UpdateHAppHostingPlanPayload): Promise { + console.log('updateHAppHostingPlan', id, value) + console.log(decodeAgentId(id)) + + try { + const params = { + appId: localStorage.getItem(kCoreAppVersionLSKey), + roleId: 'core-app', + zomeName: 'hha', + fnName: 'get_happ_preferences', + payload: { + happ_id: id + } + } + + const result = await hposHolochainCall({ + method: 'post', + path: '/zome_call', + params + }) + + console.log(result) + + return true + } catch (error) { + return false + } + } + async function getHostEarnings(): Promise { try { return await hposHolochainCall({ @@ -828,6 +867,7 @@ export function useHposInterface(): HposInterface { getHAppDetails, startHostingHApp, stopHostingHApp, + updateHAppHostingPlan, HPOS_API_URL } } diff --git a/src/locales/en.ts b/src/locales/en.ts index 6de4a63c..6d19d4ac 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -77,6 +77,13 @@ export default { last_7_days: 'Earned in last 7 days', average_weekly: 'Average weekly earnings' }, + hosting_plan: { + free: 'Free', + free_description: 'Agree to host this hApp for free.', + label: 'Hosting Plan', + paid: 'Paid', + paid_description: 'Get paid to host this hApp.' + }, seven_day_usage: '7 day usage', stop_hosting: 'Stop Hosting', stop_hosting_warning: From 30498a49965fc7dcbcc6c6528287ddd2e68a710c Mon Sep 17 00:00:00 2001 From: Mateusz Rybczonek Date: Mon, 20 Nov 2023 10:52:41 +0100 Subject: [PATCH 4/8] feat(happ-hosting-plan): test get_happ_preferences --- src/components/BaseRadioButton.vue | 6 ++- .../hAppDetails/HAppDetailsHostingPlan.vue | 6 ++- src/components/modals/HostingPlanModal.vue | 19 +++------ src/interfaces/HposInterface.ts | 40 ++++++++----------- 4 files changed, 33 insertions(+), 38 deletions(-) diff --git a/src/components/BaseRadioButton.vue b/src/components/BaseRadioButton.vue index 83659807..fb8df6cd 100644 --- a/src/components/BaseRadioButton.vue +++ b/src/components/BaseRadioButton.vue @@ -1,4 +1,6 @@