@goweekdays/layer-common 0.0.12 → 0.1.0

package/components/AddPaymentMethod.vue

@@ -1,72 +1,208 @@
 <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-card variant="outlined" border="thin" rounded="md">
+        <v-expansion-panels
+          v-model="expansionPanel"
+          elevation="0"
+          variant="accordion"
+          focusable
+        >
+          <v-expansion-panel>
+            <template #title>
+              <span class="font-weight-bold py-2">E-Wallet</span>
+            </template>
+
+            <template #text>
+              <v-item-group
+                v-model.number="selectedPaymentMethod"
+                selected-class="bg-cyan-accent-1"
+                mandatory
+              >
+                <v-row class="pt-4 pb-3">
+                  <template v-for="eWalletItem in 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>
+
+                  <slot name="ewallet-action"></slot>
+                </v-row>
+              </v-item-group>
+            </template>
+          </v-expansion-panel>
+
+          <v-expansion-panel disabled>
+            <template #title>
+              <span class="font-weight-bold py-2">Credit/Debit Card</span>
+            </template>
+
+            <template #text>
+              <v-row no-gutters>
+                <v-col cols="12" lg="8" md="9" class="mt-2">
+                  <v-row no-gutters>
+                    <v-col cols="12">
+                      <v-row no-gutters>
+                        <v-col cols="12">
+                          <InputLabel title="Card Number" />
+                          <v-text-field
+                            v-model="cardNumber"
+                            @input="formatCardNumber"
+                            :rules="[validateCardNumber, validateAcceptedCard]"
+                          >
+                            <template #prepend-inner>
+                              <component :is="cardLogo" />
+                            </template>
+                          </v-text-field>
+                        </v-col>
+                      </v-row>
+                    </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 cols="12" class="mt-2">
+                      <v-row no-gutters>
+                        <v-sheet width="110px" class="mr-4">
+                          <InputLabel title="Card Validity" />
+                          <v-text-field
+                            v-model="cardExpiration"
+                            @input="formatExpiry"
+                            :rules="[validateExpiry]"
+                          >
+                            <template #prepend-inner>
+                              <v-img
+                                :src="`${CARD_LOGO}#calendar`"
+                                width="30"
+                                height="30"
+                              />
+                            </template>
+                          </v-text-field>
+                        </v-sheet>
+
+                        <v-sheet width="100px">
+                          <InputLabel title="Card Validity" />
+                          <v-text-field
+                            v-model="cardSecurityCode"
+                            @input="formatCardSecurityCode"
+                            :rules="[validateCVV]"
+                          >
+                            <template #prepend-inner>
+                              <v-img
+                                :src="`${CARD_LOGO}#protected-registration`"
+                                width="30"
+                                height="30"
+                              />
+                            </template>
+                          </v-text-field>
+                        </v-sheet>
+                      </v-row>
+                    </v-col>
+
+                    <v-col cols="12">
+                      <v-row no-gutters>
+                        <v-col cols="12">
+                          <InputLabel title="Cardholder Name" />
+                          <v-text-field
+                            v-model="cardholderName"
+                            :rules="[requiredRule]"
+                          >
+                            <template #prepend-inner>
+                              <v-img
+                                :src="`${CARD_LOGO}#discount-domain-club`"
+                                width="30"
+                                height="30"
+                              />
+                            </template>
+                          </v-text-field>
+                        </v-col>
+                      </v-row>
+                    </v-col>
+
+                    <v-col cols="12" class="mt-2">
+                      <v-row no-gutters>
+                        <v-col cols="12" lg="9">
+                          <InputLabel title="Email" />
+                          <v-text-field
+                            v-model="cardholderEmail"
+                            :rules="[emailRule, requiredRule]"
+                          >
+                          </v-text-field>
+                        </v-col>
+                      </v-row>
+                    </v-col>
+
+                    <v-col cols="12" class="mt-2">
+                      <v-row no-gutters>
+                        <v-col cols="12" lg="9">
+                          <InputLabel title="Mobile Number" />
+                          <v-text-field
+                            v-model="cardholderMobileNumber"
+                            @input="formatContactNumber"
+                            :rules="[requiredRule, validateContactNumber]"
+                            placeholder="+XXX XXXX XXX XXX"
+                          ></v-text-field>
+                        </v-col>
+                      </v-row>
+                    </v-col>
+                  </v-row>
                 </v-col>
-              </template>
 
-              <v-col cols="12">
-                <InputLabel title="Direct Debit" />
-              </v-col>
+                <slot name="card-action"></slot>
+              </v-row>
+            </template>
+          </v-expansion-panel>
+
+          <v-expansion-panel disabled>
+            <template #title>
+              <span class="font-weight-bold py-2">Direct Debit</span>
+            </template>
 
-              <template
-                v-for="supportedDirectDebitItem in props.supportedDirectDebit"
+            <template #text>
+              <v-item-group
+                v-model.number="selectedPaymentMethod"
+                selected-class="bg-cyan-accent-1"
+                mandatory
               >
-                <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-row class="pt-4 pb-3">
+                  <template v-for="directDebit in 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="directDebit.logo"
+                            width="100%"
+                            height="60px"
+                          >
+                          </v-img>
+                        </v-card>
+                      </v-item>
+                    </v-col>
+                  </template>
+
+                  <slot name="ewallet-action"></slot>
+                </v-row>
+              </v-item-group>
+            </template>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-card>
     </v-col>
   </v-row>
 </template>
@@ -79,93 +215,371 @@ const channel = defineModel<string | null>("channel", {
 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 expansionPanel = ref();
+
+watch(expansionPanel, (value) => {
+  channel.value = null;
+  type.value = null;
+  if (value === 0) {
+    type.value = "EWALLET";
+  } else if (value === 1) {
+    type.value = "CARD";
+  } else if (value === 2) {
+    type.value = "DIRECT_DEBIT";
+  }
 });
 
-const supportedPaymentMethods = [
-  ...props.supportedEwallets,
-  ...props.supportedDirectDebit,
-];
+const { requiredRule, emailRule } = useUtils();
+
+const {
+  supportedPaymentMethods,
+  supportedEwallets,
+  supportedDirectDebit,
+  cardNumber,
+  cardExpiration,
+  cardSecurityCode,
+  cardholderName,
+  cardholderMobileNumber,
+  cardholderEmail,
+} = usePaymentMethod();
 
 watch(selectedPaymentMethod, (value: number | null) => {
   if (value !== null) {
-    const selectedPayment = supportedPaymentMethods[value];
+    const paymentMethods =
+      type.value === "DIRECT_DEBIT"
+        ? supportedDirectDebit
+        : type.value === "EWALLET"
+        ? supportedEwallets
+        : [];
+    const selectedPayment = paymentMethods[value];
     channel.value = selectedPayment.channel;
-    type.value = selectedPayment.type;
   } else {
     channel.value = null;
-    type.value = null;
   }
 });
+
+// Extended card providers with regex patterns
+const cardTypes = [
+  { name: "Visa", regex: /^4/ },
+  {
+    name: "MasterCard",
+    regex: /^(5[1-5]|222[1-9]|22[3-9]\d|2[3-6]\d{2}|27[01]\d|2720)/,
+  },
+  { name: "American Express", regex: /^3[47]/ },
+  {
+    name: "Discover",
+    regex: /^(6011|622(12[6-9]|1[3-9]\d|[2-8]\d\d|92[0-5])|64[4-9]|65)/,
+  },
+  { name: "Diners Club", regex: /^3(0[0-5]|[68])/ },
+  { name: "JCB", regex: /^35/ },
+  { name: "UnionPay", regex: /^62/ },
+  { name: "Maestro", regex: /^(50|5[6-9]|6\d)/ },
+];
+
+function detectCard(value: string) {
+  if (!value) return "Unknown";
+  return cardTypes.find((card) => card.regex.test(value))?.name || "Unknown";
+}
+
+function validateAcceptedCard(value: string): boolean | string {
+  const acceptedCards = ["JCB", "Visa", "MasterCard"];
+  if (!acceptedCards.includes(detectCard(value))) {
+    return "Card type not accepted";
+  }
+  return true;
+}
+
+const CARD_LOGO = useRuntimeConfig().public.CARD_LOGO;
+
+const cardLogo = computed(() =>
+  getPaymentMethodLogo(detectCard(cardNumber.value))
+);
+
+import { h } from "vue";
+import { VImg } from "vuetify/components";
+
+function getPaymentMethodLogo(type: string) {
+  const width = "30";
+  const height = "30";
+  switch (type) {
+    case "Visa":
+      return h(VImg, {
+        src: `${CARD_LOGO}#visa`,
+        width,
+        height,
+      });
+    case "MasterCard":
+      return h(VImg, {
+        src: `${CARD_LOGO}#mastercard`,
+        width,
+        height,
+      });
+    case "American Express":
+      return h(VImg, {
+        src: `${CARD_LOGO}#amex`,
+        width,
+        height,
+      });
+    case "Discover":
+      return h(VImg, {
+        src: `${CARD_LOGO}#discover`,
+        width,
+        height,
+      });
+    case "Diners Club":
+      return h(VImg, {
+        src: `${CARD_LOGO}#diners`,
+        width,
+        height,
+      });
+    case "JCB":
+      return h(VImg, {
+        src: `${CARD_LOGO}#jcb`,
+        width,
+        height,
+      });
+    case "UnionPay":
+      return h(VImg, {
+        src: `${CARD_LOGO}#unionpay`,
+        width,
+        height,
+      });
+    case "Maestro":
+      return h(VImg, {
+        src: `${CARD_LOGO}#maestro`,
+        width,
+        height,
+      });
+    case "GCASH":
+      return h(VImg, {
+        src: `${CARD_LOGO}#gcash`,
+        width,
+        height,
+      });
+    case "PAYMAYA":
+      return h(VImg, {
+        src: "/public/paymaya-logo.png",
+        width,
+        height,
+      });
+    default:
+      return h(VImg, {
+        src: `${CARD_LOGO}#guide_code`,
+        width,
+        height,
+      });
+  }
+}
+
+const formatExpiry = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  let value = input.value.replace(/\D/g, ""); // Remove non-numeric characters
+
+  if (value.length > 2) {
+    value = value.replace(/(\d{2})(\d{0,2})/, "$1/$2"); // Insert slash after MM
+  }
+
+  value = value.substring(0, 5); // ✨ Limit to 5 characters
+
+  cardExpiration.value = value;
+};
+
+// Expiry date validation
+const validateExpiry = (value: string): boolean | string => {
+  if (!value.match(/^\d{2}\/\d{2}$/)) return "Invalid"; // Check format
+
+  const [monthStr, yearStr] = value.split("/");
+  const month = parseInt(monthStr, 10);
+  const year = parseInt("20" + yearStr, 10); // Convert YY to YYYY
+
+  const now = new Date();
+  const currentMonth = now.getMonth() + 1; // JavaScript months are 0-based
+  const currentYear = now.getFullYear();
+
+  if (month < 1 || month > 12) return "Invalid";
+  if (year < currentYear || (year === currentYear && month < currentMonth))
+    return "Expired";
+
+  return true;
+};
+
+// Format card number as "#### #### #### ####"
+const formatCardNumber = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  let value = input.value.replace(/\D/g, ""); // Remove non-numeric characters
+
+  // Insert spaces after every 4 digits
+  let formattedValue = value
+    .slice(0, 19)
+    .replace(/(\d{4})/g, "$1 ")
+    .trim(); // Ensures no extra spaces at the end
+
+  // Preserve cursor position while formatting
+  const cursorPosition = input.selectionStart ?? 0;
+  const spaceCountBefore = (cardNumber.value.match(/ /g) || []).length;
+  const spaceCountAfter = (formattedValue.match(/ /g) || []).length;
+  const cursorOffset = spaceCountAfter - spaceCountBefore;
+
+  cardNumber.value = formattedValue;
+
+  // Restore correct cursor position
+  setTimeout(() => {
+    input.setSelectionRange(
+      cursorPosition + cursorOffset,
+      cursorPosition + cursorOffset
+    );
+  });
+};
+
+// Validate card number using Luhn Algorithm
+const validateCardNumber = (value: string): boolean | string => {
+  const sanitizedValue = value.replace(/\s/g, ""); // Remove spaces
+
+  if (!/^\d{15,19}$/.test(sanitizedValue)) return "Invalid card number";
+
+  if (!luhnCheck(sanitizedValue)) return "Invalid card";
+
+  return true;
+};
+
+// Luhn Algorithm for card validation
+const luhnCheck = (num: string): boolean => {
+  let sum = 0;
+  let shouldDouble = false;
+
+  for (let i = num.length - 1; i >= 0; i--) {
+    let digit = parseInt(num.charAt(i), 10);
+
+    if (shouldDouble) {
+      digit *= 2;
+      if (digit > 9) digit -= 9;
+    }
+
+    sum += digit;
+    shouldDouble = !shouldDouble;
+  }
+
+  return sum % 10 === 0;
+};
+
+function validateCVV() {
+  const type = detectCard(cardNumber.value);
+  const cvvLength = type === "American Express" ? 4 : 3;
+  const cvvRegex = new RegExp(`^\\d{${cvvLength}}$`);
+  if (!cvvRegex.test(cardSecurityCode.value)) {
+    return "Invalid";
+  }
+  return true;
+}
+
+function formatCardSecurityCode(event: Event) {
+  const input = event.target as HTMLInputElement;
+  let value = input.value.replace(/\D/g, ""); // Remove non-numeric characters
+
+  const maxLength = detectCard(cardNumber.value) === "American Express" ? 4 : 3;
+  value = value.substring(0, maxLength);
+
+  input.value = value; // ✨ update input field
+  cardSecurityCode.value = value; // ✨ update bound variable
+
+  // Preserve cursor position while formatting
+  const cursorPosition = input.selectionStart ?? 0;
+  const cursorOffset = value.length - input.value.length;
+  setTimeout(() => {
+    input.setSelectionRange(
+      cursorPosition + cursorOffset,
+      cursorPosition + cursorOffset
+    );
+  });
+}
+
+const countryRules: { [key: string]: number } = {
+  "1": 11, // 🇺🇸 USA, 🇨🇦 Canada (1 XXX XXX XXXX)
+  "44": 12, // 🇬🇧 UK (44 XXXX XXXXXX)
+  "971": 12, // 🇦🇪 UAE (971 XX XXX XXXX)
+  "234": 13, // 🇳🇬 Nigeria (234 XXX XXX XXXX)
+  "63": 12, // 🇵🇭 Philippines (63 XXX XXX XXXX)
+  "91": 12, // 🇮🇳 India (91 XXXXX XXXXX)
+  "61": 12, // 🇦🇺 Australia (61 XXXX XXX XXX)
+  "81": 12, // 🇯🇵 Japan (81 XX XXXX XXXX)
+  "65": 11, // 🇸🇬 Singapore (65 XXXX XXXX)
+  "62": 12, // 🇮🇩 Indonesia (62 XX XXX XXXX)
+  "60": 12, // 🇲🇾 Malaysia (60 XX XXX XXXX)
+  "49": 13, // 🇩🇪 Germany (49 XXXX XXXXXX)
+  "33": 12, // 🇫🇷 France (33 X XX XX XX XX)
+  "39": 13, // 🇮🇹 Italy (39 XXX XXX XXXX)
+};
+
+const formatContactNumber = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  let rawValue = input.value.replace(/\D/g, ""); // Remove all non-numeric characters
+
+  if (!rawValue) {
+    cardholderMobileNumber.value = "";
+    return;
+  }
+
+  let countryCode = "";
+  let localNumber = "";
+  let maxLength = 15; // Default max length
+  let cursorPosition = input.selectionStart || 0;
+  let convertedToPH = false;
+
+  // Detect if the user types a Philippine number (09...)
+  if (rawValue.startsWith("09")) {
+    rawValue = "63" + rawValue.slice(1); // Convert 09xxxxxxx to +63 9xxxxxxx
+    convertedToPH = true; // Mark that conversion happened
+  }
+
+  // Detect country code
+  for (let code in countryRules) {
+    if (rawValue.startsWith(code)) {
+      countryCode = code;
+      maxLength = countryRules[code];
+      break;
+    }
+  }
+
+  // If no valid country code is detected, allow free typing
+  if (!countryCode) {
+    cardholderMobileNumber.value = `+${rawValue}`;
+    return;
+  }
+
+  // Extract local number
+  localNumber = rawValue.slice(countryCode.length);
+  rawValue = rawValue.slice(0, maxLength); // Enforce max length
+
+  // Format number
+  let formattedValue = `+${countryCode} ${localNumber}`;
+
+  // Set formatted value
+  cardholderMobileNumber.value = formattedValue;
+
+  // Move cursor to the end if `09` was converted to `+63 9`
+  setTimeout(() => {
+    if (convertedToPH) {
+      input.setSelectionRange(formattedValue.length, formattedValue.length);
+    } else {
+      input.setSelectionRange(cursorPosition, cursorPosition);
+    }
+  }, 0);
+};
+
+// ✅ **Validation Function**
+const validateContactNumber = (value: string): boolean | string => {
+  const cleanValue = value.replace(/\D/g, ""); // Remove spaces and non-numeric characters
+
+  for (let code in countryRules) {
+    if (
+      cleanValue.startsWith(code) &&
+      cleanValue.length === countryRules[code]
+    ) {
+      return true; // ✅ Valid if country code matches and length is correct
+    }
+  }
+
+  return "Invalid contact number"; // ❌ Fallback error
+};
 </script>