@goweekdays/layer-common 0.0.10 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @goweekdays/layer-common
 
+## 0.0.11
+
+### Patch Changes
+
+- 833df66: Revise payment method
+
 ## 0.0.10
 
 ### Patch Changes

package/components/AddPaymentMethod.vue

@@ -0,0 +1,171 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <slot name="header">
+        <v-row no-gutters>
+          <v-col cols="12" class="text-h6 font-weight-bold">
+            Payment Method
+          </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-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 }">
+                    <v-card
+                      variant="outlined"
+                      border="thin"
+                      @click="toggle"
+                      :class="['px-4', selectedClass]"
+                    >
+                      <v-img :src="eWalletItem.logo" width="100%" height="60px">
+                      </v-img>
+                    </v-card>
+                  </v-item>
+                </v-col>
+              </template>
+
+              <v-col cols="12">
+                <InputLabel title="Direct Debit" />
+              </v-col>
+
+              <template
+                v-for="supportedDirectDebitItem in props.supportedDirectDebit"
+              >
+                <v-col cols="12" lg="3" md="4" sm="4">
+                  <v-item v-slot="{ toggle, selectedClass }">
+                    <v-card
+                      variant="outlined"
+                      border="thin"
+                      @click="toggle"
+                      :class="['px-4', selectedClass]"
+                    >
+                      <v-img
+                        :src="supportedDirectDebitItem.logo"
+                        width="100%"
+                        height="60px"
+                      >
+                      </v-img>
+                    </v-card>
+                  </v-item>
+                </v-col>
+              </template>
+            </v-row>
+          </v-item-group>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const selectedPaymentMethod = ref<number | null>(null);
+const channel = defineModel<string | null>("channel", {
+  default: null,
+});
+const type = defineModel<string | null>("type", {
+  default: null,
+});
+const props = defineProps({
+  supportedEwallets: {
+    type: Array as PropType<
+      {
+        channel: string;
+        logo: string;
+        type: string;
+      }[]
+    >,
+    default() {
+      return [
+        {
+          channel: "GCASH",
+          logo: "/gcash-logo.svg",
+          type: "EWALLET",
+        },
+        {
+          channel: "PAYMAYA",
+          logo: "/paymaya-logo.svg",
+          type: "EWALLET",
+        },
+        {
+          channel: "GRABPAY",
+          logo: "/grabpay-logo.svg",
+          type: "EWALLET",
+        },
+        {
+          channel: "SHOPEEPAY",
+          logo: "/shopeepay-logo.svg",
+          type: "EWALLET",
+        },
+      ];
+    },
+  },
+  supportedDirectDebit: {
+    type: Array as PropType<
+      {
+        channel: string;
+        logo: string;
+        type: string;
+      }[]
+    >,
+    default() {
+      return [
+        {
+          channel: "UBP",
+          logo: "/ubp-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "BDO",
+          logo: "/bdo-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "BPI",
+          logo: "/bpi-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "RCBC",
+          logo: "/rcbc-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+        {
+          channel: "Chinabank",
+          logo: "/chinabank-logo.svg",
+          type: "DIRECT_DEBIT",
+        },
+      ];
+    },
+  },
+});
+
+const supportedPaymentMethods = [
+  ...props.supportedEwallets,
+  ...props.supportedDirectDebit,
+];
+
+watch(selectedPaymentMethod, (value: number | null) => {
+  if (value !== null) {
+    const selectedPayment = supportedPaymentMethods[value];
+    channel.value = selectedPayment.channel;
+    type.value = selectedPayment.type;
+  } else {
+    channel.value = null;
+    type.value = null;
+  }
+});
+</script>

package/components/Container/Standard.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <span
+        class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
+        @click="emit('back')"
+      >
+        Back
+      </span>
+    </v-col>
+    <v-col cols="12">
+      <span class="text-h5 font-weight-medium">{{ props.title }}</span>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="default"> </slot>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="footer"> </slot>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["back"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>

package/components/SwitchOrg.vue

@@ -1,7 +1,15 @@
 <template>
   <v-row no-gutters class="mb-4 pl-4 fill-height" align="center">
     <v-avatar color="surface-variant" size="28">
-      <v-img :src="profile" width="200" height="200"></v-img>
+      <v-img
+        v-if="currentUser?.profile"
+        :src="profile"
+        width="200"
+        height="200"
+      />
+      <span v-else class="text-subtitle-1">{{
+        getNameInitials(selectedOrg?.text)
+      }}</span>
     </v-avatar>
 
     <v-menu
@@ -70,6 +78,7 @@
 const { currentUser } = useLocalAuth();
 
 const menu = ref(false);
+const { getNameInitials } = useUtils();
 
 const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;

package/components/TableList.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-card
+    width="100%"
+    variant="outlined"
+    border="thin"
+    rounded="lg"
+    :loading="loading"
+  >
+    <v-toolbar density="compact" color="grey-lighten-4">
+      <template #prepend>
+        <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
+
+        <v-btn fab icon density="comfortable" @click="emit('refresh')">
+          <v-icon>mdi-refresh</v-icon>
+        </v-btn>
+      </template>
+
+      <template #append>
+        <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>
+
+      <template v-if="$slots.extension" v-slot:extension>
+        <slot name="extension"></slot>
+      </template>
+    </v-toolbar>
+
+    <v-data-table
+      v-model="selected"
+      v-bind="$attrs"
+      :headers="props.headers"
+      :items="props.items"
+      item-value="_id"
+      items-per-page="10"
+      show-select
+      fixed-header
+      hide-default-footer
+      hide-default-header
+      :loading="props.loading"
+      :style="`max-height: ${props.height};`"
+    >
+      <template v-if="$slots.item" v-slot:item>
+        <slot name="item"></slot>
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel({
+  type: Array as PropType<Array<string>>,
+  default: () => [],
+});
+const page = defineModel("page", { type: Number, default: 0 });
+
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    required: true,
+    default: () => [],
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    required: true,
+    default: () => [],
+  },
+  pages: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    required: true,
+    default: "-- - -- of --",
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  height: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["refresh", "update:pagination"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+
+const selectAll = ref(false);
+
+watch(selectAll, (curr) => {
+  selected.value.splice(0, selected.value.length);
+  if (curr) {
+    const ids = props.items.map((i) => i._id as string);
+    selected.value.push(...ids);
+  }
+});
+</script>

package/composables/useFile.ts

@@ -0,0 +1,29 @@
+export default function useFile() {
+  function addFile(file: File | null) {
+    if (!file) {
+      throw new Error("File not found.");
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    return useNuxtApp().$api<Record<string, any>>("/api/files", {
+      method: "POST",
+      body: formData,
+    });
+  }
+
+  function deleteFile(attachmentId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/files/${attachmentId}`,
+      {
+        method: "DELETE",
+      }
+    );
+  }
+
+  return {
+    addFile,
+    deleteFile,
+  };
+}

package/composables/useInvoice.ts

@@ -0,0 +1,38 @@
+export default function useInvoice() {
+  function getBySubscriptionId({ search = "", id = "", page = 1 } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/invoices/subscription/${id}`,
+      {
+        method: "GET",
+        params: {
+          search,
+          page,
+        },
+      }
+    );
+  }
+
+  function getByNumber(number: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/invoices/number/${number}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
+  function getByDueDateStatus(date: string, status: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/invoices/due-date/${date}/status/${status}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
+  return {
+    getBySubscriptionId,
+    getByNumber,
+    getByDueDateStatus,
+  };
+}

package/composables/useLocalAuth.ts

@@ -102,6 +102,8 @@ export default function useLocalAuth() {
     });
   }
 
+  const permissions = useState("permissions", (): Array<string> => []);
+
   return {
     login,
     logout,

package/composables/useMember.ts

@@ -0,0 +1,86 @@
+export default function useMember() {
+  const member = useState("member", (): TMember => {
+    return {
+      _id: "",
+      name: "",
+      user: "",
+      role: "",
+      status: "",
+      createdAt: "",
+      updatedAt: "",
+      deletedAt: "",
+    };
+  });
+
+  function setMember(value?: Partial<TMember>) {
+    member.value._id = value?._id ?? "";
+    member.value.user = value?.user ?? "";
+    member.value.role = value?.role ?? "";
+    member.value.status = value?.status ?? "";
+    member.value.createdAt = value?.createdAt ?? "";
+    member.value.updatedAt = value?.updatedAt ?? "";
+    member.value.deletedAt = value?.deletedAt ?? "";
+  }
+
+  function inviteMember(value: Partial<TMember>) {
+    delete value.createdAt;
+    delete value.updatedAt;
+    delete value._id;
+    delete value.status;
+
+    return useNuxtApp().$api("/api/members", {
+      method: "POST",
+      body: JSON.stringify(value),
+    });
+  }
+
+  function getAll({
+    search = "",
+    page = 1,
+    org = "",
+    user = "",
+    type = "main",
+    limit = 10,
+    status = "active",
+  } = {}) {
+    return useNuxtApp().$api<TKeyValuePair>("/api/members", {
+      method: "GET",
+      query: { search, page, org, user, type, limit, status },
+    });
+  }
+
+  const page = useState("memberPage", () => 1);
+  const pages = useState("memberPages", () => 0);
+  const pageRange = useState("memberPageRange", () => "0-0 of 0");
+
+  function getMemberById(id = "") {
+    return useNuxtApp().$api<TMember>(`/api/members/id/${id}`, {
+      method: "GET",
+    });
+  }
+
+  function getByUserId(id = "") {
+    return useNuxtApp().$api<TMember>(`/api/members/user/${id}`, {
+      method: "GET",
+    });
+  }
+
+  function getOrgMember(id = "") {
+    return useNuxtApp().$api<TKeyValuePair>(`/api/members/org/${id}/main`, {
+      method: "GET",
+    });
+  }
+
+  return {
+    member,
+    setMember,
+    inviteMember,
+    getAll,
+    page,
+    pages,
+    pageRange,
+    getMemberById,
+    getOrgMember,
+    getByUserId,
+  };
+}

package/composables/usePaymentMethod.ts

@@ -70,6 +70,15 @@ export default function usePaymentMethod() {
     );
   }
 
+  function getById(id = "") {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/payment-methods/id/${id}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
   const eWalletNumber = useState("eWalletNumber", () => "");
   const cardNumber = useState("cardNumber", () => "");
   const cardExpiration = useState("cardExpiration", () => "");
@@ -85,6 +94,72 @@ export default function usePaymentMethod() {
     cardholderName.value = "";
   }
 
+  function linkOnly(value: Record<string, any>) {
+    return useNuxtApp().$api<Record<string, any>>(
+      "/api/payment-methods/link-only",
+      {
+        method: "POST",
+        body: value,
+      }
+    );
+  }
+
+  const supportedEwallets = [
+    {
+      channel: "GCASH",
+      logo: "/gcash-logo.svg",
+      type: "EWALLET",
+    },
+    {
+      channel: "PAYMAYA",
+      logo: "/paymaya-logo.svg",
+      type: "EWALLET",
+    },
+    {
+      channel: "GRABPAY",
+      logo: "/grabpay-logo.svg",
+      type: "EWALLET",
+    },
+    {
+      channel: "SHOPEEPAY",
+      logo: "/shopeepay-logo.svg",
+      type: "EWALLET",
+    },
+  ];
+
+  const supportedDirectDebit = [
+    {
+      channel: "UBP",
+      logo: "/ubp-logo.svg",
+      type: "DIRECT_DEBIT",
+    },
+    {
+      channel: "BDO",
+      logo: "/bdo-logo.svg",
+      type: "DIRECT_DEBIT",
+    },
+    {
+      channel: "BPI",
+      logo: "/bpi-logo.svg",
+      type: "DIRECT_DEBIT",
+    },
+    {
+      channel: "RCBC",
+      logo: "/rcbc-logo.svg",
+      type: "DIRECT_DEBIT",
+    },
+    {
+      channel: "Chinabank",
+      logo: "/chinabank-logo.svg",
+      type: "DIRECT_DEBIT",
+    },
+  ];
+
+  const supportedPaymentMethods = [
+    ...supportedEwallets,
+    ...supportedDirectDebit,
+  ];
+
   return {
     linkEWallet,
     linkCard,
@@ -97,5 +172,8 @@ export default function usePaymentMethod() {
     cardholderName,
     selectedPaymentMethod,
     reset,
+    linkOnly,
+    getById,
+    supportedPaymentMethods,
   };
 }

package/composables/usePrice.ts

@@ -0,0 +1,15 @@
+export default function usePrice() {
+  function getByNameType(name: string, type: string) {
+    return useNuxtApp().$api<Record<string, any>>("/api/prices/price", {
+      method: "GET",
+      params: {
+        name,
+        type,
+      },
+    });
+  }
+
+  return {
+    getByNameType,
+  };
+}

package/composables/usePromoCode.ts

@@ -18,7 +18,7 @@ export default function usePromoCode() {
   }
 
   function getByCode(code: string, type?: string, assigned?: boolean) {
-    return useNuxtApp().$api<Record<string, any>>("/api/promo-codes/code", {
+    return useNuxtApp().$api<TPromoCode>("/api/promo-codes/code", {
       method: "GET",
       params: {
         code,
@@ -28,9 +28,16 @@ export default function usePromoCode() {
     });
   }
 
+  function getById(id: string) {
+    return useNuxtApp().$api<TPromoCode>(`/api/promo-codes/id/${id}`, {
+      method: "GET",
+    });
+  }
+
   return {
     add,
     getPromoCodes,
     getByCode,
+    getById,
   };
 }