@goweekdays/layer-common 0.0.12 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @goweekdays/layer-common
 
+## 0.0.13
+
+### Patch Changes
+
+- c6c7076: Add invoice payment
+
 ## 0.0.12
 
 ### Patch Changes

package/components/AddPaymentMethod.vue

@@ -1,27 +1,18 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <slot name="header">
+      <v-item-group
+        v-model.number="selectedPaymentMethod"
+        selected-class="bg-cyan-accent-1"
+        mandatory
+      >
         <v-row no-gutters>
-          <v-col cols="12" class="text-h6 font-weight-bold">
-            Payment Method
+          <v-col cols="12">
+            <InputLabel title="E-Wallet" />
           </v-col>
-        </v-row>
-      </slot>
-    </v-col>
 
-    <v-col cols="12" class="mt-2">
-      <v-row no-gutters>
-        <v-col cols="12">
-          <v-item-group
-            v-model.number="selectedPaymentMethod"
-            selected-class="bg-cyan-accent-1"
-            mandatory
-          >
+          <v-col cols="12" class="mt-2">
             <v-row>
-              <v-col cols="12">
-                <InputLabel title="E-Wallet" />
-              </v-col>
               <template v-for="eWalletItem in props.supportedEwallets">
                 <v-col cols="12" lg="3" md="4" sm="4">
                   <v-item v-slot="{ toggle, selectedClass }">
@@ -37,11 +28,15 @@
                   </v-item>
                 </v-col>
               </template>
+            </v-row>
+          </v-col>
 
-              <v-col cols="12">
-                <InputLabel title="Direct Debit" />
-              </v-col>
+          <v-col cols="12" class="mt-6">
+            <InputLabel title="Direct Debit" />
+          </v-col>
 
+          <v-col cols="12" class="mt-2">
+            <v-row>
               <template
                 v-for="supportedDirectDebitItem in props.supportedDirectDebit"
               >
@@ -64,9 +59,9 @@
                 </v-col>
               </template>
             </v-row>
-          </v-item-group>
-        </v-col>
-      </v-row>
+          </v-col>
+        </v-row>
+      </v-item-group>
     </v-col>
   </v-row>
 </template>

package/components/Std/Pagination.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-row no-gutters justify="end" align="center">
+    <span class="mr-2 text-caption text-fontgray">
+      {{ props.pageRange }}
+    </span>
+    <div class="arrow-navigation">
+      <v-btn
+        icon="mdi-chevron-left"
+        variant="text"
+        density="comfortable"
+        :disabled="page <= 1"
+        @click="decrement"
+      />
+      <v-btn
+        icon="mdi-chevron-right"
+        variant="text"
+        density="comfortable"
+        :disabled="page >= props.pages"
+        @click="increment"
+      />
+    </div>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const page = defineModel({ type: Number, default: 0 });
+
+const props = defineProps({
+  pages: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    required: true,
+    default: "-- - -- of --",
+  },
+});
+
+const emit = defineEmits(["refresh", "update:pagination"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+</script>

package/components/TableList.vue

@@ -43,10 +43,11 @@
         <slot name="extension"></slot>
       </template>
     </v-toolbar>
+    <v-divider></v-divider>
 
     <v-data-table
       v-model="selected"
-      v-bind="$attrs"
+      v-bind="attrs"
       :headers="props.headers"
       :items="props.items"
       item-value="_id"
@@ -66,6 +67,7 @@
 </template>
 
 <script setup lang="ts">
+const attrs = useAttrs();
 const selected = defineModel({
   type: Array as PropType<Array<string>>,
   default: () => [],

package/composables/useAddress.ts

@@ -32,10 +32,38 @@ export default function useAddress() {
     });
   }
 
+  function updateById({
+    id = "",
+    country = "",
+    address = "",
+    continuedAddress = "",
+    city = "",
+    province = "",
+    postalCode = "",
+    taxId = "",
+  } = {}) {
+    return useNuxtApp().$api(`/api/addresses/details/${id}`, {
+      method: "PUT",
+      body: {
+        country,
+        address,
+        continuedAddress,
+        city,
+        province,
+        postalCode,
+        taxId,
+      },
+    });
+  }
+
   function getByUserId(user = "") {
     return useNuxtApp().$api<TAddress>(`/api/addresses/user/${user}`);
   }
 
+  function getByOrgId(id = "") {
+    return useNuxtApp().$api<TAddress>(`/api/addresses/org/${id}`);
+  }
+
   const _address = useState("address", (): TAddress => {
     return {
       type: "",
@@ -103,5 +131,7 @@ export default function useAddress() {
     getByUserId,
     address: _address,
     completeAddress,
+    getByOrgId,
+    updateById,
   };
 }

package/composables/useInvoice.ts

@@ -1,5 +1,9 @@
 export default function useInvoice() {
   function getBySubscriptionId({ search = "", id = "", page = 1 } = {}) {
+    if (!id) {
+      throw new Error("Subscription ID is required");
+    }
+
     return useNuxtApp().$api<Record<string, any>>(
       `/api/invoices/subscription/${id}`,
       {

package/composables/usePaymentMethod.ts

@@ -1,3 +1,5 @@
+import { z } from "zod";
+
 export default function usePaymentMethod() {
   function linkEWallet({
     type = "GCASH",
@@ -72,10 +74,7 @@ export default function usePaymentMethod() {
 
   function getById(id = "") {
     return useNuxtApp().$api<Record<string, any>>(
-      `/api/payment-methods/id/${id}`,
-      {
-        method: "GET",
-      }
+      `/api/payment-methods/id/${id}`
     );
   }
 
@@ -86,14 +85,6 @@ export default function usePaymentMethod() {
   const cardholderName = useState("cardholderName", () => "");
   const selectedPaymentMethod = useState("selectedPaymentMethod", () => "");
 
-  function reset() {
-    eWalletNumber.value = "";
-    cardNumber.value = "";
-    cardExpiration.value = "";
-    cardSecurityCode.value = "";
-    cardholderName.value = "";
-  }
-
   function linkOnly(value: Record<string, any>) {
     return useNuxtApp().$api<Record<string, any>>(
       "/api/payment-methods/link-only",
@@ -160,6 +151,142 @@ export default function usePaymentMethod() {
     ...supportedDirectDebit,
   ];
 
+  const { updatePaymentMethodById } = useSubscription();
+
+  const linkingOverlay = useState("linkingOverlay", () => false);
+  const updatingPaymentMethod = useState("updatingPaymentMethod", () => false);
+  const linkingMessage = useState("linkingMessage", () => "");
+  const paymentMethod = useState(
+    "paymentMethod",
+    (): Record<string, any> | null => null
+  );
+
+  function reset() {
+    eWalletNumber.value = "";
+    cardNumber.value = "";
+    cardExpiration.value = "";
+    cardSecurityCode.value = "";
+    cardholderName.value = "";
+    paymentMethod.value = null;
+  }
+
+  async function initLink(value: TLinkParams) {
+    const validation = z.object({
+      subscriptionId: z.string().min(1),
+      paymentMethodType: z.enum(["EWALLET", "DIRECT_DEBIT", "CREDIT_CARD"]),
+      paymentMethodChannel: z.string().min(1),
+      customerId: z.string().min(1),
+      card_number: z.string().optional(),
+      expiry_month: z.string().optional(),
+      expiry_year: z.string().optional(),
+      card_security_code: z.string().optional(),
+      cardholder_name: z.string().optional(),
+    });
+
+    const parsed = validation.safeParse(value);
+
+    if (!parsed.success) {
+      throw new Error(
+        `Validation failed: ${parsed.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ")}`
+      );
+    }
+
+    linkingOverlay.value = true;
+    const success_return_url = `${window.origin}/payment-method-linked`;
+    const failure_return_url = `${window.origin}/payment-method-failed-link`;
+    const cancel_return_url = `${window.origin}/payment-method-cancel-link`;
+
+    const payload: Record<string, any> = {
+      type: value.paymentMethodType,
+      reusability: "MULTIPLE_USE",
+    };
+
+    if (payload.type === "EWALLET") {
+      payload.country = "PH";
+      payload.ewallet = {
+        channel_code: value.paymentMethodChannel,
+        channel_properties: {
+          success_return_url,
+          failure_return_url,
+          cancel_return_url,
+        },
+      };
+
+      payload.customer_id = value.customerId;
+    } else if (payload.type === "DIRECT_DEBIT") {
+      payload.direct_debit = {
+        channel_code: value.paymentMethodChannel,
+        channel_properties: {
+          success_return_url,
+          failure_return_url,
+          cancel_return_url,
+        },
+      };
+      payload.customer_id = value.customerId;
+    } else if (payload.type === "CREDIT_CARD") {
+      payload.card = {
+        currency: "PHP",
+        channel_properties: {
+          success_return_url,
+          failure_return_url,
+          skip_three_d_secure: true,
+        },
+        card_information: {
+          card_number: value.card_number,
+          expiry_month: value.expiry_month,
+          expiry_year: value.expiry_year,
+          cvv: value.card_security_code,
+          cardholder_name: value.cardholder_name,
+        },
+      };
+    }
+
+    try {
+      const _paymentMethod = await linkOnly(payload);
+
+      // Open a small popup window
+      const popupWidth = 500;
+      const popupHeight = 600;
+      const left = (screen.width - popupWidth) / 2;
+      const top = (screen.height - popupHeight) / 2;
+
+      const popup = window.open(
+        _paymentMethod.actions[0].url,
+        "eWalletPopup",
+        `width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=yes,scrollbars=yes`
+      );
+
+      // Check every 500ms if the popup is closed
+      const checkPopupClosed = setInterval(async () => {
+        if (!popup || popup.closed) {
+          clearInterval(checkPopupClosed);
+          console.log(
+            "Popup closed. Proceeding with subscription automation..."
+          );
+          // Call your function to handle subscription
+
+          const temp = await getById(_paymentMethod.id);
+
+          if (temp.status === "ACTIVE") {
+            await updatePaymentMethodById(
+              value.subscriptionId,
+              _paymentMethod.id as string
+            );
+
+            paymentMethod.value = await getById(_paymentMethod.id);
+          }
+
+          updatingPaymentMethod.value = false;
+          linkingOverlay.value = false;
+        }
+      }, 500);
+    } catch (error: any) {
+      linkingMessage.value = error.response._data.message;
+    }
+  }
+
   return {
     linkEWallet,
     linkCard,
@@ -175,5 +302,10 @@ export default function usePaymentMethod() {
     linkOnly,
     getById,
     supportedPaymentMethods,
+    initLink,
+    linkingOverlay,
+    updatingPaymentMethod,
+    linkingMessage,
+    paymentMethod,
   };
 }

package/composables/useSubscription.ts

@@ -9,6 +9,40 @@ export default function useSubscription() {
     });
   }
 
+  function addBillingContactById(id: string, email: string) {
+    return useNuxtApp().$api(`/api/subscriptions/billing-contact/${id}`, {
+      method: "PUT",
+      body: {
+        email,
+      },
+    });
+  }
+
+  function updateBillingContactByAddedAt(
+    id: string,
+    addedAt: string,
+    email: string
+  ) {
+    return useNuxtApp().$api(
+      `/api/subscriptions/billing-contact/${id}/added-at/${addedAt}`,
+      {
+        method: "PUT",
+        body: {
+          email,
+        },
+      }
+    );
+  }
+
+  function deleteBillingContactByAddedAt(id: string, addedAt: string) {
+    return useNuxtApp().$api(
+      `/api/subscriptions/billing-contact/${id}/added-at/${addedAt}`,
+      {
+        method: "DELETE",
+      }
+    );
+  }
+
   function getById(id: string) {
     return useNuxtApp().$api<TSubscription>(`/api/subscriptions/id/${id}`);
   }
@@ -62,6 +96,15 @@ export default function useSubscription() {
     });
   }
 
+  function updatePaymentMethodById(id: string, paymentMethodId: string) {
+    return useNuxtApp().$api(`/api/subscriptions/payment-method/${id}`, {
+      method: "PUT",
+      body: {
+        paymentMethodId,
+      },
+    });
+  }
+
   async function affSubscriptionStatus() {
     const { currentUser } = useLocalAuth();
 
@@ -144,6 +187,15 @@ export default function useSubscription() {
     );
   }
 
+  function processSubscriptionPayment(id: string, invoice: string) {
+    return useNuxtApp().$api(`/api/subscriptions/payment/id/${id}`, {
+      method: "PUT",
+      body: {
+        invoice,
+      },
+    });
+  }
+
   return {
     add,
     getById,
@@ -161,5 +213,10 @@ export default function useSubscription() {
     updateSeatsById,
     updatePromoCodeById,
     updateStatusById,
+    updatePaymentMethodById,
+    addBillingContactById,
+    updateBillingContactByAddedAt,
+    deleteBillingContactByAddedAt,
+    processSubscriptionPayment,
   };
 }

package/composables/useUtils.ts

@@ -137,7 +137,10 @@ export default function useUtils() {
         { method: "GET" }
       );
 
-      const uniqueCountries = new Map();
+      const uniqueCountries: Map<
+        string,
+        { index: string; name: string; code: string }
+      > = new Map();
 
       countries.forEach((country) => {
         let suffixes = country.idd?.suffixes?.[0] || "";

package/middleware/01.auth.ts

@@ -11,13 +11,4 @@ export default defineNuxtRouteMiddleware(async () => {
     // Redirect to login page if no access token
     return navigateTo({ name: "index" });
   }
-
-  const { getCurrentUser } = useLocalAuth();
-
-  try {
-    await getCurrentUser();
-  } catch (error) {
-    // Redirect to login page if user authentication fails
-    return navigateTo({ name: "index" });
-  }
 });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@goweekdays/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"

package/pages/payment-method-cancel-link.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-card class="pa-4" elevation="4" color="warning lighten-1">
+      <v-card-title class="text-white d-flex align-center">
+        <v-icon class="mr-2">mdi-check-circle</v-icon>
+        Cancelled Payment Method Link
+      </v-card-title>
+
+      <v-card-actions class="d-flex justify-center">
+        <v-btn
+          color="white"
+          variant="tonal"
+          rounded="xl"
+          size="large"
+          @click="closeWindow"
+          >Close</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-row>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: "plain",
+});
+
+const closeWindow = () => {
+  window.close();
+};
+</script>

package/pages/payment-method-failed-link.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-card class="pa-4" elevation="4" color="error lighten-1">
+      <v-card-title class="text-white d-flex align-center">
+        <v-icon class="mr-2">mdi-check-circle</v-icon>
+        Failed Payment Method Link
+      </v-card-title>
+
+      <v-card-actions class="d-flex justify-center">
+        <v-btn
+          color="white"
+          variant="tonal"
+          rounded="xl"
+          size="large"
+          @click="closeWindow"
+          >Close</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-row>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: "plain",
+});
+
+const closeWindow = () => {
+  window.close();
+};
+</script>

package/types/invoice.d.ts

@@ -0,0 +1,28 @@
+declare type TInvoiceItem = {
+  itemId: string;
+  quantity: number;
+  seats?: number;
+  total: number;
+};
+
+declare type TInvoiceMetadata = {
+  userId?: string | ObjectId;
+  orgId?: string | ObjectId;
+  subscriptionId?: string | ObjectId;
+  currency?: string;
+  description?: string;
+};
+
+declare type TInvoice = {
+  _id?: string | ObjectId;
+  invoiceNumber: string;
+  billingCycle: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+  items: TInvoiceItem[];
+  metadata?: TInvoiceMetadata;
+  amount: number;
+  dueDate: string;
+  type: string;
+};

package/types/payment-method.d.ts

@@ -0,0 +1,11 @@
+declare type TLinkParams = {
+  subscriptionId: string;
+  paymentMethodType: string;
+  paymentMethodChannel: string;
+  customerId: string;
+  card_number?: string;
+  expiry_month?: string;
+  expiry_year?: string;
+  card_security_code?: string;
+  cardholder_name?: string;
+};

package/types/subscription.d.ts

@@ -1,3 +1,8 @@
+declare type TBillingRecipient = {
+  addedAt?: string;
+  email: string;
+};
+
 declare type TSubscription = {
   _id?: string;
   user?: string;
@@ -14,6 +19,7 @@ declare type TSubscription = {
   maxSeats?: number;
   status?: string;
   billingCycle: "monthly" | "yearly";
+  billingContacts?: TBillingRecipient[];
   nextBillingDate?: string;
   lastPaymentStatus?: string;
   failedAttempts?: number;