Funcionalidad de envío de información de usuario al matricularse

Masters

Son los programas largos de todas las verticales.

Funcionalidad de envío de información de usuario al matricularse.

La funcionalidad consiste en enviar los datos de usuario para que estos salgan en un chat donde están los comerciales. Para ello, el usuario tiene que estar logado y pulsar en matricularse. Antes de ir al checkout, se envían los datos.

• zohoApiServices.js: En el fichero zohoApiServices.js se va a añadir la siguiente función.

export const registerZohoMaster = async (body) => {
  const resource = userMasterZoho;
  const { response } = await httpClient.postZoho(resource, body);
  return response;
};

const resource = userMasterZoho recoge de un composable webHookZoho.ts el link del webhook de test(desarrollo) o producción. Dependiendo si process.env.NODE_ENV viene de producción o desarrollo.

const { response } = await httpClient.postZoho(resource, body) postZoho es una función asincrona donde se va a pasar como argumento el parametro resource, link del webhook y el parametro body, un objeto de datos que se quiere enviar.

• En la clase httpClient se ha añadido una función convertToURLParams, esta función se utiliza para generar el cuerpo de datos que se va a pasar al webhook:

  private convertToURLParams(params: Record<string, string | number>) {
  const formData = new URLSearchParams()
  for (const key in params) {
    formData.append(key, String(params[key]))
  }
  return formData
}

• Se ha modificado la función postZoho

  public async postZoho(resource: string, params: Record<string, string | number>) {
  const body = this.convertToURLParams(params)

  const {
    data: { value: response },
    status: { value: status },
    error,
    pending,
  } = await useFetch(`https://flow.zoho.com/${resource}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body,
  })

  return { response, status, error, pending }
}

• Dentro del componente PrincipalInfo , se va a importar lo siguiente:

import { registerZohoMaster } from "@/services/zohoApiServices";
import { NAME_VERTICAL } from "@/constants/registerZoho"; // Se ha creado una constante del nombre de la vertical para evitar el magic string
const { getPurches, getUser } = useUserStore(); // Se ha añadido el getUser para recoger los datos del usuario logueado.

• Se va a añadir un objeto reactivo que lleva todos los campos que recoge el webhook.

const registerUserZohoMaster = reactive({
  apellidos: "",
  area: "",
  nombre_completo: "",
  registerDataCountry: "",
  direccion: "",
  nif: "",
  registerDataPhone: "",
  vertical: "",
  cp: "",
  nombre: "",
  apadrinado: "",
  pais: "",
  ciudad: "",
  nombreAutoGenerado: "",
  telefono: "",
  padrino: "",
  email: "",
});

• En el método actionMainButton se ha añadido lo siguiente.

const actionMainButton = async () => {
  if (!getIsLogin()) return navigateTo(useSlugs().value.login)
  if (!purchasedProducts.value.includes(props.productData.id_stripe)) {
    // Inicio de lo añadido
    const user = getUser() // se recogen los datos del usuario logado.
    registerUserZohoMaster.vertical = NAME_VERTICAL // se recoge de una constante el nombre de la vertical.
    registerUserZohoMaster.nombre = user.name
    registerUserZohoMaster.pais = user.address.country
    registerUserZohoMaster.telefono = user.phone
    registerUserZohoMaster.email = user.email

    await registerZohoMaster(registerUserZohoMaster) // Se envia el objeto de datos
     // Fin de lo añadido
    checkoutStrapi([props.productData])
    return
  }
  .
  .
  .