@sbc-connect/nuxt-base 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sbc-connect/nuxt-base
 
+## 0.4.0
+
+### Minor Changes
+
+- [#106](https://github.com/bcgov/connect-nuxt/pull/106) [`f5d34df`](https://github.com/bcgov/connect-nuxt/commit/f5d34df0bbb2b37cbeda8a9dd39c6bce098c564f) Thanks [@deetz99](https://github.com/deetz99)! - <br>
+  - ConnectModalError component
+  - getErrorStatus util
+  - getErrorMessage util
+
 ## 0.3.0
 
 ### Minor Changes

package/app/components/Connect/Modal/Error.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+// https://vue-i18n.intlify.dev/api/composition.html#te-key-locale
+const { t, te } = useI18n()
+
+interface ErrorModalProps {
+  error: unknown
+  i18nPrefix: string
+  buttons?: ConnectModalButton[]
+  contactInfo?: VNode
+  preferErrorMessage?: boolean
+}
+
+const {
+  error,
+  i18nPrefix,
+  buttons = [
+    { label: useNuxtApp().$i18n.t('label.close'), shouldClose: true }
+  ],
+  preferErrorMessage = false
+} = defineProps<ErrorModalProps>()
+defineEmits<{ close: [] }>()
+
+const status = getErrorStatus(error)
+const message = getErrorMessage(error)
+
+const titleKey = `${i18nPrefix}.${status}.title`
+const descKey = `${i18nPrefix}.${status}.description`
+
+const title = te(titleKey) ? t(titleKey) : t(`${i18nPrefix}.undefined.title`)
+const i18nDescription = te(descKey) ? t(descKey) : t(`${i18nPrefix}.undefined.description`)
+
+const description = (preferErrorMessage && message)
+  ? message
+  : i18nDescription
+</script>
+
+<template>
+  <UModal
+    id="connect-error-modal"
+    overlay
+    :title
+    :description
+    :dismissible="false"
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <h2 class="text-2xl font-semibold text-neutral-highlighted">
+          {{ title }}
+        </h2>
+        <p>{{ description }}</p>
+        <component :is="contactInfo" v-if="contactInfo" />
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <template
+            v-for="button in buttons"
+            :key="button.label"
+          >
+            <UButton
+              v-if="button.shouldClose"
+              v-bind="button"
+              size="xl"
+              class="w-full justify-center sm:w-min sm:justify-normal"
+              @click="$emit('close')"
+            />
+            <UButton
+              v-else
+              v-bind="button"
+              size="xl"
+              class="w-full justify-center sm:w-min sm:justify-normal"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/composables/useConnectModal.ts

@@ -1,11 +1,13 @@
-import { ConnectModal } from '#components'
+import { ConnectModal, ConnectModalError } from '#components'
 
 export const useConnectModal = () => {
   const overlay = useOverlay()
 
   const baseModal = overlay.create(ConnectModal)
+  const errorModal = overlay.create(ConnectModalError)
 
   return {
-    baseModal
+    baseModal,
+    errorModal
   }
 }

package/app/utils/getErrorMessage.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Safely extracts an error message from an unknown error object.
+ *
+ * The search order (Highest Priority to Lowest) is:
+ * 1. Current object's 'message' (must be a non-empty string).
+ * 2. Current object's 'detail' (must be a non-empty string).
+ * 3. Recursively searches the 'error.data.rootCause' object.
+ * 4. Recursively searches the 'error.data' object.
+ *
+ * This function will return the first valid, non-empty string message found.
+ *
+ * @param error - The error object (unknown).
+ * @returns The error message if found, else 'undefined'.
+*/
+export function getErrorMessage(error: unknown): string | undefined {
+  if (error && typeof error === 'object') {
+    const errorObject = error as Record<string, any>
+
+    const message = errorObject.message
+    if (message && typeof message === 'string' && message.length > 0) {
+      return message
+    }
+    const detail = errorObject.detail
+    if (detail && typeof detail === 'string' && detail.length > 0) {
+      return detail
+    }
+
+    const rootCauseMessage = getErrorMessage(errorObject?.data?.rootCause)
+    if (rootCauseMessage) {
+      return rootCauseMessage
+    }
+
+    const dataMessage = getErrorMessage(errorObject?.data)
+    if (dataMessage) {
+      return dataMessage
+    }
+  }
+
+  return undefined
+}

package/app/utils/getErrorStatus.ts

@@ -0,0 +1,37 @@
+/**
+ * Safely extracts the HTTP status code from a thrown error.
+ *
+ * This provides a reliable way to get a status code from an `unknown` error type.
+ *
+ * @param error - The error object to inspect. It can be of any type.
+ * @returns The numeric HTTP status code if found, otherwise `undefined`.
+ *
+ * @example
+ * getErrorStatus({ response: { status: 404 } }); // returns 404
+ *
+ * @example
+ * getErrorStatus({ statusCode: 403 }); // returns 403
+ *
+ * @example
+ * getErrorStatus(new Error("Network failed")); // returns undefined
+*/
+export function getErrorStatus(error: unknown): number | undefined {
+  // check if error is valid object
+  if (
+    error
+    && typeof error === 'object'
+    && ('statusCode' in error || 'response' in error)
+  ) {
+    // handle case where error.response.status
+    if ('response' in error && error.response && typeof error.response === 'object' && 'status' in error.response) {
+      return error.response.status as number
+    }
+    // handle case where no error.response.status, fallback to error.statusCode
+    if ('statusCode' in error) {
+      return error.statusCode as number
+    }
+  }
+
+  // return undefined if no status or statusCode
+  return undefined
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",