English

Integración Nästa Coach React

Crear un nuevo componente cargando el microfront:

import React, { useEffect } from 'react';

const loadScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });
};

const RecyclingComponent = () => {
  const token = '<your-token>'
  const clientId = '<your-client-id>'
  const language = '' /* Por defecto escoge el idioma del sistema, pero puedes seleccionar es para Español, en para Ingles y va para Valenciano. */

  useEffect(() => {
    const scriptUrl = 'https://recycling.nastaeco.com/recycling.umd.js';

    loadScript(scriptUrl)
      .then(() => {
        console.log('Microfrontend script loaded successfully');
      })
      .catch((error) => {
        console.error('Error loading microfrontend script:', error);
      });
  }, []);

  return (
    <div>
      <recycling-app token={token} client-id={clientId} language={language}/>
    </div>
  );
};

export default RecyclingComponent;

Recuerda cambiar los valores de your-token por tu token y your-client-id por tu client id.

Usa tu nuevo componente:

import React from 'react';
import RecyclingComponent from './RecyclingComponent';

const App = () => {
  return (
    <div>
      <RecyclingComponent />
    </div>
  );
};

export default App;

Pon los estilos del microfront en tu css en el selector :root si tu quieres personalizarlo:

/* Colors */
--nasta-main: #4b858e; /* Estos son los calores hexadecimales por defecto */
--nasta-mainActive: #2c4e54;
--nasta-mainDisabled: #9db8bc;
--nasta-secondary: #a3d5cd;
--nasta-secondaryDark: #9ac6bf;
--nasta-secondaryMiddle: #c8e7e2;
--nasta-secondaryLight: #e8f6f3;
--nasta-secondarySuperDark: #7baaa3;

/* Font */
--nasta-font: 'Montserrat', sans-serif;

/* Sizing */
--nasta-microMaxWidth: 420px;
--nasta-microHeight: 500px;