import Navigation from '../../../components/widgets/Navigation'

# Flow

Los flujos hace referencia al hecho de construir un flujo de conversion. Esto es un flow podemos observar que estan presente dos metodos importantes **addKeyword** y el **addAnswer**.

Tan sencillo como decir **palabra/s clave** y **mensaje a responder**

Ambos metodos **[addKeyword](https://github.com/codigoencasa/bot-whatsapp/blob/dev/packages/bot/io/methods/addKeyword.js)** y el **[addAnswer](https://github.com/codigoencasa/bot-whatsapp/blob/dev/packages/bot/io/methods/addAnswer.js)** tienen una serie opciones disponibles

```js
const {
    createBot,
    createProvider,
    createFlow,
    addKeyword,
} = require('@bot-whatsapp/bot')

const flowPrincipal = addKeyword(['hola', 'alo'])
    .addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
    .addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
```

---

## blackList

Éste argumento se utiliza para **evitar que el bot se active** cuando los números de la lista activen el bot.
Es importante que el número **vaya acompañado de su prefijo**, en el caso de España "34".

```js
createBot({
        flow: adapterFlow,
        provider: adapterProvider,
        database: adapterDB,
    },{
        blackList:['34XXXXXXXXX','34XXXXXXXXX','34XXXXXXXXX','34XXXXXXXXX']
    })
```

---

## addKeyword()

Esta funcion se utliza para iniciar un flujo de conversion. <br /> Recibe un `string` o un `array`
de string `['hola','buenas']`.

**Opciones**

-   sensitive: Sensible a mayusculas y minusculas por defecto `false`

```js
const { addKeyword } = require('@bot-whatsapp/bot')

const flowString = addKeyword('hola')

const flowArray = addKeyword(['hola', 'alo'])

const flowSensitive = addKeyword(['hola', 'alo'], {
    sensitive: true,
})
```

---

## addAnswer()

Esta funcion se utliza para responder un mensaje despues del `addKeyword()`

**Opciones**

-   delay: 0 (milisegundos)
-   media: url de imagen
-   buttons: array `[{body:'Boton1'}, {body:'Boton2'}, {body:'Boton3'}]`
-   capture: true (para esperar respuesta)
-   child: Objecto tipo flujo o arra de flujos hijos

```js
const { addKeyword } = require('@bot-whatsapp/bot')

const flowString = addKeyword('hola').addAnswer(
    'Este mensaje se enviara 1 segundo despues',
    {
        delay: 1000,
    }
)

const flowString = addKeyword('hola').addAnswer(
    'Este mensaje envia una imagen',
    {
        media: 'https://i.imgur.com/0HpzsEm.png',
    }
)

const flowString = addKeyword('hola').addAnswer(
    'Este mensaje envia tres botones',
    {
        buttons: [
            { body: 'Boton 1' },
            { body: 'Boton 2' },
            { body: 'Boton 3' },
        ],
    }
)

const flowString = addKeyword('hola').addAnswer(
    'Este mensaje espera una respueta del usuario',
    {
        capture: true,
    }
)
```

---

## ctx

Este argumento se utiliza para obtener el contexto de la conversación

```js
const { addKeyword } = require('@bot-whatsapp/bot')

const flowString = addKeyword('hola').addAnswer(
    'Indica cual es tu email',
    null,
    (ctx) => {
        console.log('👉 Informacion del contexto: ', ctx)
    }
)
```

---

## fallBack()

Esta funcion se utliza para volver a enviar el ultimo mensaje abajo un ejemplo.
En el ejemplo de abajo esperamos que el usuario ingrese un mensaje que contenga `@` sino contiene
se repetira el mensaje `Indica cual es tu email`

```js
const { addKeyword } = require('@bot-whatsapp/bot')

const flowString = addKeyword('hola').addAnswer(
    'Indica cual es tu email',
    null,
    (ctx, { fallBack }) => {
        if (!ctx.body.includes('@')) return fallBack()
    }
)
```

---

## flowDynamic()

Esta funcion se utliza para devolver mensajes dinamicos que pueden venir de una API o Base de datos.
La funcion recibe un array que debe contener la siguiente estrucutura:

`[{body:'Mensaje}, {body:'Mensaje2}]`

```js
const { addKeyword } = require('@bot-whatsapp/bot')

const flowString = addKeyword('hola')
    .addAnswer('Indica cual es tu email', null, async (ctx, {flowDynamic}) => {
        const mensajesDB = () => {
            const categories = db.find(...)
            const mapDatos = categories.map((c) => ({body:c.name}))
            return mapDatos
        }
        await flowDynamic(mensajesDB())
    })


```

---
## endFlow()

Esta funcion se utliza para finalizar un flujo con dos o más addAnswer. Un ejemplo de uso sería registrar 3 datos de un usuario en 3 preguntas distinas y 
que el usuario pueda finalizar por él mismo el flujo.
Como podrás comprobar en el ejemplo siguiente, se puede vincular flowDynamic y todas sus funciones; como por ejemplo botones.



```js
const flowFormulario = addKeyword(['Hola'])

.addAnswer(['Hola!','Escriba su *Nombre* para generar su solicitud'],
{capture: true,buttons:[{body:'❌ Cancelar solicitud'}]},
async (ctx,{flowDynamic, endFlow})=>{
    if(ctx.body == '❌ Cancelar solicitud'){
        await flowDynamic([{body: "❌ *Su solicitud de cita ha sido cancelada* ❌", buttons:[{body:'⬅️ Volver al Inicio'}]}])
        return endFlow()
     }
    })
    .addAnswer(['También necesito tus dos apellidos'],
    {capture: true,buttons:[{body:'❌ Cancelar solicitud'}]},
    async (ctx,{flowDynamic, endFlow})=>{
        if(ctx.body == '❌ Cancelar solicitud'){
            await flowDynamic([{body: "❌ *Su solicitud de cita ha sido cancelada* ❌", buttons:[{body:'⬅️ Volver al Inicio'}]}])
            return endFlow()
         }
        })
        .addAnswer(['Dejeme su número de teléfono y le llamaré lo antes posible.'],
{capture: true,buttons:[{body:'❌ Cancelar solicitud'}]},
async (ctx,{flowDynamic, endFlow})=>{
    if(ctx.body == '❌ Cancelar solicitud'){
        await flowDynamic([{body: "❌ *Su solicitud de cita ha sido cancelada* ❌", buttons:[{body:'⬅️ Volver al Inicio'}]}])
        return endFlow()
     }
    })



```

---





# QRPortalWeb

Argumento para asignar nombre y puerto al BOT

```js
const BOTNAME = 'bot';
QRPortalWeb({name:BOTNAME, port:3005 });

```

---



<Navigation
    pages={[
        { name: 'Conceptos', link: '/docs/essential' },
        { name: 'Proveedores', link: '/docs/providers' },
    ]}
/>
