Platform UI - ldflag stuff (#242)

* Platform UI - ldflag stuff Signed-off-by: Kial Jinnah <[email protected]> * Allow vhtml in header Signed-off-by: Kial Jinnah <[email protected]> * forgot to save this file in previous commit Signed-off-by: Kial Jinnah <[email protected]> * tweak Signed-off-by: Kial Jinnah <[email protected]> --------- Signed-off-by: Kial Jinnah <[email protected]>
bcgov · Oct 30, 2024 · 39208e0 · 39208e0
1 parent 5b7f75f
commit 39208e0
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 10 deletions.
diff --git a/strr-platform-web/app/components/connect/SystemBanner.vue b/strr-platform-web/app/components/connect/SystemBanner.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const ldStore = useConnectLaunchdarklyStore()
+const { $sanitize } = useNuxtApp()
+
+defineProps({
+  dismissible: { type: Boolean, default: false },
+  icon: { type: String, default: 'i-mdi-information' }
+})
+
+const close = ref(false)
+const message = ref('')
+
+onMounted(async () => {
+  await ldStore.ldClient?.waitUntilReady()
+  message.value = $sanitize(ldStore.getStoredFlag('banner-text')?.trim())
+})
+</script>
+
+<template>
+  <UAlert
+    v-show="!!message && !close"
+    class="border-b-2 border-yellow-400 py-0"
+    color="yellow"
+    :description="message"
+    variant="solid"
+    :close-button="dismissible ? { class: 'pr-2 text-gray-900' } : null"
+    :ui="{ rounded: 'rounded-none', padding: 'p-0', gap: 'app-inner-container py-2' }"
+    @close="close = true"
+  >
+    <template #icon>
+      <!-- NB: needed due to icon sizing via app.config / ui config for alert is not getting applied -->
+      <UIcon class="ml-[-2px] text-[34px]" :name="icon" />
+    </template>
+    <template #description>
+      <!-- eslint-disable vue/no-v-html tailwindcss/no-custom-classname -->
+      <p class="vhtml text-gray-900" v-html="message" />
+    </template>
+  </UAlert>
+</template>
+<!-- must style globally for vhtml style to work  -->
+<style>
+.vhtml > a {
+  color: #212529;
+  text-decoration: underline;
+}
+</style>
diff --git a/strr-platform-web/app/layouts/default.vue b/strr-platform-web/app/layouts/default.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="app-container" data-testid="platform-registration-layout">
+    <ConnectHeader />
+    <ConnectSystemBanner />
+    <ConnectBreadcrumb />
+    <main class="app-inner-container app-body">
+      <slot />
+    </main>
+    <ConnectFooter />
+  </div>
+</template>
diff --git a/strr-platform-web/app/locales/en-CA.ts b/strr-platform-web/app/locales/en-CA.ts
@@ -451,6 +451,7 @@ export default {
   platform: {
     title: {
       application: 'Short-Term Rental Platform Application',
+      comingSoon: 'My Short-Term Rental Registry Coming Soon',
       dashboard: 'My Short-Term Rental Registry'
     },
     step: {
@@ -525,6 +526,7 @@ export default {
       brandNames: 'If your platform operates under distinct brand names, please enter each of them here.',
       brandNames2: 'If the business provides the same listings on multiple websites with different brand names, provide those as well. ',
       brandNamesNote: 'NOTE: if the listings are different, each brand should be a separate registration',
+      comingSoon: 'My Short-Term Rental Registry will be available on December 15, 2024',
       emailNote: 'Email will be the default method of communication. Information sent to your email address will be considered “received” on the third day after the email is sent.',
       hasCpbc: 'Does the business have an active number with Consumer Protection BC (CPBC)?',
       isUserRep: 'Are you the platform representative?',

diff --git a/strr-platform-web/app/middleware/1.enable-app.ts b/strr-platform-web/app/middleware/1.enable-app.ts
@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware(async () => {
+  const { ldClient, getStoredFlag } = useConnectLaunchdarklyStore()
+  await ldClient?.waitUntilReady()
+  if (!getStoredFlag('enable-public-users')) {
+    return navigateTo({ path: useLocalePath()('/comingSoon') })
+  }
+})
diff --git a/strr-platform-web/app/pages/comingSoon.vue b/strr-platform-web/app/pages/comingSoon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+// page stuff
+useHead({
+  title: t('platform.title.comingSoon')
+})
+
+definePageMeta({
+  path: '/comingSoon'
+})
+
+setBreadcrumbs([
+  { label: t('label.bcregDash'), to: useRuntimeConfig().public.registryHomeURL + 'dashboard' },
+  { label: t('platform.title.dashboard') }
+])
+</script>
+<template>
+  <div class="py-14 text-center">
+    <ConnectTypographyH1 :text="$t('platform.title.comingSoon')" />
+    <p class="pt-3">
+      {{ $t('platform.text.comingSoon') }}
+    </p>
+  </div>
+</template>
diff --git a/strr-platform-web/nuxt.config.ts b/strr-platform-web/nuxt.config.ts
@@ -84,16 +84,16 @@ export default defineNuxtConfig({
       paymentPortalUrl: process.env.NUXT_PAYMENT_PORTAL_URL,
       baseUrl: process.env.NUXT_BASE_URL,
       environment: process.env.NUXT_ENVIRONMENT_HEADER || '',
-      version: `STRR PM UI v${process.env.npm_package_version}`
+      version: `STRR Platform UI v${process.env.npm_package_version}`
       // set by layer - still required in .env
-      // keycloakAuthUrl
-      // keycloakClientId
-      // keycloakRealm
-      // authApiURL
-      // authWebURL
-      // registryHomeURL
-      // ldClientId
-      // appName - not required in .env
+      // keycloakAuthUrl - NUXT_KEYCLOAK_AUTH_URL
+      // keycloakClientId - NUXT_KEYCLOAK_CLIENTID
+      // keycloakRealm - NUXT_KEYCLOAK_REALM
+      // authApiURL - NUXT_AUTH_API_URL
+      // authWebURL - NUXT_AUTH_WEB_URL
+      // registryHomeURL - NUXT_REGISTRY_HOME_URL
+      // ldClientId - NUXT_LD_CLIENT_ID
+      // appName - npm_package_name
     }
   },
 

diff --git a/strr-platform-web/package.json b/strr-platform-web/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "strr-pm-web",
+  "name": "strr-platform-web",
   "private": true,
   "type": "module",
   "version": "0.0.1",