Feature/ajutes demo

components/sidebar.php

@@ -8,7 +8,7 @@
       class="flex items-center pl-2.5 mb-5"
     >
       <img
-        src="https://culqi.com/assets/images/brand/brandCulqi-white.svg"
+        src="https://culqi.com/assets/images/brand/culqi-logo.png?v=2"
         class="mr-3 h-6 sm:h-7"
         alt="Culqi Logo"
       />

index.php

@@ -41,7 +41,6 @@ class="bg-blue-500 hover:bg-blue-700 px-5 py-4 leading-5 rounded-full font-semib
     <script src="https://js.culqi.com/checkout-js"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"
-      integrity="sha256-KdYARiowaU79FbmEi0ykLReM0GcAknXDWjBYASERQwQ="
       crossorigin="anonymous"
     ></script>
 

js/config/culqi3ds.js

@@ -5,10 +5,7 @@ Culqi3DS.options = {
   showLoading: true,
   showIcon: true,
   closeModalAction: () => window.location.reload(true)
-  // style: {
-  //     btnColor: "red",
-  //     btnTextColor: "yellow",
-  // },
+
 };
 
 Culqi3DS.publicKey = checkoutConfig.PUBLIC_KEY;

js/config/index.js

@@ -10,54 +10,11 @@ export const checkoutConfig = Object.freeze({
   URL_BASE: "http://localhost/culqi-demos-Php-checkout-charge"
 });
 
-//genera datos nuevos en el load
-function generateRandomEmail() {
-  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
-  const domains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'culqi.com'];
-  let username = '';
-
-  // Generar nombre del correo (username) de long entre 6 y 12 caracteres
-  const usernameLength = Math.floor(Math.random() * 7) + 6;
-
-  for (let i = 0; i < usernameLength; i++) {
-    const randomChar = chars.charAt(Math.floor(Math.random() * chars.length));
-    username += randomChar;
-  }
-
-  // Elegir un dominio aleatorio
-  const domain = domains[Math.floor(Math.random() * domains.length)];
-
-  // Devolver el correo electrónico completo
-  return `${username}@${domain}`;
-}
-//genera nombre y apellido
- const generateRandomName = (length) => {
-  const chars = 'abcdefghijklmnopqrstuvwxyz';
-  let name = '';
-
-  // Generar una cadena de letras aleatorias de longitud dada
-  for (let i = 0; i < length; i++) {
-    const randomChar = chars.charAt(Math.floor(Math.random() * chars.length));
-    name += randomChar;
-  }
-
-  // Capitalizar la primera letra
-  return name.charAt(0).toUpperCase() + name.slice(1);
-};
-
-// Generar un nombre de 6-10 letras aleatorias
-const firstName = generateRandomName(Math.floor(Math.random() * 5) + 6); // Longitud entre 6 y 10
-const lastName = generateRandomName(Math.floor(Math.random() * 5) + 6);
-const phone = "9" + Array.from({ length: 8 }, () => Math.floor(Math.random() * 10)).join('');
-const email = generateRandomEmail();
-const countryCode =  Math.random() < 0.5 ? "PE":"US";
-
- export const customerInfo = {
-  firstName: firstName,
-  lastName: lastName,
+export const chargeInfo = {
+  firstName: "Dennis",
+  lastName: "Demo",
   address: "Av siempre viva",
   addressCity: "Lima",
-  countryCode ,
-  phone: phone,
-  email: generateRandomEmail() //"review" + Math.floor(Math.random() * 100) + "@culqi.com"
+  phone: "999999999",
+  email: "review1" + Math.floor(Math.random() * 100) + "@culqi.com"
 };

js/main.js

@@ -1,4 +1,5 @@
-import { checkoutConfig, customerInfo } from "./config/index.js";
+import { checkoutConfig } from "./config/index.js";
+import { generateCustomerData, isValidEmail, isValidPhoneNumber } from './utils/helpers.js';
 import { culqiConfig } from "./config/checkout.js";
 import "./config/culqi3ds.js";
 import {
@@ -76,15 +77,15 @@ const handledContentLoad = async () => {
       });
     }
 
-    objResponse = response.data.object;
+    objResponse = response.data;
     statusCode = response.statusCode;
 
     console.log("Status code: ", statusCode);
 
     if (statusCode === 201) {
-      if (objResponse === "charge" || objResponse === "card") {
+      if (objResponse.object === "charge" || objResponse.object === "card") {
         selectors.cardResponseList.forEach((el) => {
-          el.innerHTML = "OPERACIÓN REALIZADA EXITOSAMENTE";
+          el.innerHTML = "OPERACIÓN REALIZADA EXITOSAMENTE<br>ID: "+ objResponse.id;
         });
       }
     }
@@ -194,38 +195,69 @@ const handledContentLoad = async () => {
     Culqi3DS.initAuthentication(tokenId);
   };
 
-  const createCustomer = async () => {
+  const createCustomer = async () => { 
     selectors.customerResponse.innerHTML = spinerHtml;
+
+    const customerInfo = {
+      firstName: selectors.customersFirstNameElement.value,
+      lastName: selectors.customersLastNameElement.value,
+      address: selectors.customersAddressElement.value,
+      addressCity: selectors.customersAddressCityElement.value,
+      countryCode: selectors.customersCountryCodeElement.value ,
+      phone: selectors.customersPhoneElement.value.replace(/\s/g, ""),
+      email: selectors.customersEmailElement.value 
+    };
+    // Validar si algún campo requerido está vacío
+    const emptyFields = Object.entries(customerInfo).filter(([key, value]) => !value);
+
+  if (emptyFields.length > 0) {
+    selectors.customerResponse.innerHTML = `Error: El campo ${emptyFields[0][0]} está vacío.`; 
+    return; // Detener la ejecución si algún campo está vacío
+  }
+
+    // Validar el correo electrónico
+    if (!isValidEmail(customerInfo.email)) {
+      selectors.customerResponse.innerHTML = "Error: Correo electrónico inválido.";
+      return; // Detener la ejecución si el correo electrónico no es válido
+    }
+    // Validación del número de teléfono
+  if (!isValidPhoneNumber(customerInfo.phone)) {
+    selectors.customerResponse.innerHTML = "Error: Número de teléfono inválido. Debe contener solo 9 dígitos.";
+    return;
+  }
+
+    //validar solo US o PE
+    if (!['US', 'PE'].includes(customerInfo.countryCode)) {
+      selectors.customerResponse.innerHTML = "Error: Código de país inválido. Solo se acepta 'US' o 'PE'.";
+      return; // Detener la ejecución si el código de país no es válido
+    }
     const dataCustomer = await createCustomerImpl({
-      ...customerInfo
+      ...customerInfo //captura del front la data de los input armar object customerInfo
     });
-
-    selectors.customerCustomFormElement.value = dataCustomer.data.id;
-
-    selectors.customerResponse.innerHTML = dataCustomer.data.id;
+
+    if ( dataCustomer.data.object === "error") {
+      if (dataCustomer.data.merchant_message.includes("Invalid value. It must be")) {
+        selectors.customerResponse.innerHTML = "Error de código de país";//mensaje countryCode
+      }else{
+      selectors.customerResponse.innerHTML = dataCustomer.data.merchant_message;//error general
+      }
+    } else {
+      selectors.customerCustomFormElement.value = dataCustomer.data.id;
+      selectors.customerResponse.innerHTML = dataCustomer.data.id;//id
+    }
+
   };
 
   const loadCustomerExampleData = () => {
+    const customerInfo = generateCustomerData();
     Object.keys(customerInfo).forEach((key) => {
       const selectorOption =
         selectors[
           `customers${key.charAt(0).toUpperCase() + key.slice(1)}Element`
-        ];
+        ];      
       if (selectorOption) {
-        selectorOption.value = customerInfo[key];
-      }
-    });
-  };
 
-  // Función para actualizar los datos del cliente
-  const updateCustomerInfo = () => {
-    Object.keys(customerInfo).forEach((key) => {
-      const selectorOption =
-        selectors[
-          `customers${key.charAt(0).toUpperCase() + key.slice(1)}Element`
-        ];
-      if (selectorOption) {
-        customerInfo[key] = selectorOption.value;
+        selectorOption.value = customerInfo[key];
       }
     });
   };
@@ -248,7 +280,6 @@ const handledContentLoad = async () => {
 
   if (btnCreateCustomer) {
     btnCreateCustomer.addEventListener("click", () => {
-      updateCustomerInfo();
       createCustomer();
     });
   }

js/services/impl/index.js

@@ -1,5 +1,5 @@
 import Service from "../index.js";
-import { checkoutConfig, customerInfo } from "../../config/index.js";
+import { checkoutConfig, chargeInfo } from "../../config/index.js";
 
 const service = new Service();
 
@@ -8,18 +8,17 @@ export const generateOrderImpl = async () => {
   currentDate.setDate(currentDate.getDate() + 1);
   var epochMilliseconds = currentDate.getTime();
   var epochSeconds = Math.floor(epochMilliseconds / 1000);
-  console.log(epochSeconds);
 
   const bodyRequest = {
     amount: checkoutConfig.TOTAL_AMOUNT,
     currency_code: checkoutConfig.CURRENCY,
     description: "Venta de prueba",
     order_number: "pedido-" + new Date().getTime(),
     client_details: {
-      first_name: customerInfo.firstName,
-      last_name: customerInfo.lastName,
-      email: customerInfo.email,
-      phone_number: customerInfo.phone
+      first_name: chargeInfo.firstName,
+      last_name: chargeInfo.lastName,
+      email: chargeInfo.email,
+      phone_number: chargeInfo.phone
     },
     expiration_date: epochSeconds
   };
@@ -37,9 +36,9 @@ export const generateChargeImpl = async ({
     currency_code: checkoutConfig.CURRENCY,
     email: email,
     token: tokenId,
-    first_name: customerInfo.firstName,
-    last_name: customerInfo.lastName,
-    phone_number: customerInfo.phone,
+    first_name: chargeInfo.firstName,
+    last_name: chargeInfo.lastName,
+    phone_number: chargeInfo.phone,
     device_finger_print_id: deviceId
   };
   return service.generateCharge(

js/services/index.js

@@ -14,9 +14,15 @@ class Service {
         },
         data
       });
-      return { statusCode: response.status, data: response.data };
+
+      let dataParse = response.data
+      if (typeof response.data === "string") {
+        dataParse = JSON.parse(response.data);
+      }      
+      return { statusCode: response.status, data: dataParse };
     } catch (err) {
-      return { statusCode: err.response.status, data: err.response.data };
+      let dataError = JSON.parse(err.response.data);
+      return { statusCode: err.response.status, data: dataError  };
     }
   };
 

js/utils/helpers.js

@@ -2,4 +2,65 @@ export const formatAmount = (amount) => {
     const amountStringified = amount.toString();
     const decimalAmount = amountStringified.length - 2;
     return `${amountStringified.slice(0, decimalAmount)}.${amountStringified.slice(decimalAmount)}`
-}
+}
+export const isValidEmail = (email) => {
+  const re = /^[a-zA-Z0-9._]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/;
+  return re.test(email);
+};
+
+export const isValidPhoneNumber = (phoneNumber) => {
+  const re = /^9\d{8}$/; // Solo acepta números que comiencen con '9' y tengan 9 dígitos.
+  return re.test(phoneNumber);
+};
+
+export function generateRandomEmail() {
+    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    const domains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'culqi.com'];
+    let username = '';
+
+    // Generar nombre del correo (username) de long entre 6 y 12 caracteres
+    const usernameLength = Math.floor(Math.random() * 7) + 6;
+
+    for (let i = 0; i < usernameLength; i++) {
+      const randomChar = chars.charAt(Math.floor(Math.random() * chars.length));
+      username += randomChar;
+    }
+
+    // Elegir un dominio aleatorio
+    const domain = domains[Math.floor(Math.random() * domains.length)];
+
+    // Devolver el correo electrónico completo
+    return `${username}@${domain}`;
+  }
+  //genera nombre y apellido
+export function generateRandomName(length) {
+    const chars = 'abcdefghijklmnopqrstuvwxyz';
+    let name = '';
+
+    // Generar una cadena de letras aleatorias de longitud dada
+    for (let i = 0; i < length; i++) {
+      const randomChar = chars.charAt(Math.floor(Math.random() * chars.length));
+      name += randomChar;
+    }
+
+    // Capitalizar la primera letra
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  };
+
+  export const generateCustomerData = () => {
+    const firstName = generateRandomName(Math.floor(Math.random() * 5) + 6);
+    const lastName = generateRandomName(Math.floor(Math.random() * 5) + 6);
+    const phone = "9" + Array.from({ length: 8 }, () => Math.floor(Math.random() * 10)).join('');
+    const email = generateRandomEmail();
+    const countryCode = Math.random() < 0.5 ? "PE" : "US";
+
+    return {
+      firstName,
+      lastName,
+      address: "Av siempre viva",
+      addressCity: "Lima",
+      countryCode,
+      phone,
+      email
+    };
+  };

js/utils/selectors.js

@@ -18,6 +18,7 @@ export const customersLastNameElement = document.getElementById("lastName");
 export const customersAddressElement = document.getElementById("address");
 export const customersAddressCityElement =
   document.getElementById("addressCity");
+export const customersCountryCodeElement = document.getElementById("countryCode");
 export const customersEmailElement = document.getElementById("email");
 export const customersPhoneElement = document.getElementById("phone");
 /* END customer */