fix(PDYE-974): nuevo botón userway (#647)

Co-authored-by: Javiera Munita <javieramunita@MacBook-Air-de-Javiera.local>

Author: JaviMunita

src/atoms/Icons/Accessibility.tsx

@@ -3,14 +3,7 @@ import { Base, BaseProps } from './Base'
 export function Accessibility(props: BaseProps): JSX.Element {
   return (
     <Base {...props}>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        stroke="#60798E"
-        strokeWidth={0.3}
-      >
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
         <path
           fillRule="evenodd"
           clipRule="evenodd"

src/documentation/pages/Molecules/UserWay.tsx

@@ -1,22 +1,32 @@
-import { MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
+import { MyHeading, MyText, Code } from '@/documentation/components'
 import { UserWay } from '@/molecules/UserWay/UserWay'
 
 export const ViewUserWay = (): JSX.Element => {
   return (
     <>
       <MyHeading>UserWay</MyHeading>
       <MyText>
-        Trigger personalizado para el widget gratuito de accesibilidad UserWay. Carga el script del
-        widget, verifica que esté listo antes de poder ejecutarlo y maneja el click del botón.
+        Botón personalizado para el widget gratuito de accesibilidad UserWay. Contiene los estilos
+        base del elemento customizado y una función que detecta un botón localizado en el archivo
+        index.html implementado en el sitio.
       </MyText>
-      <Code text="import { UserWay } from '@eclass/ui-kit'" />
       <UserWay />
-      <MyTittle>Props y atributos</MyTittle>
+      <Code
+        text="import { UserWay } from '@eclass/ui-kit'
+      <UserWay/>"
+      />
       <MyText>
-        El componente puede recibir un parámetro de color opcional que cambia el color del menú del
-        widget. De no ser especificado, se usa el color predeterminado.
+        Al hacer click en este componente, se activa el botón html que actúa como trigger del
+        widget. Es importante que el botón al que apunta la función, tenga el id 'userWayTrigger'.
       </MyText>
-      <Code text="<UserWay color='#0189FF'/>" />
+      <Code
+        text="function triggerWidget() {
+const buttonB = document.getElementById('userWayTrigger')
+if (buttonB?.click) {
+buttonB.click() 
+}}
+      "
+      />
     </>
   )
 }

src/molecules/UserWay/UserWay.tsx

@@ -1,71 +1,13 @@
 import { Box } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
 
 import { Accessibility } from '@/atoms/Icons/Accessibility'
 import { vars } from '@theme'
 
-declare global {
-  interface Window {
-    UserWay: {
-      widgetOpen: () => void
-    }
-  }
-}
-
-interface IUserWay {
-  color?: string
-}
-
-const waitForUserWay = async (): Promise<void> => {
-  return await new Promise((resolve, reject) => {
-    const checkUserWay = (): void => {
-      if (window.UserWay) {
-        resolve() // Resuelve cuando UserWay está disponible
-      } else {
-        requestAnimationFrame(checkUserWay) // Sigue esperando
-      }
-    }
-
-    try {
-      checkUserWay() // Inicia la verificación
-    } catch (error) {
-      reject(new Error('UserWay script failed to load'))
-    }
-  })
-}
-
-export function UserWay({ color = '#0189FF' }: IUserWay): JSX.Element {
-  const [isUserWayReady, setIsUserWayReady] = useState(false)
-
-  useEffect(() => {
-    // Cargar el script de UserWay
-    if (!document.getElementById('userway-script')) {
-      const script = document.createElement('script')
-      script.id = 'userway-script'
-      script.src = 'https://cdn.userway.org/widget.js'
-      script.async = true
-      script.setAttribute('data-account', '06mvMZzmO4')
-      script.setAttribute('data-color', color)
-      script.setAttribute('data-trigger', 'customTrigger')
-      document.body.appendChild(script)
-    }
-
-    // Esperar a que el script esté listo
-    waitForUserWay()
-      .then(() => {
-        setIsUserWayReady(true)
-        return undefined
-      })
-      .catch((error) => {
-        console.error('Failed to load UserWay:', error)
-      })
-  }, [color])
-
-  const handleButtonClick = (): void => {
-    if (isUserWayReady && window?.UserWay?.widgetOpen) {
-      window.UserWay.widgetOpen() // Abrir el menú
-    } else {
-      console.error('UserWay script not loaded yet.')
+export function UserWay(): JSX.Element {
+  const triggerWidget = (): void => {
+    const buttonB = document.getElementById('userWayTrigger')
+    if (buttonB?.click) {
+      buttonB.click() // Hace clic en el botón del archivo index.html
     }
   }
 
@@ -78,13 +20,14 @@ export function UserWay({ color = '#0189FF' }: IUserWay): JSX.Element {
       border="1px solid transparent"
       display="flex"
       height="30px"
-      id="customTrigger"
+      id="UserWayButton"
       justifyContent="center"
-      onClick={handleButtonClick}
+      padding="0 8px"
       width="30px"
       _hover={{
         background: 'rgba(96, 121, 142, 0.8)',
       }}
+      onClick={triggerWidget}
     >
       <Accessibility />
     </Box>