@goweekdays/layer-common 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @goweekdays/layer-common
 
+## 0.0.6
+
+### Patch Changes
+
+- 01873f7: Add error page
+
+## 0.0.5
+
+### Patch Changes
+
+- 0a6bba5: Enhance usePaymentMethod
+
 ## 0.0.4
 
 ### Patch Changes

package/components/Layout/Header.vue

@@ -112,7 +112,9 @@
                 height="42"
               ></v-img>
 
-              <span v-else class="text-h5">{{ getNameInitials(name) }}</span>
+              <span v-else class="text-subtitle-1">{{
+                getNameInitials(name)
+              }}</span>
             </v-avatar>
           </v-btn>
         </template>

package/components/SwitchOrg.vue

@@ -12,7 +12,7 @@
     >
       <template #activator="{ props }">
         <v-btn variant="text" class="text-none ml-2" v-bind="props">
-          <div class="d-block text-truncate" style="max-width: 130px">
+          <div class="d-block text-truncate" style="width: 130px">
             {{ selectedOrg?.text || "Select organization" }}
           </div>
           <v-icon class="ml-1">mdi-menu-down</v-icon>

package/composables/usePaymentMethod.ts

@@ -7,7 +7,7 @@ export default function usePaymentMethod() {
     success_return_url = "",
     failure_return_url = "",
     cancel_return_url = "",
-    subscriptionData = {},
+    category = "individual",
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>(
       "/api/payment-methods/e-wallet",
@@ -21,7 +21,7 @@ export default function usePaymentMethod() {
           success_return_url,
           failure_return_url,
           cancel_return_url,
-          subscriptionData,
+          category,
         },
       }
     );
@@ -81,6 +81,14 @@ export default function usePaymentMethod() {
   const cardholderName = useState("cardholderName", () => "");
   const selectedPaymentMethod = useState("selectedPaymentMethod", () => "");
 
+  function reset() {
+    eWalletNumber.value = "";
+    cardNumber.value = "";
+    cardExpiration.value = "";
+    cardSecurityCode.value = "";
+    cardholderName.value = "";
+  }
+
   return {
     linkEWallet,
     linkCard,
@@ -92,5 +100,6 @@ export default function usePaymentMethod() {
     cardSecurityCode,
     cardholderName,
     selectedPaymentMethod,
+    reset,
   };
 }

package/composables/useSubscription.ts

@@ -13,6 +13,12 @@ export default function useSubscription() {
     return useNuxtApp().$api<TSubscription>(`/api/subscriptions/id/${id}`);
   }
 
+  function getByOrgId(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/subscriptions/org/${id}`
+    );
+  }
+
   function getSubscriptions() {
     return useNuxtApp().$api("/api/subscriptions");
   }
@@ -68,21 +74,33 @@ export default function useSubscription() {
     customer_id: string;
     amount: number;
     payment_method_id: string;
+    payment_method_type: string;
+    payment_method_channel: string;
+    payment_method_number: string;
+    payment_method_expiry_month?: string;
+    payment_method_expiry_year?: string;
+    payment_method_cvv?: string;
+    payment_method_cardholder_name?: string;
     currency?: string;
+    seats: number;
     organization: TOrg;
     billingAddress: TAddress;
   };
 
   function initOrgSubscription(value: TOrgSubscription) {
-    return useNuxtApp().$api("/api/subscriptions/organization", {
-      method: "POST",
-      body: value,
-    });
+    return useNuxtApp().$api<Record<string, any>>(
+      "/api/subscriptions/organization",
+      {
+        method: "POST",
+        body: value,
+      }
+    );
   }
 
   return {
     add,
     getById,
+    getByOrgId,
     getSubscriptions,
     affiliateSubscription,
     checkSubscription,

package/composables/useUtils.ts

@@ -131,6 +131,39 @@ export default function useUtils() {
     maximumFractionDigits: 2,
   });
 
+  function formatNumber(
+    amount: number,
+    options: {
+      currency?: string;
+      locale?: string;
+      useSymbol?: boolean;
+      decimalPlaces?: number;
+    } = {}
+  ): string {
+    const {
+      currency,
+      locale = "en-US",
+      useSymbol = false,
+      decimalPlaces = 2,
+    } = options;
+
+    return new Intl.NumberFormat(locale, {
+      style: useSymbol && currency ? "currency" : "decimal",
+      currency: currency || "USD", // Default currency (ignored if `useSymbol` is false)
+      minimumFractionDigits: decimalPlaces,
+      maximumFractionDigits: decimalPlaces,
+    }).format(amount);
+  }
+
+  // 🔹 Examples:
+  // console.log(formatNumber(1234.56)); // "1,234.56" (comma separator, 2 decimals)
+  // console.log(formatNumber(1234.56, { decimalPlaces: 0 })); // "1,234" (no decimals)
+  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "USD" })); // "$1,234.56"
+  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "PHP", decimalPlaces: 0 })); // "₱1,234"
+  // console.log(formatNumber(1234.56, { useSymbol: false, decimalPlaces: 0 })); // "1,234"
+  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "EUR", locale: "de-DE" })); // "1.234,56 €"
+  // console.log(formatNumber(1234.56, { useSymbol: true, currency: "EUR", locale: "de-DE", decimalPlaces: 0 })); // "1.234 €"
+
   return {
     requiredRule,
     emailRule,
@@ -146,5 +179,6 @@ export default function useUtils() {
     validateWord,
     getCountries,
     formatter,
+    formatNumber,
   };
 }

package/error.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+});
+</script>
+
+<template>
+  <v-app>
+    <v-main>
+      <v-row
+        class="fill-height"
+        no-gutters
+        justify="center"
+        align-content="center"
+      >
+        <v-col cols="9">
+          <v-row>
+            <v-col cols="12" class="text-center text-h2">
+              <span class="font-weight-bold">{{ props.error?.message }}</span>
+            </v-col>
+            <v-col cols="12">
+              <v-row no-gutters justify="center">
+                <v-btn
+                  rounded="xl"
+                  size="large"
+                  class="text-none"
+                  variant="tonal"
+                  :to="{ name: 'index' }"
+                >
+                  Go to home page
+                </v-btn>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-main>
+  </v-app>
+</template>

package/layouts/plain.vue

@@ -0,0 +1,7 @@
+<template>
+    <v-app>
+        <v-main>
+            <slot />
+        </v-main>
+    </v-app>
+</template>

package/middleware/auth.ts

@@ -0,0 +1,25 @@
+export default defineNuxtRouteMiddleware(async () => {
+  // Ensure middleware runs only on the client side
+  if (import.meta.server) return;
+
+  const { cookieConfig } = useRuntimeConfig().public;
+
+  // Get access token from cookies
+  const accessToken = useCookie("accessToken", cookieConfig).value;
+
+  if (!accessToken) {
+    // Redirect to login page if no access token
+    return navigateTo({ name: "index" });
+  }
+
+  const { getCurrentUser } = useLocalAuth();
+
+  try {
+    await getCurrentUser();
+  } catch (error) {
+    console.log(error);
+
+    // Redirect to login page if user authentication fails
+    return navigateTo({ name: "index" });
+  }
+});

package/middleware/org.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+
+const hexSchema = z
+  .string()
+  .regex(/^[0-9a-fA-F]{24}$/, "Invalid organization ID");
+
+export default defineNuxtRouteMiddleware((to) => {
+  const { organization } = to.params;
+
+  if (organization && !hexSchema.safeParse(organization).success) {
+    return navigateTo(
+      { name: "require-organization-membership" },
+      { replace: true }
+    );
+  }
+});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@goweekdays/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"
@@ -28,6 +28,7 @@
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "sass": "^1.80.6"
+    "sass": "^1.80.6",
+    "zod": "^3.24.2"
   }
 }

package/pages/require-organization-membership.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-row no-gutters class="fill-height" align="center" justify="center">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+      You must be a member of an organization to view this page. Please join or
+      contact your administrator for access.
+      <v-row no-gutters justify="center" align="center" class="mt-2">
+        <v-btn
+          @click="goToAccount"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Go to Account Page
+        </v-btn>
+        <span class="mx-2">or</span>
+        <v-btn
+          @click="createOrg"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Create an Organization
+        </v-btn>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+
+const { APP_ACCOUNT, APP_NAME, APP_ORG } = useRuntimeConfig().public;
+
+function goToAccount() {
+  window.location.href = `${APP_ACCOUNT}/home`;
+}
+
+function createOrg() {
+  if (APP_NAME.toLowerCase() === "org") {
+    navigateTo({ name: "organizations-create" });
+  } else {
+    window.location.href = `${APP_ORG}/organizations/create`;
+  }
+}
+</script>

package/pages/unauthorized.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-row no-gutters class="fill-height" align="center" justify="center">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+      You must be a member of an organization to view this page. Please join or
+      contact your administrator for access.
+      <v-row no-gutters justify="center" class="mt-2">
+        <v-btn
+          @click="goToAccount"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Go to Account Page
+        </v-btn>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+
+function goToAccount() {
+  const { APP_ACCOUNT } = useRuntimeConfig().public;
+  window.location.href = `${APP_ACCOUNT}/home`;
+}
+</script>