docs(bot): 📝 merged

packages/docs/src/components/widgets/NavBar.tsx

@@ -10,7 +10,7 @@ export default component$(
     }: {
         options: {
             title: string
-            link: string
+            link?: string
             list: { link: string; name: string }[]
         }[]
     }) => {
@@ -25,19 +25,13 @@ export default component$(
 )
 
 export const UlCompoent = component$(
-    (porps: {
-        title: string
-        link: string
-        list: { link: string; name: string }[]
-    }) => {
+    (porps: { title: string; list: { link: string; name: string }[] }) => {
         return (
             <ul>
                 <li class="mt-2 lg:mt-2">
-                    <a href={porps.link}>
-                        <h5 class="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
-                            {porps.title}
-                        </h5>
-                    </a>
+                    <h5 class="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
+                        {porps.title}
+                    </h5>
                     <LiComponent list={porps.list} />
                 </li>
             </ul>

packages/docs/src/routes/docs/advanced/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Avanzado

packages/docs/src/routes/docs/buttons_lists/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Botones y listas

packages/docs/src/routes/docs/layout!.tsx

@@ -10,12 +10,13 @@ export default component$(() => {
         options: [
             {
                 title: 'Primeros pasos',
-                link: '',
                 list: [
                     { name: 'Vista rápida', link: '/docs' },
                     { name: 'Instalación', link: '/docs/install' },
                     { name: 'Configuración', link: '/docs/settings' },
                     { name: 'Migración', link: '/docs/migration' },
+                    { name: 'Botones y Listas', link: '/docs/buttons_lists' },
+                    { name: 'Avanzado', link: '/docs/advanced' },
                     { name: 'Contribuidores', link: '/docs/contribuiting' },
                 ],
             },

packages/docs/src/routes/docs/migration/index.mdx

@@ -64,7 +64,7 @@ En la **_versión (legacy)_** se implementas los flujos de esta manera, en dos a
 
 #### Versión 2 (0.2.X)
 
-En esta versión es mucho más sencillo abajo encontraras un ejemplo del mismo flujo anteriormente mostrado.
+En esta versión es mucho más sencillo, abajo encontrarás un ejemplo del mismo flujo anteriormente mostrado.
 
 ```js
 //app.js
@@ -76,8 +76,8 @@ const {
     addChild,
 } = require('@bot-whatsapp/bot')
 
-const BaileysProvider = require('@bot-whatsapp/provider/baileys')
-const MockAdapter = require('@bot-whatsapp/database/mock')
+const BaileysProvider = require('@bot-whatsapp/provider/baileys') //Provider
+const MockAdapter = require('@bot-whatsapp/database/mock') //Base de datos
 /**
  * Declarando flujos principales.
  */
@@ -112,7 +112,7 @@ const main = async () => {
         flowAdios,
         flowProductos,
         flowCatalogo,
-    ])
+    ]) //Se crean los flujos.
     const adapterProvider = createProvider(BaileysProvider)
     createBot({
         flow: adapterFlow,
@@ -122,6 +122,83 @@ const main = async () => {
 }
 ```
 
+#### Flujos hijos
+
+A continuación se muestra un ejemplo de flujos hijos, estos nos sirven para crear flujos que solo se disparan cuando el flujo anterior es el especificado, ejemplo:
+
+>          Menu Principal (Escoge zapatos o bolsos)
+>           - SubMenu 1 (Elegiste bolsos, ahora escoge piel o tela)
+>             - Submenu 1.1 (piel)
+>           - Submenu 2 (Elegiste zapatos, ahora escoge piel o tela)
+>             - Submenu 2.1 (piel)
+
+El `submenu 1` solo se va a disparar cuando el flujo anterior sea el `principal`, e igualmente el `submenu 1.1`, solo cuando el flujo anterior sea el `submenu 1`, ejemplo:
+
+```js
+/**
+ * Aqui declaramos los flujos hijos, los flujos se declaran de atras para adelante, es decir que si tienes un flujo de este tipo:
+ *
+ *          Menu Principal
+ *           - SubMenu 1
+ *             - Submenu 1.1
+ *           - Submenu 2
+ *             - Submenu 2.1
+ *
+ * Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
+ */
+const flowBolsos2 = addKeyword(['bolsos2', '2'])
+    .addAnswer('🤯 *MUCHOS* bolsos ...')
+    .addAnswer('y mas bolsos... bla bla')
+
+const flowZapatos2 = addKeyword(['zapatos2', '2'])
+    .addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
+    .addAnswer('y algunas otras cosas.')
+
+const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
+    .addAnswer('🤯 Veo que elegiste zapatos')
+    .addAnswer('Tengo muchos zapatos...bla bla')
+    .addAnswer(
+        ['Manda:', '*(2) Zapatos2*', 'para mas información'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowZapatos2)]
+    )
+
+const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
+    .addAnswer('🙌 Veo que elegiste bolsos')
+    .addAnswer('Tengo muchos bolsos...bla bla')
+    .addAnswer(
+        ['Manda:', '*(2) Bolsos2*', 'para mas información.'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowBolsos2)]
+    )
+/**
+ * Declarando flujo principal
+ */
+const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
+    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
+    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
+    .addAnswer(
+        ['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
+        { capture: true },
+        (ctx) => {
+            console.log('Aqui puedes ver más info del usuario...')
+            console.log('Puedes enviar un mail, hook, etc..')
+            console.log(ctx)
+        },
+        [...addChild(flowBolsos), ...addChild(flowZapatos)]
+    )
+```
+
 > Forma parte de este proyecto.
 
 -   [Discord](https://link.codigoencasa.com/DISCORD)